Need tips on basic theme modifications

Questions about applications and software
Forum rules
Before you post please read how to get help
Post Reply
mintefrsh
Level 1
Level 1
Posts: 18
Joined: Tue Mar 14, 2017 7:05 pm

Need tips on basic theme modifications

Post by mintefrsh » Sat Mar 17, 2018 2:37 am

Hi, I need some pointers - in the right direction - the easiest way I can make minor modifications to custom themes.
In Mint 18.1, I modified the gtk-3 part of a stock theme, but I'm having a harder time getting the gtk-2 theme to (fairly) closely match the gtk-3 appearance.

So I downloaded & installed a gtk 2/3 theme, Cinnamox-Heather (a blue theme) to see how they handled gradients & such in gtk-2. By now, I've read plenty on creating / modifying gtk-2 themes. I'm most familiar w/ the murrine engine. I've had "moderate" success changing or enabling its features.
Modifying various gtk-3 elements in Mint was easier due to years of working on Firefox & Thunderbird.

Part of the problem is lack of "real" understanding of what takes precedence in gtk-2.
For an existing theme, if I want to add gradients to scrollbar trough (whether using defined colors or specify different ones), or gradients to the toolbar, menu bar, or different color gradient to scrollbar slider, should I make the changes in the theme's gtkrc, or in ~/.gtkrc-2.0? I'm not sure if using ~/.gtkrc-2.0 for changes simplifies or complicates things.

