How to make Hot Topic sign?

Go down

Solved How to make Hot Topic sign?

Post by Mr. Ganesha on April 29th 2015, 5:19 pm

Something like this, please tell me the way how to make it?



My Forum version phpBB3


Last edited by Mr. Ganesha on May 11th 2015, 1:27 pm; edited 1 time in total
avatar
Mr. Ganesha
Forumember

Male Posts : 96
Reputation : 2
Language : Bahasa
Location : Medan, Indonesia

http://laskarislam.com/

Back to top Go down

Solved Re: How to make Hot Topic sign?

Post by {Lone~Wolf} on April 30th 2015, 4:57 am

You can simply change the regular icon to the icon you want through:
Administration Panel>>Display>>Pictures and Colors>>Pics management>>Advanced Mode>>Icons for Topics
There you have two fields to put your url for the icon you want:
Subject - Hot & New :
Subject - Hot :
fufufu
avatar
{Lone~Wolf}
New Member

Male Posts : 9
Reputation : 3
Language : English/Arabic/Spanish/Polish
Location : Alaska

http://help.ahlamontada.com/u55

Back to top Go down

Solved Re: How to make Hot Topic sign?

Post by Ange Tuteur on April 30th 2015, 5:15 am

Hi @Mr. Ganesha,

It's possible to display an icon like that on posts with a bit of CSS.
Display > Colors > CSS stylesheet

Paste the following code :
Code:
dl.icon { position:relative }
dl.icon[style*="http://illiweb.com/fa/fdf3/subject_new.png"]:before {
  content:"Hot";
  color:#FFF;
  font-weight:bold;
  background:#F60;
  border:1px solid #F30;
  border-radius:3px;
  position:absolute;
  left:50%;
  top:45%;
  padding:3px;
}

Replace http://illiweb.com/fa/fdf3/subject_new.png by the URL of your "hot topic" image. You can change the color, position, etc.. as you see fit. Wink
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: How to make Hot Topic sign?

Post by Mr. Ganesha on April 30th 2015, 12:01 pm

@Ange Tuteur
Nothing effect.
Maybe the problem is because, I have put this code before.

Code:
    dl.icon dd.dterm, dl.icon dt {
        background-position: 75% 75%;
    }

I've put that code to make this ..


Maybe, you can combine the code that already exist with the new code you gave?

avatar
Mr. Ganesha
Forumember

Male Posts : 96
Reputation : 2
Language : Bahasa
Location : Medan, Indonesia

http://laskarislam.com/

Back to top Go down

Solved Re: How to make Hot Topic sign?

Post by Ange Tuteur on April 30th 2015, 7:45 pm

That shouldn't affect it since it's a background image. I'm adding a CSS pseudo element to the topic rows with the hot topic icon. Try adding this to the top of your stylesheet :
Code:
dl.icon { position:relative }
dl.icon[style*="https://cdn4.iconfinder.com/data/icons/sketchdock-ecommerce-icons/flag-hot-red.png"]:before {
  content:"Hot";
  color:#FFF;
  font-weight:bold;
  background:#F60;
  border:1px solid #F30;
  border-radius:3px;
  position:absolute;
  left:40%;
  top:45%;
  padding:2px 6px;
}

It should give the following result :
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: How to make Hot Topic sign?

Post by Mr. Ganesha on May 11th 2015, 1:26 pm

@Ange Tuteur
Sorry too late respond your post, I've tried your code and it works perfectly. Thank You cheers
avatar
Mr. Ganesha
Forumember

Male Posts : 96
Reputation : 2
Language : Bahasa
Location : Medan, Indonesia

http://laskarislam.com/

Back to top Go down

Solved Re: How to make Hot Topic sign?

Post by APE on May 13th 2015, 3:22 pm

Topic solved and archived



avatar
APE
Administrator
Administrator

Male Posts : 12136
Reputation : 1240
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum