Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

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

edited February 2011 in Vanilla 2.0 - 2.8
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 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.



  • Options
    edited 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;


    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.
  • Options
    Sorted. my problem was with my png file and nothing to do with the code. this is now sorted and can be closed.
This discussion has been closed.