Your username here MUST MATCH your XenForo username (connected to your XF license).

    Once you have registered here, then you need to start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

Implemented Discuss this Item button Location: Sidebar and Below Item Content


New Member
CAS Premium
SC Premium
Hi there, is it possible to duplicate the "Discuss This Item" button and place it directly below the article/item?

I've tried to do it by copying and pasting the code from the sidebar template but the button comes out really small and all the text is on one line.

p.s. Also, would I be able to change the colour of the duplicated button?

Thanks. :)
Upvote 0
This suggestion has been implemented. Votes are no longer accepted.
The CSS is specific to the Sidebar, so you'd have to do some modification (like daisy chaining classes) as well as setting width of the element (as it is designed to use the width of the sidebar). I'll move this to suggestions as I could probably add some additional classes that will make it a bit easier to locate in other places (at least the button formatting). You'd still need to put the button into an element (DIV, LI, SPAN etc) and set some CSS on that element to control the width, padding, margin etc. You can then add your own class name to the element so that you can use it with Extra.css to do things like change the button colors.
Ok, thanks, most of that went way over my head, lol. I'll keep fiddling and see what I can come up with.
Its now as simple as enabling it (the Below Content is disabled by default, so you'll need to enable it post upgrade)


As for styling, the "below content" area button has its own CSS Classes, which gives you full control of the button without effecting the other button (or other core xf buttons).

This is the Template Code
    <xen:if is="{$xenOptions.scDiscussThisItemLocation.below_content} && {$thread}">
        <div class="buttonContainer">
            <div class="discussButton">
                <a class="callToAction" href="{xen:link threads, $thread}"><span>
                    {xen:phrase nflj_showcase_discuss_this_item}
                    <xen:if is="{$thread.reply_count}"><small class="minorText">{xen:phrase replies}: {xen:number $thread.reply_count}, {xen:phrase latest}: {xen:datetime $thread.last_post_date}</small></xen:if>

This is the CSS that goes with it.
.showcaseItem .buttonContainer
    text-align: center;

    .showcaseItem .buttonContainer .discussButton
        max-width: 300px;
        margin: auto;

        .showcaseItem .discussButton .callToAction
            display: block;
            text-align: center;
            height: auto;
            line-height: normal;
            margin: 15px 0;

            .showcaseItem .discussButton .callToAction span
                font-size: 12pt;
                padding: 3px 0;

            .showcaseItem .discussButton small.minorText
                display: block;
                font-size: 11px;
                font-weight: normal;

NOTE: This button MUST be located within the DIV that has the class "showcaseItem". If you move it outside that DIV (which is the main div for the item), the CSS will break as its slaved to that particular container element. eg, if you move it into the HEADER, its not going to work.