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.. :) :)