Mini Mods - Attractive Thread Prefix

Hey Friends,
This idea just came up by seeing XenForo threads Prefix style they really look attractive, Any how if you like you can use them aswell just follow below procedure....

Copy below CSS Code to additional.css template

PHP Code:

.mcbadge_v {
    background: none repeat scroll 0% 0% #9400D3;
}
.mcbadge_i {
    background: none repeat scroll 0% 0% #4B0082;
}
.mcbadge_b {
    background: none repeat scroll 0% 0% #0000FF;
}
.mcbadge_g {
    background: none repeat scroll 0% 0% #0B610B;
}
.mcbadge_y {
    background: none repeat scroll 0% 0% #B18904;
}
.mcbadge_o {
    background: none repeat scroll 0% 0% #B43104;
}
.mcbadge_r {
    background: none repeat scroll 0% 0% #FF0000;
}

.mcbadge {
    display: inline-block;
    height: 15px;
    line-height: 15px;
    font-size: 9px;
    font-weight: bold;
   padding: 0px 2px;
    margin: 0px;
   letter-spacing:0.4px;
    color: #fff;
    border-radius: 4px;
border:1px dashed black;
    vertical-align: middle;
cursor:default;
} 


Save it .

Now Goto

Thread Prefixes --> Thread Prefixe Manager

Title (Rich Text)

<a class="mcbadge mcbadge_v">TITLE (PLAIN TEXT) HERE</a>

Select any prefix , see below example




This is how it looks:



Live Demo


Feel free to add your own colors

Kind Regards,

[teddyvgt]

vbulletin 5.2.1 work

[Smitty]

Has anyone tried this with vB 3.8.x?

[ramesh_umk3]

Sorry for late reply.

Offcourse this works with all vBulletin Versions if any issues you can reply here i will help ..

thanks

[JasonTSF]

I have it working, but I can having trouble figuring out how to make each tag its own color. I have them all coming up purple and that is what I don't want.

Edit: Never mind I figured it out!

[ramesh_umk3]

Great. But all you need to get is Hex Color codes and replace in CSS.

https://www.w3schools.com/colors/colors_picker.asp

[scottkoz20]

Originally Posted by ramesh_umk3

Great. But all you need to get is Hex Color codes and replace in CSS.

https://www.w3schools.com/colors/colors_picker.asp

Just to piggyback on this, a couple of my members to give me suggestions on colors that were a bit more subtle and not overpowering (especially with the style that I use). Feel free to use this to test out colors.

/* Prefix Styling */
.mcbadge_v { 
    background: none repeat scroll 0% 0% #e1b5f4; 
} 
.mcbadge_i { 
    background: none repeat scroll 0% 0% #c4b3d1; 
} 
.mcbadge_b { 
    background: none repeat scroll 0% 0% #ADDFFF; 
} 
.mcbadge_g { 
    background: none repeat scroll 0% 0% #EAFAF1; 
} 
.mcbadge_y { 
    background: none repeat scroll 0% 0% #FEF9E7; 
} 
.mcbadge_o { 
    background: none repeat scroll 0% 0% #B43104; 
} 
.mcbadge_r { 
    background: none repeat scroll 0% 0% #FDEDEC; 
} 

.mcbadge { 
    display: inline-block; 
    height: 13px; 
    line-height: 13px; 
    font-size: 13px; 
    font-weight: bold; 
    padding: 0px 2px; 
    margin: 0px; 
    letter-spacing:0.4px; 
    color: #000;
    border-radius: 2px; 
    vertical-align: middle; 
    cursor:default; 
}  

/* Prefix Styling */

[john7911]

Thank you

[Zelda-King]

I have it working fine on 4.2.5 thanks. One thing I notice though is the background colours don’t show in profile activity for customized profile styles though the outline does.

[lacidious]

Hey guys, thanks for the mod.

Is there an easy way to make the letters turn a certain color when hovering over the prefix, depending upon which prefix it is? They all go from white to black now, but would like to differentiate depending on the prefix.

[IggyP]

so that would be like,
.mcbadge_custom a:hover {
color: #customhovercolor;
}

cheers