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.
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 su-config.js for editing. Scroll down and you'll see a section like this:
this.SITE_SHEETS = [
"site.css"
];
This is a place to load site-wide stylesheets. Static Ultra comes with an empty site.css so if you decide to add some site-wide styles you can get going quickly.
Additional stylesheets might look something like this:
this.SITE_SHEETS = [
"reset.css",
"other.css",
"site.css"
];
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.
Sometimes you just want a stylesheet for a specific page. For this you need to reference them on the page by putting the following anywhere in the <body> section. It might look something like this:
...
<body>
<!-- [SU_PAGE_SHEETS]
page-specific-stylesheet.css
some-folder/another-page-specific-stylesheet.css
[/SU_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!
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:
<!-- [SU_PAGE_SHEETS]
css/css-guide.css
[/SU_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.
While developing Static Ultra, I was about half way through coding a <div class="su-menu"></div> around the menu, then it occurred it'd probably then follow that I should do the same for ALL Static Ultra components, including the site title, footer, breadcrumb, and so on. While that's no programming issue, it might perhaps create confusion in themes where the theme creator has their own <div class="menu"></div> or similar for the title, footer etc. And then you have two divs basically doing the same thing, and also double the elements necessary.
As such, I made the decision to keep Static Ultra output as simple as possible and not wrap any components in any extra <div>s.
The result is that if you're creating a theme you'll need to put your own div in, which you'd likely do anyway (we did this in the creating themes tutorial), especially if you wanted the theme to also work as a standalone theme.
Anyway, I'm rambling on, you want to know how to style Static Ultra's menu. Well, let's say your menu config looks like this:
this.MENU_ENABLE = true;
this.SITE_MENU = [
[
"",
"Home"
],
[
"blog/",
"Blog"
],
[
"about.html",
"About"
]
];
Static Ultra will transform it into the following HTML:
<ul>
<li>
<a href="/">Home</a>
<a href="blog/">Blog</a>
<a href="about.html">About</a>
</li>
</ul>
Let's say then, that in your theme you have the menu <-- SU_MENU --> wrapped in <div class="breadcrumb"> Therefore, if you'd like to style your menu, you could use the following CSS to get started:
.menu ul
{
}
.menu li
{
}
.menu a
{
}
Your breadcrumb HTML will resemble the following if you are on a page in the root directory of your site:
<a href="./">Site</a> /
It will resemble the following if you are in a subdirectory:
<a href="../">Site</a> /
<a href="../some-folder/"></a> /
Therefore, if you'd like to style your breadcrumb, you could use the following CSS to get started, assuming your theme wraps the breadcrumb in <div class="breadcrumb">.
.breadcrumb
{
}
.breadcrumb a
{
}
Okay so the Theme Switcher is the exception to the rule because I needed to be able to style it myself in order for it to have a decent layout by default.
The Theme Switcher's HTML will resemble the following:
<div class="su-theme-switcher">
<div class="su-theme-switcher-left">
<select class="su-theme-switcher-dd">
<option value="select-theme">Choose Theme:</option>
<option value="default">Static Ultra Default</option>
<option value="my-theme">My Theme</option>
<option value="other-theme">Other Theme</option>
</select>
</div>
<div class="su-theme-switcher-right">
<input type="button" class="su-theme-switcher-btn" value="Go">
</div>
</div>
The Theme Switcher also has some built in styles which you may want to override:
.su-theme-switcher
{
display:inline-flex;
align-items:center;
}
.su-theme-switcher-left
{
flex:1;
margin-right:0.25rem;
}
.su-theme-switcher-right
{
/* No styles here! */
}
.su-theme-switcher-dd
{
width:8rem;
max-width:100%;
font-size:0.8rem;
}
And so, to style the Theme Switcher dropdown, you could get started with the following CSS:
.su-theme-switcher
{
}
.su-theme-switcher-left
{
}
.su-theme-switcher-right
{
}
.su-theme-switcher-dd
{
}
The remaining elements have no special HTML and are just direct copies of what is in your config. So there.
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!