Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
project-1
project-2
01 project-1 half.png
01 project-1 half.txt
01 project-1 half.webloc
02 project-2 half.png
02 project-2 half.txt
02 project-2 half.webloc
03 project-3 half.png
03 project-3 half.txt
04 project-4 half.png
04 project-4 half.txt
05 project-5 half.png
05 project-5 half.txt
06 project-6 half.png
06 project-6 half.txt
README.md
_sv_custom.css
_sv_custom.js
_sv_settings.txt

README.md

Portfolio custom theme for Small Victories

Demo: http://sv-custom-themes.smvi.co/portfolio

Set-up

  1. Create a new SV site using the Feed theme
  2. Add the _sv_custom.css and _sv_custom.js files to your new site folder
  3. Add text and images
  4. Name your files accordingly (see below)
  5. Customize, share, etc.!

Ordering images

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:

  1. Set the order of your content
  2. 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:

half.jpg

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:

.half {...}

You probably also want to have control over the order your content appears in, so you could do something like:

01a-half.jpg

01b-half.jpg

You can also add anything else you want to that filename, as you would normally:

01a-half-disobedient_playtpus.jpg

01b-half-enthusiastic_walrus.jpg

Hyphens (-) 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 01a, half, and fantastic_sloth.

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 .txt or .md files into your layout if you want to include text.

Bookmarks and Captions

Adding a .txt file with the same name as your image will create a caption after the image.

Adding a .webloc (this is a browser bookmark) file with the same name as your image will make the image a link.

01b-half-enthusiasatic-walrus.jpg 01b-half-enthusiasatic-walrus.txt 01b-half-enthusiasatic-walrus.webloc

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 .webloc file.

Customizing

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.

Theme Roadmap

  • Add .ns class for removing margin above/below images
  • Add in .sizer class for making text blocks the same height as adjacent blocks
  • Convert to flex-box for easier alignment