You are not logged in.

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

hhh
That's easy!
Registered: 2015-09-17
Posts: 6,106
Website

BunsenLabs Theming 101

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!

Offline

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

hhh
That's easy!
Registered: 2015-09-17
Posts: 6,106
Website

Re: BunsenLabs Theming 101

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

Offline

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

hhh
That's easy!
Registered: 2015-09-17
Posts: 6,106
Website

Re: BunsenLabs Theming 101

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.

Offline

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

hhh
That's easy!
Registered: 2015-09-17
Posts: 6,106
Website

Re: BunsenLabs Theming 101

Screenshot-05272016-122406AM.th.png

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.

Offline

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

hhh
That's easy!
Registered: 2015-09-17
Posts: 6,106
Website

Re: BunsenLabs Theming 101

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)

Offline

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

hhh
That's easy!
Registered: 2015-09-17
Posts: 6,106
Website

Re: BunsenLabs Theming 101

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.

Offline

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

hhh
That's easy!
Registered: 2015-09-17
Posts: 6,106
Website

Re: BunsenLabs Theming 101

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.

Offline

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

hhh
That's easy!
Registered: 2015-09-17
Posts: 6,106
Website

Re: BunsenLabs Theming 101

Screenshot-05272016-012944AM.th.png

Aaaw, hell yeah!



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

Offline

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

hhh
That's easy!
Registered: 2015-09-17
Posts: 6,106
Website

Re: BunsenLabs Theming 101

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

Screenshot-05272016-014206AM.th.png

*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.

Offline

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

johnraff
nullglob
From: Nagoya, Japan
Registered: 2015-09-09
Posts: 4,677
Website

Re: BunsenLabs Theming 101

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


John
--------------------
( a boring Japan blog , Japan Links, idle twitterings  and GitStuff )
In case you forget, the rules.

Offline

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

hhh
That's easy!
Registered: 2015-09-17
Posts: 6,106
Website

Re: BunsenLabs Theming 101

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.

Offline

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

hhh
That's easy!
Registered: 2015-09-17
Posts: 6,106
Website

Re: BunsenLabs Theming 101

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

Screenshot-05272016-031010AM.th.png

Jam on.

Offline

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

damo
....moderator....
Registered: 2015-08-20
Posts: 4,382

Re: BunsenLabs Theming 101

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


Be Excellent to Each Other...

FORUM RULES and posting guidelines «» Help page for forum post formatting
Artwork on DeviantArt  «» BunsenLabs on DeviantArt

Offline

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

PackRat
jgmenu user Numero Uno
Registered: 2015-10-02
Posts: 820

Re: BunsenLabs Theming 101

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.


You must unlearn what you have learned.
    -- yoda

Offline

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

kleiner_hussar
Member
From: Traunstein, Germany
Registered: 2016-04-25
Posts: 82

Re: BunsenLabs Theming 101

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 : X9dMfR0E.jpg

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

Offline

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

hhh
That's easy!
Registered: 2015-09-17
Posts: 6,106
Website

Re: BunsenLabs Theming 101

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!!!  big_smile

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

Offline

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

pvsage
Internal Affairs
Registered: 2015-09-29
Posts: 1,433

Re: BunsenLabs Theming 101

^ 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)


Be excellent to each other, and...party on, dudes!
BunsenLabs Forum Rules
Tending and defending the Flame since 2009

Offline

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

hhh
That's easy!
Registered: 2015-09-17
Posts: 6,106
Website

Re: BunsenLabs Theming 101

Thanks Sage, I'll try that later.

Offline

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

topdollar
Member
From: San Jose, CA
Registered: 2016-03-20
Posts: 52
Website

Re: BunsenLabs Theming 101

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! big_smile

This is awesome! @hhh  cool


"Don't be too proud of this technological terror you have constructed... The ability to destroy a planet is insignificant next to the power of the FORCE" -Darth Vader

Offline

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

hhh
That's easy!
Registered: 2015-09-17
Posts: 6,106
Website

Offline

#21 2016-07-09 10:30:10

jimjamz
Member
From: Nagasaki, Japan
Registered: 2016-04-04
Posts: 66

Re: BunsenLabs Theming 101

