Styling the sidebar

The page provides a guide to styling the wiki sidebar and logo area. Some wikis may wish to re-style this area page to better match the wiki's skin.

An important note about styling the sidebar is the fact that it must be styled for both the collapsible and uncollapsible sidebar settings. The setting can be changed by going to your preferences and toggling the "Enable collapsing of items in the sidebar in Vector skin" setting. Both modes come with different default styles that may need to be changed separately.

Selector guide

Selector	Description	Recommendations
div#mw-panel	The whole sidebar, including the logo.
#p-logo	Container for the logo link. Located at top of div#mw-panel.	Set to same width and height as logo image. Reposition using top and left.
#p-logo a	The logo link, containing the logo as a background.	Set to same width and height as logo image.
div#mw-panel div.portal	Container for section of sidebar links.
div#mw-panel div.portal h3	Header for each list of links in the sidebar.
.skin-hydradark #mw-panel.collapsible-nav .portal h3	The header for each list of links in the sidebar when the list is open in the collapsible sidebar mode.
.skin-hydradark #mw-panel.collapsible-nav .portal.collapsed h3	The header for each list of links in the sidebar when the list is closed in the collapsible sidebar mode.
.mediawiki div#mw-panel div.portal div.body, #mw-panel.collapsible-nav .portal .body	Container for each list of links in the sidebar, not including the header.
div#mw-panel div.portal div.body ul li, #mw-panel.collapsible-nav .portal .body ul li	The container for each individual link in the sidebar.
div#mw-panel div.portal div.body ul li a	Each actual inner link in the sidebar.	Use this selector to change the text color of the sidebar links.
div#mw-panel div#p-socialProfiles	The "portal" for the social icons in the sidebar.
div#mw-panel div#p-socialProfiles h3	The heading for the social portal, normally empty.	Setting display: none is recommended.
div.socialSidebar	A container around the social icons.
div.socialLink	The individual social links.

Sample CSS

Finished result

The following is sample code for a simple recolor of the sidebar that works on both collapsible and collapsed sidebar modes. You may wish to change the colors in the CSS to match your wiki theme.

/**** SIDEBAR ****/
/* style the background of the sidebar section headers */
.mediawiki div#mw-panel div.portal h3 {
	font-size: 80%;
	padding: 0.5em;
	background-color: #777;
	border-radius: 2px;
}

/* text styles for sidebar headers */
.mediawiki div#mw-panel div.portal h3,
div#pageWrapper div#mw-panel h3 a {
	text-transform: uppercase;
	font-weight: bold;
	color: #fff;
}

/* remove underline on hover of collapsed sidebar headers */
#mw-panel.collapsible-nav .portal.collapsed h3:hover {
	text-decoration: none;
}

/* switch arrow image on collapsible sidebar headers */
.mediawiki div#mw-panel.collapsible-nav div.portal h3 {
	padding-left:calc(16px + 0.5em);
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E %3Cpath d=%22M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22 fill=%22%23fff%22/%3E %3C/svg%3E");
	background-position: 0.5em center;
}

/* switch arrow image for collapsed headers */
.mediawiki #mw-panel.collapsible-nav .portal.collapsed h3 {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E %3Cpath d=%22M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22 transform=%22rotate(-90 6 6)%22 fill=%22%23fff%22/%3E %3C/svg%3E");
}

/* reset some default styles on sidebar sections */
#mw-panel.collapsible-nav .portal .body,
.mediawiki div#mw-panel div.portal div.body {
	background: transparent;
	margin-left: 0;
}

#mw-panel.collapsible-nav .portal .body ul,
div#mw-panel div.portal div.body ul {
	padding-top: 0;
}

/* style the background of the sidebar links */
#mw-panel.collapsible-nav .portal .body ul li,
div#mw-panel div.portal div.body ul li {
	padding: 0.35em 0.5em;
	margin: 0.25em 0;
	background: #000;
	border-radius: 2px;
}

/* text styles for sidebar links */
.mediawiki div#mw-panel div.portal div.body ul li a,
div#mw-panel.collapsible-nav div.portal div.body ul li a {
	color: #af6de8;
}

/* misc cleanups for social button section */
div#mw-panel div.portal#p-socialProfiles h3 {
	display: none;
}

.socialSidebar {
	width: 100%;
}

div#mw-panel.collapsible-nav div.portal#p-socialProfiles {
	margin: 0.25em;
}