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.
This is a free mod. Please consider donating to support me in creating free mods. Thank you and I appreciate your and support.
Enjoy!
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.
- 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.
Code:
/* 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 */
Enjoy!
Comment