This script/stylesheet is for PERSONAL use only!
You are free to install this script/stylesheet for yourself, but it is not allowed to be used wiki-wide (e.g., in MediaWiki:ImportJS, MediaWiki:Common.js, MediaWiki:Common.css, MediaWiki:Fandomdesktop.js, MediaWiki:Fandomdesktop.css, or MediaWiki:FandomMobile.css), as it would violate Fandom's Terms of Use.
(See the customization policy)
BetterTopNav is a script that enhances the interface of the top navigation bar:
- The tools dropdown can be customized, along with the icon versions next to it
- The user dropdown can be changed to a smaller on-hover popup, while keeping the option to maintain in view when clicked. The order of links has been changed to be a better user experience, and custom links can be added below the default ones.
- The amount of search results can be customized, and custom namespaces can be defined for ease of search.
- The search bar can be horizontally resized, with the global and sticky versions having independent sizes. When the search bar collapses to a button, clicking the button will open it in full as a floating object below the top navigation bar.
Installation
Configuration
The following configuration is optional, and there is no limit to the number of presets.
// Create configuration
(window.dev = window.dev || {}).betterTopNav = {
// "true" will default to 25 results, any integer can be used, but no more than 50 is recommended due to latency concerns
results: true,
// allows the search bar to be horizontally resized
resize: true,
// set the user menu to an on-hover popup
hovermenu: true,
// customize the tools dropdown and icons, "true" will keep the items in the default dropdown but will add the theme toggle as an icon too.
/// alternatively an array like the following can be used to fully customize the elements in the dropdown as desired.
/// the "link" and "text" properties are required. the "icon" property will show the element as an icon next to the dropdown.
/// the used array will be logged in the browser console for ease of reference and customization
tools: [
{
'link': '/wiki/Special:RecentChanges',
'text': 'Recent Changes',
'icon': '<svg class=\"wds-icon wds-icon-small\"><use xlink:href=\"#wds-icons-activity-small\"></use></svg>'
},
{
// Theme switch requires 'track' and 'class' for the default functionality to activate
'track': 'theme-switch-'+{dark:'light', light:'dark'}[mw.user.options.values.theme],
'class': 'wiki-tools__theme-switch',
'link': '#',
'text': {dark:'Light', light:'Dark'}[mw.user.options.values.theme]+' Theme',
'icon': '<svg class=\"wds-icon wds-icon-small\"><use xlink:href=\"#wds-icons-'+{dark:'sun', light:'moon'}[mw.user.options.values.theme]+'-small\"></use></svg>'
},
{
'link': '/wiki/Special:Upload',
'text': 'Upload New File'
},
{
'link': '/wiki/Special:SpecialPages',
'text': 'Special Pages'
}
]
};
Text above can be found here (edit)