The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

how to change this css code menu

View previous topic View next topic Go down

how to change this css code menu

Post by medlsc on March 8th 2012, 11:30 am

Hi Guys , i find this menu http://www.cssportal.com/css3-menu-generator/ and when i add the css code into the css stylesheet i don't have the same bar as it is in cssportal site. I don't see the colors.




here the css3 code

#menu-bar {
margin: 0px 0px 0px 0px;
padding: 6px 6px 0px 6px;
height: 34px;
line-height: 100%;
border-radius: 24px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
background: #8B8B8B;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9, endColorstr=#7A7A7A);
background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
background: -moz-linear-gradient(top, #A9A9A9, #7A7A7A);
border: solid 1px #6D6D6D;
}
#menu-bar li {
margin: 0px 6px 0px 6px;
padding: 0px 0px 6px 0px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bold;
font-family: arial;
font-style: normal;
font-size: 12px;
color: #E7E5E5;
text-decoration: none;
display: block;
padding: 8px 20px 8px 20px;
margin: 0;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
text-shadow: 2px 2px 3px #000000;
}
#menu-bar .current a, #menu-bar li:hover > a {
background: #0399D4;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);
background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
background: -moz-linear-gradient(top, #EBEBEB, #A1A1A1);
color: #444444;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #0399D4 !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA);
background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
background: -moz-linear-gradient(top, #04ACEC, #0186BA) !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 2px 2px 2px #FFFFFF;
}
#menu-bar ul {
background: #DDDDDD;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 30px;
left: 0;
border: solid 1px #B4B4B4;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 3px #222222;
-moz-box-shadow: 2px 2px 3px #222222;
box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:10px 0px 10px 15px;
color:#424242 !important;
font-size:12px;
font-style:normal;
font-family:arial;
font-weight: normal;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}


i use phpbb3 version.

medlsc
New Member

Posts : 8
Reputation : 1
Language : Greek

http://medlabsc.free-forums.biz/

Back to top Go down

Re: how to change this css code menu

Post by SimpleUI on March 8th 2012, 6:15 pm

Please post your code in code tags next time,
Code:
so that it appears like this

Anyway, that CSS doesn't work because the HTML of your page is different to the code that site is generating.

SimpleUI
New Member

Posts : 18
Reputation : 2
Language : German

Back to top Go down

Re: how to change this css code menu

Post by LGforum on March 8th 2012, 8:50 pm

CSS gradients will not work in your stylesheets due to some forumotion limitations. To use that CSS stick it in style tags in a widget or announcement.

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Re: how to change this css code menu

Post by SimpleUI on March 8th 2012, 10:19 pm

They work just fine for me.

SimpleUI
New Member

Posts : 18
Reputation : 2
Language : German

Back to top Go down

Re: how to change this css code menu

Post by LGforum on March 9th 2012, 12:02 am

I think its only phpbb3.

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum