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

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.

 

just to make sure, THIS is what you are wanting to do?

 

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

HTML:

    <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>
                </span></a>
            </div>
        </div>
    </xen:if>

This is the CSS that goes with it.

HTML:

.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.