Re: Styling labels?

Hi Kevin,

Hope you are still looking for a solution, maybe you've already figured this out but I'll share my experience anyway.

Yes, CSS is the way to do it and it is pretty simple. The Gtk documentation is a lot more descriptive than gtkmm when it comes to CSS nodes used by a particular object. See below for GtkLabel.

GtkLabel already has several style classes like .title, .sub-title etc which you can use straight away. All you have to do is,

Gtk::Label * pLabel;
Glib::RefPtr<Gtk::StyleContext> refStyleContext;

// Here I create a new object at run-time. You may also have it as a class member or get it from 'builder'.
pLabel = Gtk::manage(new Gtk::Label("Test label"));

// Get the style context from the label object.
refStyleContext = pLabel->get_style_context();

// Add the style class

// Add to container

You can also create your own style classes in which case the CSS file should have an entry as below.

  font-size: 13px;
  color: red;
  background-color: white;

Loading custom style specification is a bit more involved. It is possible to apply custom styles to individual widgets but I prefer an application wide loading. For that this is what you can do. In my case I wanted some changes to the stock themes Adwaita and Mojave-light. Instead of touching the original CSS files (and probably messing it up) I preferred to specify the required changes in a separate file and load it once the application theme has changed.

Glib::RefPtr <Gdk::Screen> refScreen = Gdk::Display::get_default()->get_default_screen();
Glib::RefPtr <Gtk::CssProvider> refProvider = Gtk::CssProvider::create();

//Remove existing provider
if (m_refCurrentCustomStyleProvider)

  Glib::ustring sPath(Glib::ustring::compose("themes/%1/gtk-3.0/gtk%2.css",

  //Test if a local override is available, otherwise use Adwaita
  if (!Glib::file_test(sPath,
    sPath = Glib::ustring::compose("themes/Adwaita/gtk-3.0/gtk%1.css",


  //Add new provider for screen

  m_refCurrentCustomStyleProvider = refProvider;
} catch(Gtk::CssProviderError &e)
                 "Error loading custom styles. " << e.what());
} catch(Glib::Error &e)
                 "Error loading custom styles. " << e.what());

The best way to test your styles before you create your CSS file is to use gtk-inspector. In my (Ubuntu) system the key CTRL + SHIFT+ D activates it. You first need to enable the key binding. In Linux execute the following in a terminal.
gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true
There you can try out all you want with styling and once you're satisfied you can dump it all into your CSS file.

Please consider the Environment before printing this e-mail.

The information contained in this message (including any attachments) is confidential and may be privileged or otherwise protected from disclosure.  If you are not the intended recipient, you must not copy this message or attachment or disclose the contents to any other person.  If you have received this transmission in error, please notify the sender immediately by return e-mail and permanently delete this message and any attachments from your system.  Any dissemination, use, review, distribution, printing or copying of this message in whole or in part is strictly prohibited.  Please note that e-mails are susceptible to change.
SKANRAY(including its group of companies) shall not be liable for any omission or error in the message, improper or incomplete transmission of the information contained in this communication or for any delay in its receipt or damage to your system.  SKANRAY(or its group of companies) does not guarantee that the integrity of this communication has been maintained or that this communication is free of viruses, interceptions or interference.

[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]