watch 01:25
Jurassic World: Dominion Dominates Fandom Wikis - The Loop
Do you like this video?
Play Sound
|
Contents
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 .
|
|
#p-logo a
|
The logo link, containing the logo as a background. |
|
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. |
|
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. |
|
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;
}