1. REGISTRATION REQUIREMENTS:

    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

Discussion in 'Showcase Closed Suggestions' started by viper357, Oct 30, 2016.

  1. viper357

    viper357 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. :)
     
  2. Bob

    Bob Developer Staff Member

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

    viper357 New Member CAS Premium SC Premium

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

    Bob Developer Staff Member

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

    Selection_357.png
     
  5. viper357

    viper357 New Member CAS Premium SC Premium

    Yes, exactly that. :)
     
  6. Bob

    Bob Developer Staff Member

    Its now as simple as enabling it (the Below Content is disabled by default, so you'll need to enable it post upgrade)

    Selection_358.png

    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.
     
    mouth, alfa1 and viper357 like this.
  7. viper357

    viper357 New Member CAS Premium SC Premium

    That's fantastic, thank you very much Bob. I really appreciate it. :)
     
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.