MyBB Community Forums

MyBB Community Forums > Extensions > Themes > Theme Support > Add rotating header
Full Version: Add rotating header
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

Kioshi

2014-01-19, 06:29 PM
How can I add this rotating header code?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Rotating Background Image</title>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.cycle.lite.min.js" type="text/javascript"></script>
<script type="text/javascript">
 
$(document).ready(function(){
 
    $('#bg_containers').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
 
});
</script>
 
<style type="text/css">
 
body {padding:0; margin:0;}
#content {position:relative;width:800px; height:600px; margin:0; z-index:999; padding:270px 0 0;}
#text_box {background:#000; color:#ffffff; padding:10px; margin:0 auto; width:600px;}
 
/* classes to work with cycle plugin for BG images */
#bg_containers {width:800px; margin:0;}
#bg_containers div {width:800px; height:600px; margin:0 auto;}
#bg_containers .bg1 {background:url(1.jpg) no-repeat;}
#bg_containers .bg2 {background:url(2.jpg) no-repeat;}
#bg_containers .bg3 {background:url(3.jpg) no-repeat;}
</style>
 
</head> 
 
<body>
 
<div id="bg_containers">
	<div class="bg1"></div>
	<div class="bg2"></div>
	<div class="bg3"></div>
</div>
 
<div id="content"> 
 
	<div id="text_box">
    	        The background image behind this can be any size, so although it may not cover your entire screen in this case, you can make it cover as much or as little of the screen as you like. Just adjust the size of the #bg_containers, and of course, you can also have the background tile if you like as well.
        </div>
 
</div>
 
</body>
</html>

Here's whats in my Global.css:

body {
	background: url(images/Deviant/pagebg.png);
	color: #000;
	font-family: Verdana, Arial, Sans-Serif;
	text-align: center; /* IE 5 fix */
	line-height: 1.4;
	font-size: 11px;
}

a:link {
	color: white;
	text-decoration: none;
}

a:visited {
	color: white;
	text-decoration: none;
}

a:hover, a:active {
	color: #000;
	text-decoration: underline;
}

#container {
	width: 88%;
	background: transparent;
	border: 1px solid transparent;
	color: white;
	margin: auto auto;
	padding: 5px;
	text-align: left; /* IE 5 fix */
}

#content {
	/* FIX: Make internet explorer wrap correctly */
	width: auto !important;

}

.menu ul {
	color: #000000;
	font-weight: bold;
	text-align: right;
	padding: 4px;
}

.menu ul a:link {
	color: #000000;
	text-decoration: none;
}

.menu ul a:visited {
	color: #000000;
	text-decoration: none;
}

.menu ul a:hover, .menu ul a:active {
	color: #4874a3;
	text-decoration: none;
}

#panel {
	color: white;
	font-size: 11px;
       &nbsp;position: absolute;
        top: -1px;
        right: 0px;
        width: auto;
}

#panel .remember_me input {
	vertical-align: middle;
	margin-top: -1px;
}

table {
	color: white;
	font-family: Arial, Sans-Serif;
	font-size: 11px;
}

.tborder {
	background: transparent;
	width: 100%;
	margin: auto auto;
	border: 1px solid black;
        padding: 3px;
        border-radius: 5px;
        box-shadow: 0px 2px 2px black;
}

.thead {
    background: linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -o-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -moz-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -webkit-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -ms-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    color: black;
    padding: 10px;
    -webkit-box-shadow: inset rgba(255,255,255,0.2) 0px 1px 0px;
    -moz-box-shadow: inset rgba(255,255,255,0.2) 0px 1px 0px;
    box-shadow: inset rgba(255,255,255,0.2) 0px 1px 0px;
    font-size: 12px;
    text-shadow: 1px 1px 1px #555;
    font-family: verdana;
    font-weight: bold;
}

.thead a:link {
	color: #ffffff;
	text-decoration: none;
}

.thead a:visited {
	color: #ffffff;
	text-decoration: none;
}

.thead a:hover, .thead a:active {
	color: #ffffff;
	text-decoration: underline;
}

