Free Mod Topic Prefix style that rocks!

[glennrocksvb]

Make your topic prefixes colorful and look great like vbmods.rocks.




1. Add this HTML for the Title (Rich Text) field when you add/edit a prefix in the Topic Prefix Manager in AdminCP.

<span class="prefix-xxxxxx" title="This is the hover text and it is optional">This is your Prefix Label</span>

• Change xxxxxx to your preferred prefix class (no spaces). The title attribute is optional. Change "This is your Prefix Label" to your preferred prefix label, this is the prefix text that users see.
• If you edit an existing prefix, you need to clear system cache in AdminCP for the changes to take effect to topics with this existing prefix.
• Repeat for every topic prefix as needed.

2. Add the below CSS to css_additional template in AdminCP or to CSS Editor in Sitebuilder.

• Change xxxxxx and yyyyyy to the corresponding prefix class you used in Step 1.
• Repeat these blocks of code for other topic prefixes (if any) and replace the prefix class accordingly.
• Adjust the colors and other values as desired.

/* Topic Prefix custom style - START */
/* Common styles for all prefixes */
.js-topic-prefix [class^="prefix-"],
.search-module-prefix [class^="prefix-"],
.b-post__title [class^="prefix-"],
.post-action-wrapper [class^="prefix-"],
.lastpost-title-wrapper [class^="prefix-"] {
    padding: 2px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 3px;
    position: relative;
    bottom: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}
.post-action-wrapper [class^="prefix-"] {
    padding: 1px 2px;
    bottom: 1px;
}
.search-module-prefix [class^="prefix-"] {
    bottom: 1px;
}
.b-post__title [class^="prefix-"] {
    padding: 1px 2px;
}
.lastpost-title-wrapper [class^="prefix-"] {
    padding: 0 2px;
}
/* Separate styles for each prefix type */
.js-topic-prefix .prefix-xxxxxx,
.search-module-prefix .prefix-xxxxxx,
.b-post__title .prefix-xxxxxx,
.post-action-wrapper .prefix-xxxxxx,
.lastpost-title-wrapper .prefix-xxxxxx {
    color: #fff;
    border: 1px solid #008000;
    background-color: rgba(0, 128, 0, 0.8);
}
.js-topic-prefix .prefix-yyyyyy,
.search-module-prefix .prefix-yyyyyy,
.b-post__title .prefix-yyyyyy,
.post-action-wrapper .prefix-yyyyyy,
.lastpost-title-wrapper .prefix-yyyyyy {
    color: #fff;
    border: 1px solid #ed143d;
    background-color: rgba(237, 20, 61, 0.85);
}
/* Topic Prefix custom style - END */

This is a free mod. Please consider donating to support me in creating free mods. Thank you and I appreciate your and support.

Enjoy!

[Surf_rider]

Fantastic

[faustvasea]

Can you give me a bit of advise how I can install this mod ?

I'm a bit confused how I should add code and what to edit.

[faustvasea]

what should I put to xxxxx and yyyyyy ?

[glennrocksvb]

Whatever you want to use to describe the prefix. In my case, I used free for the Official-Free prefix and paid for the Official-Paid prefix.

[faustvasea]

Whatever you want to use to describe the prefix. In my case, I used free for the Official-Free prefix and paid for the Official-Paid prefix.

I've tried as well. but effect does not come up.

So I got a set of topic prefixes.

Do I need to replace yyyy and xxxx with set id and prefix id?

[glennrocksvb]

What is the HTML code you are using per Step 1? Whatever value of the class attribute of the span tag is (in my case is prefix-free), you are going to use the same in Step 2 to replace all instances of .prefix-xxxxx. In my case, I replaced them with .prefix-free

If you have multiple prefixes, do the same Step 1 with different prefix class. In my case is prefix-paid class. Then in Step 2, replace all instances of .prefix-yyyyy with whatever class you're using. In my case, I replaced them with .prefix-paid

If you have another prefix, follow Step 1, then in Step 2, copy the block of code for xxxxx or yyyyy (notice the CSS code is similar for xxxxx and yyyyy but only with different CSS property values), then paste the copied code in a separate line then replace prefix-xxxxx or prefix-yyyyy with the appropriate class and also change color, border and background-color to appropriate values. Repeat these process for more prefixes.

If you are not comfortable doing all these steps, you could purchase Product Installation service and I will install this for you.

[faustvasea]

