Vanilla forum style sheet code change? Match Vanilla to My Wordpress Theme help
Can anyone help me with a vanilla forum style sheet code change?
I’m using word press with vanilla embedded and trying to get the vanilla theme to match my word press theme. The issue I currently have is that my word press theme menu bar isn’t a solid colour, it turns out its actually a picture file (PNG) and when you hover over the menus (i.e. home, blog, forum, contact etc) this changes to a different colour, which is also a picture file (PNG) the picture file is simply a colour with a gradient in it. You can see from my blog http://nystagmusblog.co.uk/forumhome that my word press menu bar has a slight gradient/tint and the vanilla forum is a simple yellow colour. Can anyone help?
The following is an extract of the CSS that drives my word press menu
The above style sheet was modified from the vanilla embeded style sheet - should anyone want to chechwhat the css code originally looked like.
Thanks
Ash
I’m using word press with vanilla embedded and trying to get the vanilla theme to match my word press theme. The issue I currently have is that my word press theme menu bar isn’t a solid colour, it turns out its actually a picture file (PNG) and when you hover over the menus (i.e. home, blog, forum, contact etc) this changes to a different colour, which is also a picture file (PNG) the picture file is simply a colour with a gradient in it. You can see from my blog http://nystagmusblog.co.uk/forumhome that my word press menu bar has a slight gradient/tint and the vanilla forum is a simple yellow colour. Can anyone help?
The following is an extract of the CSS that drives my word press menu
/* menu structure */
.art-menu
{
padding: 0px 0px 0px 0px;
}
.art-nav
{
position: relative;
height: 30px;
z-index: 100;
}
.art-nav .l, .art-nav .r
{
position: absolute;
z-index: -1;
top: 0;
height: 30px;
background-image: url('images/nav.png');
}
.art-nav .l
{
left: 0;
right:0px;
}
.art-nav .r
{
right: 0;
width: 1089px;
clip: rect(auto, auto, auto, 1089px);
}
/* end Menu */
/* begin MenuItem */
.art-menu ul li
{
clear: both;
}
.art-menu a
{
position:relative;
display: block;
overflow:hidden;
height: 30px;
cursor: pointer;
text-decoration: none;
margin-right: 0px;
margin-left: 0px;
}
.art-menu a .r, .art-menu a .l
{
position:absolute;
display: block;
top:0;
z-index:-1;
height: 90px;
background-image: url('images/MenuItem.png');
}
.art-menu a .l
{
left:0;
right:0px;
}
.art-menu a .r
{
width:400px;
right:0;
clip: rect(auto, auto, auto, 400px);
}
.art-menu a .t
{
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 16px;
color: #332400;
padding: 0 22px;
margin: 0 0px;
line-height: 30px;
text-align: center;
}
.art-menu a:hover .l, .art-menu a:hover .r
{
top:-30px;
}
.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
top:-30px;
}
.art-menu li:hover a .l, .art-menu li:hover a .r
{
top:-30px;
}
.art-menu a:hover .t
{
color: #FFFFFF;
}
.art-menu li:hover a .t
{
color: #FFFFFF;
}
.art-menu li:hover>a .t
{
color: #FFFFFF;
}
/* end MenuItem */
And this is my vanilla section of the header. (Note: .Banner ul & .Banner ul li a:hover) I have changed to use the png file (which does exist) , this loads the menu background but dones work or look correct, it stops short and hover over the menu icons no longer works.
.Banner {
position: relative;
height: 30px;
z-index: 100;
}
.Banner ul {
position: absolute;
z-index: -1;
top: 0;
height: 30px;
background-image: url('images/nav.png');
}
.Banner ul li {
left: 0;
right:0px;
}
.Banner ul li a {
font-weight: normal;
padding: 3px 6px;
font-size: 14px;
color: #000;
display: inline-block;
}
.Banner ul li a:hover {
position: absolute;
z-index: -1;
top: 0;
height: 30px;
background-image: url('images/MenuItem.png');
}
.Banner ul li a.SignOut {
font-weight: normal;
position: absolute;
top: 10px;
right: 10px;
}
.Banner ul li a span {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 1px 2px 0 1px;
background: #f00;
border-right: 1px solid #a00;
border-bottom: 1px solid #a00;
color: #fff;
font-size: 9px;
position: relative;
top: -3px;
}The above style sheet was modified from the vanilla embeded style sheet - should anyone want to chechwhat the css code originally looked like.
Thanks
Ash
Tagged:
0
This discussion has been closed.
Comments
color: #000;
for
background-image: url(http://domain_name/...the path where your png image file is located)
still cant get the hover over to work...but i'm sure i will figure it out.