Admin Forum:Restyling the new WikiHeader navigation

Forums: Admin Central Index → Technical Help → Restyling the new WikiHeader navigation

Central's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 4357 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

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 ul.subnav-2.accent 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 :) czechout ☎ ✍  fly tardis  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?

.WikiHeaderRestyle > nav .subnav-2 {
     background: green;
}
.WikiHeaderRestyle > nav li {
    border-bottom: 1px solid green;
}
.WikiHeaderRestyle > nav li.marked {
     background: green;
}

--  pecoes  16:09, May 13, 2012 (UTC) 

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

.WikiHeaderRestyle .navbackground {}

Hope this helps! :D STARFLEETACADEMY 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. :/ STARFLEETACADEMY 09:07, May 14, 2012 (UTC)

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

--  pecoes  09:18, May 14, 2012 (UTC) 

Pecoes, that's a good solution, but it doesn't quite do what I want to do. The thing you're doing at .WikiHeaderRestyle > nav li is to cover up the bit of the accent that overhangs the li.marked element. But the underlying accent that's the default, blue button color remains. If you were to set all your green to transparent, 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 .WikiHeaderRestyle .accent and .WikiHeaderRestyle > nav li:marked ul.subnav-2.accent and .WikiHeaderRestyle ul.suvnav-2.accent to no avail. czechout ☎ ✍  fly tardis  16:30: Mon 14 May 2012 

I see. Then Starfleet was pretty close:

.WikiHeaderRestyle > nav li {
    border-bottom: 1px solid #540040;
}
.WikiHeaderRestyle > nav li.marked {
    background-color: #540040;
}
.WikiHeaderRestyle .navbackground {
    background-color: #540040;
}

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

 pecoes  17:15, May 14, 2012 (UTC) 

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. ;) STARFLEETACADEMY 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:

/* from yoshi wiki */
.WikiHeaderRestyle .navbackground div, .WikiHeaderRestyle .navbackground img {
display: none;
}

.WikiHeaderRestyle > nav li.marked > a {
border-top: none !important;
}

/* My width fix */
.WikiHeaderRestyle .navbackground {
 width: 726px;
 background-color: #540040;
}

/* Pecoes' code */
.WikiHeaderRestyle > nav li {
    border-bottom: 1px solid #540040;
}
.WikiHeaderRestyle > nav li.marked {
    background-color: #540040;
}

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

Anyway — enjoy! STARFLEETACADEMY 01:07, May 15, 2012 (UTC)