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?
- Go to your PortfolioDeck admin, http://yourdomain.portfoliodeck.com/admin
- Go to “Themes” in the top-right navigation
- Click “Create your own theme” in the right column.
- Fill in the form.
- Edit the different templates. Add your CSS, JS and graphics to your theme assets.
- 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