Thread: [IPB 4.1/4.2] CSS in individual member titles

I've seen some people ask about this and I figured I'd make a quick tutorial on it.

I'll get straight to the point. This tutorial is to teach users who use IPB's forum software how to allow CSS in individual member titles. At the moment there is not a plugin or application available to do this easily so you will have to just edit/replace some already-existing code and adding the proper code to your Custom CSS.

WARNING: You will need to do this for every member individually. Yes it's tedious, but it's only if you want it done.

Step 1:
Open up your theme's "Edit HTML/CSS" interface by going to: Customization > Appearance > Themes > and clicking this on the theme you're using

Step 2:

In the Templates area you will input either two of these codes depending on what you're using (these will be changed)

You will use this code if you ARE using the "Enhanced User Info Panel" plugin

Code:

ipsComment_author cAuthorPane ipsColumn ipsColumn_medium euip_PanelWidth

You will use this code if you ARE NOT using the "Enhanced User Info Panel" plugin

Code:

ipsType_break

Once you find that area, you will look for the following code in the designated template:

You will look for this code if you ARE using the "Enhanced User Info Panel" plugin

Code:

<span class="ipsResponsive_hidePhone ipsType_break">
{$comment->author()->member_title}
</span>

You will look for this code if you ARE NOT using the "Enhanced User Info Panel" plugin

Code:

{{if $comment->author()->member_title && $comment->author()->member_id}}
<li class='ipsType_break'>{$comment->author()->member_title}</li>

Step 3:

Replace the entire code as displayed above with the following code:

Code:

<li class='adm_{$comment->author()->member_id}'>
{$comment->author()->member_title}
</li>

Save the Template and you are pretty much done. The last thing you will need to do is input proper CSS coding into your Custom CSS template. I will list the code and an example below.

Proper Code Styling:

Code:

.adm_(member's ID) {
Your CSS Coding
}

Example: On my forum, my member ID is #1 because I created the forum and that is the ID I was given upon creation. You can find a user's member ID by either accessing their account information through the Members > Members option on the ACP or by opening their profile on your forums - it'll be the number that comes before your name (check the spoiler for ID image examples if you are confused.)

Spoiler for ID images:

ACP Profile URL ID


Forum Profile URL ID

Example of my Code Styling: (with an image of end result)

Code:

.adm_1 {
	color:cyan;
	font-weight:bold;
  	text-shadow: 0px 0px 5px yellow;
}

Spoiler for End Result:

And that's it.

If anyone has any questions, feel free to contact me on my discord or via PM.

If anyone would like this service to be done by yours truly, you can check out my service thread over at [Only registered and activated users can see links. ]







Credits to the user "Morpheus" from Webflake for explaining it in detail