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,

[ramesh_umk3]

Originally Posted by Skyrider

It looks great! however, doesn't appear to be working with:

https://vborg.vbsupport.ru/showthread.php?t=230906

Make Prefixes Clickable to Filter Forumdisplay

Anyway it can be made compatible?

I think the plugin which you mentioned will use hyperlink anyway so try to follow modification in

Thread Prefix Manager

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

or

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

or

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

if you don't like text effects just simply add one line in css which i mentioned in 1st post

text-decoration: none !important;

Regards,

[Skyrider]

Lovely, thank you! Works fine now with clickable prefixes!

[Easelm]

If you're having issue changing the color of the dotted border, I had to use the color hex.
Also, if you don't want it to act as a link, you can make this a <div> tag instead the same way.

Thanks for the release! After some tweaks to fit my website it looks nice. Makes the threads stand out more.

[OUTL4W]

installed...any way to have these show up when selecting them from the drop down menu?

[SᴩiDᴇЯ]

Can you setup this on vB4.2.2? as i am looking for this kind of modification for my site.

I tried adding the code here: vBulletin Option --> Style & Language Settings --> External CSS URL ( you can add the code in that css file ) but my whole lost all images and jumbled up text.

also i couldn't find additional.css

so please give me details on how to set this up please on vb 4.2.2

Thank you in advance.

Don't worry it's all fixed and running 100% see here site nice job to the coder.

[ozzy47]

ACP --> Styles & Templates --> Style Manager, once there choose Edit in the dropdown for the style you are using, Then scroll till you see, CSS Templates, double click on that, scroll till you see additional.css then double click on that. Add the code, and then save.

[Gadget_Guy]

How can I apply this to the "Sticky" prefix?

D.

[ramesh_umk3]

just add the css class around "sticky" word

example:
<a class="mcbadge mcbadge_v">Sticky</a>

[soaringpine]

Everything works great except I cannot figure out one item. When the thread is listed in the forum the text for the prefix is always colored black. I'd like it to be white and no matter what I try it will not change? Am I missing something simple here?

Thanks

[SᴩiDᴇЯ]

I see you add the colors to the text and that's good, but can you tell me how to add an image instead of the text you use in the thread prefix? like they do in digital point showing selling and buying look: https://forums.digitalpoint.com/forums/services.60/