Change user rank based on text

Hello people,

If you are tired of finding images for your forum ranks, you can use CSS and jQuery to do it by code. Let's see how it's done.

Go to: CP > Display > Pictures & Colors > Colors & CSS

AwesomeBB

.post-author-title {
    margin-top: 10px;
    background-color: #369fcf;
    border: 1px solid #fff;
    padding: 5px;
    outline: 1px solid #369fcf;
    color: #fff;
    font-weight: 400;
    text-transform:uppercase;
}

Go to CP > Modules > HTML & Javascript > Javascript code management and make a new script. Name it whatever you want and add this code:

/*
Script made by System32
Visit https://help.forumotion.com/ for more tutorials
Code is free for distribution and code change is allowed
*/
 
$(document).ready(function(){
  $( ".post-author-title:contains(\"Admin\")" ).css( "background-color", "#ff0404" );
  $( ".post-author-title:contains(\"Admin\")" ).css( "outline", "1px solid #cf3656" ); 
});

ModernBB

CSS

.postprofile-rank {
    margin-top: 10px;
    background-color: #369fcf;
    border: 1px solid #fff;
    padding: 5px;
    outline: 1px solid #369fcf;
    color: #fff;
    font-weight: 400;
    text-transform:uppercase;
}

jQuery

/*
Script made by System32
Visit https://help.forumotion.com/ for more tutorials
Code is free for distribution and code change is allowed
*/
 
$(document).ready(function(){
  $( ".postprofile-rank:contains(\"Admin\")" ).css( "background-color", "#ff0404" );
  $( ".postprofile-rank:contains(\"Admin\")" ).css( "outline", "1px solid #cf3656" ); 
});

PunBB

CSS

.pun .user .user-ident{
    width:95%;
    margin-left:5px;
    margin-top: 10px;
    background-color: #369fcf;
    border: 1px solid #fff;
    outline: 1px solid #369fcf;
    color: #fff;
    text-transform:uppercase;
    text-align:center;
    font-weight:normal;
}

jQuery

/*
Script made by System32
Visit https://help.forumotion.com/ for more tutorials
Code is free for distribution and code change is allowed
*/
 
$(document).ready(function(){
  $( ".pun .user .user-ident:contains(\"Admin\")" ).css( "background-color", "#ff0404" );
  $( ".pun .user .user-ident:contains(\"Admin\")" ).css( "outline", "1px solid #cf3656" ); 
});

Note: If you wish to addept script, pay attention to this "Admin" text. You can change that to any rank name you use and add your own styles there. This is just for tutorial purposes. 

Basic member:

Admin:

Cheers.