Styling the VectorTabs

The VectorTabs are the tab-like navigation in the header of each wiki, including the "page", "discussion", "view", "edit", and "history" links, the "share" and "more" dropdown menus, and the search bar. It is one of the most important elements of wiki navigation as it provides the link for users to edit pages.

Styling the VectorTabs can be challenging because they are made up of many different elements, so this is a guide to styling them.

Selector guide

Header area, VectorTabs, and VectorMenu

Selector	Description	Recommendations
div#mw-page-base	Empty header element that influences top position of sidebar and content.	This is one available option for a background for the header. Useful if the desired background size will be different than that of #mw-head. Adjusting height, vertical margins, or vertical padding will adjust top position of sidebar and content.
div#mw-head-base	Empty header element that influences top position of sidebar and content.	Set display: none; and add extra height to #mw-page-base to avoid inconsistent vertical positioning of sidebar and content between browsers. Important if you need pixel-perfect positioning.
div#mw-head	Actual container for the page navigation bar.	This is not in normal flow and won't affect content or sidebar position. It's easiest to set this to the same height as #mw-page-base, but margins or positioning can be used if border, backgrounds, or other effects are desired around the entire page actions bar. If using non-standard content width, you'll probably need to set a width on this to match. In some cases, this may require a combination of positioning, margins, padding, and/or width to achieve the correct effect.
#left-navigation	Links for the content and talk page.	Position is relative to #mw-head. Use top and left to adjust position. left will usually be set to the width of the sidebar or greater, unless you choose to adjust #mw-head's position or margins instead (useful for certain effects).
#right-navigation	Container for page actions links and search controls.	Adjust position using margins.
div.vectorTabs	Containers for: the content and talk page links; and the view, edit, and history links.	Be careful when making adjustments to margins, paddings, or font sizes in these elements, as they may end up overlapping when the browser window is narrow. The Vector extension adds JavaScript that can move links into the hover menu when there isn't enough width, but it does not consider margins or padding. Any desired padding should be applied to div.VectorTabs span instead to preserve full function of the collapse script. Has a background by default. You'll likely need to remove or override it.
div.vectorTabs li	An outer container for a single page tab link.	Has a background by default. You'll likely need to remove or override it.
div.vectorTabs li.selected	An outer container for a selected single page tab link.	Has a background by default. You'll likely need to remove or override it.
div.vectorTabs li span	An inner container for a single page tab link.	Has a background by default. You'll likely need to remove or override it.
div.vectorTabs li span a	A page tab link.	Has height set in relative units. This may need to be changed to absolute units depending on height of the header.
div.vectorTabs li.new span a	A page tab link for a page that doesn't exist.
div.vectorMenu	Container for the hover menu tabs in the top bar.	If the height for the tab links has been adjusted, height here should generally be adjusted to match.
div.vectorMenu h3 span::after	Element that generates the arrow in the hover menus.	The arrow is created using a background image, so the appearance of the arrow can be changed by using a different arrow image as the background image.
div.vectorMenu div.menu	Container for the hover menu (only the part that appears when hovering over the arrow).	If the height of the hover menu tabs have been adjusted, it may be necessary to adjust the menu's position with left and top so there is no gap between the tab and the menu. If the menu is closing while the mouse cursor is still over it, you may need to increase the z-index. A really high value like 3000 gives you plenty of room to adjust z-index elsewhere if you so desire.
div#p-sharing	Container for the share hover menu tab.
div#p-sharing div#socialIconImages	Container for the sharing icons inside the share hover menu.
div#p-sharing div#socialIconImages a	The individual sharing icons inside the share hover menu.
div#p-cactions	Container for the hover menu tab with the page actions (such as delete).
div#p-cactions div.menu ul li a	A link in the hover menu.	Spacing between the links can be adjusted with vertical padding or margins.
.vectorTabs #ca-watch.icon a	The watch button.	The appearance of the star can be changed by changing the background image of this element.
.vectorTabs #ca-unwatch.icon a	The unwatch button.	The appearance of the star can be changed by changing the background image of this element.

Search box and search suggestions

Selector	Description	Recommendations
#p-search	Outer container for the search box and buttons.
#p-search form	Inner container for the search box and buttons.	If trying to adjust the vertical position of the search box and buttons, start by adjusting line-height. This can help improve positioning across browsers due to line-height's vertical centering effect. It is sometimes helpful to make div.vectorTabs taller, move #left-navigation and #right-navigation up by the same amount, add that amount of top margin to the actual tabs, and allow #p-search to be the same height as div.vectorTabs without any vertical margins or padding. This is helpful if you'd prefer larger font sizes to expand the search box up rather than down.
div#simpleSearch #searchInput	The search box.	Useful if you want the search box to have a different appearance than other textboxes. Otherwise, it's best to leave it alone.
div#simpleSearch #searchInput::placeholder	The placeholder text ("Search Gamepedia Help Wiki") inside the search box.	This selector can be used to adjust the font and color of the placeholder text.
#simpleSearch #searchButton	The magnifying glass search button.	Useful if you want the search buttons to have a different appearance than other buttons. Otherwise, it's best to leave this alone.
.suggestions	The search suggestions popup box.	This probably does not need any styling. If you wish to change the background or borders of the search suggestions list, use .mediawiki .suggestions-results instead.
.mediawiki .suggestions-results	The list of search suggestions.
.suggestions a.mw-searchSuggest-link, .suggestions a.mw-searchSuggest-link:hover, .suggestions a.mw-searchSuggest-link:active, .suggestions a.mw-searchSuggest-link:focus	A single search suggestion item and its various link states.	Font color is black by default, so the color may need to be changed for dark-theme wikis.
.mediawiki .suggestions-result	The inner container of each search suggestion item.	Has a background color set by default. If you're styling search suggestions, you'll probably need to override it.
.mediawiki .suggestions-result-current	The highlighted single search suggestion item.	The highlight is applied with a background color that can be changed to change the highlighting color. Has a set font color that may need to be changed if the highlight color is changed.
.mediawiki .suggestions-result .highlight	The highlighted letters in the search suggestion to show where the search string matches the results' page titles.

