Using/Editing GTK themes in Fluxbox

2083
If you have KDE installed as your base, you may want to download a few programs in order to use the GTK style interface for some of your programs.

The easy way to do this is to

apt-get update && apt-get install xfce4-mcs-manager xfce4-icon-theme gtk2-engines-xfce

This will pull in the dependancies needed, and allow you to use the light weight xfce settings manager gui, for your GTK theme and icon changes.
This is useful for changing the themes and icons in GTK applications that you want to have different from KDE apps.

If you are Using KDE as a base, you can also use the ‘kde control center’ to change the colors of your gtk themes in fluxbox, but this will not affect certain other desirables, like icons for thunar, etc . . .

You will find the entry for XFCE settings in the extended Debian part of the fluxbox menu, or you may add this entry to your ~/. fluxbox menu. *note: Peole using menu1 from the ‘Menu Howto’ already have this entry under ‘system settings’.

[exec] (xfce settings) {xfce4-settings-manager}

Now to the fun part.

You can make color changes to your gtk themes in fluxbox using a color picker.

I use gcolor2 to figure out which colors I would like to add or subtract from the theme, and copy and paste from the gcolor2 clipboard.

apt-get install gcolor2
and the menu entry for gcolor2:

[exec] (gcolor2) {gcolor2}

gcolor2 is lightweight and easy to use. There are other color pickers in apt if gcolor2 isn’t appealing.

Place any theme you would like to edit into ~/.themes inside your home folder, and open up the gtkrc file inside. You can create the folder ~/.themes if you do not find it already in your home folder.

To find a theme to edit, you may wish to copy ‘deepcyan’ below to use as a template, or copy a theme from /usr/share/themes and place it into ~/.themes.

Remember to rename any files that you take from /usr/share/themes, that you place in ~/.themes, as you do not want to lose the ‘original’ theme when you make changes.

To change theme colors, simply copy and paste from gcolor2 to the gtk file of the theme you open from ~/.themes, and save.

Switch themes back and forth using the xfce settings manager, or other theme managers like lxappearance.

Note: Do not edit the /usr/share/theme files from /usr/share. If you would like to edit a theme currently in /usr/share/themes, just copy it to your ~/.themes folder.

If, upon completion you are pleased with your theme, you may want to put a copy in /usr/share/themes for root to use. Check ~/.xsession-errors to see if there are any glitches beforehand.

Deepcyan is a theme I made from an original basic xfce theme, for anybody to use or change as they like.

It is a dark theme and will not suit everybody, but should work very well for anybody that likes dark themes and hopefully I can be the first to change the minds of those that dont;).

What makes editing my theme nice is having the notations on each line item explaining what I think the option does. This does not mean I’m absolutely right. You can have fun debunking my color theories. I know there are guides showing what each codeline does, but how I did it was much more fun;)

Below is the theme ‘deepcyan’ if you would like to try it out. It directly matches the Fluxbox style ‘deepflux’
I have noted in the deepcyan gtkrc file what I think every color code does, but it is not precise by any means.

*hint; Keep an instance of Abiword and Thunar open to see some of the changes work as you apply them.

If copying the code below, you will need to first make a folder named ‘deepcyan’ inside of ~/.themes. Inside of the ‘deepcyan’ folder, make another new folder, and name it gtk-2.0.
Now, Inside of the folder gtk-2.0, make a new file, and name it ‘deepcyan’.
Copy and paste the theme below into you new ‘deepcyan’ file, save the file, and you are done.

In other words, A file inside of a folder, inside of a folder, inside of .themes, inside of your home directory, . . . got it? Checkout a screenshot of what I mean Here

From this point you can make any and all changes you wish to make.

Please note again that deepcyan is a dark theme. The brightness for this theme is dependant upon where your eyes feel comfortable in regards to the text. You should be able to make everything out very clearly. If you cant, you will need to brighten your monitor a bit. People have a tendency to darken their monitors with lighter themes, and this should be re-adjusted.

This theme is complete. It should work very well if your brightness is adjusted properly.

### Deepcyan theme by sleekmason 1-12-09
### Based from xfce 4.0

