Making an XFCE theme

techiemoore · 2022-02-17 19:49:21

Hello,

I edited the crap out of my Atom IDE and I'd like to make the same MS-DOS inspired theme for xubuntu.

I've been racking my brain trying to figure out how to edit existing themes to get what i want out of them.
I played with oomox, but I'm going to need far more in the way of customization.
I edited the buttons in .themes/(Project Name)/xfwm4 but my changes do not seem to stick. I even deleted the xfwm4 folder and there still was no change to the title bar. The only folder that seems to apply to this theme is the gtk-3.20 folder. But, I cant find buttons in there like Maximize, Close, Minimize.

This task not only seems extremely daunting, but i dont even know where to start!

KBar · 2022-02-17 20:13:01

You need a themerc file in the xfwm4 directory.

Make sure to check out this how-to: https://wiki.xfce.org/howto/xfwm4_theme

techiemoore · 2022-02-17 20:25:13

KBar wrote:

You need a themerc file in the xfwm4 directory.
Make sure to check out this how-to: https://wiki.xfce.org/howto/xfwm4_theme

Thank you very much for taking the time to respond.
Unfortunately, that's just the themerc file - it doesn't allow me to edit the pictures used for buttons like Close, Minimize, and Maximize.
Also, i've been on that website several times - it doesnt really seem to be a step-by-step How To, or it seems incomplete or something.

KBar · 2022-02-17 21:04:49

Except it literally is a step-by-step how-to?

xfwm4 uses X Pixmap format for window and title bar decorations. GIMP can export any image in this format. You don't have to create them manually.

The only thing it cannot do is semi-transparency with CSD disabled and gradients. The latter can be sort of mitigated by adding a semi-transparent PNG image which will be layered on top of the original XPM by the window manager but the actual semi-transparency cannot be fixed apart from enabling CSD.

You can edit the buttons in any image editor of your choice, though most will most likely not support exporting to XPM. You can also edit or create XPM files in a text editor as it actually is an ASCII text file.

eugenenine · 2022-02-19 17:28:21

A lot of the tutorials I find suggest copying an existing theme to start with as its a little easier than starting from scratch. Then change a piece at a time.

techiemoore · 2022-02-21 16:37:40

Okay, i think i've got it now.
This is a little cumbersome and frustrating, but i think i get it.
It's challenging because theres the Windows Manager and then theres GTK. It not all just set in one place.

ToZ · 2022-02-21 18:06:59

techiemoore wrote:

It's challenging because theres the Windows Manager and then theres GTK. It not all just set in one place.

With CSD (client-side) enabled apps, it will be in one place - GTK (appearance) settings. Xfwm4 settings only apply to SSD (server-side) window decorations.

techiemoore · 2022-02-22 19:58:12

Not sure if i should make a new thread for this,
but I have been grappling with the GTK Inspector, trying to make sense of the data it presents me with.

Right now, i am trying to change the menu window's text color to black.
Can anyone tell me what the correct path, or "selectors" point to that?

ToZ · 2022-02-23 00:13:47

techiemoore wrote:

Right now, i am trying to change the menu window's text color to black.
Can anyone tell me what the correct path, or "selectors" point to that?

Which menu window?

For all GTK menus, you can do something like:

menu {background-color: red}

techiemoore · 2022-02-23 14:51:31

Sorry, i couldnt (and still cant) seem to take a screenshot - i should have been more specific.
I'm talking about Thunar.

Part of the problem is that the inspector says something like Window > Grid > MenuBar > MenuItem > Window (again) > Menu > MenuItem (again).
I already tried
window.thunar menubar menuitem { color: black; }
to change the text color, but it didnt work.

Last edited by techiemoore (2022-02-23 14:52:52)

ToZ · 2022-02-23 15:51:59

You don't need the "window" prefix. ".thunar" specifies the thunar class so it will only affect thunar. The rest will work. So:

.thunar menubar menuitem { color: black; }

... or just:

.thunar menuitem { color: black }

Edit: here is a little guide to show how all items can be affected (I think all items, but may have missed a few):

.thunar .shortcuts-pane .view {background-color: red} /* sidebar - shortcuts view */
.thunar .shortcuts-pane .view {color: blue} /* sidebar - shortcuts view - font color - can use pseudo states :selected, :hover */
.thunar treeview {background-color: pink} /* sidebar - treeview */
.thunar treeview {color: blue} /* sidebar - shortcuts view - font color - can use pseudo states :selected, :hover */

.thunar .standard-view .view {background-color: blue} /* main contents view */
.thunar .standard-view .view {color: yellow} /* main contents view font color - can use pseudo states :selected, :hover */
.thunar .standard-view .view header button {background-color: lightblue} /* main contents views - header while in list view */

.thunar toolbar {background-color: yellow} /* toolbar */ 
.thunar toolbar entry {background-color: yellow} /* toolbar entry when pathbar style */
.thunar .path-bar-button {background: none; background-color: yellow} /* toolbar entry when toolbar style */

.thunar statusbar {background-color: green} /* status bar */
.thunar paned>grid {background-color: green} /* to get statusbar background - may affect other areas ? */

.thunar menubar { color: red } /* just the menubar contents */
.thunar menu {background-color: orange; color: purple} /* just the drop-down menus */
.thunar menuitem:hover { background-color: yellow; color: blue } /* menu items being hovered over */

Last edited by ToZ (2022-02-23 15:54:48)

techiemoore · 2022-02-23 18:48:08

Thank you for your detailed response.

I'm sorry, but that did not work.
The font still presents as the same color as the menu window - #a5a5a5

ToZ · 2022-02-23 19:19:28

How are you accessing the inspector? Using the GTK_DEBUG=interactive environment variable or the Shift+Ctrl+I keyboard shortcut?

If the first, make sure that thunar daemon isn't running:

thunar -q
GTK_DEBUG=interactive thunar

Also, what is your current GTK (Appearance) theme?

techiemoore · 2022-02-23 19:24:51

Yes, already done.

ToZ · 2022-02-23 19:33:38

Can you take a screenshot of your inspector CSS window and thunar (as I did) using xfce4-screenshooter, upload the image to a hosting site of your choice, then post back the link? I've used imgbb.com to host my image.

Edit: I understand that my theming examples are award-worthy. yessss.
lol.

Last edited by ToZ (2022-02-23 19:43:11)

techiemoore · 2022-02-23 19:49:22

https://ibb.co/Mh78mJM

Last edited by techiemoore (2022-02-23 19:50:25)

ToZ · 2022-02-23 19:55:12

Whats on your CSS tab? The contents there?

techiemoore · 2022-02-23 20:00:59

nothing :-(

Just joined the IRC, if you want to talk there.

Last edited by techiemoore (2022-02-23 20:02:36)

ToZ · 2022-02-23 20:03:46

On the CSS tab, at the bottom, type (or copy/paste) the following:

.thunar menuitem { color: red }

The thunar menu labels (and labels in the menu dropdowns) should turn red. Does this happen with your theme?

techiemoore · 2022-02-23 20:12:34

Nothing happens - no change

techiemoore · 2022-02-23 20:14:10

This is something i was playing with before.
Here is what i came up with

.thunar menubar {
background-color: #a5a5a5;
margin: 10px;
padding-left: 5px;
}

window.thunar menubar label {
color: #000000;
}

window.thunar menubar menuitem:prelight {
background-color: black;
}

window.thunar menubar menuitem:prelight label{
background-color: #black;
color: #a5a5a5
}

window.thunar menubar menuitem window menu {
background-color: #a5a5a5;
}

window.thunar menubar menuitem window menu labels{
color: black;
}

ToZ · 2022-02-23 20:23:20

techiemoore wrote:

This is something i was playing with before.

Where did you put this?

What version of thunar are you running?
What version of gtk3?

Last edited by ToZ (2022-02-23 20:24:39)

techiemoore · 2022-02-23 20:30:51

.thunar menubar menuitem {
background-color: black
}

Does this
https://ibb.co/dM9Y46L

But i need the background of the menubar items (such as File, Edit, and View) to remain grey with the font black.
When clicked on, aforementioned menubar items's background should reverse - Black with grey font.
This should apply to the dropdown menu items as well, such as File > New Tab

techiemoore · 2022-02-23 20:33:31

ToZ wrote:

techiemoore wrote:
This is something i was playing with before.
Where did you put this?
What version of thunar are you running?
What version of gtk3?

in the gtk.css

thunar 1.8.14 (Xfce 4.14)
gtk3 version seems to be 3.24.20?

Last edited by techiemoore (2022-02-23 20:35:38)

ToZ · 2022-02-23 20:47:06

Try this:

.thunar menuitem { background-color: black; color: #a5a5a5; }
.thunar menuitem:hover { background-color: #a5a5a5; color: black; }

Xfce Forum

Sub domains

#1 2022-02-17 19:49:21

Making an XFCE theme

#2 2022-02-17 20:13:01

Re: Making an XFCE theme

#3 2022-02-17 20:25:13

Re: Making an XFCE theme

#4 2022-02-17 21:04:49

Re: Making an XFCE theme

#5 2022-02-19 17:28:21

Re: Making an XFCE theme

#6 2022-02-21 16:37:40

Re: Making an XFCE theme

#7 2022-02-21 18:06:59

Re: Making an XFCE theme

#8 2022-02-22 19:58:12

Re: Making an XFCE theme

#9 2022-02-23 00:13:47

Re: Making an XFCE theme

#10 2022-02-23 14:51:31

Re: Making an XFCE theme

#11 2022-02-23 15:51:59

Re: Making an XFCE theme

#12 2022-02-23 18:48:08

Re: Making an XFCE theme

#13 2022-02-23 19:19:28

Re: Making an XFCE theme

#14 2022-02-23 19:24:51

Re: Making an XFCE theme

#15 2022-02-23 19:33:38

Re: Making an XFCE theme

#16 2022-02-23 19:49:22

Re: Making an XFCE theme

#17 2022-02-23 19:55:12

Re: Making an XFCE theme

#18 2022-02-23 20:00:59

Re: Making an XFCE theme

#19 2022-02-23 20:03:46

Re: Making an XFCE theme

#20 2022-02-23 20:12:34

Re: Making an XFCE theme

#21 2022-02-23 20:14:10

Re: Making an XFCE theme

#22 2022-02-23 20:23:20

Re: Making an XFCE theme

#23 2022-02-23 20:30:51

Re: Making an XFCE theme

#24 2022-02-23 20:33:31

Re: Making an XFCE theme

#25 2022-02-23 20:47:06

Re: Making an XFCE theme

Board footer