Extended use example. (ROX filemanager)
This should work from include or directly from gtkrc.
For text shadows, one will need libmurrine.so
installed on the system.
---- To start with, there is Gtk2 lookup/merge:
- class styles
- wiget_class styles
- widget styles
More general styles should have "class" statement, while more specific styles
should use "widget_class" or "widget" statements.
---- Location inside gtkrc-file matters:
- if placed/read last, gets more of a priority..
So first there should be wide use defaults, then, -at the end of gtkrc, different
widget-specific details.
---------------------------
As an example we'll use ROX filemanager, as it is most likely around to play with.
ROX window and toolbar details.
Later we can combine these widgets in a few styles,
while for now I'll edit these one by one..
Notice that, example settings and pixmap-names are only theoretical,
and widget (class) names are direct and real.
1. Toolbar
Code: Select all
style "test-1"
{
...example settings
}
widget "rox-filer.GtkVBox.GtkToolbar" style "test-1"
Example settings:
font_name = "Fjalla One 9" # will set information area font, on the right from buttons
fg[NORMAL] = "#FFFFFF" # font color
GtkToolbar::button-relief=GTK_RELIEF_NORMAL # how the "button border" on the toolbar looks
# possible values:
# GTK_RELIEF_NORMAL
# GTK_RELIEF_HALF
# GTK_RELIEF_NONE
xthickness = 2 # size x
ythickness = 0 # size y
GtkToolbar::internal-padding = 3 # just experiment
# ...and the background of ROX toolbar, not affecting any other app.
# just remember that toolbar may get resized with button label location change..
# 18 will hold on to upper edge, so that icon background on the buttons will follow
# toolbar design and vice versa, if resized. Pixmap vertical size 25+ pixels then..
engine "pixmap"
{
image
{
function = BOX
detail = "toolbar"
file = "somefile-name.png"
border = { 4, 4, 18, 4}
stretch = TRUE
}
}
----------------------------------------
2. Toolbar buttons
Code: Select all
style "test-2"
{
...example settings
}
widget "rox-filer.GtkVBox.GtkToolbar.GtkButton" style "test-2"
Example settings:
GtkButton::inner-border = { 2, 2, 2, 2 } # adjust size
GtkButton::default-border = { 0, 0, 0, 0 } #
# it is intended to combine these settings, so that way... we can have
# more direct control over size details
engine "pixmap"
{
image
{
function = BOX
detail = "button"
file = "some-otherfile-name.png"
border = { 4, 4, 18, 4}
stretch = TRUE
}
}
# if GtkToolbar::button-relief=GTK_RELIEF_NORMAL is set, then
# one may want to add NORMAL, PRELIGHT, ACTIVE, INSENSITIVE
# for the different button states..
------------------------------------------
3. Toolbar button icons
Code: Select all
style "test-3"
{
...example settings
}
widget "rox-filer.GtkVBox.GtkToolbar.GtkButton.GtkVBox.GtkImage" style "test-3"
widget "rox-filer.GtkVBox.GtkToolbar.GtkButton.GtkHBox.GtkImage" style "test-3"
# GtkVBox and GtkHBox depend on if the label is placed next or below the icon.
# It will share the same look, while it can look different depending on the placement.
# Now, we'll make it more interesting..
Example settings:
stock["gtk-go-up"] = {{"icon1.png", LTR, NORMAL},
{"icon2.png", LTR, PRELIGHT},
{"icon3.png", LTR, ACTIVE}}
stock["gtk-jump-to"] = {{"icon4.png", LTR, NORMAL},
{"icon5.png", LTR, PRELIGHT},
{"icon6.png", LTR, ACTIVE}}
# stock["rox-show-details"] =
# stock["rox-show-hidden"] =
# stock["rox-select"] =
# stock["gtk-close"] =
#...
# ..so we can have different icons for different states.
# It is purely design question using it that way,
# one may want to animate the size (using transparent border) for normal/hovered/pressed
# icons, other add a glow around hovered, etc.
# Icons can be 24x24 pixel png-s with transparency.
# That gives us icon theme that follows current Gtk2 theme on-the-fly
# Icon folder can be shared by different themes, see my previous post up.
# NB! ..notice the ',' behind first two states.
# For Right-To-Left locales, use RTL instead of LTR.
-----------------------------------------------------------------------
4. Toolbar button labels
Code: Select all
style "test-4"
{
...example settings
}
widget "rox-filer.GtkVBox.GtkToolbar.GtkButton.GtkVBox.GtkLabel" style "test-4"
widget "rox-filer.GtkVBox.GtkToolbar.GtkButton.GtkHBox.GtkLabel" style "test-4"
Example settings:
font_name = "Fjalla One 9" # if standandalone style
fg[NORMAL] = "#FFFFFF" # font colors, example..
fg[ACTIVE] = "#FFFFFF"
fg[PRELIGHT] = "#FFFFFF"
fg[INSENSITIVE] = "#FFFFFF"
# if set as a standalone style after rox-button style,
# one may add also:
engine "murrine"
{
textstyle = 1
text_shade = 0.01
}
# .. to add subtle shadow under glyphs,
# just don't mix different engines inside the same style.
--------------------------------------------------------------
Now combine them..
( only for reference, use real colors and pixmaps in gtkrc.. )
Code: Select all
style "comb_1"
{
stock["gtk-go-up"] = {{"icon1.png", LTR, NORMAL},
{"icon2.png", LTR, PRELIGHT},
{"icon3.png", LTR, ACTIVE}}
stock["gtk-jump-to"] = {{"icon4.png", LTR, NORMAL},
{"icon5.png", LTR, PRELIGHT},
{"icon6.png", LTR, ACTIVE}}
stock["rox-show-details"] = {{"icon7.png", LTR, NORMAL},
{"icon8.png", LTR, PRELIGHT},
{"icon9.png", LTR, ACTIVE}}
stock["rox-show-hidden"] = {{"icon10.png", LTR, NORMAL},
{"icon11.png", LTR, PRELIGHT},
{"icon12.png", LTR, ACTIVE}}
stock["rox-select"] = {{"icon13.png"}}
stock["gtk-close"] = {{"icon14.png"}} # no different states, only one icon
xthickness = 2
ythickness = 0
GtkButton::inner-border = { 2, 2, 2, 2 }
GtkButton::default-border = { 0, 0, 0, 0 }
GtkToolbar::internal-padding = 3
engine "pixmap"
{
image
{
function = BOX
detail = "toolbar"
file = "somefile-name.png"
border = { 4, 4, 18, 4}
stretch = TRUE
}
image
{
function = BOX
detail = "button"
file = "some-otherfile-name.png"
border = { 4, 4, 18, 4}
stretch = TRUE
}
}
}
widget "rox-filer.GtkVBox.GtkToolbar" style "comb_1"
widget "rox-filer.GtkVBox.GtkToolbar.GtkButton" style "comb_1"
widget "rox-filer.GtkVBox.GtkToolbar.GtkButton.GtkVBox.GtkImage" style "comb_1"
widget "rox-filer.GtkVBox.GtkToolbar.GtkButton.GtkHBox.GtkImage" style "comb_1"
style "comb_2"
{
font_name = "Fjalla One 9"
fg[NORMAL] = "#FFFFFF"
fg[ACTIVE] = "#FFFFFF"
fg[PRELIGHT] = "#FFFFFF"
fg[INSENSITIVE] = "#FFFFFF"
engine "murrine"
{
textstyle = 1
text_shade = 0.01
}
}
widget "rox-filer.GtkVBox.GtkToolbar.GtkButton.GtkVBox.GtkLabel" style "comb_2"
widget "rox-filer.GtkVBox.GtkToolbar.GtkButton.GtkHBox.GtkLabel" style "comb_2"
style "comb_3" # different color for info-text on toolbar
{
font_name = "Fjalla One 9"
fg[NORMAL] = "#FF0000"
engine "murrine"
{
textstyle = 1
text_shade = 0.01
}
}
widget "rox-filer.GtkVBox.GtkToolbar.GtkLabel" style "comb_3"
--------------------------------------------------------------
5. Toolbar view-details
# toolbar area that appears if details button was clicked
# TODO: no wildcards...
Code: Select all
style "test-5"
{
...example settings
}
widget_class "*ViewDetails*GtkButton" style "test-5"
widget_class "*ViewDetails*GtkButton.*.GtkLabel" style "test-5"
Example settings:
font_name = "Fjalla One 8" # make it use a smaller font
GtkButton::inner-border = { 6, 6, 2, 2 } # adjust label placement
fg[NORMAL] = "#A0A6AE"
fg[PRELIGHT] = "#FFFFFF"
fg[ACTIVE] = "#0000FF"
engine "pixmap"
{
image
{
function = BOX
file = "anotherfile-name.png"
border = { 1, 1, 1, 1 }
stretch = TRUE
}
}
# can have more states for button, while change of label color may do the trick here..
--------------------------------------------------------------
Now that we have toolbar configured to our likes..
some notes about other rox widgets..
--------------------------------------------------------------
6. ROX window ViewCollection background.
Code: Select all
style "test-6"
{
bg_pixmap[NORMAL] = "some_tile.png" # bg_pixmap to tile in rox window
bg[INSENSITIVE] = "#DFE3E8" # may need adjusting..
fg[NORMAL] = "#000000" #
}
widget_class "<GtkWindow>.<GtkVBox>.<GtkHBox>.<ViewCollection>*" style "test-6"
--------------------------------------------------------------
7. ROX window scrollbar
Code: Select all
style "test-7"
{
...usual scrollbar settings, for ROX window only, different color/size.. etc.
}
widget "rox-filer*Scrollbar" style "test-7"
# one may want to set this right after default scrollbar style,
# and it could help if default scrollbar style is defined at "class" level
--------------------------------------------------------------
8. ROX window progressbar
# may appear with multiple-file operations
Code: Select all
style "test-8"
{
... settings for ROX window progressbar only.
}
widget "rox-filer*GtkProgressBar" style "test-8"
# one may want to set this right after default progressbar style,
# and it could help if default progressbar style is defined at "class" level
--------------------------------------------------------------
9. ROX panel
# there are some who may use it..
Code: Select all
# rox panel border color and background area
style "roxpanel_0"
{
fg[NORMAL] = "#ff0000"
engine "pixmap"
{
image
{
function = FLAT_BOX
file = "panel_tile1.png"
border = { 1, 1, 1, 1 }
stretch = TRUE
}
}
}
widget "rox-panel.GtkAlignment" style "roxpanel_0"
widget "rox-panel.GtkAlignment.GtkViewport" style "roxpanel_0"
# icon(button) background area
style "roxpanel_1"
{
engine "pixmap"
{
image
{
function = FLAT_BOX
state = NORMAL
file = "panel_button_normal.png"
border = { 2, 2, 2, 2 }
stretch = TRUE
}
image
{
function = FLAT_BOX
state = PRELIGHT
file = "panel_button_prelight.png"
border = { 2, 2, 2, 2 }
stretch = TRUE
}
}
}
widget "rox-panel.GtkAlignment.GtkViewport.GtkHBox.GtkHBox.panel-icon" style "roxpanel_1"
widget "rox-panel.GtkAlignment.GtkViewport.GtkVBox.GtkVBox.panel-icon" style "roxpanel_1"
# icon(button) label color, font and shadow
style "roxpanel_text"
{
font_name = "Fjalla One 9"
fg[NORMAL] = "#FF0000"
fg[PRELIGHT] = "#FFFFFF"
engine "murrine"
{
textstyle = 1
text_shade = 0.01
}
}
widget "rox-panel.GtkAlignment.GtkViewport.GtkHBox.GtkHBox.panel-icon.GtkLabel" style "roxpanel_text"
widget "rox-panel.GtkAlignment.GtkViewport.GtkVBox.GtkVBox.panel-icon.GtkLabel" style "roxpanel_text"
# separator ( -ish thing.. ) background
style "roxpanel_2"
{
engine "pixmap"
{
image
{
function = FLAT_BOX
file = "panel_tile3.png"
border = { 1, 1, 1, 1 }
stretch = TRUE
}
}
}
widget "rox-panel.GtkAlignment.GtkViewport.GtkHBox.GtkEventBox" style "roxpanel_2"
widget "rox-panel.GtkAlignment.GtkViewport.GtkVBox.GtkEventBox" style "roxpanel_2"
--------------------------------------------------------------
10. Custom ROX folders.
It should be well known, then again, I'll point it out here anyway..
Just place some I-like-this-icon-for-mydocuments-folder.png in folder for
what it should appear for, then rename it to .DirIcon there.
It will "disappear" and folder should now be presented with this new icon,
independent from icon theme.
--------------------------------------------------------------
I hope.. it was interesting to read