Fluxbox Style editing

2818

The style below is ‘deepflux’. Deepflux remains my default fluxbox theme, and is constantly updated as I find new style tweaks.

Deepflux is a dark style meant to be the match for ‘deepcyan’, my gtk theme for applications. Both are shown in the screenshot. I hope that deepflux may give you some ideas and a template to experiment with.

My current desktop with my Deepflux theme:


In this screenshot, all we are looking for that concerns deepflux, is the title bar, menus, and taskbar. The windows colors themselves are GTK. They match because I am using ‘deepcyan’ as my gtk theme, and the two are meant to match. ‘The GTK theme deepcyan’ can be found in one of my blogs here, or in the sidux wiki.

To use deepflux as your fluxbox style:

Just make a new file inside of ~/.fluxbox/styles, named deepflux, and copy and paste the code below. You will then find your new theme in the menu under ‘Styles’

Or, you could change the path in ~/.fluxbox/init, to change your style directly. Fluxbox will look for styles in ~/.fluxbox/styles, before going to /usr/share/fluxbox.

Editing the Fluxbox style is as easy as opening up the file, making changes, saving your changes, and restarting fluxbox.  You can make changes to your style colors in fluxbox by using a ‘color picker’.

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

apt-get install gcolor2

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

Experiment and Enjoy;)

##### Fluxbox style 'deepflux' by sleekmason. #####
#### Modified & completed 1-10-09
###

###You can set fonts here.###

toolbar.font: dejavusans-12
toolbar.clock.font: dejavusans-12
menu.title.font: dejavusans-bold-11
menu.frame.font: dejavusans-bold-10
window.font: dejavusans-bold-11

### (DEFAULT) set ALL fonts and colors###
*textColor: #4EE8E8
*Font: dejavusans-11

### Some cool font examples:
##*.font: Verdana-10:bold,shadow:offsetx=2;offsety=4;color=green
##*.font: Verdana-10:halo:color=blue

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

####Below are the colors to change for transparency#####
######## In ~/fluxbox/init, change Alpha to 125########
#### Simply comment out the setting you dont want####

############# FOR 125 TRANSPARENCY ###############

toolbar.windowLabel.colorTo: #520B0B
menu.frame.color: #730000
menu.title.color:#A00000
menu.hilite.colorTo: #B00000
window.title.focus.color: #B00000
window.label.focus.color: #B00000
window.handle.focus.colorTo: #D00000
window.button.focus.color: #B00000
window.button.pressed.color: #FF0000
window.grip.focus.colorTo: #FF0000

############# FOR NO TRANSPARENCY ################

##toolbar.windowLabel.colorTo: #520B0B
##menu.frame.color: #3E0202
##menu.title.color:#5D0505
##menu.hilite.colorTo: #6F0505
##window.title.focus.color: #520808
##window.label.focus.color: #520B0B
##window.handle.focus.colorTo: #680A0A
##window.button.focus.color: #570C0C
##window.button.pressed.color: #5C0000
##window.grip.focus.colorTo: #580606

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

toolbar: raised diagonal gradient bevel1
toolbar.color: #000000
toolbar.colorTo: #520B0B

toolbar.button: raised vertical gradient
toolbar.button.color: #000000
toolbar.button.colorTo: #520B0B
toolbar.button.picColor: #4EE8E8
toolbar.button.pressed: sunken diagonal interlaced gradient bevel1
toolbar.button.pressed.color: #000000
toolbar.button.pressed.colorTo: #B20000
#toolbar.button.scale:

toolbar.label: flat crossdiagonal gradient
toolbar.label.color: #000000
toolbar.label.colorTo: #000000
toolbar.label.textColor: #4EE8E8

toolbar.windowLabel: flat diagonal gradient
toolbar.windowLabel.color: #000000
##toolbar.windowLabel.colorTo: #520B0B
toolbar.windowLabel.textColor: #4EE8E8

toolbar.clock: flat crossdiagonal gradient
toolbar.clock.color: #480808
toolbar.clock.colorTo: #480808
toolbar.clock.textColor: #4EE8E8

toolbar.justify: center
toolbar.height: 18
toolbar.borderWidth: 0
toolbar.borderColor: #102E2E

#toolbar.iconbar.focused:
#toolbar.iconbar.focused.color:
#toolbar.iconbar.focused.colorTo:
#toolbar.iconbar.focused.pixmap:
#toolbar.iconbar.unfocused:
#toolbar.iconbar.unfocused.color:
#toolbar.iconbar.unfocused.colorTo:
#toolbar.iconbar.unfocused.pixmap:
#toolbar.iconbar.empty:
#toolbar.iconbar.empty.color:
#toolbar.iconbar.empty.colorTo:
#toolbar.iconbar.empty.pixmap:
#toolbar.iconbar.focused.borderColor:
#toolbar.iconbar.focused.borderWidth:
#toolbar.iconbar.unfocused.borderColor:
#toolbar.iconbar.unfocused.borderWidth:
#toolbar.iconbar.borderColor:
#toolbar.iconbar.borderWidth:
#toolbar.iconbar.focused.font:
#toolbar.iconbar.focused.justify:
#toolbar.iconbar.focused.textColor: green
#toolbar.iconbar.unfocused.font:
#toolbar.iconbar.unfocused.justify:
#toolbar.iconbar.unfocused.textColor:

