How to use a Custom Theme (Gtk3)?

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

@sguyader
Nice color combination :thumbsup:

This is awesome! How does one apply it within Mint 17.3? Cheers.

It may depend on how you installed RT. If you compiled it yourself and followed the instructions from the RT website, just copy the .css file into the “themes” folder which is found in the main RT install directory. Launch RT, in Preferences choose the GreenOrange for the theme, close and restart RT.

@sguyader
Like it! How do I change the slider button from gray to the green or any other color for that matter.

@DenB the slider color is defined at line 291 of the css file:
background-color: @accent-color;

You can change it to @accent-color2 (which is defined at line 26) to make it the same green as the slider trough, or customize to whatever color you want.

Next version of TooWaBlue will contain a separate color defenition for the slider knop in the “Change me” section. :slight_smile:

1 Like

Is there a new version out?

The latest version is included in RT 4.2.1074
http://rawtherapee.com/downloads