Is there a way to set the wallpaper image and its attributes (scaled, stretched etc...) via the terminal? 

Off-topic slightly, but is there also a way to reload conky via the terminal also?

I would like to reset the wallpaper automatically and conky's position after running my randr shell script to switch to another physical screen.

Offline

#22 2016-07-09 12:25:22

damo
....moderator....
Registered: 2015-08-20
Posts: 4,382

Re: BunsenLabs Theming 101

jimjamz wrote:

Is there a way to set the wallpaper image and its attributes (scaled, stretched etc...) via the terminal? 

Off-topic slightly, but is there also a way to reload conky via the terminal also?

I would like to reset the wallpaper automatically and conky's position after running my randr shell script to switch to another physical screen.

You can set the background with 'feh' (see 'man feh'). Example:

feh --bg-scale /path/to/image

---------------
Reload conky session with

bl-conky-session

and see:

bl-conky-session --help

Also

conky -c /path/to/conkyrc

Be Excellent to Each Other...

FORUM RULES and posting guidelines «» Help page for forum post formatting
Artwork on DeviantArt  «» BunsenLabs on DeviantArt

Offline

#23 2016-07-09 14:30:37

hhh
That's easy!
Registered: 2015-09-17
Posts: 6,106
Website

Re: BunsenLabs Theming 101

damo wrote:
jimjamz wrote:

Is there a way to set the wallpaper image and its attributes (scaled, stretched etc...) via the terminal? 

Off-topic slightly, but is there also a way to reload conky via the terminal also?

I would like to reset the wallpaper automatically and conky's position after running my randr shell script to switch to another physical screen.

You can set the background with 'feh' (see 'man feh'). Example:

feh --bg-scale /path/to/image

Or with nitrogen...

nitrogen --restore

See man nitrogen...
http://www.linuxcertif.com/man/1/nitrogen/

Save the endangered Swedish iguana!

-edit- man feh (we can haz moar optionz) http://linux.die.net/man/1/feh

Offline

#24 2016-07-09 14:48:20

damo
....moderator....
Registered: 2015-08-20
Posts: 4,382

Re: BunsenLabs Theming 101

hhh wrote:

...
Or with nitrogen...

nitrogen --restore

See man nitrogen...
http://www.linuxcertif.com/man/1/nitrogen/
...

But that restores a background with whichever mode was set in bg-saved.cfg. The OP asked how to set scaled/filled..etc from the terminal. I guess you could use a one-liner with 'sed' to edit the mode value in the config file, then '&& nitrogen --restore'.


Be Excellent to Each Other...

FORUM RULES and posting guidelines «» Help page for forum post formatting
Artwork on DeviantArt  «» BunsenLabs on DeviantArt

Offline

#25 2016-07-10 04:18:24

pvsage
Internal Affairs
Registered: 2015-09-29
Posts: 1,433

Re: BunsenLabs Theming 101

:~$ nitrogen -h
Usage:
	--help, -h
		Prints this help text.
	--no-recurse
		Do not recurse into subdirectories
	--restore
		Restore saved backgrounds
	--save
		Saves the background permanently
	--set-auto
		Sets the background to the given file (auto)
	--set-centered
		Sets the background to the given file (centered)
	--set-color=[arg]
		background color in hex, #000000 by default
	--set-scaled
		Sets the background to the given file (scaled)
	--set-tiled
		Sets the background to the given file (tiled)
	--set-zoom
		Sets the background to the given file (zoom)
	--set-zoom-fill
		Sets the background to the given file (zoom-fill)
	--sort=[arg]
		How to sort the backgrounds. Valid options are:
			* alpha, for alphanumeric sort
			* ralpha, for reverse alphanumeric sort
			* time, for last modified time sort (oldest first)
			* rtime, for reverse last modified time sort (newest first)

No idea why these options aren't all listed in the man file.  EDIT:  Also, I don't see any command-line option hat handles dual head/Xinerama.

Last edited by pvsage (2016-07-10 04:20:45)


Be excellent to each other, and...party on, dudes!
BunsenLabs Forum Rules
Tending and defending the Flame since 2009

Offline

Board footer

Powered by FluxBB