Results 1 to 10 of 20

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

Hybrid View

  1. #1
    Join Date
    May 2010
    Location
    London, Ontario
    Beans
    16
    Distro
    Ubuntu 11.04 Natty Narwhal

    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:

    #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.
    Last edited by JustinBenner; April 12th, 2012 at 02:55 AM.

  2. #2
    Join Date
    Sep 2006
    Location
    France.
    Beans
    Hidden!
    Distro
    Lubuntu 14.04 Trusty Tahr

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

    Approved to T&T.

  3. #3
    Join Date
    May 2010
    Location
    London, Ontario
    Beans
    16
    Distro
    Ubuntu 11.04 Natty Narwhal

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

    Has anyone found to make the panel and dash totally transparent, even when you are in Activities mode?

  4. #4
    Join Date
    Nov 2006
    Location
    Sweden
    Beans
    2,594
    Distro
    Ubuntu Development Release

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

    Thanks for the howto, very helpful !

    How do I change icon sizes ??

  5. #5
    Join Date
    Dec 2005
    Location
    New Zealand
    Beans
    132
    Distro
    Ubuntu Development Release

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

    When in gnome-shell you can type:

    Alt-F2 and enter restart

    which will restart your shell (re-reading your gnome-shell.css)

  6. #6
    Join Date
    May 2010
    Location
    London, Ontario
    Beans
    16
    Distro
    Ubuntu 11.04 Natty Narwhal

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

    Quote Originally Posted by jjcv View Post
    When in gnome-shell you can type:

    Alt-F2 and enter restart

    which will restart your shell (re-reading your gnome-shell.css)
    Thanks, I've added this to the Tutorial

  7. #7
    Join Date
    May 2010
    Location
    London, Ontario
    Beans
    16
    Distro
    Ubuntu 11.04 Natty Narwhal

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

    Quote Originally Posted by plun View Post
    Thanks for the howto, very helpful !

    How do I change icon sizes ??
    No problem, I am excited to get back into the Linux community a bit more, help out on what I can.

    You can change the icon sizes by altering the following:

    .app-menu-icon {
    width: 24px;
    height: 24px;
    }
    Last edited by JustinBenner; May 17th, 2010 at 06:54 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •