Custom Styles

Forum: X and Fluxbox
Topic: Custom Styles
started by: SuperLou

Posted by SuperLou on May 14 2005,16:31

I was looking at taking a crack at the DSL style contest but quickly realized I have no idea how to make a style. Could someone make a walkthrough on how this is done (beyond setting background images)?

Thanks,
Louis

Posted by cbagger01 on May 14 2005,23:48

Get the whitebox.dsl extension from the Mydsl repository and use it to customize your fluxbox style.

I have no documentation, but in my experience it is pretty easy to figure out.

Posted by Rapidweather on May 15 2005,02:14

If you will look at the screenshots in my signature, you will find the Rapidweather style, and I have that code here for you to see:

Code Sample

! Title: Rapidweather style (Adapted from DSL Perfect Blue)
! A theme for the fluxbox window manager.
! Several custom Rapidweather styles can be based on this one.
!
! This style uses xft/fontconfig font names.
!
!
! **** Global Stuff ****

! None here

! **** Global Toolbar Stuff ****

toolbar*font: lucidasans-bold-14
toolbar*textColor: #FFFFFF

! **** Main Toolbar ****

toolbar: raised gradient pyramid

toolbar.color: #333366
toolbar.colorTo: #99CCCC

! **** Toolbar Workspace Label ****

toolbar.label: parentrelative

! **** Toolbar Window Label ****

toolbar.windowLabel: parentrelative

! **** Toolbar Clock ****

toolbar.clock: parentrelative

! **** Toolbar Button, Normal Status, Not Pressed In ****

toolbar.button: parentrelative
toolbar.button.picColor: #FFFFFF

! **** Toolbar Button, Pressed In ****

toolbar.button.pressed: solid
toolbar.button.pressed.color: #FF9933

! **** Toolbar Justification ****

toolbar.justify: center

! **** Global Menu Stuff ****

menu*textColor: #000000

! **** Menu Title ****

menu.title: raised gradient vertical
menu.title.color: #FF9933
menu.title.colorTo: #FFCC99
menu.title.font: lucidasans-bold-14
menu.title.justify: center

! **** Menu Frame ****

menu.frame: raised gradient pyramid
menu.frame.color: #333366
menu.frame.colorTo: #99CCCC
! menu.frame.disableColor: #000000
menu.frame.font: lucidasans-bold-14
menu.frame.textColor: #FFFFFF
menu.frame.justify: left

! **** Menu Bullets ****

menu.bullet: diamond
menu.bullet.position: right

! **** Menu Highlight ****

menu.hilite: raised gradient pyramid
menu.hilite.color: #FF9933
menu.hilite.colorTo: #ffffff
menu.hilite.textColor: #000000

! **** Global Window Stuff ****

! None here

! **** Title of Focused Window ****

window.title.focus: solid
window.title.focus.color: #FFFFFF

! **** Title of Unfocused Window ****

window.title.unfocus: solid
window.title.unfocus.color: #CCCCCC

! **** Label of Focused Window ****

window.label.focus: parentrelative
window.label.focus.textColor: #000000

! **** Label of Unfocused Window ****

window.label.unfocus: parentrelative
window.label.unfocus.textColor: #000000

! **** Focused Handle ****

window.handle.focus: solid
window.handle.focus.color: #FFFFFF

! **** Unfocused Handle ****

window.handle.unfocus: solid
window.handle.unfocus.color: #CCCCCC

! **** Focused Resize Grip ****

window.grip.focus: solid
window.grip.focus.color: #FFFFFF

! **** Unfocused Resize Grip

window.grip.unfocus: solid
window.grip.unfocus.color: #CCCCCC

! **** Buttons of Focused Window ****

window.button.focus: parentrelative
window.button.focus.picColor: #000000

! **** Buttons of Unfocused Window ****

window.button.unfocus: parentrelative
window.button.unfocus.picColor: #000000

! **** Window Button, Pressed In ****

window.button.pressed: solid
window.button.pressed.color: #FF9933

! **** Focused Window Frame ****

window.frame.focusColor: #ffffff

! **** Unfocused Window Frame ****

window.frame.unfocusColor: #CCCCCC

! **** Window Font ****

! window.font: lucidasans-bold-12

! **** Window Justification ****

window.justify: left

! **** Window Tab Font ****

window.tab.font: lucidasans-bold-12

