MyBB Community Forums

Full Version: Red dot near Fontawesome Icon
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello, in my forum I have this area:

[Image: area.png]

This is how each buttonĀ it looks like in code:

<li><a class="ease-all" href=" LINK " title=" NAME "><i class="fa fa-youtube"></i></a></li>

What I want is, when our Twitch channel online, adding red dot here like this:

[Image: reddot.png]

I see that it's difficult to do this automated, so even if I have to add/remove code before/after each stream, I am okay with it.

How can I make this happen? Do you have any other suggestions? Basically I am trying to find an elegant way to show that my forum is online at twitch without disturbing users too much.
You'll likely need to use the Twitch API, and a small plugin or core edit to accomplish this if you'd like it to be automated.

https://discuss.dev.twitch.tv/t/check-if...line/13630
https://discuss.dev.twitch.tv/t/how-to-j...live/14701
It's being automated is not that important, I am currently struggling with adding single red dot next to fontawesome icon :p

If I can get the code I need, I can add/remove it manually whenever its needed.
Let me be clear, you want the red dot to appear when an online alert appears.

So you are using the Twitch icon for font awesome. you need to do something like this


<i class="fa fa-twitch" aria-hidden="true"></i> <span class="twitch dnt{$mybb->user['something_twitch_offline]}"></span>

dnt0 {
display: none !important;
}
.twitch {
color: #FFF;
position: relative;
top: -6px;
left: -7px;
padding: 1px 2px 1px 5px;
text-align: center !important;
background: #823535;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
text-shadow: 1px 1px 0px #882929;
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25) inset, 0px 1px 4px rgba(0,0,0,0.15);
font-size: 12px;
}

if this doesn't help, explain so we can help you, without looking at your code, I can't tell what triggers online/offline. but this should be super easy to figure out.