Page 1 of 2 12 LastLast
Results 1 to 10 of 20

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

  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 Development Release

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

    Approved to T&T.
    | My old and mostly abandoned blog |
    Linux user #413984 ; Ubuntu user #178
    J'aime les fraises.
    Nighty night me lovelies!

    | Reinstalling Ubuntu ? Please check this bug first ! |
    | Using a ppa ? Please install ppa-purge from universe, you may need it should you want to revert packages back |
    | No support requests by PM, thanks |

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

  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 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

  8. #8
    Join Date
    Feb 2007
    Location
    Sydney, Australia
    Beans
    654
    Distro
    Ubuntu 10.04 Lucid Lynx

    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.
    Attached Images Attached Images
    Last edited by labinnsw; September 26th, 2010 at 04:15 PM.

  9. #9
    Join Date
    Apr 2008
    Beans
    22

    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?

  10. #10
    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 labinnsw View Post
    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.

Page 1 of 2 12 LastLast

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
  •