Siduction Forum

Siduction Forum => Software - Support => Topic started by: seasons on 2013/10/04, 22:01:20

Title: GTK Theming Question
Post by: seasons on 2013/10/04, 22:01:20
I use xfce and and a fairly dark theme named Xfce-dusk. The problem I have with it is that there's not enough contrast between the scrollbar and the scrollbar background. It was bearable on my old monitor, but that died, and now I'm stuck with a really crappy 17" TN panel that only has analog connection.

I just can't see the scrollbar anymore, especially at night. Anyone know how to lighten the scrollbar color?
Title: RE: GTK Theming Question
Post by: farinet on 2013/10/04, 23:53:28
May be somewhat ingenous, but: if you play around with changing themes (does lxappearance work with xfce too?)?
Title: RE: GTK Theming Question
Post by: der_bud on 2013/10/05, 11:42:12
Perhaps you could look for gnome-color-chooser, as found in an answer to this similar question: http://unix.stackexchange.com/questions/1487/how-do-i-change-xfce-4-theme-tab-colors (http://unix.stackexchange.com/questions/1487/how-do-i-change-xfce-4-theme-tab-colors)
Title: RE: GTK Theming Question
Post by: seasons on 2013/10/05, 16:06:32
farinet: I like this theme and don't want to change it. lxappearance looks similar to gnome-color-chooser (for gtk2)

der_bud: that's an older tool for gtk2. I tried it anyway and it did the trick for gtk2 apps, most notably iceweasel, so thanks for that.
Title: Re: GTK Theming Question
Post by: GeneC on 2013/10/31, 16:33:27
This is a very nice handy tool to change theme looks (colors, et).


Satya's GTK Theme Preferences



http://www.webupd8.org/2012/09/customize-gtk3-gtk2-theme-colors-using.html (http://www.webupd8.org/2012/09/customize-gtk3-gtk2-theme-colors-using.html)


You can compile it from souce here


https://github.com/satya164/gtk-theme-config (https://github.com/satya164/gtk-theme-config)


