How do I add a colored bar based on group?

Hello, I would like to have a bar above each post a moderator or admin makes colored, APE said it in this topic

Bump. Topic is revived after a long hiatus!

Hi @Kratos,

This topic should answer your question, but if you need any help let me know.

@Ange Tuteur, in the topic you linked me, I couldn't find the CSS in my stylesheet.

That's because you're supposed to add it in yourself.

@Ange Tuteur wrote:That's because you're supposed to add it in yourself.

Okay then. Add your example too?

To make it simple, add these to your CSS :

Code:

.post {
  border-top:14px solid #CCC;
}

.post.st-answer {
  border-color:#39C;
}

Then add this to a rank title :

Code:

<span class="st-rang"></span>

Lastly add this to a JavaScript with placement in the topics :

Code:

$(function() {
  $('.st-rang').closest('.post').addClass('st-answer');
});

Added the Javascript, copy and pasted with my phone and it didn't look like what you showed. Instead when I looked at a post it showed a white line and when I saw the js, it was straight.(No line breaks)

Everything looks okay, but did you add this HTML to your rank title ?

Code:

<span class="st-rang"></span>

@Ange Tuteur wrote:Everything looks okay, but did you add this HTML to your rank title ?

Code:

<span class="st-rang"></span>

Yeah, added it to Moderator.

Did you give yourself this rank ? You need to apply it to a member to give them a color related to the rank.

@Ange Tuteur wrote:Did you give yourself this rank ? You need to apply it to a member to give them a color related to the rank.

Gave it to Luffy. I think I'm a moderator of that group or someone else. Should I remove the moderator?

I'm looking at the HTML and it appears to be formatted incorrectly.


Did you make sure to include the ending span tag ? Like this :

Code:

<span class="st-rang">Moderator</span>

Yeah, still wasn't blue though.

Could you provide me with a test account that has administrative privileges ? Just so I can have a closer look to make sure everything is setup correctly.

@Ange Tuteur wrote:Could you provide me with a test account that has administrative privileges ? Just so I can have a closer look to make sure everything is setup correctly.

Test Account made .

Bump

@Kratos wrote:

@Ange Tuteur wrote:Could you provide me with a test account that has administrative privileges ? Just so I can have a closer look to make sure everything is setup correctly.

Test Account made .

Could you send the information via PM ? Thanks.

@Ange Tuteur wrote:

@Kratos wrote:

@Ange Tuteur wrote:Could you provide me with a test account that has administrative privileges ? Just so I can have a closer look to make sure everything is setup correctly.

Test Account made .

Could you send the information via PM ? Thanks.

Sent it.

Thanks, sorry for the wait. I hit the snooze last night.

Anyway, you had everything set correctly, but for some reason the tag wasn't formatting correctly. I reformatted it and it worked now. ( As you can see Luffy has a blue bar )

@Ange Tuteur wrote:Thanks, sorry for the wait. I hit the snooze last night.

Anyway, you had everything set correctly, but for some reason the tag wasn't formatting correctly. I reformatted it and it worked now. ( As you can see Luffy has a blue bar )

Thanks Ange Tuteur. For Admins, Graphic Designers do the same thing to their ranks?

Yes, for each rank you want colored you do the same thing. For example, we have these ranks :

Code:

<span class="st-admin">Admin</span>
<span class="st-desi">Designer</span>

Then we add to the JS :

Code:

$(function() {
  $('.st-rang').closest('.post').addClass('st-answer');
  $('.st-admin').closest('.post').addClass('st-admin');
  $('.st-desi').closest('.post').addClass('st-desi');
});

and add some more CSS :

Code:

.post.st-admin {
  border-color:#F33;
}

.post.st-desi {
  border-color:#C6C;
}

Added everything. I still don't see the orange and green bar.