GTK3 theme and CSS

Columbo · **Posted:** Sun Jan 15, 2012 8:34 pm

Hi everybody!

I want to make a GTK3 theme, and this is my first encounter with CSS. So far I understand everything, but there is one thing that is pothering me lately.

I want to set a gradient for a background, and this is how it looks:

and I have been trying to figure it out, but can´t. Here´s what it looks like in css:

Code:

{
    background-color: #040404
}

.background {
    background-image: -gtk-gradient (linear,
                       left top, left bottom,
                       from (alpha (#040404, 1.0)),
                       to (alpha (#262c32, 1.0)));
}

I tried to set background-color like this:

Code:

background-color: -gtk-gradient (linear,
                         left top, left bottom,
                         from (alpha (#040404, 1.0)),
                         to (alpha (#262c32, 1.0)));

But I get white background, so is there any way to force background-color to use gradient like background-image does?

zerohour · **Posted:** Mon Jan 16, 2012 1:23 am

I'm not familiar with creating a whole GTK3 theme, just within an application but what is .background ? You don't have any selectors before it either.
And for background-color you have no selector at all or haven't shown it in the code.

Code:

{
    background-color: #040404
}

Columbo · **Posted:** Mon Jan 16, 2012 2:25 pm

I´m not making this theme from scratch, just editing the default Gnome 3 theme called Adwaita. Here´s the whole part that determines the base colors:

Code:

/***************
 * Base States *
 ***************/
GtkWindow {
    color: @theme_fg_color;
}

* {
    background-color: #040404
}

.background {
    background-image: -gtk-gradient (linear,
                       left top, left bottom,
                       from (alpha (#040404, 1.0)),
                       to (alpha (#262c32, 1.0)));
}

*:hover {
    background-color: shade (@theme_bg_color, 1.02);
    color: @theme_fg_color;
}

*:selected {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}

*:selected:focused {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}

*:insensitive {
    background-color: @insensitive_bg_color;
    color: @insensitive_fg_color;
    border-color: @insensitive_border_color;
}

*:active {
    background-color: shade (@theme_bg_color, 0.915);
}

.tooltip {
    padding: 4 4;
    border-style: none;
    background-color: @theme_tooltip_bg_color;
    color: @theme_tooltip_fg_color;
}

.tooltip * {
    background-color: @theme_tooltip_bg_color;
}

.grip {
    background-color: shade (@inactive_frame_color, 0.93);
}

.view.rubberband,
.rubberband {
    background-color: alpha (@theme_selected_bg_color, 0.35);

    border-color: @theme_selected_bg_color;
    border-style: solid;
    border-width: 1;
    border-radius: 2;
}

GtkTreeView .separator,
.separator {
    color: darker (@theme_bg_color);
}

.pane-separator {
    color: shade (@inactive_frame_color, 0.80);
}

.pane-separator:prelight,
.pane-separator:selected {
    color: @theme_text_color;
}

GtkStatusbar {
    padding: 5;
    color: @theme_fg_color;
    -GtkStatusbar-shadow-type: none;
}

.dnd {
    border-width: 1;
    border-style: solid;
    border-color: @theme_selected_bg_color;
    border-radius: 0;
}

I´m just messing with the colors, and haven´t actually edited anything else in this theme.

zerohour · **Posted:** Mon Jan 16, 2012 7:34 pm

I'm running Ubuntu natty so I don't have the Adwaita theme but I downloaded it.
I think the section your trying to color is a GtkTreeView or GtkViewport which is already defined in gtk-widgets.css

Code:

.view {
    background-color: @theme_base_color;
    color: @theme_fg_color;
    border-radius: 0;
    border-width: 3;
}

Looking in gtk.css it shows:

Code:

@define-color theme_base_color @base_color;

Then a few lines above that is:

Code:

@define-color base_color #ffffff;

So you would need to change base_color
Beyond that I'm not sure. I would post this question on http://www.deviantart.com/

Columbo · **Posted:** Tue Jan 17, 2012 2:00 pm

Yes, but I can´t set a gradient for a base_color (or actually any other variable) in the gtk.css. Like you said, it´s probably the best to ask on deviantart.

Thank you for your time, I appreciate it! :)

GTK+ Forums

GTK3 theme and CSS

Who is online