What is the HTML code you are using per Step 1? Whatever value of the class attribute of the span tag is (in my case is prefix-free), you are going to use the same in Step 2 to replace all instances of .prefix-xxxxx. In my case, I replaced them with .prefix-free

If you have multiple prefixes, do the same Step 1 with different prefix class. In my case is prefix-paid class. Then in Step 2, replace all instances of .prefix-yyyyy with whatever class you're using. In my case, I replaced them with .prefix-paid

If you have another prefix, follow Step 1, then in Step 2, copy the block of code for xxxxx or yyyyy (notice the CSS code is similar for xxxxx and yyyyy but only with different CSS property values), then paste the copied code in a separate line then replace prefix-xxxxx or prefix-yyyyy with the appropriate class and also change color, border and background-color to appropriate values. Repeat these process for more prefixes.

If you are not comfortable doing all these steps, you could purchase Product Installation service and I will install this for you.

I'm just confused what should I replace xxxxx and yyyyy. with prefix ID or name ?

I'm using same code as above:

<span class="prefix-xxxxxx" title="This is the hover text and it is optional">This is your Prefix Label</span

[glennrocksvb]

Step 1 says to "Change xxxxxx to your preferred prefix class (no spaces)". You are supposed to change xxxxx to whatever you want to describe the prefix. Please read all the steps carefully and my lengthy post at #7.

[faustvasea]

I will Try again.

It should apear like on your forum

[faustvasea]

All done. Thanks

[glennrocksvb]

Glad you figured it out.

[iask]

Work not

/* Topic Prefix custom style - START */
/* Common styles for all prefixes */
.js-topic-prefix [class^="prefix-"],
.search-module-prefix [class^="prefix-"],
.b-post__title [class^="prefix-"],
.post-action-wrapper [class^="prefix-"] {
    padding: 2px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 3px;
    position: relative;
    bottom: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}
.post-action-wrapper [class^="prefix-"] {
    padding: 1px 2px;
    bottom: 1px;
}
.search-module-prefix [class^="prefix-"] {
    bottom: 1px;
}
.b-post__title [class^="prefix-"] {
    padding: 1px 2px;
}

/* Separate styles for each prefix type */
.js-topic-prefix .prefix-10,
.search-module-prefix .prefix-10,
.b-post__title .prefix-10,
.post-action-wrapper .prefix-10 {
    color: #FFFFFF;
    border: 1px solid #336699;
    background-color: rgba(0, 128, 0, 0.8);
}
.js-topic-prefix .prefix-Windows10,
.search-module-prefix .prefix-Windows10,
.b-post__title .prefix-Windows10,
.post-action-wrapper .prefix-Windows10 {
    color: #FFFFFF;
    border: 1px solid #336699;
    background-color: rgba(237, 20, 61, 0.85);
}
/* Topic Prefix custom style - END */

[iask]

Work not

/* Topic Prefix custom style - START */
/* Common styles for all prefixes */
.js-topic-prefix [class^="prefix-"],
.search-module-prefix [class^="prefix-"],
.b-post__title [class^="prefix-"],
.post-action-wrapper [class^="prefix-"] {
padding: 2px;
font-size: 11px;
font-weight: bold;
border-radius: 3px;
position: relative;
bottom: 2px;
text-transform: uppercase;
white-space: nowrap;
}
.post-action-wrapper [class^="prefix-"] {
padding: 1px 2px;
bottom: 1px;
}
.search-module-prefix [class^="prefix-"] {
bottom: 1px;
}
.b-post__title [class^="prefix-"] {
padding: 1px 2px;
}

/* Separate styles for each prefix type */
.js-topic-prefix .prefix-10,
.search-module-prefix .prefix-10,
.b-post__title .prefix-10,
.post-action-wrapper .prefix-10 {
color: #FFFFFF;
border: 1px solid #336699;
background-color: rgba(0, 128, 0, 0.8);
}
.js-topic-prefix .prefix-Windows10,
.search-module-prefix .prefix-Windows10,
.b-post__title .prefix-Windows10,
.post-action-wrapper .prefix-Windows10 {
color: #FFFFFF;
border: 1px solid #336699;
background-color: rgba(237, 20, 61, 0.85);
}
/* Topic Prefix custom style - END */

clear system cache work now thanks

[Kavala]

Add this HTML for the Title (Rich Text) field when you add/edit a prefix in the Topic Prefix Manager in AdminCP.

1. Add this HTML for the Title (Rich Text) field when you add/edit a prefix in the Topic Prefix Manager in AdminCP.

exactly where will this html code be inserted?