Tag Archives: Features

New Features on VanillaForums.com

Features, features, and more features

It’s been a crazy few weeks, but all the hard work has paid off! The Vanilla crew has been clocking the hours and crunching the code to develop some really cool new features to enhance your community. We are very excited about the results and we know you will be too!

We are glad to announce that every single Vanilla Forum now comes with Social Connect, CLEditor, and Emotify ;).

What’s new

Vanilla Social Connect

Vanilla Social Connect enables your users to sign into your community with Facebook, Twitter, Google, and OpenID. Vanilla Social Connect is now standard on all Vanilla Forums.

CLEditor

CLEditor is a WYSIWYG (What You See Is What You Get) editor that allows you to quickly and easily customize the content pf each discussion you start with options like: Bold. Italicize, Justify, Font Color, Highlight, Insert Image, and more.

Emotify ;)

You guessed it, we’ve added your favorite little faces to Vanilla Forums!

How to use Banner

One of many new features added to VanillaForums.com is Banner a.k.a Custom Logo.The Banner allows you to upload a custom logo to your forum.

*This feature is available to Basic, Plus, and Premium Plan members.

What we will cover

Lets begin!

Default Banner Settings

What file types are accepted: .jpg, .gif, .png
Maximum file size: 10mb

Top

Inside the dashboard

The Banner screen

To access the Banner screen go to Appearance/Banner. Once inside the Banner screen you will have the ability to create a custom plain text Banner Title or upload a custom Banner Logo.

Top

Uploading a Banner Logo

To upload a Banner Logo click on the browse button. Browse to the file you wish to upload as your Banner Logo.

*NOTE: Uploading a Banner Logo will replace the Banner Title. You can remove/change the Banner Logo at any time.

Here is the result:

That’s all. Now go personalize your community!

Top

New Features, Design, and Plans at Vanilla Forums

New Features, Design, and Plans at Vanilla Forums

Over the last year since we launched the hosting service at VanillaForums.com, we’ve received amazing feedback from the community and our customers about the software, it’s features, and our offerings. All of that great feedback has gone into what you now see on the homepage at VanillaForums.com.

Design
We’ve completely revamped this site in an effort to make our plans and offerings more accessible and easier to understand. We’ve added a long features page that outlines a bunch of the features available to forums hosted here at VanillaForums.com, including new features like File Uploading and Vanilla Connect.

New Plans & Pricing
One of the most popular requests from users & customers was that we bundle our feature offerings together and offer them as packages – check out the new plans, and the detailed plan comparison now.

Blog
Finally, we’ve added this blog, where you will be able to get all the latest news, help, and tutorials on how to use the services here at VanillaForums.com. We’ve got a long list of upcoming blog posts that will help you with everything from getting-started entries to advanced topics & help.

How to use Custom Theme – Part 1: Edit Html

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