style "default"
{
GtkButton::default_border = {0, 0, 0, 0}
GtkButton::default_outside_border = {0, 0, 0, 0}
GtkButton::default_spacing = 4
GtkButton::focus-line-width = 2
GtkButton::focus-padding = 2
GtkCheckButton::indicator_size = 12
GtkMenuBar::shadow_type = out
GtkMenuItem::selected_shadow_type = out
GtkPaned::handle_full_size = 2
GtkPaned::handle_size = 2
GtkRadioButton::indicator_size = 16
GtkRange::slider_width = 16
GtkRange::stepper_size = 15
GtkRange::stepper_spacing = 1
GtkRange::trough_border = 0
GtkScrollbar::min_slider_length = 25
GtkToolbar::shadow_type = out
GtkWidget::focus-line-width = 2
GtkWidget::focus_padding = 2
GtkWidget::interior_focus = 1
GtkWidget::internal_padding = 1

xthickness = 2
ythickness = 0

## (444) background
### base[NORMAL] = "#110F11" ##Bluebase
base[NORMAL] = "#111010" ##Redbase

## (555) background unselected
base[INSENSITIVE] = "#0A4444"

## (CCC) highlighted check box and separators in menus
base[PRELIGHT] = "#409797"

## (555) TEXT FILE BACKGROUND 'SELECTED' high text file
base[SELECTED] = "#0A4444"

## (777) TEXT FILE BACKGROUND 'UN-SELECTED'
base[ACTIVE] = "#042D2D"

#######################################

## (555) inactive tab and scroll bar seat
bg[ACTIVE] = "#0A4444"

## (111) frame
bg[NORMAL] = "#230404"

## (111) 'RGB' box (unused dialog boxes)
bg[INSENSITIVE] = "#230404"

## (222VL) pressed scrollbar color and background for "use hinting"
bg[PRELIGHT] = "#4F0808"

## (555) possibly accent highlighted items (DONT KNOW)
bg[SELECTED] = "#4F0808"

#######################################

## (BBB) most 'User Preference's text (MENUS)
fg[NORMAL] = "#71E5E5"

###(BBB)Cranky line that doesn't like to play well with others,
## can, and prob should be commented when black.
fg[ACTIVE] = "#71E5E5"

## (CCC) 1/2 OF INSENSITIVE TEXT AND (RGB) ARROW COLOR
fg[INSENSITIVE] = "#409797"

## (AAA) MENU TEXT highlighted
fg[PRELIGHT] = "#99F5F5"

## (BBB) This is a border accent, use text color to start.
fg[SELECTED] = "#71E5E5"

#######################################

## (AAA) THUNAR ICON 'SELECTED' (right click)
text[ACTIVE] = "#99F5F5"

## (CCC) 1/2 INSENSITIVE "RGB" text color BUT NOT MENU?
text[INSENSITIVE] = "#409797"

## (BBB) ALL BASIC TEXT
text[NORMAL] = "#71E5E5"

## (AAA) Dialog box (HOVER)text color
text[PRELIGHT] = "#99F5F5"

## (BBB) HIGHLIGHTED FILE TEXT
text[SELECTED] = "#71E5E5"

engine "xfce"
{
smooth_edge = true
boxfill
{
fill_style = gradient
orientation = horizontal
shade_start = 0.80
shade_end = 1.90
}
}
}

widget_class "*" style "default"

style "colored" = "default"
{
xthickness = 1
ythickness = 0

## (555) in abiword, these are the small button box colors
bg[ACTIVE] = "#183535"

## (222) DIALOG BOX COLOR
bg[PRELIGHT] = "#390404"

## (BBB) POP up Boxes "USE HINTING" text color
fg[ACTIVE] = "#71E5E5"

## (AAA) MENU highlighted text & down arrows in user interface
fg[PRELIGHT] = "#99F5F5"

## (AAA) Highlighted 'unselected' background text (black)
text[ACTIVE] = "#99F5F5"

## (AAA) active hover text in dialog boxes
text[PRELIGHT] = "#99F5F5"

engine "xfce"
{
smooth_edge = true
boxfill
{
fill_style = plain
}
}
}

widget_class "*List*" style "colored"
class "*List*" style "colored"
widget_class "*Text*" style "colored"
class "*Text*" style "colored"
widget_class "*Entry*" style "colored"
class "*Entry*" style "colored"

style "menubar" = "colored"
{
xthickness = 2
ythickness = 0

engine "xfce"
{
smooth_edge = true
boxfill
{
fill_style = gradient
orientation = horizontal
shade_start = 0.80
shade_end = 1.90
}
}
}

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"

style "menuitem" = "colored"
{
xthickness = 1
ythickness = 0

engine "xfce"
{
smooth_edge = true
boxfill
{
fill_style = gradient
orientation = horizontal
shade_start = 0.75
shade_end = 1.90
}
}
}

widget_class "*MenuItem*" style "menuitem"
class "*MenuItem*" style "menuitem"

style "scrollbar" = "default"
{
xthickness = 2
ythickness = 1
engine "xfce"
{
smooth_edge = true
boxfill
{
fill_style = gradient
orientation = auto
shade_start = 0.30
shade_end = 1.30
}
}
}
widget_class "*Scrollbar*" style "scrollbar"
class "*Scrollbar*" style "scrollbar"

style "button" = "colored"
{
xthickness = 2
ythickness = 1

engine "xfce"
{
smooth_edge = true
boxfill
{
fill_style = gradient
orientation = horizontal
shade_start = 1.00
shade_end = 2.00
}
}
}
widget_class "*Button*" style "button"
class "*Button*" style "button"
widget_class "*button*" style "button"
class "*button*" style "button"
widget_class "*OptionMenu*" style "button"
class "*OptionMenu*" style "button"
widget_class "*Tree*" style "button"
class "*Tree*" style "button"
widget_class "*GtkScale*" style "button"
class "*GtkScale*" style "button"

style "progress" = "colored"
{
xthickness = 1
ythickness = 1

engine "xfce"
{
smooth_edge = true
boxfill
{
fill_style = plain

}
}
}
widget_class "*GtkProgress*" style "progress"
class "*GtkProgress*" style "progress"

widget_class "*CheckButton*" style "default"
class "*CheckButton*" style "default"
widget_class "*RadioButton*" style "default"
class "*RadioButton*" style "default"

#### This is for ROX-Filer
### (CCC) DON'T KNOW

style "rox" = "default"
{
bg[NORMAL] = "#409797"
bg[ACTIVE] = "#71E5E5"
}
widget_class "*Collection" style "rox"

# This is for the window borders (xfwm4 & metacity)
#
style "titlebar" = "default"
{
bg[SELECTED] = "#111010"
fg[SELECTED] = "#390404"

bg[INSENSITIVE] = "#390404"
fg[INSENSITIVE] = "#71E5E5"
}

widget "xfwm" style "titlebar"
class "MetaFrames" style "titlebar"
widget_class "MetaFrames" style "titlebar"
 
Enjoy;)
 
 Please comment if you are using this  'how -to'.  All suggestions and comments welcome.