.tcat {
	background:#181818;
	color: white;
	border-bottom: 1px solid #111111;
	border-top: 1px solid #131313;
        font-family: arial;
        text-shadow: 0px 1px 1px #161616;
        padding: 5px;
}

.tcat a:link {
	color: white;
}

.tcat a:visited {
	color: white;
}

.tcat a:hover, .tcat a:active {
	color: white;
}

.trow1 {
background: linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -o-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -moz-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -webkit-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -ms-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
	color: white;
	border-top: 1px solid #292929;
        border-bottom: 1px solid #161616;
	padding: 12px 5px;
      
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}

.trow2 {
background: linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -o-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -moz-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -webkit-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -ms-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
        -webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
	transition: 0.4s;
	color: white;
	border-top: 1px solid #292929;
        border-bottom: 1px solid #161616;
	padding: 12px 5px;
}

.trow_shaded {
	background: #101010;
}

.trow_selected td {
	background: #101010;
}

.trow_sep {
	background: #101010;
	color: white;
	font-size: 12px;
	font-weight: bold;
}

.tfoot {
    background: linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -o-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -moz-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -webkit-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -ms-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
        color: #ffffff;
        text-shadow: 0 1px 1px #161616;
}

.tfoot a:link {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:visited {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
	color: #ffffff;
	text-decoration: underline;
}

.bottommenu a:visited {
    color: white;
}
.bottommenu a:link {
    color: white;
}
.colorfotter {
    float: right;
    margin-top: -7px;
}
.bottommenu {
background: linear-gradient(bottom, rgb(0,66,189) 16%, rgb(0,66,189) 100%);
background: -o-linear-gradient(bottom, rgb(0,66,189) 16%, rgb(0,66,189) 100%);
background: -moz-linear-gradient(bottom, rgb(0,66,189) 16%, rgb(0,66,189) 100%);
background: -webkit-linear-gradient(bottom, rgb(0,66,189) 16%, rgb(0,66,189) 100%);
background: -ms-linear-gradient(bottom, rgb(0,66,189) 16%, rgb(0,66,189) 100%); 
    border: 1px solid #2e6fe8;
    color: white;
    padding: 10px;
    position: relative;
    left: 0px;
    width: 98.4%;
    font-size: 11px;
    border-radius: 0 0 5px 5px;
    text-shadow: 0 1px 1px #161616;
    font-family: sans-serif;
}

.navigation {
	color: #000000;
	font-size: 13px;
	font-weight: bold;
}

.navigation a:link {
	text-decoration: none;
}

.navigation a:visited {
	text-decoration: none;
}

.navigation a:hover, .navigation a:active {
	text-decoration: none;
}

.navigation .active {
	color: #000000;
	font-size: 13px;
	font-weight: bold;
}

.smalltext {
	font-size: 11px;
}

.largetext {
	font-size: 16px;
	font-weight: bold;
}

input.textbox {
	background: #101010;
	color: white;
	border: 1px solid #404040;
	padding: 4px;
}

textarea {
	background: #404040;
	color: white;
	border: 1px solid #484848;
	padding: 2px;
	font-family: Sans-Serif;
	line-height: 1.4;
	font-size: 12px;
        border-radius: 4px;
}

select {
	background: #404040;
	border: 1px solid #484848;
        color: white;
        padding: 4px;
        font-size: 12px;
        border-radius: 2px;
}

.editor {
	background: #404040;
	border: 1px solid #484848;
}

.editor_control_bar {
	background: #101010;
	border: 1px solid #404040;
}

.autocomplete {
	background: #101010;
	border: 1px solid #404040;
	color: white;
}

.autocomplete_selected {
	background: #adcee7;
	color: #000;
}

.popup_menu {
	background: #ccc;
	border: 1px solid #000;
}

.popup_menu .popup_item {
	background: #fff;
	color: #000;
}

.popup_menu .popup_item:hover {
	background: #C7DBEE;
	color: #000;
}

.trow_reputation_positive {
	background: #ccffcc;
}

.trow_reputation_negative {
	background: #ffcccc;
}

.reputation_positive {
	color: green;
}

.reputation_neutral {
	color: #444;
}

.reputation_negative {
	color: red;
}

.invalid_field {
	border: 1px solid #f30;
	color: #f30;
}

.valid_field {
	border: 1px solid #0c0;
}

.validation_error {
	background: url(images/Deviant/invalid.gif) no-repeat center left;
	color: #f30;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_success {
	background: url(images/Deviant/valid.gif) no-repeat center left;
	color: #00b200;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_loading {
	background: url(images/spinner.gif) no-repeat center left;
	color: #555;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

/* Additional CSS (Master) */
img {
	border: none;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
	float: none;
	width: 1%;
}

.hiddenrow {
	display: none;
}

.selectall {
	background-color: #101010;
	font-weight: bold;
	text-align: center;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.menu ul {
	list-style: none;
	margin: 0;
}

.menu li {
	display: inline;
	padding-left: 5px;
}

.menu img {
	padding-right: 5px;
	vertical-align: top;
}

#panel .links {
	margin: 0;
	float: right;
}

.expcolimage {
	float: right;
	width: auto;
	vertical-align: middle;
	margin-top: 0px;
}

img.attachment {
	border: 1px solid #E9E5D7;
	padding: 2px;
}

hr {
	background-color: #000000;
	color: #000000;
	height: 1px;
	border: 0px;
}

#copyright {
	font: 11px Verdana, Arial, Sans-Serif;
	margin: 0;
	padding: 10px 0 0 0;
}

#debug {
	float: right;
	text-align: right;
	margin-top: 0;
}

