Modifying Themes

[DaveSch]

I have been exploring changing my Gramps theme using the Themes addon. Most themes I have tried, downloaded from Gnome-look.org, have been unsuitable when compared to Adwaita. My major problem with Adwaita is the large Tabs. Opening an edit window, I want to be able to see all available tabs without scrolling right/left.

I have taken one of the themes from Gnome-look and have been modifying it to meet my needs.

My Problem.

In the Relationships view, hovering over any of the non-active people, they blank out. The color of the text becomes the same color as the background and I have not been able to find where this is controlled in the css file.

In a related snag, changing the names in the Relationships view to Web Links also causes them to disappear.

Any help greatly appreciated.

I have uploaded what I have so far to my GitHub

GitHub - DaveSch-gramps/My-Gramps-Theme

[emyoulation]

Are you thinking the Themes need to be customized to Gramps? Are they standardized in some way?

Or are you approaching from the opposite direction? Figuring that Gramps be using different CSS styles for certain objects?

Perhaps some of these objects just need a Style declared so they aren’t using the standard style. Or maybe they are declared so that they are in the wrong area of the cascade.

In the example above, is the style for the non-active people in the Relationship view declared? So that that are using the default ‘hover’ color?

[DaveSch]

There was an earlier way to install a different Theme for Gramps that allowed to have different colors, sizes of icons etc. Then PaulC created the Themes addon that made the process even easier.

I have tried out various themes downloaded from Gnome-look.org . None of the themes were ever better than the Adwaita used by Gramps as its default.

But I have had a pet peeve with Adwaita in the size of the Tabs.

I found the Windows XP Embedded theme met my Tabs needs but found the theme garish. So I started tweaking and modified it to the Theme I posted to my Github above. It looks great (in my opinion) but has a major flaw that I cannot find. The flaw is hovering over non-active people in the Relationships view and I cannot find where that is being controlled. Hence my initial post.

I have started on another track taking Adwaita Dark Green - Gnome-look.org and stripping it down to the basic Adwaita and now trying to tweak the css files to shrink the tabs. It has the advantage of properly dealing with the hover issue but I do not know how although I do know it does it through scss files.

Maybe when I have nothing else to do (ha ha) or we get our first snow storm I will devote more time to the issue.

[emyoulation]

In looking up your complaint, it seems like several people share that pet peeve.

But then a Firefox theme development page popped up that has a great illustration. That page might be a good rough model for a Gramps article.

Gtk+ Inspector is a tool that identifies the CSS for an indicated screen element.

[DaveSch]

I have modified the Adwaita Dark Green theme and stripped it down to the basic Adwaita theme used by Gramps. The only changes I have made are to the Tabs and how they display.

I have removed the previous theme and replaced it with this new theme. Anyone interested can download it from my GitHub.

GitHub - DaveSch-gramps/My-Gramps-Theme: A modified css theme for displaying...

It is designed to work with the Themes addon

At this time my changes do not apply to the Dark theme. I am not a dark theme user so it may be awhile before I get to changing those tabs.

[DaveSch]

I have made additional tweaks to the light theme and made adjustments to the Tabs in the Dark theme.

I did not make as many changes to the dark Tabs that I made to the light. Moving the color swatch to the top was not viable as it got lost and the dark theme would hide many nuances seen in the light. The main goal was to shrink the size of the tabs so viewing the person’s edit window, all tabs are visible.

Enjoy!

[SNoiraud]

Personaly, I’ll never do that.

• The themes are not related to gramps.
• The themes are Gtk dependant and you’ll have problems if Gtk modify some theme functionality.
• You’ll need to modify the theme for each gramps version.

[Wildkat]

Now, related issue, trying to install new theme. I understand the process, downloaded and extracted the file for theme that looked like I might like it. The issue is in the instructions it says to put resulting folder in the following file
" C:\Users\ user \.themes "
So, I don’t have such a folder. A guick Google search says it is here
C:\Users\yourusername\AppData\Local\Microsoft\Windows\Themes
installing there does nothing. so do I create the .themes folder in my user file? Or am I too far lost to help?

[Wildkat]

@Wildkat

so do I create the .themes folder in my user file?

Ok, so I answered my own question, this is exactly what I did and it worked perfectly

[DaveSch]

I updated the theme’s readme. Once the update is done on the Gramps wiki I’ll update it telling the new user to create the folder.

[emyoulation]

Dave,

Could you look through the theme and suggest CSS elements that Kari @kku could leverage for the extra colors in the FilterParams add-on?

The text is under CSS control but the 2 extra background colors don’t seem to be. They render the text unreadable when using a Dark theme. But… the question is: what elements would consistently give contrast to the text?:

[DaveSch]

The problem is the colors selected do not show the light text color of the dark theme. So the colors of the background needs to be able to show both;

Here is a site that allows selecting the various values to set colors. Notice the scale is 0 to 255. The scale used by the gdk code is 0.0 to 1.0.

CSS RGB and RGBA Colors

