CSS style-property

kepica · **Posted:** Sun Jul 22, 2012 8:22 pm

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 !

zerohour · **Posted:** Sun Jul 22, 2012 9:24 pm

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;
}

GTK+ Forums

CSS style-property

Who is online