CSSlets

CSSlets allow you to customize parts of the magazine and user interface that you cannot modify using the live editor.

Using CSSlets requires knowledge of CSS (Cascading Stylesheets), explaining CSS is beyond the scope of the manual. If you want to learn more about CSS there are plenty of online resources and books that will help you get started.

This page provides some examples of scenarios where you can use CSSlets.

The CSS editor

The CSS editor supports syntax highlighting and will display warnings when invalid CSS is entered. Sometimes a warning is given for example for selectors with double class name, wher ethe CSS is valid and working, in that cas eyou can ignore the warnings.

Format CSS

The format CSS is applied to all editions you create. After logging in click on "Styling", you will then see a list of buttons which will open the CSS editor for different devices.

CSS rules added to "Generic" will be used on all devices, the others only on the devices that they describe. You can also add rules to the print styling to control how your magazine is printed.

Edition CSS

The CSS editor for editions can be found in the Edition Settings, to find it follow the following steps:

  1. Click the cogwheel left of your username. (top right corner)
  2. A popup with setting will appear, select the "Styling" tab.
  3. Click the 'Edit styles' button.
  4. Enter your CSS rules in the editor that will open.
  5. After setting the color close the editor window and save.

Article specific CSS

Each article can have CSS applied to it. You can find the article CSS editor under the "Scripting" tab on the right side.

Selectors of the article specific CSS will automatically be prepended so that the CSS will only be applied to the current page, you cannot see this in the editor, but you can inspect the applied CSS using your browser's inspector.

Setting a background color

Changing the background for one edition can easily be done by adding the following rule to the edition CSS, if you want to set it for all editions, add it to the format CSS.

body {background-color: #000000; }

#000000 is the hexadecimal code for "black", if you don't know the color code you can use an online color picker to find out.

When you preview the magazine the background color will be changed.

Last modified: