XF 1.5 Adding hot threads in thread list view

[anmol dubey]

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



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?

 

[wang]

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.

 

[anmol dubey]

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.

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.

 

[wang]

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.

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:

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

<xen:require css="templateName.css" />

And you can use the className in your code like this:

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

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

@wang Thanks for spoon feeding me Let me quickly try this

 

[wang]

@wang Thanks for spoon feeding me Let me quickly try this

You are welcome sir

 

[anmol dubey]

@wang - you are amazing !!