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:
#panel {
color: #ffffff;
font-size: 12px;
background-image: url("topbackground.xpm");
}
You can make the top panel transparent by making your panel { look like this:
#panel {
color: #ffffff;
font-size: 12px;
background-color: rgba(0,0,0,0.20);
}
"0.20" can be adjusted to increase or decrease transparency. Thank you to sawrub for pointing that out.
4. Change the font used on the panel
To change the font used on the panel, look for .panel-button {
Underneath it is your options. I left the padding and border-radius alone, but I did change the font. Now the function looks like this:
.panel-button {
padding: 4px 12px 3px;
border-radius: 5px;
font: 12px trebuchet ms;
}
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:
.section-header {
border: 1px solid #AAABBA;
background-gradient-direction: vertical;
background-gradient-start: rgba(29,40,59,0.9;
background-gradient-end: #000000;
font-weight: bold;
font-size: 12px;
}
6. Change the background of the menu area (behind Places, Recent Documents, etc.)
Find #dash {
You can either change the gradient around, or make your own custom image (just like you did for the top panel). Mine looks like this:
#dash {
color: #FFFFFF;
background-image: url("background.jpg");
padding: 0px 14px;
}
7. Change the appearance of the Applications and Recent Documents menu...
Find .dash-pane {
Alter the background-color, or put in your own image. I personally use a nice dark color, then give it transparency for that sexy look. Here is what mine looks like:
.dash-pane {
background-color: rgba(52,56,106,0.45);
border: 1px solid #FFFFFF;
padding: 4px;
spacing: 4px;
}
8. Alter the size of the icons...
You can change the size of the icons by altering the following:
.app-menu-icon {
width: 24px;
height: 24px;
}
9. Comments/Suggestions
I realize this is a very basic guide, so feel free to correct me if I'm wrong or throw out any suggestions. Just thought this would make it a bit easier.
10. Updates
1. Updated info about restarting Gnome Shell.
2. Added method to make top panel transparent, given by sawrub.
Bookmarks