blockquote {
	border: 1px solid #303030;
	margin: 0;
	background: #101010;
	padding: 6px 11px;
}

blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #303030;
	font-style: normal;
	display: block;
	margin: 4px 0;
}

blockquote cite span {
	float: right;
	font-weight: normal;
}

blockquote cite span.highlight {
	float: none;
	font-weight: bold;
	padding-bottom: 0;
}

.codeblock {
	background: #fff;
	border: 1px solid #ccc;
	padding: 4px;
}

.codeblock .title {
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	margin: 4px 0;
}

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

.subforumicon {
	border: 0;
	vertical-align: middle;
}

.separator {
	margin: 5px;
	padding: 0;
	height: 0px;
	font-size: 1px;
	list-style-type: none;
}

form {
	margin: 0;
	padding: 0;
}

.popup_menu .popup_item_container {
	margin: 1px;
	text-align: left;
}

.popup_menu .popup_item {
	display: block;
	padding: 3px;
	text-decoration: none;
	white-space: nowrap;
}

.popup_menu a.popup_item:hover {
	text-decoration: none;
}

.autocomplete {
	text-align: left;
}

.subject_new {
	font-weight: bold;
}

.highlight {
	background: #FFFFCC;
	padding-top: 3px;
	padding-bottom: 3px;
}

.pm_alert {
	background: #101010;
	border: 1px solid #303030;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.red_alert {
	background: #101010;
	border: 1px solid #303030;
	color: white;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.high_warning {
	color: white;
        font-weight: bold;
}

.moderate_warning {
        color: white;
        font-weight: bold;
}

.low_warning {
	color: white;
        font-weight: bold;
}

div.error {
	padding: 5px 10px;
	border-top: 2px solid #303030;
	border-bottom: 2px solid #303030;
	background: #101010;
	font-size: 12px;
}

div.error p {
	margin: 0;
	color: white;
	font-weight: normal;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: white;
	background: url(images/error.gif) no-repeat 0;
}

div.error ul {
	margin-left: 24px;
}

.online {
	color: white;
        background: #FAA732;
        padding: 2px 6px;
        border-radius: 4px;
}

.offline {
	color: white;
        background: #DA4F49;
        padding: 2px 6px;
        border-radius: 4px;
}

.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
	padding-top: 0;
}
.pagination .pages {
	font-weight: bold;
}

.pagination .pagination_current, .pagination a {
	padding: 2px 6px;
	margin-bottom: 3px;
}

.pagination a {
	border: 1px solid #81A2C4;
}

