Vanilla forum style sheet code change? Match Vanilla to My Wordpress Theme help

ashleybacon · February 2011

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

/* 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

ashleybacon · February 2011

I figured this out. used a plugin for google chrome to assist with the CSS editing. needed to change .Banner ul li a and change:

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.

ashleybacon · February 2011

Sorted. my problem was with my png file and nothing to do with the code. this is now sorted and can be closed.

Vanilla forum style sheet code change? Match Vanilla to My Wordpress Theme help

Comments