Community Central

Admin Forum:Restyling the new WikiHeader navigation


Admin Forum:Restyling the new WikiHeader navigation

19,785pages on
this wiki
Add New Page
Talk0 Share

This Forum has been archived

Forums: Admin Central Index Technical Help Restyling the new WikiHeader navigation
Wikia's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

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@fandom    fly tardis  <span style="">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@fandom    fly tardis  <span style="">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:
Code break
Anyway — enjoy! STARFLEETACADEMY 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. czechout@fandom    fly tardis  <span style="">14:55: Tue 15 May 2012 
Do you have mock-up on a blank HTML page or in Flash or somesuch?
 pecoes  15:35, May 15, 2012 (UTC) 

(Reset indent) @Czech: Well... I think it might have been a cache glitch with Fire Fox 12. Because I had that happen after testing the width at 100px (to see what I was affecting) while moving towards 726px. So it was either the cache of FF or the cache of the severs not excepting the code. Or my erroneous use of !important in .WikiHeaderRestyle .navbackground {width: 726px;}. Possibly all of the above. Put it this way, it wasn't stable when it "broke" so I'd say something went wrong. As for the code above I've had it on for the rest of yesterday, and it hasn't glitched in that time. Regarding 1st to 3rd levels. You might be able to do it with CSS: I'm thinking of over-using display: none; here. Anyway wouldn't it be easier to just "update" the old nav? Plus if this is site-wide(?), Wikia isn't going to be that happy with your idea. 0_o STARFLEETACADEMY 00:36, May 16, 2012 (UTC)

Well, I'm just sorta trying to plan for the future. I wanna have something ready in the event that Wikia ever make this style of navigation compulsory. It's in no way being rolled out at w:c:tardis, yet. I'm just messin' with it at our testing "facility", w:c:tardistest. But, yeah, your advice not to sail too close to a TOU violation is well noted. I just want it somehow more subtle than it is in its default condition. Both you and Pecoes have been invaluable in showing me the right element names. Thanks :)
In the meantime, your mention of a way to change the "old" nav has me intrigued. Can you point me to examples of substantially-altered old navs? czechout@fandom    fly tardis  <span style="">13:21: Wed 16 May 2012 
Take a look at my screenshots. There's a little star next to the "official" menu. That's my bookmark menu. It contains the pages I visit most often and is available and identical across all wikis:
At some point I plan to make this little gadget available to everybody. But for the time being it has a little blemish: You have to edit the JavaScript source to add and remove bookmarks. You can check it out at my global.js if you like. --  pecoes  14:10, May 16, 2012 (UTC) 
@Czech: Thanks for your thanks, but I'm mostly clutching at straws. I'd suggest that keeping the "On the Wiki" tab is a must, for redesigning the new nav (within the TOUs). I'm afraid I don't know of any wikis that restyled the old nav. I'd say that any that did changed over to the new one! I think just fiddle until you get it, or if I get time I'll run out some code to show the access points.
@Pecoes: Fantastic idea! Two question: what happens if you go on a wiki that doesn't have the new navigation? (e.g: The Bionicle Wiki) What happens when you go on a wiki that has it's level 1 tier maxed out? I don't know JavaScript yet, but in looking at that code, I think I could change the menu items. If you were to release it on dev, a long winded /doc would be needed. That could be an annoyance for you. But all the same, cool code! :)
STARFLEETACADEMY 02:48, May 17, 2012 (UTC)
I will release this code on dev... as soon as I have the storage problem figured out. Editing JavaScript is simply too inconvenient and error-prone. It may be good enough for me, but it's definitely not good enough for the rest of us. Yet.
It does not yet work on wikis with the old menus. That's true. I don't seem to use wikis that use the old menus. And currently I'm the only user, so... *rolleyes*
Community Central has its level 1 tier maxed out and my menu works nicely here. The trick is to reduce the padding of all other level 1 items a little bit. Just a few pixel that's all the room the star icon needs - it's small after all. --  pecoes  09:00, May 17, 2012 (UTC) 
@Pecoes: Oh no, I hope my last post didn't come across as a hurry up? As for editing JS: This is probably obvious to you, but a revelation to me; could you use a declaration? Like how one configures the Show/Hide code. With old menus, what exactly happens? (Since I linked to the one above.) Does it just not work because it's attached to the wrong classes? or does it break? I'm happy to hear about the level one spacing working well. I don't normally go for gadgets (on Wikia anyway), but if you ever need a Gamma tester for your code: count me in! :D STARFLEETACADEMY 02:25, May 18, 2012 (UTC)
@Czech: Don't shoot me please? I didn't cross browser check that code I made (stitched together). It works fine in IE 9, Safari 5, Chrome 19 & FF 12. Sorry about that! :P STARFLEETACADEMY 02:30, May 18, 2012 (UTC)

(Reset indent) @Starfleet: Actually something funny happened. Writing about this gadget here, gave me an idea. I've since updated the input. It's not necessary to edit JavaScript anymore. Now you can create a file named "User:YourName/Wikimarks" here at Community Central and my script will parse that on launch (and keep it in sessionStorage). You can try it, if you like. Take my Wikimarks as a blueprint! Be warned, though: Currently there's no help text and you won't get an error message if you do it wrong. But the basics should be simple: There's a nested list. The level 1 list (*) tranlates to the the level 1 menu. The level 2 list (**) translates to the level 2 menu. You are not allowed to use anything other than list items and links. The maximum number of level 1 links is seven. The maximum number of level 2 links is ten. So that's 70 max. Oh, and er, that probably goes without saying, but since this menu is shown on all wikis, you need to use interwiki links for pretty much everything.

When you're done with User:Starfleet_Academy/Wikimarks add this to User:Starfleet_Academy/global.js:

importScriptPage('NewMenu.js', 'pecoes');

Post any comments or bug reports at w:c:pecoes:NewMenu.js, please! (I've done enough thread-highjacking already, haven't I? :)  pecoes  04:51, May 18, 2012 (UTC) 

@Pecoes: Okay, cool! I'll add that tomorrow! (Too fed up with coding today (CSS). :P) Glad you found a better(/closer to wikitext) way. Mmmm... 70 more links. Oh, and I'm the King of Digression. XD STARFLEETACADEMY 09:08, May 18, 2012 (UTC)