BunsenLabs Theming 101

hhh · 2016-05-26 23:57:33

Feel like personalizing your Hydrogen Openbox desktop? You've come to the right place.

I'm doing this tutorial slowly over a few days, and in simple steps.

Let's download a wallpaper, save it to ~/Pictures/wallpapers (download link is upper-right, below the advert if you don't use an adblocker)...

http://bunsenlabs.deviantart.com/art/Orange-603273476

Change your wall via your right-click menu>Preferences>Change wallpaper, select your new wall (it should be at the top of the list) and click "Apply".

Great, we've added a splash of orange to our world of grey!

hhh · 2016-05-27 00:07:58

Notifications, they're often overlooked. I want some orange there. Copy you're default theme, /usr/share/themes/Bunsen to ~/.themes. We need to rename it, so rename the folder to Bunsen-Orange and open the index.theme file inside and change both theme names (Name and GTK-theme) from Bunsen1 to Bunsen-Orange.

{Note to The Royal Me (El Doodorino) and The Team, Bunsen1 is a typo there. How I did it twice, we'll never know.}

We could use a simple color-picker. Open a terminal and install gcolor2 (sorry Unia, easier)...

sudo apt update && sudo apt install gcolor2

hhh · 2016-05-27 00:21:14

Open the Run dialog (Alt+F2), enter gcolor2 (or gco+Tab, Enter) and use the eyedropper tool to find the orange flame's color from the wallpaper. The hex code should be #F23814.

Now, in your Bunsen-Orange folder, open /xfce-notify-4.0/gtkrc and change #e6e6e6 to #F23814 (twice, lines #12 and #40).

Now open your right-click menu>Preferences>Notifications and choose your new theme, "Bunsen-Orange". While you're there, experiment with the other settings (I like no transparency, my timeouts at at least 40 seconds and I change the position according to my wallpaper/conky).

Hover over your new notification and the border should now match the wallaper flame's color. If you have volume buttons that give notifications, the notification slider will be orange now too.

Pic in a few or it didn't happen.

hhh · 2016-05-27 00:27:56

We'll tackle GTK theming next, but I need a beer or two or ten first.

Cheers!

-edit- Dang. I know BL looks good OOTB, but a wall and two hex codes later... not bad.

hhh · 2016-05-27 01:04:31

OK, GTK themes have some colors in them...

text, foreground and tooltip-foreground (I always keep these the same 'cause KISS)

background and tooltip background (dark if the above is light, or reversed)

selected background/foreground (hover, highlight, whatnot)

base (in a text editor, base is where you type your document and background is the exterior stuff, the menu and line-numbers and whatnot)

hhh · 2016-05-27 01:12:18

We'll change the selected background color of our GTK themes to match our new desktop now. Fun!

Open ~/.themes/Bunsen-Orange/gtk-2.0/gtkrc

On line #6, change nselected_bg_color:#ABABAB to nselected_bg_color:#F23814 Save and exit.

Open /gtk-3.0/gtk.css

On line #8, change @define-color selected_bg_color #ABABAB; to @define-color selected_bg_color #F23814; Save and exit.

Logout and back in.

Pic in a few or it didn't flippin' happen.

hhh · 2016-05-27 01:25:33

Absolutely nothing happened. Why was that?

That was because nobody gets sharper after drinking more than a few beers.

We haven't set anything in lxappearence yet (right-click>Preferences>Appearences>Widget>Bunsen-Orange and Apply)

Logout and in to make sure, please.

hhh · 2016-05-27 01:34:33

Aaaw, hell yeah!

That's enough for now, baby birds. Stay tuned.

hhh · 2016-05-27 01:45:10

Here we go, dark window borders. Right-click menu>Preferences>Openbox>GUI Config Tool and select Bunsen-Blue-Dark.

*puts on shades*

Let's make that change more convenient. Copy /usr/share/themes/Bunsen-Blue-Dark/openbox-3 to ~/.themes/Bunsen-Orange ("Replace All"). Now change your Openbox theme to Orange instead of Blue-Dark, it should look the same.

johnraff · 2016-05-27 02:18:22

Great stuff @hhh!
This needs a link from the Help section (when we have a Help section).

hhh · 2016-05-27 02:50:57

Yes, and thanks! This thread will take more than a few days to create (!) and will get many Views, I think. And hopefully it will be fun and creative and even useful on occasion.

hhh · 2016-05-27 03:14:26

You should be getting the hang of this now, these files are fairly human-readable!

Open ~/.themes/Bunsen-Orange/openbox-3/themerc and change lines 17 and 18 to...

menu.items.active.bg.color: #F23814
menu.items.active.bg.colorTo:#BF2C10

That's a gradient, I lowered the VALUE of selected_bg by 20 points in gcolor2 and used that.

Right-click>Preferences>Openbox>Reconfigure

Jam on.

damo · 2016-05-27 06:21:52

TIP: Geany has a colour-picker, which I find convenient when the theme file is opened for editing.

PackRat · 2016-05-27 13:27:19

Openbox Theme help page

Example theme and documentation if anyone wants to change/add a theme element - like the gradient type in the titlebar.

nice thread to start hhh.

kleiner_hussar · 2016-05-27 15:06:24

For editing Openbox themes there is the good old Obtheme.

It is a single python script, place it in your ~/bin and enjoy.

You can download it from here.
https://aur.archlinux.org/packages/obtheme/

Screenshot :

Last edited by kleiner_hussar (2016-05-27 15:41:04)

hhh · 2016-05-27 21:21:51

kleiner_hussar wrote:

For editing Openbox themes there is the good old Obtheme.
It is a single python script, place it in your ~/bin and enjoy.

I'm on my jessie/Mate desktop now, but I can't wait to check this out with the Bunsen themes on Hydrogen. Great tip, thanks!!!

-edit- It didn't work. I don't see anything for python fuse in jessie.

pvsage · 2016-05-27 22:58:52

^ I had to manually install python-fuse:

~$ apt-cache policy python-fuse
python-fuse:
  Installed: 2:0.2.1-10
  Candidate: 2:0.2.1-10
  Version table:
 *** 2:0.2.1-10 0
        500 http://httpredir.debian.org/debian/ jessie/main amd64 Packages
        100 /var/lib/dpkg/status

obtheme works as advertised after installing that.

Last edited by pvsage (2016-05-27 23:00:47)

hhh · 2016-05-28 23:22:24

Thanks Sage, I'll try that later.

topdollar · 2016-06-04 03:17:34

Eraph wrote:

I've gone a bit mad with the colours. I blame hhh's excellent theming tutorial for encouraging me to get down and dirty with every aspect of my desktop...

Just followed Eraph's link to get here. Now it's time to play!

This is awesome! @hhh

hhh · 2016-06-04 03:34:05

Have fun!

#1 2016-05-26 23:57:33

BunsenLabs Theming 101

#2 2016-05-27 00:07:58

Re: BunsenLabs Theming 101

#3 2016-05-27 00:21:14

Re: BunsenLabs Theming 101

#4 2016-05-27 00:27:56

Re: BunsenLabs Theming 101

#5 2016-05-27 01:04:31

Re: BunsenLabs Theming 101

#6 2016-05-27 01:12:18

Re: BunsenLabs Theming 101

#7 2016-05-27 01:25:33

Re: BunsenLabs Theming 101

#8 2016-05-27 01:34:33

Re: BunsenLabs Theming 101

#9 2016-05-27 01:45:10

Re: BunsenLabs Theming 101

#10 2016-05-27 02:18:22

Re: BunsenLabs Theming 101

#11 2016-05-27 02:50:57

Re: BunsenLabs Theming 101

#12 2016-05-27 03:14:26

Re: BunsenLabs Theming 101

#13 2016-05-27 06:21:52

Re: BunsenLabs Theming 101

#14 2016-05-27 13:27:19

Re: BunsenLabs Theming 101

#15 2016-05-27 15:06:24

Re: BunsenLabs Theming 101

#16 2016-05-27 21:21:51

Re: BunsenLabs Theming 101

#17 2016-05-27 22:58:52

Re: BunsenLabs Theming 101

#18 2016-05-28 23:22:24

Re: BunsenLabs Theming 101

#19 2016-06-04 03:17:34

Re: BunsenLabs Theming 101

#20 2016-06-04 03:34:05

Re: BunsenLabs Theming 101

Board footer