jQuery.tagmalion.forum - Custom Template

Letting the plugin use the default template or putting yourself at the mercy of other peoples templates might not be to your taste.

Luckily, you can create all the HTML and CSS yourself on the page and cut templates out of the equation entirely. The way to do that is to specify

$('#container').forum({
        "tag" : "jquery.tagmalion.forum", 
        "host" : "http://mysite.com",
        "template" : null});

The plugin will assume that #container contains all the necessary markup to run. This does however mean that you will have to provide the HTML, on the other hand you are now free to customise it as much as you like:

<div id='container'>
        <!-- CONTROLS -->
        <button class='tmf_threadView tmf_listThreads'>List Posts</button>
        <button class='tmf_listView tmf_addPost'>Add Post</button>
        
        <!-- LIST OF POSTS -->
        <div id='tmf_ListPosts' class='tmf_listView'>
                <a class='tmf_threadLink' tmf_dataId='${id}'>${subject}</a>
                <!-- Other markers include :  
                    ${id}, ${threadId}, ${date}, ${name}, ${subject}, 
                    ${hostUrl}, ${host}, ${replyCount}, ${contentSnippet} -->
                <br />
        </div>
        
        <!-- REPLIES IN THREAD -->
        <div id='tmf_ListThread' class='tmf_threadView'>
            <div context='replies'>
            ${subject}
            <button class='tmf_addReply' tmf_dataId='${id}'  tmf_threadId='${threadId}'>reply</button>
                <!-- Other markers include :  
                    ${id}, ${threadId}, ${date}, ${name}, ${subject}, 
                    ${hostUrl}, ${host}, ${replyCount}, ${content} -->
                !{10}
            </div>
        </div>
        
        <!-- POST/REPLY FORM -->
        <form class='tmf_postView tmf_replyView'>
            <input type='hidden' id='tmf_ReplyToID' name='tmf_ReplyToID' />
            <input type='hidden' id='tmf_threadId' name='tmf_threadId' />
            Name:<br />
            <input type='text' name='tmf_name' style="width:200px;" /><br />
            Subject: <br />
            <input type='text' name='tmf_subject' style="width:400px;" /><br />
            Content:
            <br />
            <textarea rows='7' cols='80' name='tmf_content'></textarea><br />
            Please enter the following sequence of characters<br /> into the verification code box<br />
            <img class='tmf_verificationImage' src='' /><br />
            Can't read these? <a href='#' class='tmf_renewVerification'>get another set</a><br />
            <input type='hidden' name='tmf_verificationID' class='tmf_verificationID' />
            <br />
            Verification code:<br />
            <input type='text' name='tmf_verificationKey' /><br />
            <button class='tmf_replyView tmf_reply'>Reply</button>
            <button class='tmf_postView tmf_post'>Post</button>
            <button class='tmf_postView tmf_cancelPost'>Cancel</button>
            <button class='tmf_replyView tmf_cancelReply'>Cancel</button>
        </form>
</div>

All ID's and classnames starting with tmf_ are used by the plugin. You can move the HTML around and add your own classes to support your design.