I have not found the same type of tool for a 0 to 1 scale. But using 100 and 150 as the main numbers, dividing by 255; I substituted the numbers in the code.

Original code

    self.categories_translated = [_(cat) for cat in self.categories]
    self.colors = [
         Gdk.RGBA(0.9,0.9,0.99, 0.999),
         Gdk.RGBA(0.9,0.99,0.9, 0.999),
         Gdk.RGBA(0.99,0.99,0.9, 0.999),
         Gdk.RGBA(0.99,0.9,0.9, 0.999),
         Gdk.RGBA(0.9,0.99,0.99, 0.999),
         Gdk.RGBA(0.99,0.9,0.99, 0.999),
    ]

became

    self.categories_translated = [_(cat) for cat in self.categories]
    self.colors = [
         Gdk.RGBA(0.39,0.39,0.58, 0.999),
         Gdk.RGBA(0.39,0.58,0.39, 0.999),
         Gdk.RGBA(0.58,0.58,0.39, 0.999),
         Gdk.RGBA(0.58,0.39,0.39, 0.999),
         Gdk.RGBA(0.39,0.58,0.58, 0.999),
         Gdk.RGBA(0.58,0.39,0.58, 0.999),
    ]

Seems to work for both light and dark themes. But you and @kku can play around with the palette.

[emyoulation]

I don’t think that making the add-on use hard-coded colors more compatible with a variety of background & foreground colors is the right approach.

He probably wants to be having 1 of the 2 extra colors referencing something like the menubar background color CSS elements. And the other color referencing a different background color.

The question becomes WHICH pre-defined elements can he reference? They need to be elements that expect to have the primary text CSS element layered on top (so they will be innately contrasty) but the chosen elements need to not confuse GUI context (like a color that indicates a warning or those that focus user on the indicated object). These colors are to add grouping context, and are not a call to action.

[DaveSch]

You are confusing what the addon code can manipulate and what the applied theme manipulates.

In the FilterParams code, @kku is setting the colors of the various layers of the filter components. All other colors are set by the theme the user has selected. The default in Gramps being Adwaita. Use a different theme, and all other colors and text, size of icons, shape of check boxes, etc can be changed. The color of the text is controlled by the theme. Now most will show dark text on a light theme, and white on a dark theme. There are probably themes available that makes the text color yellow or pink.

The problem as I saw it was the light text of the dark theme was being lost in the color scheme set for the filter layers. And the colors of the filter layers are the only thing set by the addon code.

[emyoulation]

Although disappointed that there isn’t dynamic CSS control in add-ons, couldn’t it be done indirectly?

So there’s the default, but when a theme is defined, can’t an add-on query any named element for its attribute?

In a Selenium WebDriver thread, the following Python code was suggested:

rgb = find_element_by_class_name("bar").value_of_css_property('background-color')

There’d be some extra ugliness of a dirty flag … which would have to be monitored in order to update the color if the theme changed too.

Apparently, the line above returns a string “rgb(221, 81, 76)” that has to be parsed into values:

rgb = find_element_by_class_name("bar").value_of_css_property('background-color')

r,g,b = map(int, re.search(
             r'rgb\((\d+),\s*(\d+),\s*(\d+)', rgb).groups())
color = '#%02x%02x%02x' % (r, g, b)

[DaveSch]

If there is, it is way beyond my abilities.

Think of it this way.

Gramps wants a check box with certain text and certain text in a popup tip window. That gets coded into the Gramps code.

The Theme selected by the user determines the size, shape and color of the check box and if the check mark is a check, an X or if the box is completely filled in. The theme sets the popup help window with background color, text color, does the window have a border? shadow? how big a shadow.

Remember, I can only manipulate what a real coder has dreamed up.

[emyoulation]

@DaveSch

Remember, I can only manipulate what a real coder has dreamed up.

I understand. This isn’t actually asking you to code anything.

Instead it is a question about what other named background elements are available in the Themes you’ve been tweaking.

(In my experience with CSS elsewhere, there tend to be MANY more elements named than used. And only the ones that are used tend to have Dark variation defined. Plus the Cascade design tends to vary… adding to the learning curve. So your experience with Themes will eliminate dead ends.)

With a list, we could look at the color value (in light & dark variant) and eliminate the ones that are too strident, look at the name and see which have too much contextual baggage.

Then make a recommendation of 2 named theme elements from what remains.

[DaveSch]

Download and look at the the GTK.css files of various themes. NO two are a like. And if there are css elements that will accept a color, that color could be any color on the spectrum.

And I think you are making it too complicated. The only themes you need to make sure are compatible with your addon are the Adwaita light and dark themes used by Gramps.

[emyoulation]

I agree completely! Just looking for 2 named Adwaita elements that change color and aren’t used in the dialog already.

[kku]

Thanks all. I think I will modify FilterParams to use the colors suggested by DaveSch - as they work for both light and dark themes.

Anyway, I am a bit confused because there seems to be two places where one can select “dark colors”: the “Preferences > Colors” tab and the “Preferences > Theme” tab.