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

[viper357]

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.

 

[Bob]

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.

 

[viper357]

Ok, thanks, most of that went way over my head, lol. I'll keep fiddling and see what I can come up with.

 

[Bob]

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

 

[viper357]

Yes, exactly that.

 

[Bob]

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>
                </span></a>
            </div>
        </div>
    </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.

 

[viper357]

That's fantastic, thank you very much Bob. I really appreciate it.