You Got A Question? Ask    GNOME Community!


HowTo Make Small Changes On Shell Stylesheets

First of all, GNOME doesn’t support Shell theming so you will need gnome-shell-extension-user-theme, which is written by Giovanni Campagna (GNOME dev) so it is okay to use this. For convenience is a good idea to also install Tweak Tool, which it will get you the user-theme extension as a dependency, plus it offers an easy way to switch themes.


3 Ways To Hack Shell Stylesheets

1. Directly

We can edit stylesheets directly from

/usr/share/gnome-shell/theme/*

This will require root permissions, plus we are going to lose our changes on every Shell update. Actually this is the only way to edit Shell stylesheet, as long as we haven’t user-theme extension.

Awful way, never do this!


2. Copy

Second way is to copy the Shell theme to ~/.themes folder and pick it from Tweak Tool. In this case we basically create a new Theme.


3. Overriding

Here, we are loading the default stylesheets and we override whatever we want to change. This is a very good way if we are going to make some small changes, or even if we are going to create a theme from scratch, since we can easily track our changes.

Plus we are always up-to-date with potential Shell theme changes (i.e updates).


Example

I’m going to demonstrate the 3rd way and do 3 simple things

  1. Add an image next to Activities
  2. Add transparency to top panel
  3. Remove corners from top panel (hate them!)

Before

shell-before

After

shell-after

It doesn’t matter if it is bad or good, it is just a demo. Win logo also fits to my fishy8 wallpaper :)


Make Small Changes On Shell Stylesheets

1. Create a directory to host the theme

Create the following structure. Obviously you can pick whatever name you want.

~/.themes/WinShell/gnome-shell/gnome-shell.css

2. Load Shell’s default theme

Edit gnome-shell.css and add:

@import url ("/usr/share/gnome-shell/theme/gnome-shell.css");

That will load Shell’s stylesheets. At this point open Tweak Tool and pick your new theme (WinShell) which it is identical to default.


3. Overriding Stylesheets

As it happens with DOM CSS, properties are draw in order. Properties on the end, override properties on the top.

The code is pretty explainable so nothing to comment on.

@import url ("/usr/share/gnome-shell/theme/gnome-shell.css");

#panelActivities {
  /* Image is in the same directory as gnome-shell.css */
  background-image: url("win.png");
  background-position: 77px 5px;
  width:130px;
}

#panel {
  height:40px;
  /*for  full transparency */
  background-color: transparent;
  /* or  30%*/
  background-color: rgba(0,0,0,0.3); 
}

.panel-corner {
  -panel-corner-radius: 0px;
}

You can easily change fonts, colors etc..


Tips

To apply the changes when you edit stylesheets, do not ( r )estart Shell. Just ( r )estart ( t )heme.

Alt+F2 + "rt"

You can load a theme from GSettings. This is a fast way to swap themes when you are testing

$ gsettings set org.gnome.shell.extensions.user-theme name "WinShell"

Back to default. Set whatever name

$ gsettings set org.gnome.shell.extensions.user-theme name "Back to default please"

Or just reset the key

$ gsettings reset org.gnome.shell.extensions.user-theme name

Use Looking Glass to inspect elements.

Alt+F2 + "lg"

looking-glass

Guide is made with GNOME 3.12.


 
  We can't watch comments unless G+ provides an API or if you send a notification, e.g +World Of Gnome
     Sometimes is better to place your questions on GNOME Community