Results 1 to 10 of 143

Thread: A Beginner "How To" for gtkrc themes.

Threaded View

  1. #11
    Join Date
    Jan 2006
    Beans
    1,352

    Re: A Beginner "How To" for gtkrc themes.

    This is my newest:



    ---these are some of my new changes that I use now---


    Go to your theme's gtkrc (the file inside of /usr/share/themes/Xfce-theme_name/gtk-2.0)


    In the style "default" section, I make sure my x and y thickness = 0, so I have no dividing lines and so my calendar looks better

    Code:
    xthickness = 0
    ythickness = 0
    then to fix the gradient box fill, this is what I do:

    Code:
        engine "xfce"
        {
            grip_style = slide
            smooth_edge = true
    	boxfill
            {
                fill_style = gradient
                orientation = vertical
                shade_start = 1.10 
                shade_end = 1.00
            }
        }
    }
     
    widget_class "*" style "default"
    This is the widget_class "*" style "default" part at the very top underneath the hex color codes for the default style.

    The "shade_start = 1.10" is the top of the toolbar, "1.10" is lighter than "1.00" (the "bg[NORMAL]" hex code color), and the "shade_end = 1.00" is the bottom of the toolbar, where the Firefox tab-bar starts. Having it at "1.00" will make it fade evenly into the rest of the app that is using the "bg[NORMAL]" color.

    Now...for the menubar, you go to this part of your gtkrc:

    Code:
    style "menubar" = "colored"
    {
        xthickness = 1
        ythickness = 0
    
        engine "xfce" 
        {
            smooth_edge = true
            grip_style = slide
            boxfill
            {
                
                fill_style = gradient
                orientation = vertical
                shade_start = 1.20
                shade_end = 1.10
            }
        }
    }
    
    widget_class "*BonoboDockItem"     style "menubar"
    class "*BonoboDockItem"            style "menubar"
    widget_class "*HandleBox"          style "menubar"
    class "*HandleBox"                 style "menubar"
    widget_class "*ToolBar"            style "menubar"
    class "*ToolBar"                   style "menubar"
    widget_class "*MenuBar"            style "menubar"
    class "*MenuBar"                   style "menubar"
    ...and you make the "shade_end = 1.10" (which is the bottom of the menubar),to match the top of your toolbar that was "1.10" also...

    then you make the "shade_start = 1.20" which is the top of the menu bar.

    Now...the most important number of those 4 is the toolbar's "shade_end = 1.00", because that makes everything smooth...you can either theme lighter or darker by going up to "1.10" or darker to "0.90".

    ...you have to mess with the numbers a bit to get it perfect.

    ....This works properly for all apps except Firefox, AbiWord, and Gnumeric SpreadSheet...

    AbiWord and Gnumeric still look good, it's just not as smooth as the rest of my apps in xubuntu...

    For Firefox 2.0.0.4, I now use a userChrome.css to add a new tab-bar image. That fixes the ugly Firefox gradient tab-bar. I do it the exact size so everything like the tabs work perfectly.

    ... for the Firefox userChrome.css, I add this part onto my userChrome.css in my /home/name/.mozilla/firefox/profile.default/chrome folder --- I also add the tabstrip.png image in that same directory.

    Code:
    #browser tabs {
        -moz-appearance: none !important;
        background-color: none !important;
        background: url("tabstrip-10.png") repeat-x top !important;
        height: 25px;
        padding: 0px;
        border: 0px;
        margin: 0px;
        }


    Next up is the icons, they are from the old Firefox 1.5 theme named "Glassier", and they have been substituted into the /usr/lib/firefox/chrome/classic/skin/classic/browser folder....it is the Toolbar.png
    I had to fix them in GIMP to work for Firefox2 since it was an old theme...I also made them a lighter blue in GIMP. You can use any icons that are 24x24 pixels, and in the correct order and number of the default Toolbar.png icons, the whole image should be in the order below and this exact size: 336x120





    My bottom panel was made in the GIMP, and I used a .gtkrc-2.0 file to make it. This is the one that I use now, and I have it in my /home/name directory:

    Code:
    style "panel"
    {
      bg[NORMAL] = "#E9B9D3"
      bg_pixmap[NORMAL] = "panel89.png"
      fg[NORMAL] = "#000000"
      }
    
    widget_class "*Panel*"      style "panel"
    widget "*Panel*"            style "panel"
    class "*Panel*"             style "panel"

    For Thunderbird2, I use userChrome.css to add new icons, change the text-color of unread messages, and selected unread messages, and I even add a nice little menu bar image....

    For the icons, they must be in the correct order of the mail-toolbar.png and must be in this same order below:



    The default size is 24x24 pixels, and the whole mail-toolbar.png image is 408x72 pixels

    For my current theme I use a scaled down, and re-ordered "AquaBird Redone" by Bodizzle

    This is my Thunderbird2 userChrome.css, it's located in my /profile.default/chrome, (mine is in this directory: /home/name/.thunderbird/l6hw7hh0.default/chrome ....yours might be in a different place):

    Code:
    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
    
    /* Change the text color of unread messages to
    * any color of your liking - just change the hex value shown here. */
    treechildren::-moz-tree-cell-text(unread) {
    color: #F0F2E7 !important;
    }
    
    
    /* Change the text color of selected unread messages to
    * any color of your liking - just change the hex value shown here. */
    treechildren::-moz-tree-cell-text(unread, selected) {
    color: #000000 !important;
    }
    
    /* Use a background image for the toolbars:
    (Substitute your image file for background.gif) */
    
    /* Add a menubar image */
    menubar{
    background-image: url("bluefawnNEW-sm.png") !important;
    background-color: none !important;
    }
    
    /*toolbar icons*/
    .toolbarbutton-1 {
      -moz-box-orient: vertical;
      list-style-image: url("mail-toolbar.png") !important;
    }

    ...That's it...as well as a GIMP made touch-up of a !!!Dalek!!! picture for my Terminal so it would blend into my Gradient gtk-2.0 theme. What I do is to create a gradient color layer and match it to my bg[NORMAL] color that is the color that the gradient toolbar uses at "1.00"
    Last edited by crimesaucer; June 15th, 2007 at 09:42 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
  •