How to style side panels?

Last modified by Thomas Mortagne on 2023/10/10

If you want customize sides panels of xwiki you can add and use a StyleSheet Extension (SSX) xobject (i.e. XWiki.StyleSheetExtension) to any wiki page of your choosing (you can create a new page just for this for example).

First you must looking for CSS class and or id to target the CSS element.
In our case the first top right panel, to change his background color.
For this task you can use Firebug tool (or inspect menu from your favorite internet browser).
When we inspect the target panel, we can see: id="rightPanels" > class="panel" > class="xwikipanelcontents" or if you want target Quick links panel: id="rightPanels" > class="QuickLinks" > class="xwikipanelcontents"

Second, you must fill your StyleSheet Extension (SSX) object with the following content:

#rightPanels>.panel:nth-child(1) .xwikipanelcontents {
 background-color: pink;
}

#rightPanels>.QuickLinks .xwikipanelcontents {
 background-color: lightblue;
}

and select Use this extension: "for current xwiki" and content type: "CSS"

Tags:
   

Get Connected