Manually edit theme

karencho · 2020-02-21 16:42:46

Hello, i am wondering, for example, i liked theme, but i need to change some parts of it for example, transperacy of file manager or a color of filemanager and the dock... so where i can change it?

Aravisian · 2020-02-21 19:20:01

You can try using a program called Oomox:
https://github.com/themix-project/oomox

Essentially, you would be changing values in the themes .css file if you are using XFCE 4.14 or values in the themes .css or resource file (.rc) if you are using XFCE4.12.

OOmox is a great program, but it is not the route that I go because ONLY changing the colors is not my aim. It may suit your needs perfectly. If you want to edit the .css file, then asking direct pointed questions of what you are trying to change may be your best bet.

For example, for the color of your File Manager, in your themes gtk.css file, finding the style class ".background" and adding in your preferred color may be a start.

.background {
     background-color: #474747;
     color: #F5F5F5;
}

In the above example, you have the style class, then an open bracket, the values between, then a close bracket.
Background color is self-explanatory.
Color by itself refers to the color of TEXT in that value.
For your file manager Treeview, then the style class will be "treeview" so if you open your .css in Mousepad, hit ctrl+f for Find, then search "treeview", that will take you directly to that style class and you can edit the background colors there.
You can use a color picker (either install one like "Gpick" or use one online) to find the hex or rgba color codes.
Hope this helps to start and keep asking questions.

Last edited by Aravisian (2020-02-21 19:23:11)

karencho · 2020-02-21 23:24:46

thank you for your answer, can you please tell me how can i add font to Terminal Emulator, i just can change fonts that are in list, but i want to add my own font and change the color scheme of the Terminal Emulator

Aravisian · 2020-02-22 05:59:43

karencho wrote:

thank you for your answer, can you please tell me how can i add font to Terminal Emulator, i just can change fonts that are in list, but i want to add my own font and change the color scheme of the Terminal Emulator

I believe you should be able to add fonts to your ~/.fonts folder and they will appear as an option in the list. I added a few without any trouble.
If you want the fonts to be used system-wide, add them to /usr/share/fonts folder.

karencho · 2020-02-22 10:21:04

i did it and did not work

Aravisian · 2020-02-22 12:05:16

karencho wrote:

i did it and did not work

Please check that the font you added is in the correct format (for example.ttf for TrueType Font) and not zipped. Other than that- it really should work.
Check that the font is being read by the system by going to Settings, Appearance, Fonts tab.
If not appearing in terminal options, please log out and in and check again.

karencho · 2020-02-23 12:27:51

still nothing, please tell me how to correct filemanager background color i want to have all black it is now grey and sord of green i use Adapta them, i know it is gtk.css but i dont know what css id i need to find to edit

ToZ · 2020-02-23 16:28:00

With respect to the font, can you run:

fc-cache -vf

...in a terminal window and post back the output.

With respect to thunar theming, have a readt through this thread.

verb13849 · 2020-02-25 18:06:13

Aravisian wrote:

Essentially, you would be changing values in the themes .css file if you are using XFCE 4.14 or values in the themes .css or resource file (.rc) if you are using XFCE4.12.
OOmox is a great program, but it is not the route that I go because ONLY changing the colors is not my aim. It may suit your needs perfectly. If you want to edit the .css file, then asking direct pointed questions of what you are trying to change may be your best bet.
For example, for the color of your File Manager, in your themes gtk.css file, finding the style class ".background" and adding in your preferred color may be a start.

Thanks for making that clear. In the past I used OOmox to recreate pic related. But OOmox is such a massive installation and if I could simply do it myself by editing .css files (which seems straight forward) I would prefer that option. My difficulty is finding where these .css files reside. My current theme is Adwaita. Could you direct me to the .css files that I'd have to modify to achieve the colors in the image below?

FluxBB bbcode test

Aravisian · 2020-02-27 04:13:15

verb13849 wrote:

Aravisian wrote:
Essentially, you would be changing values in the themes .css file if you are using XFCE 4.14 or values in the themes .css or resource file (.rc) if you are using XFCE4.12.
OOmox is a great program, but it is not the route that I go because ONLY changing the colors is not my aim. It may suit your needs perfectly. If you want to edit the .css file, then asking direct pointed questions of what you are trying to change may be your best bet.
For example, for the color of your File Manager, in your themes gtk.css file, finding the style class ".background" and adding in your preferred color may be a start.

