CSS Guide

So far you've only seen CSS used in a theme. But Static Ultra enables you to have CSS files on a site-wide, theme-by-theme and page-by-page basis.

Site-Wide Stylesheets

There are times where you want a stylesheet to be applied all the time, across your entire website, regardless of the current theme or page. Examples might be:

Static Ultra enables you to have as many side-wide stylesheets as you want, and you can name them whatever you want.

Open config.js for editing. Scroll down and you'll see a section like this:

this.SITE_SHEETS = [ "main.css" ];

These are your site-wide stylesheets. Static Ultra comes with a default, empty one called main.css to get you going. But you can remove it, rename it, add more if you wish. Additional stylesheets in the config might look something like this:

this.SITE_SHEETS = [ "main.css", "my-other-site-wide-styles.css", "reset.css" ];

Theme Specific Stylesheets

If you completed the previous tutorial, you've already seen a stylesheet related to a theme. Just include them like normal with link rel="stylesheet" href="xxx.css", and Static Ultra will automatically update the URLs when pulling the theme into your site.

Page Specific Stylesheets

Sometimes you just want a style on a specific page. For this you need to put the styles into a stylesheet, and then reference them on the page by putting the following anywhere in the section. It might look something like this:

... <body><div class="static-ultra"> <!-- [STATIC_ULTRA_PAGE_SHEETS] path/to/my/page/stylesheet.css path/to/my/page-other-stylesheet.css [/STATIC_ULTRA_PAGE_SHEETS] --> <!-- Page Content Begin --> <p>Blah blah blah</p> ...

The paths must be relative to the website root, not the page. Static Ultra will then load those stylesheets just for that page. In fact, I've done that on this page! The following div with class ".example" is styled using a stylesheet called page-css-test.css!

Here's an example:

Example Awesomeness!

To achieve this, I put the following code in this page:

<div class="example"> Example Awesomeness! </div>

I made a stylesheet called "css-guide.css", and placed it in a folder called "css". Could put it anywhere, though. It contains the following code:

.example { color:green; font-weight:bold; border:solid 2px green; border-top-left-radius:0.5rem; border-bottom-right-radius:0.5rem; margin-bottom:1rem; }

Then, at the start of this page I added:

<!-- [STATIC_ULTRA_PAGE_SHEETS] css/css-guide.css [/STATIC_ULTRA_PAGE_SHEETS] -->

And that's it! You can have as many page-specific sheets as you want, name them what you want, and put them where you want.

Styling Static Ultra's Menu

Todo

Styling Static Ultra's Breadcrumb

Todo


The next tutorial is similar to this one, but for JavaScript. After that we'll take a look at adding a website Section (folder). And then we're all done!

» JS Guide