.pagination .pagination_current {
	background: #F5F5F5;
	border: 1px solid #81A2C4;
	font-weight: bold;
	color: #000;
}

.pagination a:hover {
	background: #F5F5F5;
	text-decoration: none;
}

.thread_legend, .thread_legend dd {
	margin: 0;
	padding: 0;
}

.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}

.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
	margin: 0;
	padding: 0;
}

.forum_legend dd {
	float: left;
	margin-right: 10px;
}

.forum_legend dt {
	margin-right: 10px;
	float: left;
}

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.post_body {
	padding: 5px;
}

.post_content {
	padding: 5px 10px;
}

.quick_jump {
	background: url(images/jump.gif) no-repeat 0;
	width: 13px;
	height: 13px;
	padding-left: 13px; /* amount of padding needed for image to fully show */
	vertical-align: middle;
	border: none;
}

.repbox {
	font-size:16px;
	font-weight: bold;
	padding:5px 7px 5px 7px;
}

._neutral {
	background-color:#FAFAFA;
	color: #999999;
	border:1px solid #CCCCCC;
}

._minus {
	background-color: #FDD2D1;
	color: #CB0200;
	border:1px solid #980201;
}

._plus {
	background-color:#E8FCDC;
	color: #008800;
	border:1px solid #008800;
}

.pagination_breadcrumb {
	background-color: #f5f5f5;
	border: 1px solid #fff;
	outline: 1px solid #ccc;
	padding: 5px;
	margin-top: 5px;
	font-weight: normal;
	white-space: nowrap;
}

.pagination_breadcrumb_link {
	vertical-align: middle;
	cursor: pointer;
}
#dark-litle-menu {
    background: linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -o-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -moz-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -webkit-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -ms-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    height: 40px;
    margin-top: -8px;
    margin-left: -8px;
    width: 101.2%;
    border-bottom: 3px solid #2e6fe8;
}

#dark-litle-menu > ul {
    height: 45px;
    list-style: none outside none;
    margin: 0 auto;
    padding: 0;
    text-align: left;
}
#dark-litle-menu ul > li {
    float: left;
    font-family: Arial,Helvetica;
    position: relative;
}
#dark-litle-menu a {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    line-height: 1.2;
    display: block;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    padding: 15px 17px 18px;
    text-decoration: none;
    color: white;
}

#m-des {
background: linear-gradient(bottom, rgb(81,14,14) 16%, rgb(126,22,22) 100%);
background: -o-linear-gradient(bottom, rgb(81,14,14) 16%, rgb(126,22,22) 100%);
background: -moz-linear-gradient(bottom, rgb(81,14,14) 16%, rgb(126,22,22) 100%);
background: -webkit-linear-gradient(bottom, rgb(81,14,14) 16%, rgb(126,22,22) 100%);
background: -ms-linear-gradient(bottom, rgb(81,14,14) 16%, rgb(126,22,22) 100%); 
    border-radius: 0 0 4px 4px;
    height: 0;
    left: 0;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 45px;
    width: 160px;
    z-index: 50;
    transition: all 710ms steps() 0s;
    -webkit-transition: all 710ms steps() 0s; /* Safari */
-moz-transition:all 710ms steps() 0s;
-ms-transition:all 710ms steps() 0s;
-o-transition:all 710ms steps() 0s;
}
#dark-litle-menu li:hover #m-des {
    padding: 15px;
    height: auto;
    box-shadow: 0 12px 0 0 rgba(255, 255, 255, 0.02) inset, 0 7px 7px -6px rgba(0, 0, 0, 0.5) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
}

#m-des li > a {
    background: none repeat scroll 0 0 transparent !important;
    border-bottom: 1px solid #2C2B2B;
    border-left: medium none !important;
    border-right: medium none !important;
    border-top: 1px solid #3E3E3E;
    color: white;
    padding: 8px 0 !important;
    text-shadow: 0 1px 1px #111;
}

