The latest news on VanillaForums.com and helpful tutorials.
I’ve started putting together 5 minute or less video quick tips on screenr (screenr lets you create instant screencasts for Twitter) for our Twitter followers. From now on, I’ll make a posting on VanillaForums.com after every few new quick tips – for the rest of you. Here’s the first set. I cover a variety of new features in Vanilla 2.
*Let me know if there are any features in specific you would like covered.
If you’re looking for a simple way to translate your Vanilla forum you can easily add Google Translate with Custom Theme.
*The Custom Theme feature is available to Plus and Premium Plan members only!
Google Translate is a free statistically-based machine translation service provided by Google Inc. to translate a section of text, document or webpage, into another language.
Currently Google Translate offers the following languages when adding their service to your site(vanilla forum): English, German, Spanish, French, Italian, Portuguese, Japanese, Korean and Chinese (Simplified).
All you need to do is pass Google your forum url and specify what language to translate the content into.
http://google.com/translate?langpair=XX%7CYY&u=(your URL here)
A closer look at the code above: XX is the code for the original language and YY is the code for the language which you want to translate into.
So for example, if you wanted to translate your forum into French you would change the XX to en and the YY to fr.
<a href="http://google.com/translate?langpair=en%7Cfr&u=http://yourforumname.vanillaforums.com"> French </a>
Let’s begin!
*You may want to also read the tutorial on using Custom Theme
We will start by adding a link in the main menu to translate Vanilla into French. In ‘Edit Html’ look for <ul id “Menu”>. After the last link, {signinout_link}, add the following code:
<a href="http://google.com/translate?langpair=en%7Cfr&u=http://yourforumname.vanillaforums.com"> French </a>
Here is the result:
Now click on the ‘French” link and watch the magic happen!
Before
After
Now get translating! ☺
Here is the result:
This topic deals with importing your old forum into Vanilla 2. The process is basically three steps:
We’ve made a tool that you can use to put your old forum into a format that Vanilla 2 can import. We currently support exports from Vanilla 1, phpBB, and vBulletin. Here is how you use it:
In order to import your data, you will need a fresh installation of Vanilla 2. When you do the import, all data in your fresh installation will be overwritten, so make sure you don’t have any discussions you want to keep there.
Vanilla 2 has an import utility in its dashboard. This is what you’ll use to import your forum.
Some Vanilla themes can be customized with additional options if they have a Theme Options page. Theme Options can include: color styles, text areas, and images.
*This feature is available to all members.
There are 2 ways to locate the Theme Options within the dashboard.
Once inside of Theme Options you will be able to customize whatever options *this theme has. For example, the new Vanilla Default theme now has 7 color styles to choose from.
Other themes like rounder have customizable text areas
Enjoy your new options and keep checking the blog for new customizable themes to come!
You know how you can @mention your friends in twitter? You can do that in Vanilla too.
Just put an @ in front of the person (or people’s) name:
And then their names will be linked to their profile on the resulting comment:
And the user will also receive a notification in their profile that they were mentioned:
If the user has chosen it in their preferences, they will also receive an email notification that they were mentioned. It is a great way to bring people back to your community!
You can easily embed a YouTube video using a simple span class:
<span class="youtube-embed">M8BxbdQqMRE</span>
Enter the above code in any new discussion or discussion comment.
*NOTE: The video id is located in the YouTube URL after the = .
That’s it!
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 file types are accepted: .jpg, .gif, .png
Maximum file size: 10mb
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.
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!
One of many new features added to VanillaForums.com is File Upload.The File Upload feature enables uploading files and attaching them to discussions and comments.
*This feature is available to Basic, Plus, and Premium Plan members.
Default File Uploading Settings
What file types are accepted: .txt, .doc, .docx, .pdf, .jpg,.gif, .png, .zip, .gz, tar.gz
Maximum file size: 10mb
To access the File Upload screen go to Forum/Media. Once inside the File Upload screen you will have the ability to turn this feature on/off and define who can upload and manage files.
Setting Roles and Permissions
When you click on the Roles and Permissions link it will take you to the Manage Roles & Permissions screen. Here you can determine which roles have the ability to upload/download attachments. So, for example, click on edit for the Member role.
On the next screen scroll down until you reach the Plugins permissions. There are 2 options: Allow Attachment Download and Allow Attachment Upload.
*NOTE:You can assign these permissions to Member, Moderator, Administrator, and Custom roles ONLY!
Once you have setup your user roles go to your forum and click on any open discussion. Go to your comments. Below the Write Comment box you will notice the ‘Attach a file’ link.
Click on the ‘Attach a file’ link and browse to the file you wish to upload.
That’s all. Now go share some files!
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.
Locating Custom Theme
There are 2 ways to locate the Custom Theme Feature within the dashboard.
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.
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.
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.
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:
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!
This help topic deals with theming. For a full tutorial on theming refer to this tutorial.
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"}
Some template tags can have content between them, just like a regular HTML tags. For example, the literal tag allows you to put literal content such as CSS or JavaScript in a theme if you need to.
{literal}
body {
font-family: Verdana;
}
{/literal}
Posting tweet...
| VanillaForums.com |
Help
| Community | Freebies |
This blog is powered by WordPress