GTK+ Forums

Discussion forum for GTK+ and Programming. Ask questions, troubleshoot problems, view and post example code, or express your opinions.
It is currently Sat Oct 25, 2014 11:35 pm

All times are UTC




Post new topic Reply to topic  [ 5 posts ] 
Author Message
 Post subject: GTK3 theme and CSS
PostPosted: Sun Jan 15, 2012 8:34 pm 
Offline

Joined: Sun Jan 15, 2012 7:11 pm
Posts: 3
Location: Croatia
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:

Image

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?


Top
 Profile  
 
 Post subject: Re: GTK3 theme and CSS
PostPosted: Mon Jan 16, 2012 1:23 am 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
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
}


Top
 Profile  
 
 Post subject: Re: GTK3 theme and CSS
PostPosted: Mon Jan 16, 2012 2:25 pm 
Offline

Joined: Sun Jan 15, 2012 7:11 pm
Posts: 3
Location: Croatia
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.


Top
 Profile  
 
 Post subject: Re: GTK3 theme and CSS
PostPosted: Mon Jan 16, 2012 7:34 pm 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
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/


Top
 Profile  
 
 Post subject: Re: GTK3 theme and CSS
PostPosted: Tue Jan 17, 2012 2:00 pm 
Offline

Joined: Sun Jan 15, 2012 7:11 pm
Posts: 3
Location: Croatia
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! :)


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group