Customize styles in Sandvox

Level: Average

Page Code InjectionWhile 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 Carbone’s default font for the main body (which is Lucida Grande) and differentiate an internal page giving it a main red color (default is orange) and dark red bold links.

Modify the whole website

Create your new Project and select Carbone. 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:

Prepare for Site Code Injection

Select “Edit” menu → “Site Code Injection…” and then the “Style Sheet” tab. Paste this into the “Style Sheet” field:

#main p {
     font-family:Georgia, "Times New Roman", Times, serif;
     font-size:1.4em;
}

which means: every paragraph (p) of the #main body will be Georgia. If you can’t see the changes immediately, switch to any other page and then back to the Home page to reload it; you can also hit “cmd-R” on your keyboard. This should be the result:

Site Code Injection

From now on, each main body paragraph of any page of your website will use Georgia. If you need to change or remove it, or if you need to add some rules, work on this field and – no matter how large is your website (one ore one hundred pages) – changes will be applied everywhere instantly.

Modify a single page

Sometimes you need to change just one page – maybe to differentiate it from the other ones. You should then use “Page Code Injection…”.

While code injected with “Site Code Injection” goes into the CSS file, “Page Code Injection” writes the the code into the HTML of that only page.

Select “Edit” menu → “Page Code Injection…”. A new window will show up: select the tab “Head Area” (you’ll notice that the “Style Sheet” tab is missing) and paste this code into the lower section:

<style>
     #main a {font-weight:bold;}
</style>

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.

Important

You need to enclose the code between <style> and </style> in Page Code Injection, you don’t in Site Code Injection!

This is how things should look now:

Page Code Injection

Again, if you can’t see the difference, reload the page.

Now let’s add some other code. From Carbone’s instructions we know we can modify the header’s background providing a solid color, for example a dark red (#700), with this code:

#title {background-color:#700; background-image:none;}
You can read this tutorial if you need to learn more about colors.

Add that line to the code previously injected:

<style>
     #main a {font-weight:bold;}
     #title {background-color:#700; background-image:none;}
</style>

It works!

Page Code Injection

But links are still orange when hovered. Let’s try adding this:

#main a:hover {color:#700;}

This time it doesn’t work!

Why? It doesn’t work because this directive conflicts with other directives that the browser finds more important. We can check the whole CSS code to find the conflict or (easier) just add an “!important” label to our rule. This is the result:

<style>
     #main a {font-weight:bold;}
     #title {background-color:#700; background-image:none;}
     #main a:hover {color:#700 !important;}
</style>

Pay attention to the syntax here: see the space between “#700” and “!important”, which is followed by the closing semicolon.

Conclusions

With Site and Page Code Injection, you can change almost any feature of your website – and changes are easily reversible.

And don’t forget that many Rabbit’s Designs come with Ready-made code that could save you even more time (although the procedure is slightly different).