Attractive Thread Prefix

[ramesh_umk3]

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

.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 :)

https://vborg.vbsupport.ru/attachment.php?attachmentid=147795&stc=1&d=1389529808


This is how it looks:

https://vborg.vbsupport.ru/attachment.php?attachmentid=147796&stc=1&d=1389529873

Live Demo (http://www.mobilescommunity.com/)


Feel free to add your own colors

Kind Regards,

[qpurser]

Like it and works great.
However adding the code to my additional.css didn't work. I had to add the code to vbulletin.css and then it worked.

[ramesh_umk3]

Yep vbulletin.css should also be okay when additional.css is not loading up :)

Or

vBulletin Option --> Style & Language Settings --> External CSS URL ( you can add the code in that css file )

[ku-med]

Cool! Thanks for sharing :)

Edit: when you put the code at the end of additional.css it won't work unless you put it at the top :D

[Skyrider]

Might want to add the class of the prefix rich text also in the example.. So people don't have to type it over.

[ramesh_umk3]

Done! i have updated 1st post with Title (rich text) code . Now just copy paste and edit your Title (plain text)

[Novs67]

thx for your code !

i look for add 1 prefix automatically in thread ? any idea ?

[ramesh_umk3]

automatic prefix even i never heard that bro, But you can make user to select atleast one prefix for posting

[Application]
[Cheat]
[Application] [Cheat] (you can follow that pattern)

[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?

[ramesh_umk3]

Mostly it should support with any plugin cause we don't use ordinary class names to get conflicts with any inner vB CSS classes if any they can be adjusted with minor changes :)

Regards,

[ramesh_umk3]

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! :D

[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 (http://digiwebs.com) 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/

[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]

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