menu.title: raised vertical gradient bevel3
##menu.title.color:#520B0B
menu.title.colorTo: #000000
menu.title.textColor: #4EE8E8
menu.title.justify: center

menu.frame: raised Crossdiagonal gradient
##menu.frame.color: #3B0404
menu.frame.colorTo: #000000
menu.frame.textColor: #4EE8E8
menu.frame.disableColor: #1C5353

#### MENU PIXMAPS BELOW###
#menu.frame.pixmap: ~/pictures/wallpapers/ray.jpg
#menu.selected.pixmap:
#menu.submenu.pixmap:
#menu.unselected.pixmap:
#menu.title.pixmap: ~/pictures/wallpapers/ray.jpg
#menu.hilite.pixmap:

menu.frame.justify: center

###rounded corners
menu.roundCorners: TopRight TopLeft BottomRight BottomLeft
window.roundCorners: TopRight TopLeft BottomRight BottomLeft
##toolbar.shaped: true

menu.bullet: triangle
menu.bullet.position: right

menu.hilite: raised diagonal gradient bevel3
menu.hilite.color: #000000
##menu.hilite.colorTo: #660A0A
menu.hilite.textColor: #43FFFF

menu.borderColor: #154141
menu.borderWidth: 0

window.title.focus: raised diagonal gradient bevel3
##window.title.focus.color: #520808
window.title.focus.colorTo: #000000
window.title.unfocus: raised diagonal gradient bevel1
window.title.unfocus.color: #1B181C
window.title.unfocus.colorTo: #000000

window.label.focus: raised diagonal gradient bevel3
##window.label.focus.color: #520B0B
window.label.focus.colorTo: #000000
window.label.focus.textColor: #4EE8E8
window.label.unfocus: interlaced flat gradient
window.label.unfocus.color: #1B181C
window.label.unfocus.colorTo: #000000
window.label.unfocus.textColor: #589598

window.handle.focus: raised diagonal gradient bevel3
window.handle.focus.color: #000000
##window.handle.focus.colorTo: #680A0A
window.handle.unfocus: raised diagonal gradient bevel1
window.handle.unfocus.color: #000000
window.handle.unfocus.colorTo: #1B181C

window.grip.focus: raised diagonal gradient bevel5
window.grip.focus.color: #580606
##window.grip.focus.colorTo: #580606
window.grip.unfocus: sunken diagonal gradient bevel1
window.grip.unfocus.color: #1B181C
window.grip.unfocus.colorTo: #580606

window.button.focus: raised diagonal gradient bevel1
##window.button.focus.color: #570C0C
window.button.focus.colorTo: #000000
window.button.focus.picColor: #4EE8E8
window.button.unfocus: sunken diagonal interlaced gradient bevel1
window.button.unfocus.color: #1B181C
window.button.unfocus.colorTo: #1B181C
window.button.unfocus.picColor: #589598
window.button.pressed: flat diagonal interlaced gradient
##window.button.pressed.color: #5C0000
window.button.pressed.colorTo: #FF0000

window.frame.focusColor: #1B181C
window.frame.unfocusColor: #1B181C

window.justify: center

! misc...
borderColor: #24252B

###Used to adjust the height of the window title bar.
#window.title.height: 28

borderWidth: 1
bevelWidth: 2
handleWidth: 5

### SET BACKGROUND EXAMPLES BELOW
###background: centered|aspect|tiled|fullscreen|random|solid|gradient |mod|none
###background.pixmap:
###background.color:
###background.colorTo:
###background.modX:
###background.modY:

background: aspect
background.pixmap: ~/.fluxbox/styles/deepflux/deepflux.png

! for the bbtools
menuFont: dejavusans-10
titleFont: dejavusans-bold-10

##notes###
### Select one of these texture types for gradient.
## Horizontal | Vertical | Diagonal | Crossdiagonal | Pipecross |
## Elliptic | Rectangle | Pyramid.

###Interlaced. tells fluxbox to darken every other line.

###Font options currently include bold, halo and shadow.
###Shadow color= offsetx= offsety=
### Halo color=

For the menu entry to add a ‘Styles’ submenu, copy and paste the menu code below into your ~/.fluxbox menu. Menu1 from the second ‘How To’ already has this entered.

Please comment if you are using this  ‘how -to’.  All suggestions and comments welcome.

Article by sleekmason sidux.com forums