[IPB 4.1/4.2] CSS in individual member titles

erevan · 25-04-2018, 01:06 AM

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.

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.

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;
 }

And that's it.

[IPB 4.1/4.2] CSS in individual member titles

Submitted by erevan, 25-04-2018, 01:06 AM, Thread ID: 85951