No announcement yet.

Topic Prefix style that rocks!

This is a sticky topic.
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Free Topic Prefix style that rocks!

    Make your topic prefixes colorful and look great like

    Click image for larger version  Name:	image.png Views:	1 Size:	108.8 KB ID:	13924

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

    HTML Code:
    <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-"] {
        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-xxxxxx,
    .search-module-prefix .prefix-xxxxxx,
    .b-post__title .prefix-xxxxxx,
    .post-action-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 {
        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.

    Last edited by glennrocksvb; 10-25-2018, 10:25 PM.