These are the docs for Small Victories (built using the Document theme).

Customizing

This is a good start with the basics of customizing the appearance of a Small Victories site.

Most of this doesn’t require any previous coding knowledge, but if you’re looking to go a little deeper check out the Small Victories Developer Resources.

In this section, you’ll find:
1. Basics
2. Getting set up
3. Workflow
4. Common customizations

Basics

Custom CSS

When you create a new site, it automatically makes you a _sv_custom.css file. You can write your own styles in here and Small Victories will automatically include this in your site. This is where you’ll write code that changes the appearance of your website.

Custom JavaScript

When you create a new site, it automatically makes you a _sv_custom.js file. You can write your own scripts in here and Small Victories will automatically include this in your site. This is where you’ll write code that changes the behavior of your website.

Every Small Victories site includes jQuery. Different themes include additional JavaScript plugins.

Getting set up

To customize your site’s code you’ll need a few tools:
1. a code-editor like Atom or Sublime Text (but any will do)
2. a browser with the developer tools enabled. (In Safari, you can find this in Preferences > Advanced; in Chrome, Dev Tools should be enabled by default.)

Workflow

Step 1

Let’s start with a simple example: let’s say we made a new site using the Feed theme, and we want the title (‘Ultimate video game’) to be red.

Step 2

To do this, we’ll need to figure out what element that contains the title is called. The easiest way to do that is to right-click on the title, and choose Inspect from the menu.

Step 3

That will open the inspector, and the element that contains the title will be highlighted.

We can see that this element is called:

<h1 class="sv-feed-title sv-feed-meta-title">Ultimate video game</h1>

The part we’re interested in is after class=. You can click in there and copy it, or you can just remember it and we’ll type it in just a second.

You can also type in the Inspector to test out your changes before making them in your code.

Step 4

Next, open up your _sv_custom.css file in your code editing app.

Step 5

You can add the name of the element we used before to this code. (You’ll see there is already some code in there to get you started. Put it after what’s already written there.) You’ll just type in:

.sv-feed-title { color: #ff0000; }

Keep in mind that CSS is like a programming language, meaning it has its own formatting and syntax rules. We won’t get into those here, but make sure you’re copying it exactly as above.

Don’t touch things like ., {, }, :, and ;.

You can edit things like sv-feed-title (that’s the name of your element) and #ff0000 (that’s the color you want the text to be).

You can control other things about an objects appearance by replacing color with another parameter (these can control things like size, style, typeface, etc.; you can Google all the parameters you can control).

Step 6

Save this file, and you should see your Dropbox sync. Your site will rebuild, and when it reloads your title should be red! You can repeat this workflow for any other customizations you want to make.

Going further

Obviously building websites is a big topic and it can get complicated. Going deeper into layouts, positioning, and stuff like that is a little outside the scope of what we can explain here, but there are lots of good resources online for this stuff.

Common Customizations

How do I change the background color of my site?

Try this (you can change #000000 to your desired color):
body {background-color: #000000;}

How do I change the font my website uses?

Try this (you can change serif to your desired font name):
body {background-color: #000000;}

Further reading: start with the section on using webfonts in Advanced or do some Googling.

How do I change the color of the text?

The example given above explains how to change the color of a specific piece of text. If you want to change the color for text across your entire site, try (you can change #ff0000 to your desired color):
body {color: #ff0000;}

Small Victories