- Note: Many wikis need detailed site navigation on every page (see lists of wikis here and here farther down). See the old Cannabis Wiki sidebar too. Detailed site navigation could be put anywhere (top, sidebar, etc) and be condensed to a show/hide line. For example see Template:Site navigation. The problem is that hover menus are needed too. Alternatively, the top-bar navigation could be expanded with more menus (see this forum thread). The top-bar needs sub-menus, too.
- 1 Top
- 2 The problem
- 3 Wikis with more detailed, nested site navigation links
- 4 Sub-menus
- 5 Site navigation box added to top of 550 pages
- 6 Need to nest the submenus
- 7 Accessibility in Oasis, and keyboard navigation of menus
- 8 Need CSS and JS help
- 9 Some staff thinking on the sidebar
- 10 Forum threads about problems with site navigation
- 11 Treeview extension, and other navigation code
- 12 Vector skin in MediaWiki version 1.16 and higher
- 13 Top Bar Multi-Level Menu
- 14 Other wikis with nested sidebar menus
- 15 JS and CSS for nested hover menus in the sidebar
- Later note: See Help:Wiki navigation for info on the new horizontal line of site navigation links at the top (4 dropdown menus with a maximum of 7 links per menu).
I am an admin at one of the lifestyle wikis that will have the new skin as the default skin for all users starting October 6.
Detailed site navigation. A lot of work went into this:
The site navigation at the top for the new look will not come close to the usefulness of the current sidebar site navigation. Especially to editors and regular readers. If you need a refresher and map on where everything is located in the new look, please go here:
Possible solutions I need advice and help about.
The simple navigation would stay at the top for new readers passing by. The simple navigation at the top is not enough for most readers though. Most readers will want more, and many of those who return are used to the detailed site navigation in the sidebar.
Can a bot add the closed show/hide navigation box at the top of all pages? This is if I am not allowed to add it to the sidebar for all users. Advice from bot experts would be appreciated. There are around a thousand pages on the wiki.
In any case I want to add the sidebar navigation for my personal use. How would I do this? What page do I edit? What CSS, JS, etc.?
Also, are there wiki farms based on MediaWiki that allow sidebar customization, sidebar site navigation, show/hide tables, etc.. Also, do any other MediaWiki-based wiki farms allow embedding of YouTube videos? Competition between wiki farms is a good thing. Do other MediaWiki farms allow customization of the width of content space? I don't mind a single skin if it can be customized greatly. A single skin makes things much easier for staff to maintain a wiki farm. But there is little reason the single skin can't be customized greatly to allow for a great variety of looks, and still maintain the required number of ads, and the required location and size for those ads. --Timeshifter 19:55, October 5, 2010 (UTC)
- It should be possible to put a navigation in the sidebar using a JS like
$("#WikiaRail #WikiaSearch").after("<p>Inserted stuff</p>");, obviously slightly changed so the navigation is inserted instead of an arbitrary paragraph and inserted in the right part of the bar. --Yoshord 23:14, October 7, 2010 (UTC)
(unindent) What is AWB? Here is Special:AllPages:
Does anybody know how to create nesting, right-opening menus as in the sidebar navigation?:
To see the sidebar navigation you will have to choose the Monaco skin in your preferences.
I can't figure out how to copy that nesting navigation to here:
That right-opening nested navigation must require special HTML. --Timeshifter 23:15, October 5, 2010 (UTC)
- And/or CSS and JS. --Timeshifter 22:09, October 6, 2010 (UTC)
- It is a mouseover event listener. I don't know the body of the listener though. --Yoshord 23:14, October 7, 2010 (UTC)
- Here is something using CSS and JS:
- I assume I would add some variation of that here with the rest of the new-look JS and CSS customization:
- I know how to create a site navigation box that is initially closed in a show/hide box. See also:
- I need help though to create JS-based mouseover menus internally in the table-box.
- I want to put this detailed site navigation box at the top of the main content space of every page if Wikia does not allow detailed site navigation in the sidebar.
- I will also need bot help (if a bot can do this) to add it to thousands of pages. --Timeshifter 20:17, October 8, 2010 (UTC)
- First off, do not add this data which has no relation to any specific page to every page individually. Just don't.
- As far as I can tell, the ShowHide does work, even with sidebar tables, as long as ShowHide code is run after the table is added to the page. It seems safe to run ShowHide multiple times on the same page, so this is not a real issue. just call
createCollapseButtons()if it has run already; wait for it to run if it hasn't.
- It should be possible to alter the navigation hiding code to hide a
li ulthat follows an
li. --Yoshord 21:26, October 12, 2010 (UTC)
- Thanks. The show/hide function has been implemented on my wiki. See examples:
- I am trying to figure out how to put a closed show/hide table in the Oasis sidebar. --Timeshifter 02:26, October 14, 2010 (UTC)
You will have to turn on the Monaco skin (go to the skin tab in your preferences) in order to see the left sidebar with the nested navigation links.
- http://www.wikia.com/Gaming - many gaming wikis have more detailed site navigation.
--Timeshifter 02:10, October 14, 2010 (UTC)
The new site navigation at the top does not have sub-menus. --Timeshifter 22:16, October 7, 2010 (UTC)
The nested list needs to be converted to mouseover hover menus as in the Monaco sidebar navigation. Can anyone help?
I added it at or near the top of around 550 pages. I did that by adding it to this template:
See "What links here":
--Timeshifter 02:32, October 14, 2010 (UTC)
I need to add mouseover to the menus. And then I need to put it in the Oasis sidebar. This:
needs to go into the Oasis sidebar. Does anybody understand what I am trying to do, and can help? --Timeshifter 02:32, October 14, 2010 (UTC)
Wikia has made some great improvements in accessibility with the Oasis skin. See:
Increasing accessibility is good. Basic site navigation via the horizontal menu bar with the keyboard is good. Keyboard access to nested menus can be designed into both vertical and horizontal menus.
Additional detailed, nested, site navigation is done best in the sidebar. It allows more space for text in the initial menu titles. Also there is room for more menus. Many wikis start with 10 menus or more. There is no reason there can't be both horizontal and vertical site navigation. One for simple navigation, and one for detailed navigation.
Interwiki community spotlights exist in multiple locations on the page. Internal site navigation is more important in the minds of most admins. One of the interwiki navigation boxes in the sidebar could be removed to make room for detailed site navigation. --Timeshifter 04:57, October 15, 2010 (UTC)
Need CSS and JS help
Does anybody have the skills to pull out the CSS and JS used in the Monaco nav sidebar? See:
It needs to be adapted for use in Oasis. --Timeshifter 07:56, October 17, 2010 (UTC)
That was October 12 which is a week ago. That may be a long time ago considering all the discussion since. By the way, a sidebar on the left makes dealing with wide tables easier. Wider tables can be allowed to extend to the right farther without overlapping a sidebar.
Detailed site navigation can be effective in many locations. Left sidebar, right sidebar, top of content, or in the header area at the top. Since the detailed site navigation can be put in a show/hide box it needs only 1 or 2 lines of space. See: Template:Site navigation. --Timeshifter 10:00, October 19, 2010 (UTC)
There are various forms of site navigation. It was once possible to consolidate it all (including tools) in the sidebar (in the Monaco skin) with nested, mouse-over menus and sub-menus.
That very innovative, much more detailed, site navigation is not in the new Wikia look (Oasis skin). It was replaced with limited site navigation. It is now scattered in various parts of the Oasis skin (top, bottom, and buried locations). See some of the forum threads:
- Forum:Need help with new Navigation menu
- Forum:Navigation bar CSS
- Forum:Wiki Navigation
- Forum:Can we edit the right hand bar/navigation?
- Forum:New Look Navigation Menu magic words help wanted
- Forum:Navbox templates on new wikias?
- Forum:Default contents of My Tools for all users?
- Forum:Is it (going to be) possible to edit the Wikia-bar at the top?
- Forum:Tips to restore side menu/Make the new skin look as Monaco-Like as possible
- Forum:Navigation link help
- Forum:Beyond the 7 item limit.
More forum threads will be added to the above list as they come up.
Here is a possible way to create nested site navigation. It could be completely collapsed and condensed to less than half an inch tall (one centimeter), and placed anywhere. By using multi-level submenus, and/or a show/hide box. Wikia's top line of interwiki dropdown menus has around 75 links condensed to one centimeter. Site navigation could also have 75 or more links.
Vector skin in MediaWiki version 1.16 and higher
I like the Vector skin. Some features I like:
- Detailed site navigation via nested links in the sidebar.
- It is not a narrow fixed width.
- Admins could set a flexible width up to a maximum width of say, 1280 pixels wide.
See the sidebar navigation at MediaWiki.org, the MediaWiki software site. Note the open/close arrows in the sidebar for Vector.
They, along with Wikipedia and the Commons, have updated to MediaWiki version 1.16.
Some of the sidebar code could be adapted for use on Wikia, along with Monaco mouseover navigation code. If I had to choose between Oasis (in its current form) and Vector I would choose Vector as the default skin in the wiki where I am an admin. For everybody, both registered and unregistered users.
Wikia is currently using version 1.15.5 of the MediaWiki software:
Top Bar Multi-Level Menu
I have spent about one hour and came up with the css for a multi level top menu. The problem is that the top bar menu is limited on the server side to 4 links with max 7 links each. This means no CSS magic can be done. I'll stop wasting my breath on this new skin considering the level of incompetence proved by Wikia. What kind of web designers do they have to still use fixed width styling? And how can they even think of giving us only that abomination of a menu? If you can't come up with a solution for multi-leveling lists, we can. But they hard-coded a limitation. I'll join the ranks of those that leave wikia for good. NorthFury 11:30, November 11, 2010 (UTC)
- What wikis do you work on? I may move my wiki too if I can't figure something out. What good is a wiki where one can't navigate around in it much? Can your CSS be adapted to internal, vertical mouse-over nesting here?: Template:Site navigation. Maybe we can talk them into allowing it in the new sidebar. I already have it on most site pages combined with another template. I can easily remove it. --Timeshifter 07:10, November 12, 2010 (UTC)
- A fix for the 7 link limit is to use three stars instead of two in the source code. I use this method on Casualty Wiki to get all 25 series onto one menu. Eladkse 11:30, December 20, 2010 (UTC)
--Timeshifter 20:07, November 12, 2010 (UTC)
- See also the nested hover menus in the sidebar here:
See the nested sidebar navigation here:
It is done by added JS and CSS. It is found here:
Look for the section labeled "JS Tab System." Maybe it could be adapted for use in the sidebar of the new Wikia skin. --Timeshifter 06:30, December 20, 2010 (UTC)
- Are you sure? I don't know. The default skin on the main page looks different from the Monobook-skin page linked below. I found the info about the Halopedian.com nested sidebar navigation here.
- See this:
- http://www.halopedian.com/Main_Page?useskin=monobook --Timeshifter 03:04, December 21, 2010 (UTC)
- I wonder if there is any possibility the Vector skin would be allowed as a default skin for a Wikia wiki? If so, then this JS and CSS might be adapted for the Vector skin.
- I found out that the name of the skin of a wiki can be figured out by looking at the HTML source for any page on the wiki. Search for "skin". Keep looking for the next occurrence of "skin" in the HTML source and you will eventually end up with something like this:
- var skin="halopedia"
- That is the default skin for Halopedian.com
- I registered at the Halopedia wiki so I could look at their skin preferences under the appearance tab. Here they are:
- It looks like the site is currently using MediaWiki version 1.16.0
- See: http://www.halopedian.com/Special:Version
- It looks like the nested site navigation currently only works correctly on the Halopedia skin.
- Halopedia is interesting in that its nested site navigation does not require a MediaWiki extension as far as I can tell. It only needs JS and CSS.
- According to the Special:Version page it is using this extension:
- Thanks for the link:
- It looks like one can't click on the nested links, at least in the Firefox browser. There is a gap between the menus that can not be crossed. It is the same problem as is seen here:
- There is no problem in the Internet Explorer browser with either one. --Timeshifter 16:03, January 22, 2011 (UTC)
(unindent). I am using Firefox 3.6.13 (the latest non-beta version) on Windows XP Home (fully updated). Try crossing from left to right with your mouse. The menu on the right disappears for me when I try to do so. OK, I see the problem. This occurs because I use a "Minimum font size" setting in Firefox options (content tab, advanced button). Any "Minimum font size" setting of 11 or above causes the problem. See:
By the way, the monobook skin page looks so much better in my opinion than the Wikia/Oasis skin version. People can compare:
--Timeshifter 16:27, January 22, 2011 (UTC)
- Oh, I see. It's using relative units for positioning the first menu. I don't know if there's a good fix for this, since relative unit is what make it to be in the same relative position if you change the zoom. Minimum font size breaks that :(. A workaround is to move the mouse over the menu fast so you position it over the submenu before it appears. At least it works for me. And about Oasis/Monobook, yes, I know :P. I'm using Monobook. --Ciencia Al Poder (talk) -WikiDex 16:49, January 22, 2011 (UTC)
- Maybe it can be set to em units, or something else that expands with font size. What is being used now? Can you link to the CSS page, and/or other relevant pages?
- There are other Firefox "Minimum font size" problems. See:
- Forum:Problems with larger font sizes. Need CSS help. --Timeshifter 18:10, January 22, 2011 (UTC)
- Yes, it's using exactly margin-left:12.6em;. But the problem is, that it depends on the font size, and the minimum font-size is increasing it. That's the same unit used in the margin-left value of #column-content in Monobook and the width of .portlet elements in the column. I changed it now to use absolute units (pixels) and found that zooming in and out doesn't change the relative position of it and also fixes this problem, so I've left it. I need to make sure it's not broken on IE now when cache updates... Thanks for your debug info. --Ciencia Al Poder (talk) -WikiDex 18:21, January 22, 2011 (UTC)
- Works great now in both Firefox and Internet Explorer! Can this CSS and JS be adapted for use with the Vector skin? --Timeshifter 18:49, January 22, 2011 (UTC)
- OK. I believe some wikis at Wikia are now using MediaWiki version 1.16.x. 1.16.x can support Vector, I believe, but I don't know if Wikia is allowing people to use it for a personal skin. --Timeshifter 19:09, January 22, 2011 (UTC)
(unindent). The first-level menus in the Pokemon wiki's sidebar navigation in the Monobook skin now have some overlap problems from the submenus. I think this occurred after the upgrade to MediaWiki version 1.16.1. The overlap problems are even more of a problem when I turn "Minimum font size" off in Firefox (content tab, advanced button). See:
There are overlap problems in Internet Explorer now at all text sizes except medium. See the view menu, text size.
I also see some different sidebar problems at Halopedia. See:
- The Halopedia sidebar navigation has been fixed. See:
- http://www.halopedian.com/Forum:Sidebar_site_navigation_problems --Timeshifter 23:54, January 31, 2011 (UTC)