Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Editing Template

kjaonlinekjaonline
edited December 2011 in Vanilla 2.0 - 2.8

How do I edit the default template? Thanks

Best Answers

  • clethrillclethrill ✭✭
    Answer ✓

    Easiest way, download a theme you like from the addons page and install it.

    If you know CSS read up on themes at vanillaforums.org/docs/themequickstart and vanillaforums.org/docs/themeguide/toc There are others just go to the documentation tab.

    If you go to /themes/ and copy the default folder naming it what you want. Then open /themes//about.php change the descriptions in the array to suit your theme. Then go to the /themes//design/ folder create a css file called custom.css Simply add CSS to the file to change the look of your forum.

    For bigger alterations like to the HTML aspect of the forum, you need to use views. Create default.master.tpl (or .php) in /themes//views/ and follow what is at http://vanillaforums.org/docs/themeguide/function

    Those pages help you with what is what, but if you like to take a peek a bit closer get yourself firefox with firebug (I think that is it, I use chrome) or chrome which has an 'inspect element' tool that comes with it, just right click on the page and go to bottom and left-click 'inspect element' to have a closer look at what you want to modify and how.

  • clethrillclethrill ✭✭
    edited December 2011 Answer ✓

    Patience is the key, atleast wait a day or so before a bump, being a full time Australian I am committed to sleep while half of the rest of the world is awake.

    There isn't really a 'default' but here a pretty basic version.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-ca">
    <head>
      {asset name='Head'}
    </head>
    <body id="{$BodyID}" class="{$BodyClass}">
        <div id="container">
            <div id="Head">
                <h1 class="Title"><a href="{link path="/"}">{logo}</a></h1>
          <div class="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}
                {custom_menu}
                <li>{link path="signinout"}</li>
             </ul> 
          </div>
            </div>
    
          <div id="Body">
                <div id="Content">{asset name="Content"}</div>
    
             <div id="Panel">
             <div id="Search">{searchbox}</div>
             {asset name="Panel"}
             </div>
            </div>
    
          <div id="Foot">
                <div>Powered by <a href="http://vanillaforums.org">Vanilla</a></div>
            {asset name="Foot"}
            </div>
        </div>
    </body>
    </html>
    

Answers

  • clethrillclethrill ✭✭
    Answer ✓

    Easiest way, download a theme you like from the addons page and install it.

    If you know CSS read up on themes at vanillaforums.org/docs/themequickstart and vanillaforums.org/docs/themeguide/toc There are others just go to the documentation tab.

    If you go to /themes/ and copy the default folder naming it what you want. Then open /themes//about.php change the descriptions in the array to suit your theme. Then go to the /themes//design/ folder create a css file called custom.css Simply add CSS to the file to change the look of your forum.

    For bigger alterations like to the HTML aspect of the forum, you need to use views. Create default.master.tpl (or .php) in /themes//views/ and follow what is at http://vanillaforums.org/docs/themeguide/function

    Those pages help you with what is what, but if you like to take a peek a bit closer get yourself firefox with firebug (I think that is it, I use chrome) or chrome which has an 'inspect element' tool that comes with it, just right click on the page and go to bottom and left-click 'inspect element' to have a closer look at what you want to modify and how.

  • Thanks! People here are so helpful <3

  • 422422 Developer MVP

    kjaonline said:
    Thanks! People here are so helpful <3

    Click like then ;)

    There was an error rendering this rich post.

  • 422 said:

    kjaonline said:
    Thanks! People here are so helpful <3

    Click like then ;)

    Does liking a post lead to getting points or something or is it purely cosmetic?

  • 422422 Developer MVP
    edited December 2011

    Its just a form of gratitude :) and i meant for You to like @clethrill not me

    There was an error rendering this rich post.

  • I see.. Thanks! :)

  • Do you guys have the default content of the default theme so I can add it to the default.master.tpl file and edit from there? :)

  • Just hoping someone could help me with this (BUMP)

  • clethrillclethrill ✭✭
    edited December 2011 Answer ✓

    Patience is the key, atleast wait a day or so before a bump, being a full time Australian I am committed to sleep while half of the rest of the world is awake.

    There isn't really a 'default' but here a pretty basic version.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-ca">
    <head>
      {asset name='Head'}
    </head>
    <body id="{$BodyID}" class="{$BodyClass}">
        <div id="container">
            <div id="Head">
                <h1 class="Title"><a href="{link path="/"}">{logo}</a></h1>
          <div class="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}
                {custom_menu}
                <li>{link path="signinout"}</li>
             </ul> 
          </div>
            </div>
    
          <div id="Body">
                <div id="Content">{asset name="Content"}</div>
    
             <div id="Panel">
             <div id="Search">{searchbox}</div>
             {asset name="Panel"}
             </div>
            </div>
    
          <div id="Foot">
                <div>Powered by <a href="http://vanillaforums.org">Vanilla</a></div>
            {asset name="Foot"}
            </div>
        </div>
    </body>
    </html>
    
  • kjaonlinekjaonline
    edited December 2011

    Thank you @clethrill

  • No worries

Sign In or Register to comment.