Developer Template Documentation v4.13

CSS stylesheets

---

Introduction

Stylesheets are the facial cream of most websites and applications. The template engine handles the stylesheets in a special way.

All pages in an application select the wrapper they're loaded into. As mentioned. creating various wrappers is an excellent way of creating different layouts for various pages.

Creating your first stylesheet (the Basics)

Let's assume we start with a completely empty project (ie, it has no templates whatsoever).

1. In the application's main page in Newzulu Platform, click the Stylesheets icon.
2. Click the "new" button and give your stylesheet a name. - The name may contain spaces
3. After clicking the "Create" button, Newzulu Platform takes you to the editor. Behold the beauty of an empty stylesheet.
4. You may choose to start editing this stylesheet, or go ahead and save it (empty) right away.
5. Congratulations! you've just created a stylesheet for your web application!

Ok now what? (the Next Steps)

Ofcourse, we want to see it in action, so go to the "Wrappers" section and select the wrapper you want to attach the stylesheet to.

When you open the wrapper template (chances are it's called "default"), notice the info button. You can go ahead and click that.

A black info panel will slide down, showing the wrapper's information like name, content-type and the stylesheet.

The stylesheet(s) are presented in a drop-down control, allowing you to pick one of the stylesheets found in the application.

The idea is that stylesheets are attached to wrapper templates.

If you've selected a stylesheet in the dropdown and saved the wrapper template, open the web page in a browser to see it adopt the styles from your stylesheets.

How did that happen?

Inside the wrapper template, near the top, you can find a variable called {$htmlheaders}. It will write (at least) two tags in the html, one <script> and one <link>

Let's forget about the <script> for now. The <link> will contain a url to /services/cssloader?<stylesheetid>

Because the stylesheets are saved to a database and need to be transferable between projects (think backup + restore) the stylesheet's id may change. The {$htmlheaders} variable knows this, and will adjust the id as necessary - ensuring your styles are always loaded correctly.

Then what?

Now suppose you need to really structure your stylesheets, and you want to create a couple more. How do we do this?

Similar to the CSS "@import url()" method, the Template engine has it's own variant (but you're still free to import your own using @import!).

Let's assume there are 2 stylesheets in this application, 'main' and 'typography'. You can import 'typography' to 'main' using the following syntax:

@simport url('typography');

Eventhough url() might seem a bit off (name would have made sense), we tried to stay as close to CSS as you know it.