Theming

This page explains the role of each of the files involved with styling Supernerd. The following are all of such files:

./supernerd.widget/

├── css-loader.coffee

├── scripts

│ ├── select-style

├── styles

│ ├── applied.css

│ ├── colors-wal.css -> ../../../../../../.cache/wal/colors.css

│ ├── colors.css

│ ├── common.css

│ ├── flat.css

│ ├── float.css

│ ├── fontawesome.css

│ ├── middle.css

│ ├── mono.css

│ ├── panel.css

│ └── soft.css

Theming involves two separate issues.

1. Styling: the shape, behaviour and positioning of the widgets
2. Colors

css-loader.coffee

Works as an independent widget. Loads up the necessary styles and colors. By default, it loads fontawesome.css colors-wal.css applied.css common.css more on each of them later on.

scripts/select-style

Copies the contents of the selected .css into applied.css. Hence the actual themes are stored in other .css files which are not loaded directly, but rather their contents are copied in applied.css as needed. This is necessary to make use of the on-the-fly theme switcher.

Usage

./select-style <theme-name> Please note that refers to the name without the '.css' extension, so, for instance: ./select-style mono

styles/applied.css

Contains the theme-specific styling .css that is loaded by css-loader.coffe. Its contents can be updated manually, which you should only do for debugging purposes, or though the select-style script.

styles/common.css

Contains styling .css which is common to all themes. Most of this is targeted at defining the behaviour of the widgets with respect to hovering, clicks, etc.

styles/fontawesome.css

Makes it possible to load all of the fancy icons of Supernerd.

styles/colors-wal.css

Not an actual styles file. This is a hyperlink to wal's output folder, which is, by default, in ~/.cache/wal. If you are using a different folder for wal's output, you should update this link to fit your setup. If you are not using wal at all, you should discard this file and load up styles/colors.css instead

styles/colors.css

An actual styles file which defines colors that you can use if you are not using wal. Change at will.

Working with wal

you have wal set up correctly in your system, you should be able to have any template you drop in ~/.config/wal/templates/ rendered with the updated color palette in wal’s output folder ~/.cache/wal/. If this process isn’t working correctly yet, than you need to fix your wal setup and you should look at the wal wiki. If everything is working, you need to drop the attached colors.less into ~/.config/wal/templates. The next time you run wal, this will render the file ~/.cache/wal/colors.less with the correct colors.

At this point, make sure that the symlink ../supernerd.widget/styles/colors-wal.css is pointing at ~/.cache/wal/colors.less. If not, you can remake it with this command:

ln -s ~/.cache/wal/colors/less ~/Library/Application\ Support/Übersicht/widgets/supernerd.widget/styles/colors-wal.css

Make sure to have the correct path to your supernerd installation directory in your command.

Then, make sure that the widget ../supernerd.widget/css-loader.coffee contains this line:

@import url(supernerd.widget/styles/colors-wal.css);

And everything should work.

What’s happening:

SN loads a widget (css-loader) which in turn imports a number of stylesheets. One of these (colors-wal) isn’t actually a style sheet but a symlink to a wal-generated colors list. So SN imports the colors that wal has generated and applies them to the widgets.