Admin Forum:Restyling the new WikiHeader navigation

Has anyone substantially restyled the new "side-scrolling" WikiHeader navigation bar? I've been messin' around with a few things, but I'm having some difficulty figuring out how to affect the main stripe underneath (the  bit which runs along underneath the main tabs on top). I really don't want it to be the same color as the default button color.

If anyone knows of any wikis where the new navigation system has been restyled away from its default condition, could you please leave a link here? Thanks :) 14:25: Sun 13 May 2012


 * Memory Alpha did, even if their changes aren't exactly what you're after. The 888th Avatar   (talk)  16:03, May 13, 2012 (UTC)


 * Do you mean like this?




 * Ooh! I might be able to help with this CzechOut. I believe your talking about this:

 .WikiHeaderRestyle .navbackground {}


 * Hope this helps! :D STARFLEET  ACADEMY  08:00, May 14, 2012 (UTC)


 * I apologize. Mine only works for the width. I didn't realize because that's what I was using it for a little while ago. :(


 * @Pecoes: Your code didn't work for me on CC. I don't know why though. :/ STARFLEET  ACADEMY  09:07, May 14, 2012 (UTC)


 * Odd. It works for me. o_O Have you edited wikia.css?




 * Pecoes, that's a good solution, but it doesn't quite do what I want to do. The thing you're doing at   is to cover up the bit of the accent that overhangs the   element.  But the underlying accent that's the default, blue button color remains.  If you were to set all your   to , you'd see what I mean.  What I need to do is to affect the color of the actual accent, but I can't figure out the name of the element.


 * I've tried  and   and   to no avail.   16:30: Mon 14 May 2012


 * I see. Then Starfleet was pretty close:




 * (There's still a border at the top, but that might be an artifact of my other restyling experiments...)


 * Oh sorry, I did color: (like in a text span), how stupid. Your new code Pecoes is working for me now. I must have been ignored by the servers yesterday. I can't seem to find the top border of that nav. It isn't your other code Pecoes, it's there to add 3-dimentions to the nav. I thought I was getting somewhere with transparency, but no dice. I'll have a further look, but this amateur doesn't hold much hope for a win. ;) STARFLEET  ACADEMY  00:20, May 15, 2012 (UTC)


 * I've got it... I think. When I was looking around for code to change the width of the Header, (I had this crazy idea of basing a new skin on Oasis), I found this wiki: Yoshi Wiki! They have totally redesigned the header, with only a few lines of code. Fantastic ey!


 * Anyway, I've used some code from their site, and mine from Community Test; It works, kinda:


 * Though beware: halfway through coding, this happened for no real reason:




 * Anyway &mdash; enjoy! STARFLEET  ACADEMY  01:07, May 15, 2012 (UTC)
 * Wow, thanks, guys. That's all very helpful in figuring things out.  The 726px width thing is a very cool little detail.  I'm curious, though: do you remember, Starfleet Academy, what exactly made the code "break".  Because that image is  closer to what I want than anything on the page.  I'd love to essentially "skip" the 2nd nav bar, going directly from 1st to 3rd.  That is, a navigation in which mouseovers created more dramatic effects of visibility/invisibility.   14:55: Tue 15 May 2012


 * Do you have mock-up on a blank HTML page or in Flash or somesuch?