Page 4 of 15 FirstFirst ... 2345614 ... LastLast
Results 31 to 40 of 143

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

  1. #31
    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.

  2. #32
    Join Date
    May 2007
    Beans
    202
    Distro
    Ubuntu 9.10 Karmic Koala

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

    hey crimesaucer............i was wondering if you could help me a bit with theming.......first i would want you to check out this mockup..... http://ubuntuforums.org/showthread.p...lugins...would you mind making one like that........just a request.........and i was wondering if you could tell me some thing about this...........

    #include "panel/panel.rc"

    style "clearlooks-default"
    {
    GtkButton ::default_border = { 0, 0, 0, 0 }
    GtkRange ::trough_border = 0
    GtkPaned ::handle_size = 6
    GtkRange ::slider_width = 15
    GtkRange ::stepper_size = 15

    GtkScrollbar ::min_slider_length = 30
    GtkCheckButton ::indicator_size = 14
    GtkMenuBar ::internal-padding = 0
    GtkTreeView ::expander_size = 14
    GtkExpander ::expander_size = 16
    GtkScale ::slider-length = 27
    #GtkToolbar ::button-relief = GTK_RELIEF_NORMAL
    #GtkMenuBar ::shadow-type = GTK_SHADOW_OUT
    #GtkScrollbar ::has-secondary-forward-stepper = 1
    #GtkScrollbar ::has-secondary-backward-stepper = 1

    GtkButton ::child-displacement-x = 1
    GtkButton ::child-displacement-y = 1

    GtkMenu ::horizontal_padding = 0
    GtkMenu ::vertical_padding = 0

    WnckTasklist ::fade-overlay-rect = 0

    xthickness = 1
    ythickness = 1


    fg[NORMAL] = @fg_color #"#000000" # black
    fg[PRELIGHT] = @fg_color #"#000000" # black
    fg[SELECTED] = @selected_fg_color #"#ffffff" # white
    fg[ACTIVE] = @fg_color #"#000000" # black
    fg[INSENSITIVE] = darker (@bg_color) #"#b5b3ac" # dark beige

    bg[NORMAL] = @bg_color # "#ede9e3"
    bg[PRELIGHT] = shade (1.02, @bg_color) #"#f9f7f3" # very light beige
    bg[SELECTED] = @selected_bg_color # "#5598d7" # deepsky
    bg[INSENSITIVE] = @bg_color # "#efebe5" # beige
    bg[ACTIVE] = shade (0.9, @bg_color) #"#dcd4c9" #"#d7d3ca" # dark beige

    base[NORMAL] = @base_color # "#ffffff" # white
    base[PRELIGHT] = shade (0.95, @bg_color) # "#5f8ec4" # dark beige
    base[ACTIVE] = shade (0.9, @selected_bg_color) # "#a69f91" # darker deepsky
    base[SELECTED] = @selected_bg_color # "#5598d7" # deepsky
    base[INSENSITIVE] = @bg_color # "#e8e5de" # beige

    text[NORMAL] = @text_color # "#000000" # black
    text[PRELIGHT] = @text_color # "#000000" # black
    text[ACTIVE] = @selected_fg_color # "#ffffff" # white
    text[SELECTED] = @selected_fg_color # "#ffffff" # white
    text[INSENSITIVE] = darker (@bg_color) # "#b5b3ac" # dark beige

    engine "clearlooks"
    {
    #scrollbar_color = "#76acde"
    menubarstyle = 2 # 0 = flat, 1 = sunken, 2 = flat gradient
    animation = TRUE
    style = GLOSSY
    }
    }


    style "clearlooks-wide" = "clearlooks-default"
    {
    xthickness = 2
    ythickness = 2
    }

    style "clearlooks-wider" = "clearlooks-default"
    {
    xthickness = 3
    ythickness = 3
    }

    style "clearlooks-button" = "clearlooks-wider"
    {
    bg[NORMAL] = shade (1.05, @bg_color) # "#f6f4f1"
    bg[INSENSITIVE] = shade (1.04, @bg_color) # "#f2efeb"
    bg[PRELIGHT] = shade (1.08, @bg_color) # "#faf9f8"
    }

    style "clearlooks-notebook" = "clearlooks-wide"
    {
    # bg[NORMAL] = "#efebe5"
    # bg[INSENSITIVE] = "#efebe5"
    }

    style "clearlooks-tasklist" = "clearlooks-default"
    {
    xthickness = 5
    ythickness = 3
    }

    style "clearlooks-menu" = "clearlooks-default"
    {
    xthickness = 0
    ythickness = 0
    bg[NORMAL] = shade (1.08, @bg_color) # "#f9f7f3"
    }

    style "clearlooks-menubar-item" = "clearlooks-button"
    {
    # fg[PRELIGHT] = "#000000"
    }

    style "clearlooks-menu-item" = "clearlooks-default"
    {
    xthickness = 2
    ythickness = 3
    fg[PRELIGHT] = @selected_fg_color
    }

    style "clearlooks-tree" = "clearlooks-default"
    {
    xthickness = 2
    ythickness = 2
    }

    style "clearlooks-frame-title" = "clearlooks-default"
    {
    fg[NORMAL] = lighter (@fg_color) # "#404040"
    }

    style "clearlooks-tooltips" = "clearlooks-default"
    {
    xthickness = 4
    ythickness = 4
    bg[NORMAL] = { 1.0,1.0,0.75 }
    }

    style "clearlooks-progressbar" = "clearlooks-wide"
    {
    xthickness = 1
    ythickness = 1
    # fg[PRELIGHT] = "#ffffff"
    }

    style "clearlooks-combo" = "clearlooks-button"
    {
    }

    style "clearlooks-menubar" = "blackrock-default"
    {
    # bg[NORMAL] = "#bacedb"
    }

    style "clearlooks-scale" = "clearooks-button"
    {
    GtkRange::trough-side-details = 1
    }

    #style "panel" {
    # bg_pixmap[NORMAL] = "panel.png"
    #}

    # widget styles
    class "GtkWidget" style "clearlooks-default"
    class "GtkButton" style "clearlooks-button"
    class "GtkScale" style "clearlooks-scale"
    class "GtkCombo" style "clearlooks-button"
    class "GtkRange" style "clearlooks-wide"
    class "GtkFrame" style "clearlooks-wide"
    class "GtkSeparator" style "clearlooks-wide"
    class "GtkMenu" style "clearlooks-menu"
    class "GtkEntry" style "clearlooks-wider"
    class "GtkMenuItem" style "clearlooks-menu-item"
    class "GtkNotebook" style "clearlooks-notebook"
    class "GtkProgressBar" style "clearlooks-progressbar"
    #class "Panel*" style "panel"
    #class "GtkMenuBar" style "clearlooks-menubar"

    widget_class "*MenuItem.*" style "clearlooks-menu-item"
    #widget_class "*.GtkMenuBar.*MenuItem.*" style "clearlooks-menubar-item"

    # combobox stuff
    widget_class "*.GtkComboBox.GtkButton" style "clearlooks-combo"
    widget_class "*.GtkCombo.GtkButton" style "clearlooks-combo"
    # tooltips stuff
    widget_class "*.tooltips.*.GtkToggleButton" style "clearlooks-tasklist"
    widget "gtk-tooltips" style "clearlooks-tooltips"

    # treeview stuff
    widget_class "*.GtkTreeView.GtkButton" style "clearlooks-tree"
    widget_class "*.GtkCTree.GtkButton" style "clearlooks-tree"
    widget_class "*.GtkList.GtkButton" style "clearlooks-tree"
    widget_class "*.GtkCList.GtkButton" style "clearlooks-tree"
    widget_class "*.GtkFrame.GtkLabel" style "clearlooks-frame-title"

    # notebook stuff
    widget_class "*.GtkNotebook.*.GtkEventBox" style "clearlooks-notebook"
    widget_class "*.GtkNotebook.*.GtkViewport" style "clearlooks-notebook"




    in the menu bar style where the effects are given.....what all effects can we use over there............and how do we change the color of the window menubar..........is there a way to change the background color of fonts on the dektop.(my fonts are black and there is a white background around it which looks kinda irritating)..........and how can i change the color of the dropdown menus and all...............i see you did some crazy stuff with the themes man...looks great..............
    For those about to Rock...we salute you -- ACDC

  3. #33
    Join Date
    Jan 2006
    Beans
    1,352

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

    I'll have to play around with clear looks for a while...I have only been using the xfce engine for themes because I thought it would work best with my xubuntu and xfce4.4

    As for the mockup...It seems that all you would have to do would be to create a panel image for the top panel, and get a clear OSX dock for the bottom...other then that, it was just a picture of a nice wallpaper.

    You could make a theme based on the color of the top panel...either with a bg[NORMAL] color of the top panel and a gradient, or a pix map image of the glossy look using a theme engine that uses pix maps...you would have to ask on the forum which theme engine uses pix map images best for toolbars and menubars...

    But I will look into the clear looks engine since it is very popular in ubuntu...and I'll get back to you.


    EDIT- I also don't think it is possible to have the Beryl Thumbnail views on a clear dock (?) or the pager (workspace switcher)...and I don't think the wifi is able to be put on a clear dock like that...it's a nice idea for a multi-purpose "transparent" dock...but I wouldn't know how to make it.
    Last edited by crimesaucer; June 19th, 2007 at 04:00 AM.

  4. #34

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

    @irti

    Anything like @fg_color or @bg_color are symbolic colors used in the latest gtk and the purpose of this is to recolor a theme easily. Usually you define the colors on the top of your gtkrc file only once so if you wan't to change something is easier and also to use the new customize option in GNOME 2.18

    You should check the gtkrc file from Clearlooks on the latest GNOME.

    The menubarstyle is an option from Clearlooks, the name says it all.

    Finally the STYLE is also a Clerlooks property, in the svn version of Clearlooks (I don't know if it's the same for 2.18 ) you have CLASSIC, GLOSSY and GUMMY, btw Cimi is doing a great job with them.
    Last edited by kpolice; June 19th, 2007 at 05:18 AM.

  5. #35
    Join Date
    Jan 2006
    Beans
    1,352

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

    I just wanted to say that I edited my first post on page one so that it explains my new theme style better.

    I also tried to make it easier to read.

    ...and I wish people would post similar gtkrc descriptions for different theme engines, since xfce isn't the most popular theme engine out there, and it's the only theme engine that I know a bit about...so I wouldn't mind learning something new, and I'm sure it would help people that use other theme engines.

    Also...any Firefox/Thunderbird userChrome.css tips or other forms of eye candy tips are appreciated.

  6. #36
    Join Date
    May 2007
    Beans
    202
    Distro
    Ubuntu 9.10 Karmic Koala

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

    @ crimesaucer..seriously i would be glad to see a similar description for the clearlooks engine.......i tried out the xfce...but it didnt seem to work on ubuntu.....i mean i made some changes and all and tried to apply the new theme after saving the gtkrc file..but it made no difference... ...anyways it would be really nice seeing that mockup on an ubuntu though............

    @ kpolice....thanx i got a general idea of the stuff........am still trying to make it work though

    edit .... @ crimesaucer..........i can post all the gtkrc files of wateva theme engines you want dude.....just keep up the gud work.!!! =D>
    Last edited by Irti; June 19th, 2007 at 05:28 AM.
    For those about to Rock...we salute you -- ACDC

  7. #37

  8. #38
    Join Date
    Jan 2006
    Beans
    1,352

    Re: GTK theme tutorial

    Quote Originally Posted by kpolice View Post
    Thanks, I actually found that guide after I had learned all of those things on my own, I like how it's written but it doesn't go into enough detail about the unique things...like this part:

    Engines

    /!\ Hmm, I am not entirely happy with this section. While I think that there is not much it should cover, this feels like it is too little.

    As said earlier, engines are used to define the look and extend the styles. For example to use the Clearlooks engine, you can just do the following.

    style "some-style" {
    engine "clearlooks" {
    # engine specific settings go here
    }
    }

    This means the Clearlooks engine will be used with its default settings. You can modify engine settings in the block. For a description of the possible options for different engines please refere to their documentation at ../GtkEngines.

    ...the "engine specific settings" are what I want the most and I can never find any detail on it form any page, including the links on that site.


    For example, I learned about a gradient boxfill from playing with the Xfce-winter gtkrc, and then I started trying to add a gradient boxfill to different style specific settings, and it worked out beautifully...now I wish I could learn more about other engine specific settings for xfce and other themes engines...

    I also would love to learn a bit more about this area:

    Code:
    gtk-can-change-accels             = 1
    gtk-menu-drop-shadow              = 1
    gtk-menu-shadow-delay             = 100
    
    style "default"
    {
        GtkButton::default_border         = {0, 0, 0, 0}
        GtkButton::default_outside_border = {0, 0, 0, 0}
        GtkButton::default_spacing        = 10
        GtkButton::focus-line-width       = 1
        GtkButton::focus-padding          = 0
        GtkCheckButton::indicator_size    = 15
        GtkMenuBar::shadow_type           = out
        GtkMenuItem::selected_shadow_type = out
        GtkPaned::handle_full_size        = 1
        GtkPaned::handle_size             = 8
        GtkRadioButton::indicator_size    = 15
        GtkRange::slider_width            = 15
        GtkRange::stepper_size            = 15
        GtkRange::stepper_spacing         = 0
        GtkRange::trough_border           = 0
        GtkScrollbar::min_slider_length   = 37
        GtkToolbar::shadow_type           = out
        GtkWidget::focus-line-width       = 1
        GtkWidget::focus_padding          = 2
        GtkWidget::interior_focus         = 5
        GtkWidget::internal_padding       = 0
    I know about the:
    GtkScrollbar::min_slider_length = 37
    GtkRadioButton::indicator_size = 15
    GtkRange::slider_width = 15
    GtkRange::stepper_size = 15
    GtkRange::stepper_spacing = 0
    ...and the shadow types

    ...but I wish there was more charts to the different settings for sizes and shapes...I also wish there were was more of a breakdown of how to write all of the possibilities of a certain theme engine to utilize all of the different buttons and ways to draw them...rounded corners, square, gradients, sunken....
    Last edited by crimesaucer; January 9th, 2009 at 07:04 PM.

  9. #39

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

    The properties on the code you posted have descriptions on the tutorial and also in the GTK documentation.

    To get the engine specific details just check the default themes that come with it because most of the time the settings are there and are self explanatory, you can also check the source code.

    For example Clearlooks:
    Code:
        colorize_scrollbar = FALSE
        menubarstyle      = 2       # 0 = flat, 1 = sunken, 2 = flat gradient
        animation         = FALSE
        style             = CLASSIC
        radius            = 3.0
    If you check the Gummy, Glossy and Inverted themes (which are Clearlooks) you will see the difference between them.

    Murrine has a complete description of each setting on Cimi's site.

  10. #40
    Join Date
    Jan 2006
    Beans
    1,352

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

    Quote Originally Posted by kpolice View Post
    The properties on the code you posted have descriptions on the tutorial and also in the GTK documentation.

    To get the engine specific details just check the default themes that come with it because most of the time the settings are there and are self explanatory, you can also check the source code.

    For example Clearlooks:
    Code:
        colorize_scrollbar = FALSE
        menubarstyle      = 2       # 0 = flat, 1 = sunken, 2 = flat gradient
        animation         = FALSE
        style             = CLASSIC
        radius            = 3.0
    If you check the Gummy, Glossy and Inverted themes (which are Clearlooks) you will see the difference between them.

    Murrine has a complete description of each setting on Cimi's site.
    The xfce link does not work...for the GtkEngines...and less than half of those links work...I liked the one for the Smooth GTK engine: http://live.gnome.org/GnomeArt/Tutor...s/SmoothEngine

    and yes, I like how some themes like the clear looks gtkrc include the possible settings, but I always wonder if there are more possible...Like that scrollbar:

    Code:
    colorize_scrollbar = FALSE
        menubarstyle      = 2       # 0 = flat, 1 = sunken, 2 = flat gradient
        animation         = FALSE
        style             = CLASSIC
        radius            = 3.0
    I wonder what TRUE would do and what other styles can be written besides CLASSIC?


    When using xfce, I was lucky to find all of the extra possibilities on my xfce theme, with out any tips included in the gtkrc, and from just trying things to see if certain things worked...some themes on Gnome-Looks.org and Xfce-Looks.org have well written gtkrc's that explain a few things...but a lot don't.

    ...I just think there should be a site with every theme engine known to Linux, with a chart for each of them and the different settings for each widget...and the possibilities of gradient or shade boxfills or use of pix map images....

    ...also can you link me to the Murrine page you were talking about, that was the next theme engine I was going to try and use because I like the buttons...thanks.
    Last edited by crimesaucer; June 19th, 2007 at 06:32 AM.

Page 4 of 15 FirstFirst ... 2345614 ... 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
  •