WebsiteBaker Support (2.8.x) > Templates, Menus & Design
change menu color in multiflex template
paulcoopmans:
Can anyone give me directions on how i can change the color of the sub-menu in multiflex-3. ?
http://www.wittehal.com
the sub menu is the one on the left saying "hoofdmenu".
Then I also would like the change the color of the header menu when hovering with mouse. I managed to change the color of the blocks on the left allready.
many thanks
mr-fan:
hi,
this you can change in the layout css file!
use a colorpicker for the menu colors and then search for it in the css file.
example: the color (255,255,255) (is a rgb mode) search with a editor (like notpad++ or such stuff)
in the css for it and replace it with your colors! then control your layout in the browser!
note: -the color of the menus is in the css styled in the .nav0123... classes!
-change it for the IE6 mode and the nonIE6 mode (that the color is in all browsers the same)
regards martin
paulcoopmans:
Thx for the quick reply.
I want to change the block background color of the "hoofdmenu" (block left side of page)
is this controlled in layout_setup.css or in layout_text.css
I managed to change the color of the header menu when hovering, but now i can't determine where the text color for this menu when hovered is set. It sounds logical that this is set in the same code but i changed all the rgb settings there.
Drop-down menu*/
.nav2 {white-space:nowrap /*IE hack*/; float:left; width:900px; border:none; background:rgb(225,225,225) url(./img/bg_head_bottom_nav.jpg) no-repeat; color:rgb(75,75,75); font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}
.nav2 ul li ul {display:none; border:none;}
/*Non-IE6 hovering*/
.nav2 ul li:hover {position:relative;} /*Sylvain IE hack*/
.nav2 ul li:hover a {background-color:rgb(0,0,255); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(255,255,255);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/
/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;}
.nav2 ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:rgb(0,0,255); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {white-space:normal; display:block; width:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode
This is a paste from layout_setup.css. It was clear to change the rgb value on "NAV2 HOVER BACKGROUND) So now i'm looking where to change the text color
Thanks again
mr-fan:
oh sry....
1. the left menu main background is a image....look at /img bg_with_nav.jpg ....or something and use a programm like PS or GIMP
2. the menu points background you can chnage on the .nav3 with bullets.. class! use a tool like a webdevelopertoolbar for ff or ie then you can figure out the css classes and the code of the template....
3. use in the forum the code button to show code paste's third from the right...above
4. sry for my english :wink:
5. i edit the multiflex3 too
good luck and
regards martin
xoanon:
I use the Multiflex 5.3 / 5.4 template and have edited it a bit ....
see the "xxxxx.css" and "index.xxx" files
Still in development mode my link for the site is www.gvaa.eu or www.gvaa.eu/wb (diverts to my home site)
regards
Tony
[gelöscht durch Administrator]
Navigation
[0] Message Index
[#] Next page
Go to full version