The CSS Editor module allows you to write CSS from the Omeka S admin interface.
Once activated on the modules tab of the admin dashboard, CSS Editor is used on a site-by-site basis.
Managing Custom CSS
If CSSEditor is active, then a tab for CSSEditor will appear in the context menu for every site.
Using the CSSEditor interface
The first large text area is where you write your individual styles. Use that text area as you would a stylesheet file.
If you are new to working with CSS, we recommend the following free resources for getting started:
Next, CSS Editor also allows you to include external stylesheets by entering their URLs. There is no limit to the number of external stylesheet URLs you can enter. Each text input can take a single URL, and additional inputs can be created by clicking the button that reads "Add another stylesheet".
To remove external stylesheets, either clear the text inputs, or click on the trash can icon if there are multiple stylesheet fields.
Tutorial: Using a Google Webfont
You can make your Omeka S site more distinct by using a custom font. Google provides a free library of webfonts, and this tutorial will demonstrate how to apply a webfont to an Omeka S site using the "Default" theme through the CSS Editor interface.
For reference, the "Default" theme begins looking like this, using the "Open Sans" font.
This tutorial will override "Open Sans" with the "Lato" font family.
- Navigate to Google Fonts. Find the "Lato" font family and click on the orange "+" button to select it.
- A bar labeled "1 Family Selected" will appear in the lower right corner. Click on this bar.
- The bar will open a panel with the information you'll need to use Lato in your site. The first section, "Embed this font", has the external stylesheet URL you need. Select the URL in the
hrefattribute, as pictured.
- Copy this URL into one of the "External stylesheets" inputs in CSS Editor.
- Back in the Google Fonts panel, there is the second section titled "Specify in CSS". Copy the
- For this tutorial, you are setting Lato as the site's default font. To do this, in the large "CSS" text area in CSS Editor, set the
bodyelement's font family using the rule you just copied.
- Click the "Save" button in the top right corner.
Now the "Default" theme should look like this.