Thanks for making that clear. In the past I used OOmox to recreate pic related. But OOmox is such a massive installation and if I could simply do it myself by editing .css files (which seems straight forward) I would prefer that option. My difficulty is finding where these .css files reside. My current theme is Adwaita. Could you direct me to the .css files that I'd have to modify to achieve the colors in the image below?
https://i.warosu.org/data/g/img/0730/66 … 179188.png

With Adwaita, you would need to import the .css file because they --- they do that. They stick it where they don't want you messing with it I guess. Normally, I would walk on eggshells talking about it but today I am tired and stressed so my "I Care" levels are greatly reduced about Proprietary attitudes.
So, you need to import the .css file and to do that, you need to know the proper path. Look in
/usr/share/themes/Adwaita and you should see a gtk.css file that if you open, merely says "Import yadda yadda"
It is as gresource, so
in Terminal try running (replace <Proper Path Given> with the one you find in your folder:

gresource extract <Proper Path given>

Once you have it imported, you can modify and watch those modifications take effect.
To edit colors, as you would with Oomax, you will want to pay attention to
background-color: for view and content view
color: for TEXT colors

Search in your text editor for menuitem, .background, scrollable view, scrollable window, paned, .sidebar as a start- explore and try out differnt things, then refresh your theme to see the effect. Sometimes learning is done by gettin in n' dirty with it.

verb13849 · 2020-02-27 08:30:03

Hey thank you for replying to my question, Aravisian. I decided to work on a theme that already had a .css file ready to edit. So I dropped Adwaita and went with another. Not really a big fan of Adwaita anyways. I've already jumped into the .css file of my current theme and changed a bunch of colors. This is quite fun, and changing colors is all that I want to do. The only difficulty I'm having is trying to decipher the terminology. For example I tried to change my cursor color. But ctrl + f "cursor" found nothing. Then I found out that cursor = "caret". But the only instance caret in my .css file had no effect on my cursor color. In the end I had to add this line: * {caret-color: red; }. Is there a glossary of terms for .css as it pertains to themes?

Aravisian · 2020-02-27 17:54:29

verb13849 wrote:

Hey thank you for replying to my question, Aravisian. I decided to work on a theme that already had a .css file ready to edit. So I dropped Adwaita and went with another. Not really a big fan of Adwaita anyways. I've already jumped into the .css file of my current theme and changed a bunch of colors. This is quite fun, and changing colors is all that I want to do. The only difficulty I'm having is trying to decipher the terminology. For example I tried to change my cursor color. But ctrl + f "cursor" found nothing. Then I found out that cursor = "caret". But the only instance caret in my .css file had no effect on my cursor color. In the end I had to add this line: * {caret-color: red; }. Is there a glossary of terms for .css as it pertains to themes?

'Caret' refers to the blinking cursor that appears in a text box, such as in terminal or search entry.
The mouse cursor is referred to as ".cursor" in older .css, but it will effect general behaviors, not so much appearance.
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
https://developer.gnome.org/gdk3/stable … rsors.html
I cannot recall if it still has the "." in front now, but a simple test will solve that by just trying both and then looking for the change.
You may need to find yourself adding terms a bit often and knowing what to add... Isn't always so easy.
I am not aware of a truly useful glossary and if anyone else is, I'd love to know about it.
I will be blunt...Gnome pretends to share information while not really saying much, at all.
That said, what I have often done is download a grouping of themes, whether I like them or not, and sifted through the .css file looking for what I need.
I also reference https://www.w3schools.com/ to find what commands work for style classes. For knowing what gtk style or class to use... When I cannot find that information anywhere-- I start guessing based on what I already have noticed of naming conventions in the .css. It can take a few tries, but I usually figure it out.
As annoying as that can be; I have found that little bit of pressure helps knowledge retention and learning. For the stubborn type like me, anyway... The "give up after two minutes type" of personality may be more sad and melancholy after three minutes of it.
And there is always the option of Asking. Misko and Toz on here are no slouches and even I may be helpful...

I'd very much like to encourage the exploration you are doing. It can be fun or at least rewarding in the sense of feeling like you are regaining the Control.
You may start out just looking at color changes, but you may branch out into insets, gradients and other things as you wonder what you can change next. Over the course of a year or so of picking away at it- you may get quite adept.
By a year; I mean a bit here, a bit there, as time and availability when not doing other things allow, over time. If you want to move much, much faster, you can.

Last edited by Aravisian (2020-02-27 17:55:41)

verb13849 · 2020-02-28 07:23:40

Those are good links. I am stopping at every section of this .css to look up defintions to words - fallback, rubberband, flowbox, etc. - and sometimes I find the meaning and other times not, very time-consuming. It is almost faster to just to change a value and see what happens. If it looks like garbage. You can always change it back. No harm done.

I encounter something like this:

.background {
color: #FFFFFF;
background-color: #323131; }

And it stops me in my tracks. The color of the background is #FFFFFF, next line says "backgound-color" is #323131. Which one is it? Is this some kind of zen koan?

Aravisian · 2020-02-28 07:48:31

verb13849 wrote:

Those are good links. I am stopping at every section of this .css to look up defintions to words - fallback, rubberband, flowbox, etc. - and sometimes I find the meaning and other times not, very time-consuming. It is almost faster to just to change a value and see what happens. If it looks like garbage. You can always change it back. No harm done.
I encounter something like this:
.background {
color: #FFFFFF;
background-color: #323131; }
And it stops me in my tracks. The color of the background is #FFFFFF, next line says "backgound-color" is #323131. Which one is it? Is this some kind of zen koan?

Heh...
"Color" will refer to the color of Text.
"background-color" will refer to the color of the content view.
So if you have
color: #FFF
background-color: #000
Then you would have White Text on a Black Background.
There are also Borders.
So, let's create the following under "button":
button {
color: #000;
background-color: #FFF;
border-color: #000;
}
This will create a button with black text, white background and black border.
Or...
button {
color: #000
background-color: #FFF;
border-color: #000;
background-image: linear-gradient(to bottom, #000, #FFF);
}
Here you can have a mix of black to white colored button, with a black border, white background and black text.
And, the more you learn, the more complexity you can handle:
button {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: #ccc;
outline-color: rgba(46, 52, 54, 0.3);
border-color: #1c1c1c;
background-color: #3c3c3e;
background-image: -gtk-gradient (radial,
center -0.5, 0,
center -0.1, 1.0,
from(rgba(255,255,255,0.1)),
to(alpha(black, 0.04))),
linear-gradient(to bottom,
transparent,
alpha(@theme_selected_bg_color, 0.02)
),
linear-gradient(to bottom,
shade(#3c3c3e, 1.2),
shade(#3c3c3e, 0.9)
);
text-shadow: 0 -1px rgba(0,0,0,0.7);
-gtk-icon-shadow: 0 -1px rgba(0,0,0,0.7);
box-shadow: 0 1px alpha(white, 0.08) inset,
0 2px alpha(white, 0.04) inset,
1px 0 alpha(white, 0.03) inset,
-1px 0 alpha(white, 0.02) inset,
0 -1px alpha(white, 0.03) inset,
0 -2px alpha(black, 0.02) inset,
0 -3px alpha(black, 0.01) inset,
0 1px alpha(white,0.08);
}
Transition is an animation of the activation of the button. Outline-color adds an outline to the text individual letters. Radial gradients are circular rather than linear in direction. You can specify direction for either; e.g. "to bottom" used above could be changed to "to right."
Text shadow creates an offset duplicate of the text in a different color. The same goes for icon shadow- creating similar for an icon.
An inset creates on offset of the box, adding a 3-dimensional appearance to the box.
Exploring (with failures) can train you probably better than reading a book...

Note: The above are EXAMPLES only and incomplete as they are above for use.

Last edited by Aravisian (2020-02-28 07:56:21)

Xfce Forum

Sub domains

#1 2020-02-21 16:42:46

Manually edit theme

#2 2020-02-21 19:20:01

Re: Manually edit theme

#3 2020-02-21 23:24:46

Re: Manually edit theme

#4 2020-02-22 05:59:43

Re: Manually edit theme

#5 2020-02-22 10:21:04

Re: Manually edit theme

#6 2020-02-22 12:05:16

Re: Manually edit theme

#7 2020-02-23 12:27:51

Re: Manually edit theme

#8 2020-02-23 16:28:00

Re: Manually edit theme

#9 2020-02-25 18:06:13

Re: Manually edit theme

#10 2020-02-27 04:13:15

Re: Manually edit theme

#11 2020-02-27 08:30:03

Re: Manually edit theme

#12 2020-02-27 17:54:29

Re: Manually edit theme

#13 2020-02-28 07:23:40

Re: Manually edit theme

#14 2020-02-28 07:48:31

Re: Manually edit theme

Board footer