#dark-litle-menu li:hover a {background: rgba(255, 255, 255, 0.05);}
#dark-litle-menu li:first-child a {border-left: 0 none;}
#dark-litle-menu li:last-child a {border-right: 0 none;}
#m-des > li {float: none !important;}
#m-des li &gt; a:hover {color: #EEE;}
#m-des li:first-child a {border-top: medium none !important;}
#m-des li:last-child a {border-bottom: medium none !important;}
.espacer-black {padding-top: 25px;}

#dark-litle-menu span {
    background: none repeat scroll 0 0 #2e6fe8;
    border: 1px solid #262626;
    border-radius: 3px;
    bottom: 30px;
    color: #FFF;
    display: block;
    font-size: 11px;
    font-weight: normal;
    padding: 3px 8px;
    position: absolute;
    right: -8px;
    text-shadow: 0 1px 0 #333;
    z-index: 50;
    opacity: 0.78;
}

.logo:hover {
    margin-left: 22px;
    opacity: 1;
}
.logo {
    position: relative;
    top: 25px;
    text-align: left;
    margin-left: 17px;
    opacity: 0.70;
}
.redesociales a:link:hover {
    opacity: 1;
}
.redesociales a:link {
    opacity: 0.78;
}
.redesociales {
    position: absolute;
    z-index: 99999;
    top: -6px;
}
#header2 {
    background: url(images/Deviant/headerbg.jpg) repeat scroll center -184px transparent;
    height: 180px;
    margin-left: -8px;
    width: 101.2%;
    border-bottom: 3px solid #333333;
    border-top: 1px solid #191919;

}
#headerbg {
    background: linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -o-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -moz-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -webkit-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -ms-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    height: 40px;
    margin-top: -8px;
    margin-left: -8px;
    width: 101.2%;
    border-bottom: 3px solid #2e6fe8;
}
.privado {
    opacity: 0.69;
    position: relative;
    right: 30px;
}
.mover {
    position: relative;
    top: -7px;
    font-weight: bold;
}
#darks-litle-menu {
    background: transparent; 
    border-top: 1px solid #2e6fe8;
    position: relative;
    width: auto;
    z-index: 900;
    margin-left: -8px;
    border-bottom: 1px solid #2e6fe8;
}

#darks-litle-menu > ul {
    height: 40px;
    list-style: none outside none;
    margin: 0 auto;
    padding: 0;
    text-align: left;
}
#darks-litle-menu ul > li {
    float: left;
    font-family: Arial,Helvetica;
    position: relative;
}
#darks-litle-menu a {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    line-height: 1.2;
    display: block;
    font-family: Arial;
    font-size: 10px;
    font-weight: bold;
    padding: 15px 20px 15px;
    text-decoration: none;
    color: white;
}

#ms-des {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.30); 
    border-radius: 0 0 4px 4px;
    height: 0;
    left: -30px;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 43px;
    width: 160px;
    z-index: 50;
    border-right: 1px solid #131313;
    border-left: 1px solid #131313;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#darks-litle-menu li:hover #ms-des {
    padding: 15px;
    height: auto;
    box-shadow: 0 12px 0 0 rgba(255, 255, 255, 0.02) inset, 0 7px 7px -6px rgba(0, 0, 0, 0.5) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}

#ms-des li > a {
    background: none repeat scroll 0 0 transparent !important;
    border-bottom: 1px solid white;
    border-left: medium none !important;
    border-right: medium none !important;
    border-top: 1px solid #3E3E3E;
    color: white;
    padding: 8px 0 !important;
    text-shadow: 0 1px 1px #111;
}

#darks-litle-menu li:hover a {background: rgba(255, 255, 255, 0.05);}
#darks-litle-menu li:first-child a {border-left: 0 none;}
#darks-litle-menu li:last-child a {border-right: 0 none;}
#ms-des > li {float: none !important;}
#ms-des li > a:hover {color: #EEE;}
#ms-des li:first-child a {border-top: medium none !important;}
#ms-des li:last-child a {border-bottom: medium none !important;}

