31 August 2011

Useful CSS styling

Default theme of GTK+ 3.x is quite ugly and colorless.

You may embed CSS style in evilvte and get a much clearer tabbar, for example:
For GTK+ 3.2.x and 3.1.x:
#define GTK3_CSS "GtkNotebook GtkButton { border-width: 0; padding: 0; } GtkWindow GtkNotebook { padding: 0; } GtkNotebook GtkLabel { color: gray60; } GtkNotebook GtkLabel:active { color: black; }"

For GTK+ 3.0.x:
#define GTK3_CSS "GtkNotebook GtkButton { border-width: 0; padding: 0; } GtkWindow GtkNotebook { color: gray60; padding: 0; } GtkWindow GtkNotebook:active { color: black; }"

4 comments:

  1. How do you change the background color of a specific GtkNotebook tab with CSS?

    ReplyDelete
  2. To Anonymous:
    I did not dig deep into GTK+ CSS system.
    Maybe you can check the upstream document:
    http://developer.gnome.org/gtk3/unstable/GtkCssProvider.html

    ReplyDelete
  3. Style classes and regions:
    Widgets can also add regions with flags to their context. The regions used by GTK+ widgets are:
    http://developer.gnome.org/gtk3/3.3/GtkStyleContext.html
    For GtkNotebook:
    Region: Tab
    Flags: even, odd, first, last
    Macro: GTK_STYLE_REGION_TAB

    /* Theme first notebook tab differently */
    GtkNotebook tab:nth-child(first) {
    background-color: red;
    }

    http://blogs.gnome.org/carlosg/2010/08/23/css-like-styling-for-gtk/

    ReplyDelete
  4. To Anonymous:
    Good to know, thanks. :-)

    ReplyDelete