How to use a Custom Theme (Gtk3)?

Is there a way to add a custom theme to RT-Gtk3 without overwriting the original one?

I add my tweaked theme to the theme folder inside the RT installation folder with the name e.g. “TooWaBooBlue.css” and it will show up in the preferences dialog. I can select it and it’s saved into the option file, but when I start RT, it always opens “RawTherapee.css”

If you want to test my tweaks, here is the download link to the latest version:
http://filebin.net/311rk3mcfo

cu TooWaBoo

1 Like

Yes! But I broke it when adding RawTherapee.css and simplifying things and forgot I broke it and haven’t fixed it yet :wink:

1 Like

Thanks, I’ll wait until you repair it.:grin:

Updated my custom theme in the first post.
The histogram is now black again.
Testet on Win 10, RT 4.2.670

cu TooWaBoo

I’ve created another theme without 3D buttons and the thousends of borders :relaxed:, but I’ve problems to change the radio buttons and checkboxes.

I figured out, that I have to change “-gtk-icon-source” and tried to use a base64-png, but it will not show up. Is there any way to do this?

Link to theme

I can try to help but I don’t understand the problem yet. What is “base64-png”?

With base64 you can use images as a data string:

Like this
url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAAZSURBVDhPY/hPIhjVQAwY1UAMGHQa/v8HAK+t/R8kTA7nAAAAAElFTkSuQmCC”)

This works in stylesheets for e.g. web browser. The example above is a white square.
If you copy the part between “…” in your browsers addressbar, you can see the white square.

I don’t think you can use base64 encoded data here. Not sure if gtk will parse it the way you’re expecting it to.

1 Like

Nice theme TooWaBoo, I like it better than the one that comes with RT for now.

Is there a way to make the thin scrolling bar bigger and colorful. The one that is thin but gets bigger when you put the mouse cursor over it. It is hard to find fast at times.

2 Likes

I think so too.

Thanks :blush:
I don’t think that the scrollbar can be controlled within the theme file. I can make it bigger, but this looks so ugly. There has to be done some things outside the theme file.

I want to include the image into the theme file, so no external image is needed.

This works for e.g:
-gtk-icon-source: url(“C:/Program Files/RawTherapeeGTK3/images/Chanmixer-BR.png”);
Is there a way to reference the image with an indirect path?

cu TooWaBoo

First of all, let me thanks you a lot for this nice and essential theme, that I have taken as a starting point to design my own GTK3 theme for PhotoFlow. Without you, I would still be struggling with the CSS syntax, most likely without much success :smile:

However, for the scrollbars I have taken the Mint theme as an example, simply making it darker… here is how they look like:

and below is the relevant portion of the CSS file.

Hope this can help!

/*************
 * scrollbar *
 *************/

.scrollbar {
    -GtkRange-trough-border: 2;
    -GtkScrollbar-has-backward-stepper: 0;
    -GtkScrollbar-has-forward-stepper: 0;
    -GtkRange-slider-width: 10;
    -GtkScrollbar-min-slider-length: 30;
    -GtkRange-stepper-spacing: 0;
    -GtkRange-trough-under-steppers: 1;
}

.scrollbar.trough,
.scrollbar.trough.vertical {
    border-width: 0 0 0 1px;
    border-radius: 0;
    border-color: alpha(@border, 0.5);
}

.scrollbar.trough,
.scrollbar.trough.vertical {
    background-image: linear-gradient(to right,
                            shade(@theme_bg_color,0.9),
                            shade(@theme_bg_color,0.9));
}

.scrollbar.trough.horizontal {
    border-width: 1px 0 0 0;
    background-image: linear-gradient(to bottom,
                            shade(@theme_bg_color,0.9),
                            shade(@theme_bg_color,0.9));
}

.scrollbar.slider,
.scrollbar.slider.vertical {
    border: 1px solid @border;
    border-radius: 20px;
    background-color: transparent;
    background-image: linear-gradient(to right,
                            shade(@theme_bg_color, 1.12),
                            shade(@theme_bg_color, 0.95));
    box-shadow: 1px 0 alpha(white, 0.5);
}

.scrollbar.slider.vertical:hover {
    background-image: linear-gradient(to right,
                            shade(@theme_bg_color, 1.4),
                            shade(@theme_bg_color, 1.2));
    box-shadow: 1px 0 alpha(white, 0.3);
}

.scrollbar.slider.horizontal {
    background-image: linear-gradient(to bottom,
                            shade(@theme_bg_color, 1.12),
                            shade(@theme_bg_color, 0.95));
}

.scrollbar.slider.horizontal:hover {
    background-image: linear-gradient(to bottom,
                            shade(@theme_bg_color, 1.4),
                            shade(@theme_bg_color, 1.2));
        box-shadow: 1px 0 alpha(white, 0.3);
}

.scrollbar.slider.fine-tune:prelight:active {
    border: 3px solid transparent;
    background-color: shade(@theme_bg_color, 0.9);
    background-image: none;
    box-shadow: none;
}
1 Like

You’re welcome. :relaxed:

I’ve copied your styles into RT, but they have no effect. I guess, that the developers have protected some things.
For e.g. the style “margin: 10px;” won’t do anything, but is supported in Gtk.

cu TooWaBoo

Gtk3 developers tell me you can (only?) change it by putting GTK_OVERLAY_SCROLLING=0 in /etc/environment then logging out and logging back in.

1 Like

Thanks, but I’m on windows, where is ./etc/environment?

No idea :slight_smile: I asked whether a CSS solution is possible, no reply yet.

1 Like

Typically, you can put /etc/ under the same folder as your lib folder under Windows. Or, if you are building only for yourself, you can try to use your home folder.

1 Like

You can also use any other means of setting environment variables (in the shell calling the program from, using Windows settings, …) and also do it inside the program before calling gtk_init().

1 Like

@houz, @partha

Thanks for your replys , but I’m looking for a css solution whithout touching anything external.

I’ve found a css solution for the checkbox and radio button.
This is how it will look like:

I’m not really happy with the checkbox, but it’s better than the orginal one.

Later today I will upload the final theme in a new topic.

  • New checkbox and radio button
  • Removed the military light green tone background in Load/Save dialogs
  • Removed the ugly dotted focus border which sometimes appears.
  • minor changes

Edit: It’s online now: Final Version

Based on @TooWaBoo’s excellent work, I made very slight modifications in the css file, just to change some colors to better suite my taste. I don’t know if it’s worth posting this theme, but if anybody wants to try it out, here it is:

Screenshot

css file: http://filebin.net/8u9rhb2eug

2 Likes