! **** Background ****

rootCommand: bsetbg -f ~/.fluxbox/backgrounds/arches.jpg

! Rapidweather style is a modified version of Perfect_Blue

I use this style in my Knoppix remaster also. I wanted something that would put a menu up there that would be very easy to see, especially on a laptop screen.
A style like this running on Knoppix requires at least a 4 MB graphics card, but on DSL, 2 MB will do fine.
Note that you will want to have a background image, and make a directory for it. In the code, the last line shows the .fluxbox/backgrounds directory.
The style goes in /.fluxbox styles, and you can name it whatever you want.
There is an init file that goes with it, and here is the code for it:

Code Sample

session.titlebar.left: Stick
session.titlebar.right: Minimize Maximize Close
session.screen0.toolbar.onhead: 0
session.screen0.toolbar.onTop: true
session.screen0.toolbar.widthPercent: 80
session.screen0.toolbar.placement: BottomCenter
session.screen0.toolbar.autoHide: true
session.screen0.tab.rotatevertical: false
session.screen0.tab.height: 16
session.screen0.tab.placement: Top
session.screen0.tab.alignment: Center
session.screen0.tab.width: 170
session.screen0.slit.onTop: False
session.screen0.slit.onHead: 0
session.screen0.slit.direction: Vertical
session.screen0.slit.placement: BottomRight
session.screen0.slit.autoHide: False
session.screen0.focusModel: SloppyFocus
session.screen0.fullMaximization: true
session.screen0.workspacewarping: true
session.screen0.showwindowposition: true
session.screen0.edgeSnapThreshold: 0
session.screen0.desktopwheeling: true
session.screen0.imageDither: false
session.screen0.maxOverSlit: true
session.screen0.workspaceNames: Workspace 1,Workspace 2,Workspace 3,Workspace 4,Workspace 5,Workspace 6,
session.screen0.sloppywindowgrouping: true
session.screen0.rowPlacementDirection: RightToLeft
session.screen0.focusNewWindows: true
session.screen0.windowPlacement: CascadePlacement
session.screen0.strftimeFormat: %m/%d/%y %I:%M %p
session.screen0.colPlacementDirection: BottomToTop
session.screen0.workspaces: 6
session.screen0.antialias: false
session.screen0.disableBindingsWithScrollLock: False
session.screen0.focusLastWindow: true
session.colorsPerChannel: 4
session.groupFile:
session.cacheLife: 5l
session.doubleClickInterval: 250
session.opaqueMove: false
session.autoRaiseDelay: 250
session.tabs: true
session.cacheMax: 200l
session.menuFile: /home/knoppix/.fluxbox/menu
session.imageDither: True
session.iconbar: true
session.keyFile: /etc/X11/fluxbox/keys
session.styleFile: /home/knoppix/.fluxbox/styles/Rapidweather
session.slitlistFile: /home/knoppix/.fluxbox/slitlist

You will want to change the paths to reflect /home/dsl instead of /home/knoppix shown above. In the style file, you will find the use of
"raised gradient pyramid" a lot, and that can be changed to "solid" with only
one color, rather than two. Sometimes the toolbar looks better with "solid", and I have made some styles that do that.
---
Here's hoping that you enjoy working with these files.

Posted by mikshaw on May 15 2005,02:43

< http://www.fluxbox.org/docbook/en/html/fluxstyle-man.html >

Posted by SuperLou on May 25 2005,19:38

Is it possible to customize the slit (i think it's called the slit, the thing with the comp. stats and tools) more than just it's location? Can the individual components be moved. How do I do transparancy in styles?

Posted by mikshaw on May 25 2005,23:18

The order of applications should be dictated by .fluxbox/slitlist
I believe the colors are inherited by the style.

Transparency is not available in fluxbox stable. Try the fluxbox-0.9.11 extension (0.9.13 coming soon)

Posted by SuperLou on May 25 2005,23:21

Whenever I restart the window manager the slitlist file is reset to the defaults.

Posted by mikshaw on May 25 2005,23:27

Here's one way to get around that:
1) shut down fluxbox
2) delete the slitlist
3) comment out the dockapps from .xinitrc (or comment out enhance)
4) start fluxbox
5) start each dockapp manually, in the order you want them to appear.

newest fluxbox allows you to reorder dockapps from within fluxbox