vb.org Archive - Mini Mods - Attractive Thread Prefix

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Mini Mods - Attractive Thread Prefix (https://vborg.vbsupport.ru/showthread.php?t=306940)

ramesh_umk3

01-11-2014 11:00 PM

Attractive Thread Prefix

1 Attachment(s)

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)

Code:

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

Select any prefix , see below example :)

https://vborg.vbsupport.ru/attachmen...1&d=1389529808

This is how it looks:

https://vborg.vbsupport.ru/attachmen...1&d=1389529873

Live Demo

Feel free to add your own colors

Kind Regards,

qpurser

01-12-2014 04:48 PM

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

01-12-2014 04:55 PM

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

01-14-2014 03:12 PM

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

02-02-2014 03:15 PM

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

02-02-2014 04:36 PM

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

Novs67

02-07-2014 06:19 AM

thx for your code !

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

ramesh_umk3

02-07-2014 01:34 PM

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

03-21-2014 09:43 AM

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

03-21-2014 08:52 PM

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

03-21-2014 08:59 PM

Quote:

Originally Posted by Skyrider (Post 2488703)

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

Code:

TITLE (PLAIN TEXT) HERE

Code:

TITLE (PLAIN TEXT) HERE

Code:

TITLE (PLAIN TEXT) HERE

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

Code:

text-decoration: none !important;

Regards,

Skyrider

03-25-2014 10:48 AM

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

Easelm

03-28-2014 07:46 PM

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

01-07-2015 02:40 PM

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

SᴩiDᴇЯ

01-27-2015 02:56 AM

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

01-27-2015 09:12 AM

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

01-27-2015 06:39 PM

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

D.

ramesh_umk3

02-01-2015 04:06 PM

just add the css class around "sticky" word

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

soaringpine

07-03-2015 10:54 AM

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ᴇЯ

12-14-2015 09:15 AM

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

02-29-2016 10:21 AM

vbulletin 5.2.1 work

Smitty

05-21-2016 08:52 AM

Has anyone tried this with vB 3.8.x?

ramesh_umk3

03-17-2018 01:17 PM

Sorry for late reply.

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

thanks

JasonTSF

04-01-2018 10:58 AM

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

04-02-2018 08:48 AM

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

Code:

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

scottkoz20

04-04-2018 12:29 PM

Quote:

Originally Posted by ramesh_umk3 (Post 2593880)

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

Code:

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.

Code:

/* 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

04-07-2018 07:02 PM

Thank you ;)

Zelda-King

04-09-2018 10:36 AM

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

04-13-2018 10:44 AM

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

04-13-2018 03:23 PM

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

cheers

All times are GMT. The time now is 05:57 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01154 seconds Memory Usage 1,810KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (8)bbcode_code_printable (1)bbcode_php_printable (2)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (30)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: