HOW-TO: Easily alter the appearance of Gnome Shell (Beginners)

I spent a few hours figuring out what to edit last night, and I thought I'd post what I learned for the other noobs like me, that way they can customize it easily and in less time.

1. Open gnome-shell.css with gedit

Open a terminal and type: sudo gedit /usr/share/gnome-shell/theme/gnome-shell.css

2. Get comfortable reloading GNOME Shell to test your work.

To do this, just type this in terminal: gnome-shell --replace

You will need to do this before you can see any of the changes you've made to the Shell.

Another way of doing this, as mentioned by jjcv, is to press ALT + F2, and enter "restart" into the popup.

A third way of doing this, and probably the most efficient way, was suggested by Ferreter007. Press ALT+F2, then type "rt" to restart your theme, not the entire gnome-shell.

3. Edit the top panel.

The top panel can be edited to look however you want. You can use a gradient or a background image, although the background image has to be scaled to the appropriate size or it won't display properly. You can also make it variably transparent.

Simply look for panel { in gnome-shell.css, and underneath it, there are a number of options. The first is the direction of the gradient, if any. Default is vertical, but it can be done horizontally as well. The other options are background-gradient-start and background-gradient-end. Simply alter these colors to reflect how you want the gradient to look. Go here for some basic HTML color codes.

The other option, as mentioned, is a background image. To set this up, erase all the code dealing with the gradient, and call a background-image up. It should now look like this:

Since I found the font on the default theme to be a little too large in general, I took a look through the rest of the panel functions, and changed text sizes down to 12 or 10 px, when they were 14 or 16 px before.

5. Edit the appearance of the Application, Recent Document and Places buttons in Overview

To edit the appearance of these buttons, look for: .section-header {

You can set the gradient that appears on the buttons in this function. Mine looks like this:

Re: HOW-TO: Easily alter the appearance of Gnome Shell (Beginners)

This is good. I was about to do something like this but not as complete. This still leaves a black background in the desktop selection view. I was trying to find out how to change that when I came across this.

I have viewed some other solutions, (see link in my signature) but they don't work for me. When I follow those instructions, gnome-shell won't start.

I am on a 64bit Lucid. I uninstalled xulrunner and installed older .debs of xulrunner and libgjs0.

Re: HOW-TO: Easily alter the appearance of Gnome Shell (Beginners)

Well I have changed a theme, Ambiance GNOME Shell Theme, I believe from half-left, and the only thing left is, How do you change the text color of APPLICATIONS, PLACES & DEVICES and RECENT ITEMS. Now by that I mean, the actual text, not the buttons.
I have looked high and low in the gnome-shell.css and was unable to make that change.
Any ideas?

Re: HOW-TO: Easily alter the appearance of Gnome Shell (Beginners)

Originally Posted by labinnsw

This is good. I was about to do something like this but not as complete. This still leaves a black background in the desktop selection view. I was trying to find out how to change that when I came across this.

I have viewed some other solutions, (see link in my signature) but they don't work for me. When I follow those instructions, gnome-shell won't start.

I am on a 64bit Lucid. I uninstalled xulrunner and installed older .debs of xulrunner and libgjs0.

Are you running the latest gnome-shell, or the one from the official Ubuntu repository? If you are running the latest one, I changed the color of that area by altering .overview { in gnome-shell.css. Mine is now transparent, and it looks like this:

.overview {
background-color: rgba(0,0,0,0.20);
}

Let me know if this solves your problem, and if so, I'll add it to the tutorial.