(http://1.bp.blogspot.com/-blKBEqdMGIs/UEeZWd-amXI/AAAAAAAAJ98/-YQSa4ZcKAc/s320/gtk-theme-prefs.png)


Quote

Satya (http://satya164.deviantart.com/), who's behind some beautiful GTK and GNOME Shell themes, has created a cool new tool that lets you customize GTK theme colors.

Right now, `GTK Theme Preferences` (that's the name of the tool) works with any GTK2 and GTK3 theme and lets you customize the following:[/size][/color][/size]selected background color[/q]
  • Xfce panel, Gnome panel and Unity panel: background and text color
  • menu background and font color
  • [/size]
    Even though this is a brand new tool, it seems that GTK Theme Preferences might beincluded (https://wiki.ubuntu.com/Xubuntu/Roadmap/Specifications/R/ThemeEditor) by default in the upcoming Xubuntu 13.04.
    A similar feature was available in GNOME 2 by default, but unfortunately it wasn't included in GNOME 3 and since then, GNOME (this includes Unity) users who like to customize the GTK theme colors had to do it manually, by changing configuration files. Well, that's not the case anymore thanks to GTK Theme Preferences. The application comes with a limited set of features for now as you can see (which are still very useful), but hopefully it will gain even more customization options in the future.







    [/size][/font]
Title: Re: GTK Theming Question
Post by: seasons on 2013/10/31, 18:28:51
^Yes, that's available in the repo (package name: gtk-theme-config), but it does not allow one to tweak the scrollbar colors. Thanks anyway.
Title: Re: GTK Theming Question
Post by: Gabriel_M on 2013/11/02, 01:01:00
Check the panel.rc file and look for:
bg[ACTIVE].
Change that value and the button will change colour.
Title: Re: GTK Theming Question
Post by: seasons on 2013/11/11, 03:04:32
Quote from: Gabriel_M on 2013/11/02, 01:01:00
Check the panel.rc file and look for:...

I don't have a panel.rc file. For the gtk-3.0 portion of the theme, all I have is gtk.css


@define-color fg_active #dadada;
@define-color fg_insensitive #151515;
@define-color fg_normal #ffffff;
@define-color fg_prelight #fcfcfc;
@define-color fg_selected #fcfcfc;

@define-color bg_active #151515;
@define-color bg_insensitive #303030;
@define-color bg_normal #232323;
@define-color bg_prelight #003263;
@define-color bg_selected #002849;

@define-color base_active #2f519a;
@define-color base_insensitive #303030;
@define-color base_normal #121212;
@define-color base_prelight #002849;
@define-color base_selected #003263;

@define-color text_active #fcfcfc;
@define-color text_insensitive #fcfcfc;
@define-color text_normal #fcfcfc;
@define-color text_prelight #fcfcfc;
@define-color text_selected #fcfcfc;

* {
    engine: xfce;

    -xfce-smooth-edge: true;
    -xfce-grip-style: disabled;

    -GtkButton-default-border        : 0;
    -GtkButton-default-outside-border: 0;
    -GtkButton-child-displacement-x  : 0;
    -GtkButton-child-displacement-y  : 1;
    -GtkCheckButton-indicator-size   : 8;
    -GtkMenuBar-internal-padding     : 1;
    -GtkMenuBar-shadow-type          : out;
    -GtkPaned-handle-size              : 4;
    -GtkRange-slider-width           : 12;
    -GtkRange-stepper-size           : 10;
    -GtkRange-stepper-spacing        : 0;
    -GtkRange-trough-border          : 0;
    -GtkScrollbar-has-backward-stepper: true;
    -GtkScrollbar-has-secondary-backward-stepper: false;
    -GtkScrollbar-min-slider-length  : 10;
    -GtkToolbar-shadow-type          : out;
    -GtkWidget-focus-line-width      : 1;
    -GtkWidget-focus-padding         : 1;
    -GtkWidget-interior-focus        : true;
    -GtkWidget-cursor-color          : #fcfcfc;
    -GtkWidget-secondary-cursor-color: #fcfcfc;
    -GtkWidget-cursor-aspect-ratio   : 0.1;

    border-width: 1px 1px;

    color: @fg_normal;
    background-color: @bg_normal;
    border-color: darker(@bg_normal);
}

*:active {
    color: @fg_active;
    background-color: @bg_active;
    border-color: darker(@bg_active);
}

*:insensitive {
    color: @fg_insensitive;
    background-color: @bg_insensitive;
    border-color: darker(@bg_insensitive);
    text-shadow: 1px 1px white;
}

*:hover {
    color: @fg_prelight;
    background-color: @bg_prelight;
    border-color: darker(@bg_prelight);
}

*:selected {
    color: @fg_selected;
    background-color: @bg_selected;
    border-color: darker(@bg_selected);
}

.view, .entry {
    color: @text_normal;
    background-color: @base_normal;
    border-color: darker(@bg_normal);
}

.view:active, .entry:active {
    color: @text_active;
    background-color: @base_active;
    border-color: darker(@bg_normal);
}

.view:insensitive, .entry:insensitive {
    color: @text_insensitive;
    background-color: @base_insensitive;
    border-color: darker(@bg_normal);
}

.view:hover, .entry:hover {
    color: @text_prelight;
    background-color: @base_prelight;
    border-color: darker(@bg_normal);
}

.view:selected, .entry:selected {
    color: @text_selected;
    background-color: @base_selected;
    border-color: darker(@bg_normal);
}

.view row:nth-child(odd) {
    background-color: shade(@base_normal, 0.93);
}

.view row:nth-child(odd):active {
    background-color: shade(@base_active, 0.93);
}

.view row:nth-child(odd):insensitive {
    background-color: shade(@base_insensitive, 0.93);
}

.view row:nth-child(odd):hover {
    background-color: shade(@base_prelight, 0.93);
}

.view row:nth-child(odd):selected {
    background-color: shade(@base_selected, 0.93);
}

GtkCalendar {
    color: @text_normal;
}

.header {
    color: @fg_normal;
}

GtkCalendar:active {
    color: @text_active;
}

GtkCalendar:insensitive {
    color: @text_insensitive;
}

GtkCalendar:hover {
    color: @text_prelight;
}

GtkCalendar:selected {
    color: @text_selected;
}

.highlight {
    color: @text_active;
    background-color: @base_active;
}

GtkCalendar:inconsistent {
    color: mix(lighter(@bg_normal), darker(@bg_normal), 0.5);
}

GtkCalendar:selected {
    color: @text_active;
    background-color: @base_active;
}

.check, .radio {
    color: @text_normal;
    background-color: @base_normal;
    border-color: darker(@bg_normal);
}

.check:active, .radio:active {
    color: @text_normal;
    background-color: @base_normal;
    border-color: darker(@bg_normal);
}

.check:insensitive, .radio:insensitive {
    color: @text_insensitive;
    background-color: @base_insensitive;
    border-color: darker(@bg_insensitive);
}

.check:hover, .radio:hover {
    color: @text_prelight;
    background-color: @base_prelight;
    border-color: darker(@bg_prelight);
}

.check:selected, .radio:selected {
    color: @text_active;
    background-color: @base_active;
    border-color: darker(@bg_active);
}

.check:inconsistent, .radio:inconsistent {
    color: @fg_normal;
    background-color: @base_normal;
    border-color: darker(@bg_normal);
}

.check:insensitive:inconsistent, .radio:insensitive:inconsistent {
    color: @fg_insensitive;
    background-color: @base_insensitive;
    border-color: darker(@bg_insensitive);
}

.cell {
    color: @text_normal;
}

.cell:active {
    color: @text_active;
}

.cell:insensitive {
    color: @text_insensitive;
}

.cell:hover {
    color: @text_prelight;
}

.cell:selected {
    color: @text_selected;
}

.spinbutton.button {
    color: @fg_normal;
    background-color: @bg_normal;
}

.spinbutton.button:active {
    color: @fg_active;
    background-color: @bg_active;
}

.spinbutton.button:insensitive {
    color: @fg_insensitive;
    background-color: @bg_insensitive;
}

.spinbutton.button:hover {
    color: @fg_prelight;
    background-color: @bg_prelight;
}

.spinbutton.button:selected {
    color: @fg_selected;
    background-color: @bg_selected;
}

.progressbar {
    background-color: @bg_prelight;
    border-color: darker(@bg_prelight);

    border-width: 1px 1px;
}

.scale.trough, .scrollbar.trough {
    background-image: -gtk-gradient(linear, left top, right top, from(shade(@bg_active, 1.0)), to(shade(@bg_active, 1.25)));
    border-color: darker(@bg_active);
}

.trough.horizontal {
    background-image: -gtk-gradient(linear, left top, left bottom, from(shade(@bg_active, 1.0)), to(shade(@bg_active, 1.25)));
    border-color: darker(@bg_active);
}

.notebook tab, .notebook tab * {
    color: @fg_active;
    background-color: @bg_active;
    border-color: darker(@bg_active);
}

.notebook tab:active, .notebook tab *:active {
    color: @fg_normal;
    background-color: @bg_normal;
    border-color: darker(@bg_normal);
}

.expander {
    color: @base_normal;
    border-color: @fg_normal;
}

.expander:active {
    color: @base_normal;
    border-color: @fg_normal;
}

.expander:insensitive {
    color: @base_insensitive;
    border-color: @fg_insensitive;
}

.expander:hover {
    color: @fg_prelight;
    border-color: @fg_prelight;
}

.expander:selected {
    color: @base_selected;
    border-color: @fg_selected;
}

GtkComboBox {
    padding: 0px;
}

GtkComboBox .button {
    padding: 1px;
}

.radio {
    -GtkCheckButton-indicator-size: 10;
}

.menuitem {
    border-width: 1px 2px;
}

.button, .slider.horizontal {
    background-image: -gtk-gradient(linear, left top, left bottom, from(shade(@bg_normal, 1.25)), to(shade(@bg_normal, 1.0)));

    -GtkWidget-focus-padding: 0;
}

.button:active, .slider.horizontal:active {
    background-image: -gtk-gradient(linear, left top, left bottom, from(shade(@bg_active, 1.0)), to(shade(@bg_active, 1.25)));
}

.button:insensitive, .slider.horizontal:insensitive {
    background-image: -gtk-gradient(linear, left top, left bottom, from(shade(@bg_insensitive, 1.25)), to(shade(@bg_insensitive, 1.0)));
}

.button:hover, .slider.horizontal:hover {
    background-image: -gtk-gradient(linear, left top, left bottom, from(shade(@bg_prelight, 1.25)), to(shade(@bg_prelight, 1.0)));
}

.button:selected, .slider.horizontal:selected {
    background-image: -gtk-gradient(linear, left top, left bottom, from(shade(@bg_selected, 1.0)), to(shade(@bg_selected, 1.25)));
}

.menuitem {
    border-width: 1px 1px;
}

.menuitem:hover {
    border-style: solid;
}

.slider.vertical {
    background-image: -gtk-gradient(linear, left top, right top, from(shade(@bg_normal, 1.25)), to(shade(@bg_normal, 1.0)));
}

.slider.vertical:active {
    background-image: -gtk-gradient(linear, left top, right top, from(shade(@bg_active, 1.0)), to(shade(@bg_active, 1.25)));
}

.slider.vertical:insensitive {
    background-image: -gtk-gradient(linear, left top, right top, from(shade(@bg_insensitive, 1.25)), to(shade(@bg_insensitive, 1.0)));
}

.slider.vertical:hover {
    background-image: -gtk-gradient(linear, left top, right top, from(shade(@bg_prelight, 1.25)), to(shade(@bg_prelight, 1.0)));
}

.slider.vertical:selected {
    background-image: -gtk-gradient(linear, left top, right top, from(shade(@bg_selected, 1.0)), to(shade(@bg_selected, 1.25)));
}


I tried altering bg_active, and it changed the wrong part of the scrollbar.