I assume if they don't already have gradients (or have a style I don't like) I'll have to comment their style & either add a gradient or use the theming engine's gradient (if they entered an engine in that object's style)?

I've also noticed in some examples, after they enter a style for an object, directly under the style they list a widget or class to apply it, but on many other styles they don't list any widget_class or class under them.

Or are they listing several styles, one after another, then below them list the necessary class(es) or widget_class(es) that apply to the several styles, above? If so, does the order of the listed widget_class(es) matter, in relation to the order of the above listed styles?

Thanks.

smurphos
Level 4
Level 4
Posts: 474
Joined: Fri Sep 05, 2014 12:18 am

Re: Need tips on basic theme modifications

Post by smurphos » Sat Mar 17, 2018 4:27 am

Hi,

I'm the 'author' of the Cinnamox themes. Inverted commas are deliberate - the GTK3 and GTK2 are lightly tweaked from another source and I can't claim to be expert but I'm learning as I go along.

Most of my mods are trial and error. A very useful tool for quickly checking a modification (including whether you've broken a theme) is A Widget Factory - https://github.com/valr/awf

https://wiki.ubuntu.com/Artwork/Documentation/Murrine is a useful reference.

With regards to your questions about gradients i do plan to try and get the GTK2 to match the GTK3 and 3.20 in this regard. I'm tied up porting the Cinnamon theme to SCSS currently so it's a bit down the to-do list, but I'm glad you asked as checking the answer has given me a head start.

Anyway if you want to apply gradients to specific widgets the way you can by adding a gradient_shades line to the engine "murrine" selector for the style. This is the murrine-button with a little bit of gradient applied via the line gradient_shades = { 1.2, 1.0, 1.0, 0.8 }.

You can also use gradient_colors = { #ffffff, #ffffff, #ffffff, #ffffff } if you dont want to base the gradients on the base color of the widget.

Code: Select all

style "murrine-button"  = "murrine-wider" {
	bg[NORMAL] = @btn_bg_color
	bg[PRELIGHT] = shade (1.10, @selected_bg_color)
	bg[SELECTED] = mix (0.5, @selected_bg_color, @bg_color)
	bg[ACTIVE] = shade (0.95, @selected_bg_color)
	bg[INSENSITIVE] = shade (0.75, @btn_bg_color)
    #xthickness = 4
    #ythickness = 4

	engine "murrine" {
		border_colors = { mix(0.25, @btn_fg_color, @btn_bg_color), mix(0.25, @btn_fg_color, @btn_bg_color) }
		roundness = 10
		gradient_shades = { 1.2, 1.0, 1.0, 0.8 }
	}
}
Before

Image

After

Image

mintefrsh
Level 1
Level 1
Posts: 18
Joined: Tue Mar 14, 2017 7:05 pm

Re: Need tips on basic theme modifications

Post by mintefrsh » Sun Mar 18, 2018 1:54 am

Wow Smurphos, glad you stopped by. I saw A Widget Factory on several sites, but didn't know all of its features - thanks.
I don't guess there's a tool for Linux themes like for Firefox - like DOM inspector & "Inspect This" that identifies the exact object & the widget_class (or class) of UI elements of Linux desktop & GUIs? Part of my problem is picking the right widget class & using the exact syntax

It's true - I was having a hard time getting (any) gtk-2 themes to behave. I think a lot may be operator error.
But w/ your Cinnamox theme, the problem was different. I'll give everyone a good laugh. Keep in mind I've been writing some pretty detailed Firefox CSS style for years.
The reason Cinnamox wouldn't change was for some reason in my age-addled brain, I was working on the unzipped Cinnamox version located **in my ~/Downloads/mint/themes folder.**
Holy crap.
Yes, I can clearly see the file's full path in the editor. After that changes started working much better. But I was so annoyed that I had to go lay down. :oops:

Do you have an opinion on putting mods to themes in the ~/gtkrc-2.0 file vs. making changes in ~/.themes directory?

smurphos
Level 4
Level 4
Posts: 474
Joined: Fri Sep 05, 2014 12:18 am

Re: Need tips on basic theme modifications

Post by smurphos » Mon Mar 19, 2018 7:33 am

mintefrsh wrote:
Sun Mar 18, 2018 1:54 am
I don't guess there's a tool for Linux themes like for Firefox - like DOM inspector & "Inspect This" that identifies the exact object & the widget_class (or class) of UI elements of Linux desktop & GUIs? Part of my problem is picking the right widget class & using the exact syntax

Do you have an opinion on putting mods to themes in the ~/gtkrc-2.0 file vs. making changes in ~/.themes directory?
For Cinnamon, there is Looking Glass which includes an inspector for Cinnamon elements of the theme. That's built in. Super+L is the default keyboard shortcut to launch it.

For GTK3 there is GTK inspector - https://wiki.gnome.org/Projects/GTK%2B/Inspector.

It's a pain to get working on Mint 18 - I needed to manually install the required gsettings schema - https://bugs.launchpad.net/ubuntu-gnome/+bug/1523929
Got the schema from here - https://github.com/GNOME/gtk/blob/maste ... schema.xml and saved it in the required location.

For GTK2 there is GTKparasite - https://chipx86.github.io/gtkparasite/ - this is old and no longer in development. I haven't tried it.

For modding themes I generally make a copy of the entire theme in ~/themes/ under a new name and mess with it there. I just find it easier to keep track of what is going on. I make a lot of use of Meld - http://meldmerge.org/- to compare original and edited files. It's in the repos.

Geany is a good editor.

mintefrsh
Level 1
Level 1
Posts: 18
Joined: Tue Mar 14, 2017 7:05 pm

Re: Need tips on basic theme modifications

Post by mintefrsh » Wed Mar 21, 2018 2:11 am

Thanks Smurphos, for all the info. You went to a lot of trouble. It calls it Melange - an alternative to the "built-in JS debugger, Looking Glass.
Java script debugger? I'm not sure we're on the same page. Maybe.
I looked at Malange, but didn't take time to see if there's a decent manual. It's a little like finding an alien spaceship & trying to fly it w/o any instructions.

Once you learn how to use it, is Malange able to "point & click" to identify the DOM name that you'd use in a CSS file, similar to DOMi & a companion addon like Inspect This, for Firefox / Tbird? At least in some manner?
That's half the battle. If you don't know what the object is called, it's kinda hard to write css code to alter it. Even looking at stock or other custom themes gtk* files, the the names aren't intuitive as to what they do. I've looked at several of the "official" sites for gtk-2 & 3 - at length, many times now.

I'm always amused in an irritated as crap sort of way, at some of their explanations or definitions of an element & their options. Sometimes they use circular definitions that don't tell you anything, unless you already know most info about an object or a feature in a theming engine. You're just there, using their "manual" as a reference to remind you of what you already know.
It reminds me of some dictionaries when I was young. You look up a word - pretentious & it says, "Of or having a quality of pretense."

The other software I'll have to take a look at. One thing I've noticed since switching teams - to Linux. There's a lot of software that's not quite ready to come out of the oven. I guess when there's very few Linux users compared to Windows & OS X, Linux app devs don't get a lot of bang for their buck.

Finding the DOM ID in a browser & rearranging or coloring some things to suit you is one thing. Theming for most every window that opens in the entire OS is quite another thing.
I have a lot of respect for someone that does total make over themes, not just altering the bg / fg colors & a few icons.

I sort of decided that trying to modify a substantial part of themes like Cinnamox Heather is going to take too much time. I've got less than perfect vision in one eye (even w/ new glasses).
And problems w/ my hands - typing for longer periods. So staring at the screen or typing for long periods isn't as fun as it used to be. I've also found some color combos or even different shades of colors are easier / harder for me to keep my eyes focused. I love the blues in Cinnamox, but some of the colors are a bit too dark for me to read longer paragraphs on. I might try inverted colors in my email, but I've read it can lead to problems because not all the objects will flip colors.

For me, it's not necessarily just a matter of maximum contrast in background & text. What I like aesthetically and what I can focus & read the best aren't necessarily the same.
I've noticed different themes are done different ways. If they define the colors up front, then only use the defined names (@theme_base_color) in the rest of the file, you can change the color once & you're done, unless you change gradients, etc. In a lot of themes, they enter actual hex or RGB colors part of the time & use theme defined colors part of the time, throughout the file.

I'm doing it just like you said you do. Made a copy & put it in ~/.themes (or near by), until I'm ready to test it.
I also use Geany. I've been trying to find out if lexer software (like Scintillua - notice the "ua") can be made to work in Geany. (Same folks that do Scintilla). That will show most syntax errors for CSS & gtkrc files, plus 20 or more other languages. Similar to the way the editor in Stylish shows syntax errors. The lexer they use only does CSS, not gtkrc. So far, one of Geany's devs says "no one wrote code for it [Scintillua] to work in Geany." The Scintillua site says it's designed to "drop in" to most any Scintilla based product - very little needed. So I don't know what the problem is.

Thanks for your help & advice!

smurphos
Level 4
Level 4
Posts: 474
Joined: Fri Sep 05, 2014 12:18 am

Re: Need tips on basic theme modifications

Post by smurphos » Wed Mar 21, 2018 5:59 am

No worries - yep melange/looking glass has a select and inspect option - it's launched by the little dropper icon on the bottom left of the main looking glass window.

Deciphering the output is a learning curve but it does give you clues as to how a particular element is built and what css style classes are being applied to it and over-time facilitates an understanding of how the UI is put togethor.

GTK inspector is similarly obtuse.

If you want to try your own version of a Cinnamox theme with colors of your choice you can use the build tools make one - see https://github.com/smurphos/cinnamox-gt ... -gtk-theme

mintefrsh
Level 1
Level 1
Posts: 18
Joined: Tue Mar 14, 2017 7:05 pm

Re: Need tips on basic theme modifications

Post by mintefrsh » Tue Mar 27, 2018 1:56 am

I thought instant email notices were turned on here, but NOOooooo!
Thanks for the additional info. I took a look at the https://github.com/smurphos/cinnamox-gt ... -gtk-theme & instructions.
So, the 13 or so files (several = license, credits, readme, etc.) are collectively the "Cinnamox Theme Builder?"
Plus, the dependencies. I was more interested beforel I got to the non-native to Mint 18.1 / Ubuntu libraries.

It does look really interesting, but I don't know if I have the time right now to learn the tools. It's not technically daunting - I was an engineer, but it just takes time to do themes like you're doing. Sure, if you've done basically the same theme 10 - 20 times, it gets easier, but there's a steep, initial learning curve.

I haven't decided the easiest way to go, at least temporarily. Finding a finished theme that met my eyesight requirements or needed a couple of tweaks is obviously fastest.
I can change colors of certain things fairly easily, but I need / want to change size of certain elements. Most I know (by now) or could find what controls an element.
I got stuck on enlarging the overall scrollbar trough & slider on one theme I was playing with. It only affected Gtk+2 apps. Pic's attached.

I can't find either the error or a setting I should change but didn't. In another theme, there's no problem with the slider & trough.
I compare the gtkrc files from both modified mint-x-aqua (slider fills trough) & mint-x-blue (lots of border around slider) in Meld - which is the best way I know to find differences, even a period.
No differences that had anything to do w/ trough, scrollbar, slider. It must be another file that got changed accidentally.
mint-x-blue-modif_slider-can't-fill-gutter2018-03-26 6.jpg
mint-x-blue-modif_slider-can't-fill-gutter2018-03-26 6.jpg (4.52 KiB) Viewed 90 times

smurphos
Level 4
Level 4
Posts: 474
Joined: Fri Sep 05, 2014 12:18 am

Re: Need tips on basic theme modifications

Post by smurphos » Wed Mar 28, 2018 3:45 am

mintefrsh wrote:
Tue Mar 27, 2018 1:56 am
Finding a finished theme that met my eyesight requirements or needed a couple of tweaks is obviously fastest.
if you can outline what your requirements are I can probably put something together for you based on the Cinnamox theme. The build tools have got scope to enlarge scroll bars/buttons etc with minimal work on my part and the theme can be based on whatever color pair contrasts that suit you best.

Some links that might assist in identifying good color combinations...

http://www.color-blindness.com/color-name-hue/
https://webaim.org/resources/contrastchecker/

Just let me know a preferred main background / foreground (text) pairing and a selected background / foreground pairing (e.g. highlighted items in the cinnamon menu, GTK drop down menu) and what kind of scale would be good compared to the default Cinnamox themes (e.g. x1.2, x1.5, x2), whether gradients in background colors help or hinder, whether you need buttons to stand-out or not and any other requirements and I'll go from there.

Post Reply

Return to “Software & Applications”