Gnome-shell theme tutorial (part2)

In the previous tutorial we have learned about the basics of the gnome-shell theme. In this tutorial lets us learn some more tweaks. First we'll start by changing the popup background color.

change the popup background color

The popup in a gnome-shell is the box you get when you click on calendar, sound icon, network icon and user name in panel. To change the background color of the the popup items, look for this section of the code in the mytheme css file that we have worked on in our previous tutorial.


/* PopupMenu */

.popup-menu-boxpointer {
-arrow-border-radius: 8px;
-arrow-background-color: rgba(0,0,0,0.9)
-arrow-border-width: 2px;
-arrow-border-color: #a5a5a5;
-arrow-base: 24px;
-arrow-rise: 11px;


Now to change the background color of the popup change -arrow-background-color: rgba(0,0,0,0.9); to #f5f3f0; and save the file. press Alt+F2 and in the run dialog type r and hit enter to restart the theme.

click on the calender, username, sound, network icon to see the new background color.

change the user menu items/popup menu items

pic1

pic2

Lets tweak further and make some changes to the default user menu items . The first pic shows the default user menu that appears when you click on the user name at the top right of the panel. First lets starts with the user name. In the default theme the user name is in white. To change this to look like the color in the second pic, look for this section of code.

.status-chooser-user-name {
font-weight: bold;
font-size: 1.3em;
min-width: 120pt;
}

add the line color: #ba1a81; to make it look it like this

.status-chooser-user-name {
font-weight: bold;
font-size: 1.3em;
min-width: 120pt;
color: #ba1a81;
}

This will turn the color of the user name to the color shown in pic 2


Restart the gnome-shell by pressing Alt+F2 and typing 'r' without quotes in the dialog box and hit enter. Remember to restart the gnome-shell every time you make changes to the theme.

popup menu color

The default color is white and let us change this to the color like in second pic.

for this look for this section of code in the mytheme css file.


.popup-menu {
min-width: 200px;
}

add the line color: #3a3f77; to make this look like this:

.popup-menu {
min-width: 200px;
color: #3a3f77;
}

and restart the gnome-shell. and click on the username to the changes

Change the background color of the active menu item.

Now lets us change the background color of the active menu item. In the default theme, the background color of the active menu item is gray. we'll change this to the color in the pic 2.

To do this look for this piece of code:

.popup-menu-item:active {
background-color: #c5ac87;
}

and add the line background-color: #c5ac87; and if you want to the current item to be in bold add this statement font-weight: bold; to make it look like this:


.popup-menu-item:active {
background-color: #c5ac87;
font-weight: bold;
}


Now restart the gnome-shell and click on the user name and hove the mouse of the user menu item to see the changes.


Catch you in the next tutorial with more hacks.. :) :)

Gnome-shell theme tutorial (part1)

Previously I wrote a small article on getting started with cinnamon theme. Cinnamon is a desktop environment used in Linux mint OS. Cinnamon desktop is a fork of gnome 3. Linux mint people have tweaked gnome 3 shell and made cinnamon desktop environment. Since cinnamon is based on gnome 3, if you know how to create a gnome shell theme you can easily create a cinnamon theme and vice-versa.

As gnome 3 is widely used desktop environment and very popular, I decided to write an article on Gnome 3 shell theme so that it can be useful to both cinnamon and gnome 3 shell theme designers.

To find the version of Gnome-shell on your Linux box type the following command in a terminal:
gnome-shell --version
This will print the version as follows depending on the version
GNOME Shell 3.4.1

The gnome 3 comes with a default shell theme activated. This theme can be found at the location /usr/share/gnome-shell/theme 

As you can see in the pic above the theme comprises some svg, png images and the gnome-shell.css file. We can create a good looking themes by just editing these svg, png images and gnome-shell.css file. As the theme is mainly made up of images and the css file. These tools may be help you to speed up the design.

GIMP---image manipulation program
cssd---advanced CSS editor
inkspace-- advanced scaled vector graphics editor to create and edit svg images
geany-- A light weight Integrated development environment (IDE)

These packages are available for all  major Linux distributions

If we want to add and load our own themes, we must first install the gnome-tweak tool. check your distribution's package manager for gnome-tweak tool and install gnome-tweak tool.

After this we need to install the gnome user theme extension that allows to install the themes from the user directory. For this just visit the website https://extensions.gnome.org/extension/19/user-themes/ on firefox browser  and slide the button to on position  This will show you a dialog to install. click on install.

Now open the advanced settings applet from the settings menu and enable the user themes extension.

Now we are ready to make our own theme. First we'll copy the default theme and tweak it to create our own theme.


The user themes are installed in /home/USERNAME/.themes directory. The .themes directory is hidden by default in the home directory. Press Ctrl+H to view the .themes directory.
Now open the .themes directory and:
1) create a new directory with the name mytheme. This my is the unique identifier for your theme.
2) open the mytheme directory and create another directory and name it as gnome-shell
3) copy the contents of the default theme from /usr/share/gnome-shell/theme to the gnome-shell directory created in step 2


Now the default theme is copied which will serve as a template. Now the mytheme directory structure look like this:
/home/USERNAME/.themes/mytheme/gnome-shell where USERNAME is the user directory on the system.

The gnome-shell directory will contain all the png,svg and css which form the gnome-shell theme. Now open the advanced settings applet select the the shell theme as mytheme

In case if the advanced settings applet didn't open and freezes as happned on my Ubuntu 12.04, refer this post http://www.fandigital.com/2012/09/fix-user-themes-gnome-shell-extension.html

Now navigate to /home/USERNAME/.themes/mytheme/gnome-shell and open the gnome-shell.css file with your favorite text editor. The file is neatly coded and well documented.

First we'll edit the top panel background color. To do this search for this block of code

/* Panel */

#panel {
background-color: black;
font-weight: bold;
height: 1.86em;
}

 To change the panel's background color, replace the background-color: black with background-color: #a52a2a and save the file.

Press Alt+F2 and in the dialog that opens type 'r' without quotes and hit enter to restart the shell. The shell will restart with the new panel background.


Hope you enjoyed this hack. :) :)