Styling

Styling in Tilda

Tilda supports styling of the Tilda window via CSS.

General

Tilda reads a style.css file from ${XDG_CONFIG_HOME}/tilda, for most users this should resolve to: ~/.config/tilda/style.css.

It is possible to put custom CSS rules into this file to adjust the appearance of the tilda window or the wizard window.

Special classes

The tilda main window can be selected via the window#Main selector in CSS rules to avoid applying the style to the wizard window as well.

Examples

/* applies to all tabs, both in tilda main window and in the Preferences wizard */
notebook tab {}

/* applies only to active tabs of the main window */
window#Main notebook tab:checked {}

/* applies to all tabs in the Preferences wizard, but not in the main window */
dialog#Wizard notebook tab {}

Here is a more comprehensive example to get you started, with some sample properties:

/* Additional styling for Tilda terminal */

/* notebook is the main window area that contains both the terminal and tab bar */
window#Main notebook {
    padding: 4px;               /* create padding around the edge of the window */
    background-color: #323030;  /* this will affect the color of the visible padding */
    
    border-bottom-left-radius: 4px;     /* round off the bottom corners of */
    border-bottom-right-radius: 4px;    /* the window */
}

/* box is the object that contains the terminal itself */
window#Main notebook box {
    padding: 8px;               /* create padding around the terminal area*/
    background-color: #380C2A;  /* sets the color for the visible padding */
}

/* tabs is the tab bar object */
window#Main notebook tabs {
     background-color: #323030; /* color of the background behind the tabs */
 }

/* These settings will affect all tabs unless overridden */
/* We'll override these for active tabs later, so these will only apply to inactive tabs */
window#Main notebook tab {
    background-color: #212020;  /* background color of non-active tabs */
    color: #A3A2A2;             /* text color of non-active tabs */
    
    padding: 5px;           /* set padding on all sides of the label text */
    
    padding-left: 15px;     /* override the horizontal padding around tab */
    padding-right: 15px;    /* labels to make it wider */
}

/* overrides settings for a tab on mouse hover */
window#Main notebook tab:hover {
    box-shadow: 0 3px #C4C4C4 inset;    /* sets the highlight color */
}

/* this overrides settings for the active tab */
window#Main notebook tab:checked {
    background-color: #4B4848;  /* background color of active tabs */
    color: #E5E5E5;             /* text color of active tabs */
    box-shadow: 0 3px #E95420 inset;    /* sets the highlight color */
}

Debugging

To debug styling in Tilda the GtkInspector can be quite useful. It can be opened in normal GTK+ applications with CTRL+SHIFT+I or by running the application via GTK_DEBUG=interactive <some app>. However, on tilda and other terminal applications such as gnome-terminal using the shortcut does not quite work, because the shortcut is being intercepted by the VTE terminal widget and therefore never reaches the GtkInspector. A workaround for this is to right click on the tilda terminal to open the context menu and then press CTRL+SHIFT+I, this should open the GtkInspector.

The GtkInspector may need to be installed first, as not all distributions include it by default. It also needs to be enabled in GSettings or the shortcut will have no effect.