#darks-litle-menu span {
    background: url(images/Deviant/pm.png) repeat center transparent;
    border: 1px solid #262626;
    border-radius: 3px;
    bottom: 19px;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: bold;
    padding: 1px 4px;
    position: absolute;
    right: 10px;
    text-shadow: 0 1px 0 #333333;
    z-index: 50;
    font-size: 11px;
    text-transform: uppercase;
    text-align: center;
}
.statround {
    background: linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -o-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -moz-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -webkit-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -ms-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    color: #ffffff;
    padding: 4px 10px;
    margin-left: 20px;
    border-radius: 4px;
    font-weight: bold;
    font-family: Sans-Serif;
}

.statround a:link,
.statround a:visited {
    color: #ffffff;
}

.statround a:hover,
.statround a:active {
    color: white;
}
.registrate3 {
background: linear-gradient(bottom, rgb(213,234,164) 3%, rgb(205,235,139) 100%);
background: -o-linear-gradient(bottom, rgb(213,234,164) 3%, rgb(205,235,139) 100%);
background: -moz-linear-gradient(bottom, rgb(213,234,164) 3%, rgb(205,235,139) 100%);
background: -webkit-linear-gradient(bottom, rgb(213,234,164) 3%, rgb(205,235,139) 100%);
background: -ms-linear-gradient(bottom, rgb(213,234,164) 3%, rgb(205,235,139) 100%);
    border: 0 none;
    border-radius: 3px 3px 3px 3px;
    color: #557A26;
    font-family: tahoma;
    font-size: 11px;
    padding: 15px 10px;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.24);
}

.estad {
    font-size: 10px;
}
.mover3 {
    margin-top: -10px;
    position: relative;
    top: 4px;
}
.moverinfo {
    margin-top: 3px;
    position: relative;
    top: 3px;
}
.avatar3 {
    float: left;
    left: -8px;
    margin-left: 0px;
    position: relative;
    top: -9px;
    border-radius: 3px;
}

.thead2 {
    background: linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -o-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -moz-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -webkit-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    background: -ms-linear-gradient(bottom, rgb(0,106,209) 16%, rgb(30,144,255) 100%);
    padding: 8px;
    border: 1px solid #252525;
    border-radius: 3px;
    font-size: 11px;
    color: white;
}
.trow3 {
background: linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -o-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -moz-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -webkit-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -ms-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
    border: 1px solid #252525;
    color: white;
    padding: 6px;
    font-size: 10px;
}

.postbit4 {
    background: #333333;
    padding: 5px;
    border: 1px solid #353535;
}
.slidingDiv {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
    border: 1px solid #282828;
    border-radius: 0 0 5px 5px;
    color: white;
    font-size: 11px;
    font-weight: bold;
    height: auto;
    margin-top: 8px;
    padding: 17px 20px 8px 18px;
    position: relative;
    right: 25px;
    z-index: 99999;
}
.show_hide {
    display: none;
}
.textlogin {
    background-color: white;
    border-color: #cccccc;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    color: #868686;
    font-size: 11px;
    height: 12px;
    padding: 8px 8px 8px 22px;
    text-shadow: 0 1px 0 #F8F8F8;
    width: 80%;
}
.Login1 {
    margin-right: 8px;
}

