Hi Gamepedia users and contributors! Please complete this survey to help us learn how to better meet your needs in the future. We have one for editors and readers. This should only take about 7 minutes!

Styling the sidebar

From Gamepedia Help Wiki
Jump to: navigation, search

The page provides a guide to styling the wiki sidebar and logo area. Some wikis may wish to 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[edit | edit source]

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[edit | edit source]

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;
}