How to use Custom Theme – Part 1: Edit Html

***Check out our new for 2014: Vanilla Forums Theme Guide.***

One of many new features added to VanillaForums.com is Custom Theme. The Custom Theme feature allows you to customize the appearance of your forum using HTML and cascading stylesheets (CSS). You can change colors, fonts, backgrounds, banners, and even where elements appear on the page.

*This feature is available to Plus and Premium Plan members only!

This is Part 1 of the How to use Custom Theme tutorial. In this part you learn how to take advantage of the  Edit Html tab in order to change the overall layout of your forum.

What we will cover

Let’s begin!

Locating Custom Theme

There are 2 ways to locate the Custom Theme Feature within the dashboard.

  1. On the left Menu Panel under Appearance click on Custom Theme. Or,
  2. Inside of Themes you will notice a ‘Customize’ button to the right  of your Current Theme screenshot

Top

Inside Custom Theme

Edit Html tab

Once inside of Custom Theme the ‘Edit Html’ tab will be active by default.

*Note that Vanilla will create a copy of the HTML and CSS naming it yourthemename + (custom) , this way your are modifying a fresh copy without causing any harm to the original theme. Also very useful if you need to revert back to the original code.

Top

Basic HTML layout

The easiest way to decipher the HTML for your forum is to break it down into 4 parts: Header, which includes the menu and your logo, Content, Panel, which is your sidebar, and Footer.

Top

Understanding Vanilla Template Tags

What is a Template Tag?

Template tags are used within your forum to display information dynamically. A template tag is code that instructs Vanilla to “do” or “get” something. For example if you write:

{searchbox}

The Search box will be displayed.

Some template tags can have values added to them.  For example, the asset tag displays blocks of information, like your discussions or the side panel.

{asset name="Content"}
{asset name="Panel"}

To view a full list of current Template Tags and how they work  see Vanilla Template Tags under Help.

Top

Understanding the HTML layout

Breaking down and customizing the code
To help make the code easier to understand we will break down the code into sections starting from the top.

The HTML head element

<head>
 {asset name='Head'}
</head>

The head element is a container for other head specific elements. Elements inside can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The{asset name=’Head’} tag adds the following to the head section: <base>, <link>, <meta>, <script>, <style>,  and <title>.

*NOTE: DO NOT REMOVE this tag. There is no need to add any other elements to the head in order for your forum to function or to customize your forum.

The HTML body element
The next line of code contains 2 variables

<body id="{$BodyID}" class="{$BodyClass}">

These 2 variables enable both the default CSS (Cascading Style Sheet) and custom CSS to properly style the look and feel of your forum – We will cover the Edit Css tab in Part 2 of this tutorial.

*NOTE: DO NOT REMOVE this tag.

The Head
Not to be confused with <head></head>. <div id=”Head”>  is a unique identifier (id) to an element (div) that styles the header of your forum, which contains your logo and menu.

<div id="Head">
 <div>
  <!--Load custom logo from banner options-->
   <h1><a href="{link path="/"}">{logo}</a></h1>
   <!-- Start menu -->

   <ul id="Menu">
    {if CheckPermission('Garden.Settings.Manage')}
    <li><a href="{link path="dashboard/settings"}">Dashboard</a></li>
    {/if}
    <li><a href="{link path="discussions"}">Discussions</a></li>
    <li><a href="{link path="activity"}">Activity</a></li>
    {if $User.SignedIn}
    <li>
    <a href="{link path="messages/inbox"}">Inbox
    {if $User.CountUnreadConversations} <span>{$User.CountUnreadConversations}</span>{/if}</a>
    </li>
    <li>
    <a href="{link path="profile"}">{$User.Name}
    {if $User.CountNotifications} <span>{$User.CountNotifications}</span>{/if}</a>
    </li>
    {/if}
    <li>{link path="signinout"}</li>
   </ul>
   <!-- End menu -->
 </div>
</div>

Here is the result:

Let’s take a closer look.  You will notice the <h1> HTML tag which contains the {logo} template tag. This is used to display your custom logo that can be uploaded under Appearance/Banner in the dashboard. If you choose not to use a custom logo you can add text, like in the above example “Vanilla 2″.

Next we have our Menu. The Menu is contained within a <ul> HTML tag. The <ul> tag defines an unordered list (a bulleted list). Each Menu option is contained within a <li>
HTML tag. The <li> tag defines each list item. So, for example, if you wanted to link to another web site you would add a <li> tag wrapped around a standard link:

<li><a href="http://www.yoursite.com" />Go to my site</a></li>

Here is the result:

*NOTE: There are if statements wrapped around a few <li> tags. These are used to determine which Menu options to make accessible. For example if you are logged in the dashboard Menu option will appear or, if you have messages waiting for you in your inbox then a number notification will appear next to your inbox. DO NOT REMOVE these if statements.

The Body
Not to be confused with <body></body>. <div id=”Body”> is a unique identifier (id) to an element (div) that styles the body (content) of your forum, which contains your discussions and panel (sidebar).

<div id="Body">
 <!-- Start body content: helper menu and discussion list -->
  <div id="Content">{asset name="Content"}</div>
  <!-- End body content -->

 <!-- Start panel modules: search, categories, and bookmarked discussions -->
  <div id="Panel">
   <div id="Search">{searchbox}</div>
   {asset name="Panel"}
  </div>
 <!-- End panel -->
</div>

There are 2 important elements here: <div id=”Content”> and <div id=”Panel”>. The <div id=”Content”> is wrapped around the {asset name=”Content”} tag which displays your helper menu and discussion list. The <div id=”Content”> controls the look and feel (can be modified in the CSS).

Here is the result:

With some simple HTML we can easily add elements before and after the discussion area. Lets say you wanted to add a banner above the discussions.
*For this tutorial I will link to a banner from another site.

<div><img src="http://s3.buysellads.com/1245832/25859-1273627489.jpg" /></div>

Here is the result:

Now let’s look at the <div id=”Panel”> element. The <div id=”Panel”> is wrapped around the {asset name=”Panel”} tag which displays your search box, Start a New Discussion button, categories list, and bookmarked discussions. Just like with the <div id=”Content”> the <div id=”Panel”> controls the look and feel (can be modified in the CSS).

Here is the result:

…and just like <div id=”Content”> with some simple HTML we can easily add elements before and after the discussion area. Lets add another banner above the Start a New Discussion button.
*For this tutorial I will link to a banner from another site.

<div><img src="http://creativesessions.s3.amazonaws.com/content/2010/cs3_digital_illustration/cs3_graphics/sidebar_lg.jpg" /></div>

Here is the result:

Finally, let’s take a look at the Foot. <div id=”Foot”> is a unique identifier (id) to an element (div) that styles the footer of your forum, which contains the “Powered by Vanilla” link.

<div id="Foot">
   <div>Powered by <a href="http://vanillaforums.org"><span>Vanilla</span></a></div>
  {asset name="Foot"}
  </div>

Here is the result:

With some simple HTML we can easily add elements before and after the “Powered by Vanilla”. Lets add a few extra links for fun.

<div id="Foot">
   <div>Powered by <a href="http://vanillaforums.org"><span>Vanilla</span></a> | <a href="http://google.com">Google</a> | <a href="http://mozilla.com/firefox">Firefox</a></div>
  {asset name="Foot"}
  </div>

Here is the result:

Top

Further Reading

I hope you have  enjoyed this tutorial. Remember this is only Part 1, keep watching the blog for Part 2: Edit CSS. Below is list of further reading to help you with some of the topics we covered in this tutorial. I would highly recommend you check out w3schools if you have little or no experience with HTML.

I look forward to seeing your Custom Themes. Good Luck!

Top