Fork me on GitHub
Current releases are 2.1.3 (9 Sept 2014) and 2.0.18.13 (5 Aug 2014)

Ready for 2.1? Find out if your plugins are compatible. 2.0 will no longer be updated after Dec 2014.

How to add the 'how to ask' information box when asking a new question on vanilla.org

edited February 2011 in Vanilla 2.0 Help
I noticed that on vanillaforums.org when posting a new question there is an information box that appears to the right. the information changes depending if you have focus on

question title
ask your question
tags

how do I add one of these boxes, as this would be create to let my members know how to correctly post, as most of my users are non technical.

Comments

  • ToddTodd Chief Product Officer Vanilla Staff
    This was done in vanillaforums.org's theme. Here is what we did:

    1. We override the post view by making a new file in the [theme]/views/post/discussion.php. The file was copied from applications/vanilla/views/post/discussion.php.
    2. We added the help text in divs. Each div has the Help class as well as a Help[FieldName] class (ex. HelpTitle, HelpFormat, etc.).
    3. We added the following javascript to the page:

    jQuery(document).ready(function($) {
    $('.HelpFormat, .HelpTags').hide();
    $('#Form_Name').focus(function() { $('.Help').hide(); $('.HelpTitle').show(); });
    $('#Form_Body').focus(function() { $('.Help').hide(); $('.HelpFormat').show(); });
    $('#Form_Tags').focus(function() { $('.Help').hide(); $('.HelpTags').show(); });
    });
    We added this in the theme hooks file, but I think you can also just place the script in discussion.php file.

    Hope this helps!
  • Very interesting.
    Todd, can you zip css and this file, please?

    May be it is possible to integrete this in Vanilla, as it can be very useful if you could make hints specific to category (with subcategories, if any, having same hints).
  • i would love this option as well. could you kindly zip the files and codes necessary to add this to an existing vanilla installation? some of us are not too technical. i am very willing to learn though. and btw just wanna say, i love vanilla! just stumbled on it tonight and i am experimenting with it! good job guys! more grease to your elbows!
  • I had a go at the code but failed. Step 1 copying discussions.php was ok but got lost on step 2. I used firebug to query the code displayed from vanillaforums and added this to discussions.php and also added the javascript code from step 3. Im not a developer, probably why this failed. a plugin would be good as this is really good functionality.
  • Todd, I still haven't managed to get this working. Could you provide a copy of the discussion.php that already has this code in so I can review and change the parts I need to.

    every time I try to add the Java script to discussion.php I get an error. Help and assistance would be appreciated.
  • Will this be part of vanilla core in 2.0.18 BETA 2 as its would be welcomed functionality
  • smoigecomsmoigecom New
    edited July 2011
    < div class="Help HelpTitle">1< /div >
    < div class="Help HelpFormat">2< /div >
    < div class="Help HelpTags">3< /div >
  • edited March 2012

    To @ashleybacon , @tester13 , @iamonline , @smoigecom and everyone else, if you are still looking for this....

    The info Todd gave was clear enough (at least for me). So, let me explain how I did it on my forum, step-by-step.

    FIRST, PLEASE NOTE: You better know a good-level of CSS, otherwise it can be tough, and you'll end up wasting a lot of time. But I hope following my instructions will be easy for ya all.

    [1] Copy discussion.php from '/vanilla-forum-root/applications/vanilla/views/post/' over to your custom theme — '/vanilla-forum-root/themes/YOUR-CUSTOM-THEME/views/post/'. (If the 'views' and/or 'post' don't exist already in your custom theme, just create them and drop discussion.php in.

    [2] Now copying discussion.php into your custom theme as mentioned above means, you can edit the file (in your custom theme) as you wish, and it doesn't disturb the Vanilla core.

    Open '/vanilla-forum-root/themes/YOUR-CUSTOM-THEME/views/post/discussion.php' and start following my further instructions.


    NOTE: Now I am directly going to be adding CSS styles and JavaScript into 'discussion.php' and they will show up inside the <body> and not in the <head> as we usually do. Why?

    Because these CSS styles and JavaScript are needed only on this page, i.e. the 'create a new discussion' page, and adding them unconditionally to the <head> tag all pages is unnecessary. Also because I don't know PHP, so I can't use PHP to show these CSS styles and Javascript only in the header of this page. If anyone does know how to do conditional output in PHP/Vanilla, please do share your solution.

    Also don't worry about SEO, and sh!t like that. Search engines cannot index this page unless you enabled guest posting, and even if you did, does it matter if this effing page is ranked low? lol! So, get over it.

    Now, lets move on...


    [2.a] Right above this:

    <div id="DiscussionForm">
    

    Place this entire code:

    <style type="text/CSS">
    /* Help Info on Post Discussion Form */
    #DiscussionForm form {
        display: block;
        margin-right: 242px;
    }
    .PostHelp {
        float:right;
        width: 220px;
        background: #FEF7DF;
        border: 1px solid #EEC38A;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        font-size: 11px;
        color: #B76600;
    }
    #Content .PostHelp h4 {
        font-size: 14px;
        font-weight: bold;
        border: none;
        margin: 0;
        padding: 0;
    }
    .PostHelp .Help {
        padding: 4px 8px;
    }
    .Help ul { margin: 0 !important; }
    .Help ul li {
        list-style: disc;
        margin-left: 14px;
    }
    div.Examples {
        padding-top: 12px;
    }
    div.Examples,
    div.Help {
        font-size: 11px;
    }
    div.Examples div {
        font-style: italic;
    }
    div.Examples div strong {
        font-weight: bold;
        font-style: normal;
        display: inline-block;
    }
    div.Examples div.Good strong,
    div.Examples div.Bad strong {
        /* text-shadow: 0 0px 3px #000; */
        color: #fff;
        border-radius: 3px;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
        line-height: 1;
        padding: 2px 4px;
    }
    div.Examples div.Good strong { background: #0a0; }
    div.Examples div.Bad strong { background: #f00; }
    </style>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
       $('.HelpFormat, .HelpTags').hide();
       $('#Form_Name').focus(function() { $('.Help').hide(); $('.HelpTitle').show(); });
       $('#Form_Body').focus(function() { $('.Help').hide(); $('.HelpFormat').show(); });
       $('#Form_Tags').focus(function() { $('.Help').hide(); $('.HelpTags').show(); });
    });
    </script>
    

    [2.b] Right below this line:

       <h1><?php echo $this->Data('Title'); ?></h1>
    

    Add this code block:

    <?php
    echo '<div class="PostHelp">
       <div class="Help HelpTitle">
          <h4>How to Ask</h4>
          <ul>
             <li>We prefer questions that can be <em>answered</em>, not just discussed.</li>
             <li>Provide details.</li>
             <li>Write clearly and descriptively.</li>
          </ul>
          <div class="Examples">
             <div class="Example Bad"><strong>Bad:</strong> HELP!!!!!!</div>
             <div class="Example Good"><strong>Good:</strong> Error during install process: "no input file specified"</div>
          </div>
       </div>
       <div class="Help HelpFormat" style="display: none; ">
          <h4>How to Format</h4>
          <ul>
             <li>HTML is allowed</li>
             <li>Place code samples in &lt;pre&gt; and &lt;code&gt; tags.</li>
             <li>Provide details like:
                <ul>
                   <li>Exact error messages</li>
                   <li>Browser &amp; version</li>
                   <li>PHP version</li>
                   <li>MySQL version</li>
                </ul>
             </li>
          </ul>
       </div>
       <div class="Help HelpTags" style="display: none; ">
          <h4>How to Tag</h4>
          <p>A tag is a keyword that categorizes your question with similar questions.</p>
          <ul>
             <li>When possible, use existing tags</li>
             <li>Favour popular tags</li>
             <li>Use common abbreviations</li>
             <li>Don\'t include synonyms</li>
             <li>Combine multiple words into a single word with dashes</li>
             <li>Max 5 tags</li>
             <li>Max 25 characters per tag</li>
             <li>Tag characters: a-z 0-9 + # _ .</li>
             <li>Separate tags with a space</li>
          </ul>
       </div>
    </div>';
    ?>
    

    [2.c] The usual drill — save the file, and upload it back to your server (i.e. to '/vanilla-forum-root/themes/YOUR-CUSTOM-THEME/views/post/').

    [2.d] That's it. Go check it out here — http://example.com/post/discussion/ (replace example.com with your domain) or http://subdomain.example.com/post/discussion/ (replace subdomain.example.com with your sub-domain) or http://example.com/forum/post/discussion/ (replace example.com with your domain, and forum with your sub-directory) — based on how you installed Vanilla.

    Hope that was clear enough. Happy modding!

Sign In or Register to comment.