1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.5 Adding hot threads in thread list view

Discussion in 'Styling and Customization Questions' started by anmol dubey, Mar 27, 2016.

  1. anmol dubey

    anmol dubey Member

    I am planning to add a "Hot threads" indicator in the thread list view and have added

    <xen:if is="{$thread.reply_count} > 10">Hot!</xen:if>

    in the thread_list_view template. And it works pretty well , see below

    upload_2016-3-27_23-24-32.png

    ASK
    • How can i beautify the hot indicator? If say i needed to change the text color
    • Can i add a flaming icon (or any thing representing hot ) display on it?
     
  2. wang

    wang Well-Known Member

    Yes, you can add it. Upload the image, create a class and then specify the path to it in the newly created class, along with the other attributes, like the color, size etc.
     
  3. anmol dubey

    anmol dubey Member

    Thanks Wang - Im kinda novice and have not created a class or worked with images before - would you be able to elaborate this a lil or maybe a reference on creating class.
     
  4. wang

    wang Well-Known Member

    You can have a look at any of xenforo 's css templates. A class name is preceeded by a . and the name. Then in between brackets are the attributes:values pairs. For example we create this class:

    HTML:
    .className
    {
        border: 1px solid @primaryLighterStill;
        border-radius: 5px;
        font-size: 11px;
        margin: 10px 0;
        padding: 5px;
        line-height: 16px;
        background-image: url('@imagePath/xenforo/gradients/form-button-white-25px.png');
    }
    Then we add it either to an existing .css template, or create a new one. If it is added to an existing template that it is already included in the template where you are adding your code, then no other step is required besides calling the class name. But if you add it to a new template, you must include it like so:

    HTML:
    <xen:require css="templateName.css" />
    And you can use the className in your code like this:

    HTML:
    <xen:if is="{$thread.reply_count} > 10"><span class="className">Hot!</span></xen:if>
    Or you can use div class for block of code. But I think that in this case span is more appropriate. You can rename className to whatever name you like. I used it as an example.

    You can take another route too, which is defining the attributes:values pairs directly to the span tag with the help of the style attribute, like so:

    HTML:
    <xen:if is="{$thread.reply_count} > 10"><span style="
    border: 1px solid @primaryLighterStill;
        border-radius: 5px;
        font-size: 11px;
        margin: 10px 0;
        padding: 5px;
        line-height: 16px;
        background-image: url('@imagePath/xenforo/gradients/form-button-white-25px.png');
    ">Hot!</span></xen:if>
     
    anmol dubey likes this.
  5. anmol dubey

    anmol dubey Member

    @wang Thanks for spoon feeding me :) Let me quickly try this
     
    wang likes this.
  6. wang

    wang Well-Known Member

    You are welcome sir :)
     
  7. anmol dubey

    anmol dubey Member

    @wang - you are amazing !!

    upload_2016-3-28_0-18-32.png
     
    wang likes this.

Share This Page