Portfolio custom theme for Small Victories
- Create a new SV site using the Feed theme
- Add the
_sv_custom.jsfiles to your new site folder
- Add text and images
- Name your files accordingly (see below)
- Customize, share, etc.!
If you want finer control over your layout, we recommend setting the sort order for your content to alphabetical instead of chronological:
sort a-z (or z-a)
Naming your files
Naming your files will help you do two things:
- Set the order of your content
- Set the layout of your content
SV uses the names of yours files to add styles to them (you can read more about that here). So, by using specific words in your filenames you can set the size and behavior of an individual block of content. For example, if you want an image to be half the width of the browser, you can add
half to its filename. For example:
That will give the image container the class of
class="half". Then, in your
_sv_custom.css file, you can add your own styles for that class:
You probably also want to have control over the order your content appears in, so you could do something like:
You can also add anything else you want to that filename, as you would normally:
-) and spaces in file names work the same way. To keep words together, use an underscore (
01a half fantastic_sloth.jpg will give you the classes
File & Class names
We’ve set up some classes for you to achieve the Portfolio layout like in the demo. All content is 100% wide on mobile devices, but on larger screens you can control the amount of space your content occupies:
thumb: 1/6 of the layout
third: 1/3 of the layout
half: 1/2 of the layout
full: 100% of the layout
cover: remove left/right margin
ns: remove top/bottom margin
header: set on a text file to increase the text size
You can also other types of content besides images and the sizing will work the same way. For example, you can add either
.md files into your layout if you want to include text.
Bookmarks and Captions
.txt file with the same name as your image will create a caption after the image.
.webloc (this is a browser bookmark) file with the same name as your image will make the image a link.
This will add the contents of
01b-half-enthusiasatic-walrus.txt as a caption below
01b-half-enthusiasatic-walrus.jpg, and make the whole thing link to the URL contained in that
We’ve written a few classes to get you started with the basic layout, but you could also add your own classes and file naming conventions to extend this theme.
Creating multi-page sites
In our demo, we’ve combined some of the above examples/concepts to set up a site with multiple pages. We’ve simply added folders, each with their own content. The names of these folders become the site’s URLs. It has the following structure:
. ├── /portfolio │ ├── /project-1 │ ├── /project-2
By adding bookmark files for each project page we set up, we can make the images on our index page into links.
.nsclass for removing margin above/below images
- Add in
.sizerclass for making text blocks the same height as adjacent blocks
- Convert to
flex-boxfor easier alignment