#search {
    float: right;
    margin-top: 10px;
    margin-right: 25px;
}
.boton5 {
    background: url(images/Deviant/search_icon.png) no-repeat scroll 50% center #2e6fe8;
    border: 1px solid #043249;
    border-radius: 0 3px 3px 0;
    bottom: 0;
    display: block;
    height: 31px;
    padding: 0;
    position: absolute;
    right: 23px;
    text-indent: -3000em;
    top: 52px;
    width: 54px;
}
.textosearch {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 3px 4px 4px 3px;
    color: #0d80d9;
    display: block;
    font-family: sans-serif;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
    min-width: 200px;
    padding: 0 3px 0 4px;
    position: relative;
}
.textosearch:focus {
    padding: 0 20px 0 0px;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.boton6 {
    background: url(images/Deviant/search_icon.png) no-repeat scroll 50% center #2e6fe8;
    border: 1px solid #043249;
    border-radius: 0 3px 3px 0;
    bottom: 0;
    display: inline-block;
    height: 29px;
    padding: 0;
    right: -1px;
    text-indent: -3000em;
    width: 33px;
    position: absolute;
}
.float_1 {
    position: relative;
}

.boton2 {
    background: #DA4F49;
    background-image: linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -o-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -moz-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -webkit-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -ms-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #BD362F),color-stop(1, #EE5F5B));   
    border: 1px solid #868686;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    color: white;
    cursor: pointer;
    display: inline-block;
    font: 12px/30px arial;
    height: 30px;
    min-width: 50px;
    padding: 0 10px;
    text-align: center;
    width: 105%;
}
.boton2:hover {
    background: none repeat scroll 0 0 #BD362F;
    opacity: 0.9;
}
.postbit-avatar {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #303030;
border: 1px solid #353535;
padding: 4px;
}

.postbit-avatar:hover {
background: #2e6fe8;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 150, 250, 1);;
-moz-box-shadow: 0px 0px 6px 0px rgba(0, 150, 250, 1);;
box-shadow: 0px 0px 6px 0px rgba(0, 150, 250, 1);;
} 
.postbitavatar2 {
    float: left;
    background: #353535;
    padding: 6px;
    border: 1px solid #484848;
    margin-top: 6px;
    box-shadow: 1px 2px 3px black;
-webkit-box-shadow: 1px 2px 3px black;
-moz-box-shadow: 1px 2px 3px black;
}
.nw-btns {
    border-image: none;
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-block;
    font-size: 13px;
    font-family: Arial;
    line-height: 20px;
    margin: 0;
    padding: 3px 12px;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-style: solid;
    border-width: 1px;
    color: #FFF !important;
    text-decoration: none !important;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.nw-btns:hover {
    text-decoration: none !important;
}
.nw-btns:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}
.nw-btns.orange {
    background: #FAA732;
    background-image: linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -o-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -moz-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -webkit-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -ms-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F89306),color-stop(1, #FBB450));
}
.nw-btns.orange:hover {background:#F89406;}
.nw-btns.red {
    background: #DA4F49;
    background-image: linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -o-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -moz-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -webkit-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -ms-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #BD362F),color-stop(1, #EE5F5B));
}
.nw-btns.red:hover {background:#BD362F;}
.nw-btns.green {
    background: #5BB75B;
    background-image: linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -o-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -moz-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -webkit-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -ms-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #51A351),color-stop(1, #62C462));
}
.nw-btns.green:hover {background:#51A351;}
.nw-btns.white {
    background: #0042BD;
    border-color: #151515;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75) !important;
    color: #333 !important;
}
.nw-btns.white:hover {background:#2e6fe8;}
.nw-btn {
    border-image: none;
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-block;
    font-size: 11px;
    font-family: Arial;
    line-height: 16px;
    margin: 0;
    padding: 4px 12px;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-style: solid;
    border-width: 1px;
    color: #FFF !important;
    text-decoration: none !important;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    margin-top: 7px;
}
.nw-btn:hover {
    text-decoration: none !important;
}
.nw-btn:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nw-btn.red {
    background: #DA4F49;
    background-image: linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -o-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -moz-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -webkit-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -ms-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #BD362F),color-stop(1, #EE5F5B));
}
.nw-btn.red:hover {background:#BD362F;}
.nw-btn.blue {
    background: #49AFCD;
    background-image: linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -o-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -moz-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -webkit-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -ms-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #2F95B4),color-stop(1, #5BC0DE));
}
.nw-btn.blue:hover {background:#2F96B4;}

div#tabs ul.profile-list {
	margin: 0 0 10px 0;
	padding: 0;    
	overflow: hidden; 
	border-left: 1px solid #404040;
}
div#tabs ul.profile-list li {
	float: left;
	border: solid #404040;
	border-width: 1px 1px 1px 0; 
	list-style: none;   
}
div#tabs ul.profile-list li a {
	padding: 8px 15px;
	display: block; 
	font-weight: bold;
	color: white; 
background: linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -o-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -moz-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -webkit-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -ms-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
	text-decoration: none;   
}
div#tabs ul.profile-list li a:hover {
	background: #101010;
}
div#tabs ul.profile-list li.active a { 
	color: white;
	border: 0;
}
#userprofile-maininfo
{
	background:#252525;
	border:1px solid #404040;
        border-radius: 0 0 5px 5px;
        -webkit-box-shadow: 0px 1px 3px black;
        -moz-box-shadow: 0px 1px 3px black;
        box-shadow: 0px 1px 3px black;
}

#userprofile-maininfo h2 span
{
	color:#777!important;
	font-family:tahoma;
	font-size:30px;
}

#userprofile-maininfo h2
{
	color:#777!important;
	font-family:tahoma;
	font-size:30px;
        line-height: 0px;
}

.userprofile_online
{
	margin-top:1px;
}
.userprofile_online img {
    margin-top: 2px;
}

.userprofile_avatar img
{
	-moz-box-shadow:1px 3px 4px black;
	-moz-transition:.4s;
	-ms-transition:.4s;
	-o-transition:.4s;
	-webkit-box-shadow:1px 3px 4px black;
	-webkit-transition:.4s;
	border:2px solid #404040;
	box-shadow:1px 3px 4px black;
	float:left;
	margin:24px;
	max-height:94px;
	max-width:95px;
	outline:1px solid #404040;
	transition:.4s;
}

#breadcrumb {
    width: 88%;
    color: #0d80d9;
    font: 13px Arial, Helvetica, sans-serif;
background: linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -o-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -moz-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -webkit-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
background: -ms-linear-gradient(bottom, rgb(28,28,28) 2%, rgb(33,33,33) 100%);
    height: 30px;
    line-height: 45px;
    border: solid 1px #101010;
    overflow: hidden;
    margin: 0px;
    padding: 6px;
    position: relative;
    top: -15px;
    border-radius: 5px;
-webkit-box-shadow: 0px 1px 1px #252525;
-moz-box-shadow: 0px 1px 1px #252525;
box-shadow: 0px 1px 1px #252525;
}

#breadcrumb li {
    list-style-type:none;
    float:left;
    padding-left:10px;
    margin-top: -8px;
}

