Rules box in Subforum

Hello, I'd like to know how to make this ---> https://prnt.sc/0eUZHqb8dwFm on my Forum,

I tried to do it but when I go to Rules in my forum, it shows only while Replying, I want it to show when someone is in my Category (like in screenshot above) ---> https://prnt.sc/PiXcgGcS7UOI

Here is one more example : https://prnt.sc/Khcba1iociHx

Any solutions?

Hello @Rale,

Please don't double post. Your posts need to be separated by 24 hours before bumping. Please use the edit button, instead! Please read our forum rules: ESF General Rules

Are you wanting this only in the careers forum?
If not, is it going to be everywhere the same or different in other forums?

Regards,
TheCrow.

TheCrow wrote:Hello @Rale,

Please don't double post. Your posts need to be separated by 24 hours before bumping. Please use the edit button, instead! Please read our forum rules: ESF General Rules

Are you wanting this only in the careers forum?
If not, is it going to be everywhere the same or different in other forums?

Regards,
TheCrow.

I want it to be shown in only Careers forum, yeah.

Could you please provide your site URL here?

Hello @Rale,

Thank you for the information you provided.
You can achieve the requested result by adding this javascript in your forum:

Admin Panel > Modules > HTML & JAVASCRIPT : Javascript codes management

Make sure your Javascripts are enabled and then click the Create a new Javascript button.
Fill in the fields as below:
Title * : Whatever you want
Placement : In all the pages
Javascript Code * : copy and paste the below code

Code:

$(function(){
  if (/f18-/.test(window.location.href)){
    $('<div id="annBox"><a href="/"><img src="https://i52.servimg.com/u/f52/18/64/98/14/screen69.png" /></a></div>').insertAfter('.sub-header-info');
  }
});

In this code, I added the picture you sent, with a link wrapped around it. That means that when someone clicks the image it would take them to the main page of the forum. If you want to change where they will be taken, when they click the picture, you can change the

Code: <a href="/">

from the code and put the link of the topic/forum where you want them to be taken to.

Then you have to go to your CSS and add the below code.

Admin Panel > Display > Pictures and Colors : Colors & CSS > CSS Stylesheet

Code:

div#annBox img {
    max-width: 80%;
}
div#annBox {
    display: inline-block;
    background: #292929;
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
    text-align: center;
}

This would give you this as your result:


If there are any further questions, please don't hesitate to let us know here.

Regards,
TheCrow.

if your request is complete, please mark it as Solved.