Virb › Docs › Themes

Need more help with your site? We’re here Mon-Fri, from 9a to 5p.

Visit Virb Help Center →

Tips and tags for advanced Theme customization

"Get" Tags

Site Variables

```
<virb get="site.description" />
```
Shows the website's description.
```
<virb get="site.icon" />
```
Url of site icon used for favicon.
```
<virb get="site.name" />
```
Shows the website's name.
```
<virb get="site.url" />
```
Shows the website's url.

Page Variables

```
<virb get="page.body" />
```
Shows the body text of the page.
```
<virb get="page.class" />
```
If the page is the Home Page, it shows the word "homepage".
```
<virb get="page.format" />
```
If the page is a Collection, it shows the display format used.
```
<virb get="page.title" />
```
Shows the title of the page.
```
<virb get="page.type" />
```
Shows the page type.
```
<virb get="page.url" />
```
Shows the url of the page.

"Date" Tag

```
<virb date="F d Y" />
```
Outputs today's date.

"Customize" Tags

Replace "selector" with the corresponding YAML selector value.

```
<virb customize="selector" />
```
Outputs user inputted data.
```
<virb customize="colors.selector" />
```
Outputs color hex code.
```
<virb customize="fonts.selector" />
```
Outputs font data.
```
<virb customize="fonts.font_face" />
```
Outputs font embed code if an embeddable font is needed.

"Load" Tags

```
<virb load="addthis" />
```
Outputs the HTML code for the website's AddThis buttons.
```
<virb load="css" />
```
Outputs the html for the website's css.
```
<virb load="disqus" />
```
Outputs the HTML code for the website's Disqus comments.
```
<virb load="icon" />
```
Outputs the html for the website's favicon.
```
<virb load="meta" />
```
Outputs the html for the website's meta tags.
```
<virb load="nav" />
```
Outputs the html for the website's nav.
```
<virb load="sidebar" />
```
Outputs the html for the website's sidebar.
```
<virb load="template" />
```
Outputs the html for the page being displayed.

Page Templates

Page templates get automatically loaded from the Virb tag <virb load="template" /> and the HTML used for each template can be overridden if desired. To override the default template you will need to put the particular template file into its corresponding folder. Below you will find all available templates, their default content and the corresponding file path.

Album Template

<!-- AUDIO ALBUM -->
<div id="album">

    <div id="title">
        <h2><virb get="page.title" /></h2>
    </div>

    <virb load="album/audio/art" />

    <div id="media">
        <virb load="album/audio/tracks" />
    </div>

    <div id="description">
        <virb get="page.body" />
    </div>

    <virb load="addthis" />
</div>
<!-- END AUDIO ALBUM -->

Collection Template

<!-- COLLECTION -->
<div id="collection" class="get[collection.class]">

    <div id="title">
        <h2><virb get="page.title" /></h2>
    </div>

    <div id="description">
        <virb get="page.body" />
    </div>

    <virb load="collection/items" />

    <virb load="addthis" />
</div>
<!-- END COLLECTION -->

Custom Template

<!-- CUSTOM -->
<div id="custom">

    <div id="title">
    	<h2><virb get="page.title" /></h2>
    </div>

    <div id="description">
        <virb get="page.body" />
    </div>

    <virb load="addthis" />

</div>
<!-- END CUSTOM -->

Events Template

<!-- EVENTS -->
<div id="custom">

    <div id="title">
    	<h2><virb get="page.title" /></h2>
    </div>

    <div id="description">
        <virb get="page.body" />
    </div>

    <virb load="addthis" />
</div>
<!-- END EVENTS -->

Index Template

<!-- INDEX -->
<div id="index">

    <div id="title">
    	<h2><virb get="page.title" /></h2>
    </div>

    <div id="description">
        <virb get="page.body" />
    </div>

    <virb load="index/pages" />

    <virb load="addthis" />
</div>
<!-- END INDEX -->

Topspin Template

<!-- TOPSPIN -->
<div id="topspin">

    <div id="title">
        <h2><virb get="page.title" /></h2>
    </div>

    <div id="description">
        <virb get="page.body" />
    </div>

    <virb load="topspin/spins" />

    <virb load="addthis" />

</div>
<!-- END TOPSPIN -->

Blog Template

<!-- BLOG -->
<div id="blog" class="get[blog.class]">

    <div id="title">
        <h2><virb get="page.title" /></h2>
    </div>

    <div id="nav">
        <virb load="blog/nav" />
    </div>

    <virb load="blog/posts" />

    <virb load="addthis" />
</div>
<!-- END BLOG -->

Tumblr Template

<!-- TUMBLR -->
<div id="blog" class="tumblr">

    <div id="title">
    	<h2><virb get="page.title" /></h2>
    </div>

    <virb load="tumblr/posts" />

    <virb load="addthis" />
</div>
<!-- END TUMBLR -->

Documentation