These are the docs for Small Victories. Built using the Document theme – another Small Victory.

Advanced features

In this section, you’ll find information on:
1. Customizing your site with CSS/JS
2. File types
3. Naming files
4. Ordering your files
5. Adding captions to images
6. Adding links to files
7. Custom fonts
8. Adding scripts like Google Analytics

Note: Are you using Small Victories for building a custom site or theme? Check the developer resources.

Customizing your site

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.

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.

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

File types

Small Victories will recognize images (.png, .jpg), text (.txt, .md, .html), audio and video. You can also embed media by putting the code into an .html file.

For more information on Markdown .md, go to the Markdown website.

Naming files

Small Victories automatically adds classes and IDs to files it outputs so that you can target them with CSS or JavaScript. It uses the filename for creating classes, so for example, an image called photo_large_color.jpg will have the classes .photo, .large, and .color. Note: _ and - behave differently. For example, photo-large.jpg will have the class .photo-large.

With these classes, you can use CSS and JavaScript to do just about anything you can think of!

Some themes will also display filenames, such as in the sidebar of the Document theme. In these instances, you may want to use hyphens in place of spaces; SV will strip them out in the sidebar but use the hyphens to make nice URLs.

Ordering your files

By default, files are shown in the order they appear in your site folder. You can reorder things simply by renaming them. For example, you can do something like:

  • 01-image.jpg
  • 02-some-text.txt
  • 03-another-image.png

You can also set the sort order by adding one of the following to your _sv_settings.txt file:

  • sort: date newest - sort by date with the newest at the top
  • sort: date oldest - sort by date with the oldest at the top
  • sort: name a-z - sort alphabetically with A at the top
  • sort: name z-a - sort alphabetically with Z at the top
  • sort: file_01.md, file_02.md, file_03.md - sort manually by comma-delimiting the filenames in the order you want
  • sort: random - sort files randomly

Adding captions to photos

You can add a caption to a photo by adding a text file with the same name as the image. For example:

photo-1.jpg
photo-1.txt

Adding links to files

Let’s say you post some nice images you find to your site, and you want to link back to where you found them. Well, it’s easy! Just drag a bookmark file (.webloc) into your site folder and just give it the same name as the image. Small Victories will automatically make the image open the link in a window. It works with other file types besides images, too!

photo-1.jpg
photo-1.webloc

Custom fonts

Implementing custom fonts will depend on whether you’re self-hosting or using a service.

Self Hosted

For self-hosting, you can put the fonts in your site folder and reference them in your _sv_custom.css file as you would normally.

For example, if you put your fonts in a folder called /assets you could just declare your @font-face like so:

@font-face {
    font-family: 'Capital Semi Bold';
    src: url('assets/Capital-SemiBold-Web.woff') format('woff'),
         url('assets/Capital-SemiBold-Web.woff2') format('woff2'),
         url('assets/Capital-SemiBold-Web.ttf') format('truetype');
    font-weight: regular;       
}

Adding Google fonts

Maybe you found something good on Google Fonts, what a find! Here is how you add those in:

Find your font and click quick use and you will get a stylesheet link in the [email protected] tab. Copy and paste it into _sv_custom.css.

It should look like this:

@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300);

Then, you can use your font on any element you want. For example:

body {
  font-family: ‘Work Sans’, sans-serif;
}

Adding Typekit

Set up your kit and then click “embed code” in the top right corner.

You should get a modal with a code snippet that looks like this:

!function($) {
  // Write your own javascript here.

  $.getScript('//use.typekit.net/tsj2vbx.js', function() {
    //script is loaded and executed put your dependent JS here
    try{Typekit.load();}catch(e){}
    });

}(window.jQuery);

Copy that snippet into your _sv_custom.js file

Adding Google Analytics

You can add your Google Analytics tracking code to the custom JavaScript file and it’ll be inserted in your website. Copy and paste the tracking code without the <script> tag into _sv_custom.js.

You can also embed other scripts this way (Facebook pixels, etc.).

Small Victories