Sample CSS

The following is sample code for some simple foolproof styles for the VectorTabs and search box. You may wish to change the colors in the CSS to match your wiki theme.

/**** VECTOR TABS & VECTOR MENU ****/
/* reset default background and make font size uniform */
#p-search,
div.vectorMenu,
div.vectorTabs {
	background: transparent;
	font-size: 80%;
}

/* sizing and font styles for non-active tabs */
div#mw-head div.vectorMenu h3 span,
div#mw-head div.vectorTabs span a {
	font-weight: bold;
	text-transform: uppercase;
	color: #af6de8;
	height: 1em;
	padding: 0;
	font-size: 100%;
}

/* allow space for the vectormenu arrows */
div#mw-head div.vectorMenu h3 span {
	padding-right: 16px;
	vertical-align: top;
}

div#mw-head div.vectorMenu h3 span:after {
	top: 0;
}

/* padding/sizing and aesthetic styles for the background of the tabs */
div#mw-head div.vectorMenu h3,
div#mw-head div.vectorTabs ul li span {
	background: #000;
	border-radius: 2px;
	padding: 0.5em;
	margin: 0 0.25em;
	height: 1em;
	line-height: 1;
	overflow: visible;
}

/* styles for the currently selected tab and on-hover dropdown menus */
div#mw-head div.vectorMenu:hover h3 span,
div#mw-navigation div.vectorMenu div.menu li a,
div#pageWrapper div#mw-navigation li.selected a {
	color: #fff;
}

div#mw-head div.vectorMenu:hover h3,
div#mw-head div.vectorTabs ul li.selected span,
div.vectorMenu div.menu {
	background: #777;
}

/* clear border-radius on the bottom of the dropdown menu on hover */
div#mw-head div.vectorMenu:hover h3 {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

/* reset backgrounds on various parts of the dropdown menu to allow custom styles to show */
div.vectorMenu:hover ul,
div.vectorTabs ul,
div.vectorTabs ul li,
div.vectorTabs ul li.selected {
	background: transparent;
}

/* position the dropdown menu to properly align with the bottom of the tabs */
div.vectorMenu div.menu {
	top: 2em;
	border: 0;
	padding: 0.25em;
}

/* clean up links in dropdown menu */
div#mw-navigation div.vectorMenu div.menu li a {
	padding: 0.3em;
	font-size: 90%;
	display: block;
	height: auto;
	margin: auto;
}

/* style watch button to fit inside tabs */
div#mw-head #p-views #ca-unwatch.icon a,
div#mw-head #p-views #ca-watch.icon a {
	background-size: 1.5em;
	height: 0;
	margin: -0.25em 0;
	padding-top: 1.5em;
	background-position: center center;
}

/**** SEARCH BOX ****/
/* match spacing around the search box to match the other tabs */
#p-search {
	margin: 0 1.25em 0 0.25em;
}

#p-search form {
	margin: 0;
}

/* sizing and aesthetic styles for searchbox */
div#simpleSearch {
	background: #000;
	height: 2em;
	border: 0;
	margin: 0;
	padding-left: 0.5em;
}

/* sizing and aesthetic styles for search input */
div#simpleSearch #searchInput {
	color: #fff;
	padding: 0.5em 0;
	height: 1em;
	box-sizing: content-box;
	text-overflow: ellipsis;
}

/* styling for the search placeholder text */
div#simpleSearch #searchInput::placeholder {
	color: #ddd;
	opacity: 0.7;
	font-style: italic;
}

/**** SEARCH SUGGESTIONS ****/
/* position the suggestions menu to properly align with the bottom of the searchbox */
.mediawiki .suggestions {
	margin-top: -2.5em;
}

/* reset default background colors to allow custom styles to show */
.mediawiki .suggestions a,
.mediawiki .suggestions-result {
	background: transparent;
}

/* background, border, and text color for the suggestions box */
.mediawiki .suggestions-results,
.mediawiki .suggestions-special {
	background: #000;
}

.mediawiki .suggestions-results,
.mediawiki .suggestions-special {
	border-color: #303030;
}

.suggestions a.mw-searchSuggest-link,
.suggestions a.mw-searchSuggest-link:active,
.suggestions a.mw-searchSuggest-link:focus,
.suggestions a.mw-searchSuggest-link:hover,
.suggestions-result,
.suggestions-special .special-label,
.suggestions-special .special-query {
	color: #fff;
}

/* background and text color for hover-highlighted suggestion */
.mediawiki .suggestions-result-current,
.mediawiki .suggestions-result-current .special-label,
.mediawiki .suggestions-result-current .special-query {
	background: #303030;
	color: #fff;
}

/* highlight color for matched characters in search suggestions */
.mediawiki .suggestions-result .highlight {
	color: #af6de8;
}

Result