Modifiy mainMenu

Rebeka · Feb 17th 2008

Hi I would like to know how to modify the menu of my forum using CSS code below.

CSS

#modernbricksmenu{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}




#modernbricksmenu ul{
font: bold 11px Arial;
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}




#modernbricksmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}




#modernbricksmenu a{
float: left;
display: block;
color: white;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: black; /*Default menu color*/
border-bottom: 1px solid white;
}




#modernbricksmenu a:hover{
background-color: gray; /*Menu hover bgcolor*/
}




#modernbricksmenu #current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/ 
border-color: #D25A0B; /*Brown color theme*/ 
}




#modernbricksmenuline{
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #D25A0B; /*Brown color theme*/ 
}




#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
padding: 0;
}




#myform .textinput{
width: 190px;
border: 1px solid gray;
}




#myform .submit{
font: bold 11px Verdana;
height: 22px;
background-color: lightyellow;
}

Display More

I await a response.

Thank-you!

Synoxis · Feb 17th 2008

Hey Rebeka,

you want that we explain you how you should modify your CSS-Code with the classes of WBB3? Please give us more information.

Harald Szekely · Feb 17th 2008

Hi!

If you just want to include your CSS code then go to the style editor in the ACP and open the last tab where you can enter your CSS code under "Additional CSS declarations". Use one of the text fields, or both, as you like …

Rebeka · Feb 17th 2008

My code css is below.

CSS

/* Extra Styles */




#header, #logo, .mainMenu {
border: 0 !important;
background: transparent !important;
}




.userPanel {
height: 25px;a
}




.userPanel, .userPanel a {
color: #000;
}




.userPanel a:hover {
color: #000;
}




.userPanel .border, .userPanel .popupMenu a {
color: #57595a;
}




.mainMenu {
min-height: 30px;
margin: 0px 0px 0px -25px;
}




.mainMenu a {
border: 1px solid #8da4b7;
border-width: 0 1px;
padding: 3px 5px;
}




.mainMenu a:hover {
border: 1px solid #8da4b7;
border-width: 0 1px;
}




.mainMenu .active a, .mainMenu .firstActive a, .mainMenu .lastActive a {
border: 1px solid #8da4b7;
border-width: 0 1px;
}




#search .searchContainer {
background: transparent url("../images/WoltLab Blue Sunrise/search.png") no-repeat right top;
min-width: 185px;
min-height: 24px;
padding-left: 40px;
text-align: center;
}




.pageNavigation a:hover {
background: #8ae002;
}




.largeButtons a {
padding: 5px 5px 5px 9px;
background-repeat: no-repeat;
}




.largeButtons li {
padding-right: 9px;
background: url("../images/WoltLab Blue Sunrise/largeButtons.png") no-repeat right top;
}




.largeButtons li:hover a:hover, .largeButtons li:hover a, .largeButtons li.selected a:hover, .largeButtons li.selected a {
background-position: 0% -86px;
color: #333;
background-color: transparent !important;
}




.largeButtons li:hover, .largeButtons li.selected {
background-position: 100% -86px;
border: 0 !important;
background-color: transparent !important;
}




.messageLeft, .messageRight, .messageFramedLeft, .messageFramedRight, .messageTop, .messageFramedTop {
background-image: url("../images/WoltLab Blue Sunrise/messageSidebar.jpg");
background-repeat: repeat-x;
}




.threadStarterPost .messageLeft, .threadStarterPost .messageRight, .threadStarterPost .messageFramedLeft, .threadStarterPost .messageFramedRight, .threadStarterPost .messageTop, .threadStarterPost .messageFramedTop  {
background-image: url("../images/WoltLab Blue Sunrise/messageSidebarThreadStarter.jpg");
background-repeat: repeat-x;
}




.threadStarterPost .container-3 {
background-color: #ffddb7;
}




.poll .pollQuestion {
background-image: url("../images/WoltLab Blue Sunrise/poll.jpg");
background-repeat: repeat-x;
}




.firstPost a {
color: #858789;
}




#main {
padding:5px 50px; 
background: White; 
border: 2px solid; 
border-color: #8ae002; 
}




#modernbricksmenu{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}




#modernbricksmenu ul{
font: bold 11px Arial;
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}




#modernbricksmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}




#modernbricksmenu a{
float: left;
display: block;
color: white;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: black; /*Default menu color*/
border-bottom: 1px solid white;
}




#modernbricksmenu a:hover{
background-color: gray; /*Menu hover bgcolor*/
}




#modernbricksmenu #current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/ 
border-color: #D25A0B; /*Brown color theme*/ 
}




#modernbricksmenuline{
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #D25A0B; /*Brown color theme*/ 
}




#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
padding: 0;
}




#myform .textinput{
width: 190px;
border: 1px solid gray;
}




#myform .submit{
font: bold 11px Verdana;
height: 22px;
background-color: lightyellow;
}

Display More

Thank you!

Modifiy mainMenu

Participate now!

Share