BehindTheRabbit

While Sandvox lets you choose many features for your website, sometimes you may want to tweak your design more. Using just few lines of code, you can greatly amplify your possibilities.

Let’s say you don’t like the default font, for example. You can select each chunk of text inside each text field and manually choose a different font from: “Format” menu > Fonts > Show Fonts. Too large? Select again every text field one by one and decrease its size. New page? Do it again. New pagelet? Do it again. Changed your mind? You better don’t change your mind…

With just one line of code you can change all at once the Font Family for your entire website, for specific parts of it (e. g. just the sidebar or just the articles), or for single pages. If you want to try something different you need to modify that only line of code and if you choose to revert to the original you can just delete it.

The same way, it’s possible to add, modify or remove margins, borders, shadows, colors and any other feature for almost any object in your website: each object is displayed following specific rules that are contained inside a CSS file (the “style sheet”, a file ending with the .css extension), which is the heart of your design. You can write a rule for:

• Tags: body (the whole page), h1 (only the main header), p (any paragraph), ul (any unordered list)…
• Classes: .article (the main body of a single page or the body of each article inside a list, like in a blog index page), .pagelet (guess what it is) or any other object that you can see in many instances inside the page (classes start with a “.”).
• IDs: specific parts of the page like #sitemenu, #page-bottom, #sidebar (IDs start with a “#”).

Classes and IDs are always the same in Sandvox: they keep the same name for any website and with any design. This also means that code is easily reusable.

You can combine these selectors and add more specific instructions but we won’t dig anymore inside the CSS syntax in this tutorial, pretending you already have your code, either because you wrote it by yourself or copied from somewhere.

To explain how Code Injection works, we’ll change Simple Rabbit’s default font for the main body (which is Verdana 12px) and differentiate the “About” page giving it a main blue color (default is orange) and bold links.

Modify a single page

Create your new Project and select Simple Rabbit. Add a new page and call it “About”, then put some text inside it. Select a couple of words and click on “Create link”, so you can check later how the link looks. This is what you should have now:

From the “Edit” menu select “Page Code Injection”. A new window will show up: select the tab “Head Area” and paste this code into the upper section (the lower would be fine as well):

This code means: this is a CSS directive (because it’s enclosed inside <style> and </style>), and I want any link (a) inside the #main object to be bold. This is how things should look now:

If you can’t see the changes immediately, switch to the Home page and then back to the About page to reload it.

OK, done, let’s change the color too with this code:

This means: I want website’s title (h1), website’s tagline (#title p) and any link (a) to be blue (#3775B7 – if you need more information about colors read this other tutorial). Add this line just after the other code, before the closing tag.

It doesn’t work! Why? It doesn’t work because Simple Rabbit already has an information about these selectors and the two informations conflict, so it sticks with its own. This is simply solved adding an !important statement at the end of the rule (no space between “!” and “important”). This is the result:

Modify the whole website

Now we have a blue “About” page with bold links. We could do exactly the same thing for the entire website using “Site Code Injection…” instead of “Page Code Injection…”, but there’s another, much better way to accomplish this result so – to change the main font – we’ll follow another strategy.

Select “Site Code Injection…” from “Edit” menu: you’ll see a tab not available in Page Code Injection: “Style Sheet”. While code injected into a specific page goes inside the HTML of that page, this field puts the code directly into the CSS file, which is available to the whole website: write once and use everywhere (and save some bytes).

Moreover, since this file is CSS – not HTML – you don’t need to embed it between <style> and </style> (it already knows it’s CSS). Let’s try this:

which means: every paragraph (p) of the #main body will be Georgia 14px, overriding whatever the design has previously stated (!important).

Here we are, it works now for the entire website and it’s completely reversible.