Last Updated: February 25, 2016
·
1.409K
· nikolowry

GNOME Shell CSS Reset

One of the first things done by a front-end web developer is to apply a CSS reset before styling. Why? Because it provides the developer ultimate control in positioning and spacing the dom's elements.

GNOME Shell theming should be no different, so here's a reset for all future themers. I don't know if the Shell theme inherits the default theme or not(will need to investigate). Regardless, it'd also be nice to add a blank boilerplate of all the Shell styling classes. It would hopefully discourage future themers from just copying and pasting the default theme and tweaking, which would then ultimately produce more creativity in themes.

Note: I just started this for an extension I was writing and will add a panel color reset as well in the future. In the meantime, you can reset all spacing in the panel with the code below.

/* =Reset all prior spacing for easier theming 
---------------------------------------------------- */
#panel *,
#panel #panelLeft, 
#panel #panelCenter, 
#panel #panelRight,
#panel .panel-button, 
#panel .panel-button *,
#panel .label{
    -natural-hpadding: 0;
    -minimum-hpadding: 0;
    spacing: 0;
    /*to ensure overriding any previous padding*/
    padding-top:0;
    padding-bottom:0;
    padding-left:0;
    padding-right:0;
    width:auto;
  }

 #panel .panel-button .unicode-arrow{
     /* Uncomment if you wanted arrows hidden
      font-size:0; */
  }

 #panel .panel-button .system-status-icon{
      /* Example of 5px spacing to the right of each aggregate 
      menu icon
      padding:0px 5px 0px 0px;*/
      spacing:0px;
     -natural-hpadding: 0px;
     -minimum-hpadding: 0px;
 }

  #panel .panel-button .system-status-icon:last-child{
     /* Example to override the last aggregate menu icon. The padding 
     will then be handeled by the Panel button
     padding:0;*/
 }