New theme: Minimal White

We’ve got a new theme design for you. Here are a couple of screenshots.

This is the frontpage, you need to create a set called “Frontpage” and it will show its first image there. If you don’t have any collections the frontpage will show all your sets.

The collection page shows the cover image for each set in that collection:

When you click a set you’ll get to the first image.

If you click “thumbs” you’ll see all images in that set. You can use left/right arrow to navigate through the images.

Would you like to use this theme?

1. Login to your account.
2. Go to “Themes” in the top-right navigation.
3. Go to “Theme Gallery” in the left-side navigation.
4. Click “Use this theme for your portfolio”

Don’t have a PortfolioDeck account? Sign-up for an invite

New theme: Minimal Black

We’ve got another theme design for you. It’s the same as Minimal White but black. Here are a couple of screenshots.

This is the frontpage, you need to create a set called “Frontpage” and it will show its first image there. If you don’t have any collections the frontpage will show all your sets.

The collection page shows the cover image for each set in that collection:

When you click a set you’ll get to the first image. You can use left/right arrow to navigate through the images.

If you click “thumbs” you’ll see all images in that set.

Would you like to use this theme?

1. Login to your account.
2. Go to “Themes” in the top-right navigation.
3. Go to “Theme Gallery” in the left-side navigation.
4. Click “Use this theme for your portfolio”

Don’t have a PortfolioDeck account? Sign-up for an invite

New: Design your own themes

Now you can design your PortfolioDeck site exactly the way you want it. You have full control over markup, stylesheets and javascript.

What is a theme?

A theme consists of a template for each page type (collection, set, item, page and index) with accompanying assets (stylesheets, javascripts and graphics). The templates are rendered inside a layout template, so you can have a consistent framework for the site (header, navigation and footer).

How do I transform my HTML/CSS mockups to a PortfolioDeck theme?

We have choosen to use Liquid, a designer-friendly templating language. It is basically HTML with a bit of logic to make the templates dynamic. It’s quite easy to get a grasp of. To get you started you should read Liquid for designers over at Github. Then you can continue by reading our theme documentation to get you up to speed on the specifics for PortfolioDeck. Here is an example on how Liquid looks:

{% if sets | size != 0 %}
  <ul>
  {% for _set in sets %}
    <li><a href="{{ _set | path }}">{{ _set.title }}</a></li>
  {% endfor %}
  </ul>
{% endif %}

This code will print out a list with all your sets, if there are any.

Liquid is an extraction of the templating language used in the hosted e-commerce service Shopify that we have been using for a few client projects. If you want to learn more about Liquid you should check out the Liquid wiki on github.

How do I create my own theme?

1. Go to your PortfolioDeck admin, http://yourdomain.portfoliodeck.com/admin
2. Go to “Themes” in the top-right navigation
3. Click “Create your own theme” in the right column.
4. Fill in the form.
5. Edit the different templates. Add your CSS, JS and graphics to your theme assets.
6. Done! Now click on “Use this theme for the site design” and go look on your new designed site.

If you have any questions or need some help with the templating language, don’t hesitate to drop us a line at support@portfoliodeck.com