GTK+ Forums

Discussion forum for GTK+ and Programming. Ask questions, troubleshoot problems, view and post example code, or express your opinions.
It is currently Thu Oct 02, 2014 4:23 am

All times are UTC




Post new topic Reply to topic  [ 2 posts ] 
Author Message
 Post subject: CSS style-property
PostPosted: Sun Jul 22, 2012 8:22 pm 
Offline
Familiar Face

Joined: Thu Dec 15, 2011 6:23 pm
Posts: 36
Location: Hrvatska
zerohour has very good tutorial about CSS styling in GTK3
thanks zerohour - you made a good job.

however I had some problems ( solved ) and want to share with you, it can help someone :-)

there is style-property for specific widget and style-property inherit in CSS
and there are also properties from parent widgets in widgets hierachy

for example: GtkEntry widget has explicite only four style-properties:
icon-prelight
inner-border
invisible-char
progress-border

Once more, if we looking at object hierarchy, there is GtkWidget as parent object for GtkEntry.
It has these style-properties:
cursor-aspect-ratio
cursor-color
focus-line-pattern
focus-line-width
focus-padding
interior-focus
link-color
scroll-arrow-hlength
scroll-arrow-vlength
secondary-cursor-color
separator-height
separator-width
visited-link-color
wide-separators
window-dragging


but I can set FONT or COLOR style-property for GtkEntry
it is obvious that FONT or COLOR are inherit from CSS style-properties

and finaly - and this is the issue I want to share with you,
care must be taken in which order you set properties in external CSS file.
if you have both GtkEntry and GtkSpinButton in a single form
and put something like this:
Code:
GtkEntry
{
   font: Serif 14;
   color: blue;
}

GtkSpinButton
{
   font: Serif 24;
   color: red;
}

then you will get what you are planning: small blue entry and big red spin.
If you reverse order - you will get both widget small blue font,

Now it is obvious that PARENT object comes first,
then CHILD object in hierarchy comes second.

Cheers !


Top
 Profile  
 
 Post subject: Re: CSS style-property
PostPosted: Sun Jul 22, 2012 9:24 pm 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
Good point, but that's where selectors and naming your widgets using gtk_widget_set_name () becomes important. As I mentioned in my tutorial, and the manual says:
Quote:
To only match a widget when it occurs inside some other widget, write the two selectors after each other, separated by whitespace.

So even without naming your widgets you could just do:
Code:
GtkSpinButton
{
   font: Serif 24;
   color: red;
}

GtkSpinButton GtkEntry    /* style ALL GtkEntry's that are children of ANY GtkSpinButton */
{
   font: Serif 14;
   color: blue;
}

But it's still a better idea to name at least the parent widget. In this case GtkSpinButton. Then name any additional GtkEntry you add to the application.
Code:
#mySpinButton
{
   font: Serif 24;
   color: red;
}

#mySpinButton GtkEntry  /* style only GtkEntry's that are children of mySpinButton */
{
   font: Serif 14;
   color: blue;
}

#someOtherEntry   /* some other GtkEntry that's not part of a spin button  */
{
   font: Serif 26;
   color: green;
}


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

All times are UTC


Who is online

Users browsing this forum: No registered users and 3 guests


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:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group