#breadcrumb a {
    height:50px;
    display:block;
    background-image:url(images/Deviant/breadcrumb_sep.png);
    background-repeat:no-repeat;
    background-position:right;
    padding-right: 22px;
    text-decoration: none;
    color:#aaaaaa;
    text-shadow: 0 0px 0px #161616;
    width: auto;
    margin-top: -1px;
}

.home {
    border:none;
    margin: 11px 0px;
    position: relative;
    left: -2px;
    opacity: 0.69;
}
.home:hover {
    padding: 0px 5px;
    opacity: 1;
}

#breadcrumb a:hover {
    color:#35acc5;
}

.gzero {cursor: pointer;position: relative;}
.gzero > span.tl {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    color: #FFF !important;
    line-height: 1.2;
    font-weight: normal;
    font-family: arial;
    font-size: 11px;
    margin-right: -100px;
    max-width: 200px;
    opacity: 0;
    padding: 8px;
    position: absolute;
    text-align: center;
    text-decoration: none !important;
    transition: all 300ms ease-in-out 0s;
    -moz-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    visibility: hidden;
}
.gzero.left > span.tl {left: -144px;margin-top: -7px;width: 120px;}
.gzero.top > span.tl {bottom: 25px;left: 0;margin-left: -8px;}
.gzero.right > span.tl {margin-top: -7px;right: -46px;width: 120px;}
.gzero.bottom > span.tl {margin-left: -100px;margin-right: -8px;right: 0;top: 27px;}

.gzero:hover > span.tl {visibility: visible;opacity: 1;}
.gzero span.tl > i {display: block;position: absolute;}

.gzero.right span.tl > i {
    background: url(images/Deviant/right.png) no-repeat scroll center top transparent;
    height: 10px;
    left: -5px;
    top: 10px;
    width: 5px;
}

I need help with this as Soon as Possible!
MyBB Community Forums > Extensions > Themes > Theme Support > Add rotating header