Fluxbox Styles

How to install and edit a Fluxbox style.

I like making styles and themes for my own use, and have posted my favorite fluxbox style here to help you learn the basics of using and editing your own styles.
The style code 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

My current desktop with my Deepflux theme

In the 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. Deep cyan can be found here: [[https://sleekmason.wordpress.com/fluxbox/fluxbox-gtk-themes/ GTK theme link]]

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 looks for themes in ~/.fluxbox/styles first, before going to /usr/share/fluxbox.

Editing the style is as easy as opening up the file, making changes, saving your changes, and restarting fluxbox. Enjoy;)

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

###but you can set some 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.

[submenu] (Styles)
[stylesdir] (~/.fluxbox/styles)
[end]

Advertisements

4 comments

  1. Why do you have “Bevel5” in your style file when Fluxbox only recognises Bevel1 (the default) and Bevel2?

    Please see

    http://fluxbox.org/help/man-fluxbox-style.php

    QUOTE

    Bevel1 | Bevel2

    tells fluxbox(1) which type of bevel to use. Bevel1 is the default bevel. The shading is placed on the edge of the image. Bevel2 is an alternative. The shading is placed one pixel in from the edge of the image.

    UNQUOTE

      1. > Might have been to use “none”.

        If you do not want a bevel, then you would use {item}.bevelWidth=0

        You also have the equally invalid “Bevel3” for a number of items.

        There is no point specifying Bevel1 since that is the default.
        In other words, the only Bevel specification which should appear is “Bevel2”.

        On your toolbar you have

        toolbar.label: flat crossdiagonal gradient
        toolbar.label.color: #000000
        toolbar.label.colorTo: #000000

        This is another mis-specification because in order to have a gradient, one must use different values for color and colorTo.

        So this should simply be (to avoid confusion)

        toolbar.label: Solid Flat
        toolbar.label.color: #000000

        Similarly for a number of other items which are supposed to be gradients but are in fact solid because the “colorTo” value is the same as the “color”, which makes the different gradient styles specified for these items pointless.

        I keep seeing these types of errors in numerous style files — obviously people just copying these errors and they are forever perpetuated. (And one also sees people putting Fluxbox specific style items in Openbox themes as well.)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s