Edit a theme

To edit a theme choose Themes from the Main menu in the top navigation, then click on the Name of the Theme you want to edit.

You should then see something like this:

Theme editor

You can edit the name of your new theme by clicking Edit in the top-right corner and type your desired name into the text field.

In the lower area of the page you see an editor tab for each file that your theme has. When you create a new theme we already provide you with the basic files needed to have a good theme:

application.css

The CSS file for your theme. This file is mandatory to have (including the filename) and at the moment the only file where you can add CSS definitions for your theme. We recommend to reset the styling using normalize.css (https://github.com/necolas/normalize.css)

layout.html

The main layout of your theme. This file should include all parts of your theme that are present on each page like the header image and blog title. A mandatory ingredient of this file is {{page_content}}. This is where for example the content from index.html or show.html are rendered.

index.html

The overview page of your blog. This is what you see when you visit yourblog.podigee.io/. In general this is where the latest episodes of your podcast are displayed. It is best practice to not display all information for each episode, but only the title, description and sharing links for example.

show.html

Episode detail page. You can see this when you visit yourblog.podigee.io/1-first-episode. Here you should display everything that belongs to your episode, including the web player and show notes.

archive.html

Your podcasts archive page. You can see this when you visit yourblog.podigee.io/archive. Here you should display a compact list of your episodes.

about.html

Your podcasts about page. You can see this when you visit yourblog.podigee.io/about. Here you should display information about you and your podcast like the podcasts description, social media account information.

Dynamic parts of a template

Besides the static parts of a page you can also display dynamic information that you already entered when you configured your podcast or published a new episode. To make this possible Podigee Themes use a so called templating system called Liquid (http://liquidmarkup.org/).

Here is a short example of such a template:

<ul class="episode-list">
  {% for episode in episodes %}
    <li>{{episode.title}}</li>
  {% endfor %}
</ul>

A more comprehensive introduction can be found here: Liquid for Designers

A list of attributes available in the Podigee Themes can be found here: Theme attribute reference.