This vBCloud mod adds a topic starter ribbon feature to your forum. It shows a ribbon badge on the posts of the topic starter, so you can easily identify who started the topic.
This is very useful for forums that have active and lively discussions with many participants. It helps users to follow the topic more easily and clearly. It also enhances the user experience and makes your forum more colorful and attractive.
This mod is for vBCloud only. For self-hosted vBulletin 5 Connect, the mod can be found here.
Screenshot:
Demo:
See the gold Topic Starter ribbon at the upper left corner of postbit here on this topic.
Fix for vB 6.0.4 and later:
Since the release of vB 6.0.4, this mod got broken due to the change in the pageData JS variable. You must create this template hook in order to fix this issue.
Changes in the CSS not included in the package: (Fix for vB 5.6.6 included)
Price 1:
$15 (with vbmods.rocks branding in the footer)
Price 2:
$40 ($15 base price + $25 branding-free)
This is very useful for forums that have active and lively discussions with many participants. It helps users to follow the topic more easily and clearly. It also enhances the user experience and makes your forum more colorful and attractive.
This mod is for vBCloud only. For self-hosted vBulletin 5 Connect, the mod can be found here.
Screenshot:
Demo:
See the gold Topic Starter ribbon at the upper left corner of postbit here on this topic.
Fix for vB 6.0.4 and later:
Since the release of vB 6.0.4, this mod got broken due to the change in the pageData JS variable. You must create this template hook in order to fix this issue.
- Logon to vBulletin AdminCP.
- Go to Styles → Style Manager.
- Locate your active style/theme and in the "Choose Action..." dropdown, choose "Add New Template".
- Fill out the New Template form with the following information:
Title: hook_pageData_script
Template: (Copy and paste the following JS code)
Code:<script> var pageData = window.pageData || {}; (function() { var pageDataContainer = document.getElementById('pagedata'); pageData.nodeid = pageDataContainer.dataset.nodeid; pageData.securitytoken = pageDataContainer.dataset.securitytoken; })(); </script> - Click Save button.
- Repeat Steps 2-5 for other styles/themes you are using (if any).
- Go to Products & Hooks → Manage Template Hooks.
- In the Hooks & Products System page, click the [Add New Hook] link at the bottom of the page.
- Fill out the form with the following information:
Hook is Active: Yes
Hook Location: header_after_body_begin
Title: PageData Script by vBMods.rocks
Execution Order: 10
Template Name: hook_pageData_script
Hook Arguments: (Leave empty) - Click Save button.
Changes in the CSS not included in the package: (Fix for vB 5.6.6 included)
- Add fixed font family. If you are using other vB5 themes or a third-party theme that is not using Arial as the default font, the "Topic Starter" text may not fit in the ribbon. Thanks NumNum for catching this issue.
In the ribbon CSS insert this under .vmtr-topic-starter #post:before and inside { and }.
NOTE: For vB 5.3.4 and up, replace all instances of .vmtr-topic-starter #post with .vmtr-topic-starter > .anchorCode:font-family: Arial, sans-serif;
- In some themes where links have underline on hover or by itself, the ribbon may inherit that style.
To remove the text underline from the ribbon, insert this under .vmtr-topic-starter #post and inside { and }.
NOTE: For vB 5.3.4 and up, replace all instances of .vmtr-topic-starter #post with .vmtr-topic-starter > .anchorCode:text-decoration: none;
- Add gradient and shadow to the ribbon (Optional). If you want to add gradient and shadow to add some depth to the ribbon, you can make some adjustments to the CSS.
In the same ribbon CSS mentioned in #1, replace this line:
with:Code:background-color: #fc7f00;
If you are using a different ribbon color than the default gold, use this CSS Gradient Generator to generate the gradient CSS: http://www.colorzilla.com/gradient-editor/Code:background: #fc7f00; background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 37%, #ff7c00 51%, #ff7f04 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffb76b 0%,#ffa73d 37%,#ff7c00 51%,#ff7f04 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffb76b 0%,#ffa73d 37%,#ff7c00 51%,#ff7f04 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */ box-shadow: 3px 3px 4px rgba(0,0,0,.3);
- [Update on Jan. 17, 2022] The latest vB 5.6.6 broke this mod due to the new User Card feature. To make the mod work well with this new feature together, you need to modify one small code in the Topic Starter Ribbon Script module.
- Edit a thread page in Sitebuilder.
- Edit the Topic Starter Ribbon Script module by clicking its Pencil icon.
- Find .b-userinfo__details .author a in the Module HTML textbox. You can use the browser's Find dialog (CTRL+F on Windows, Command+F on Mac) to search for that text.
- Replace it with .b-userinfo__details .author strong > a
- Click Save button.
Price 1:
$15 (with vbmods.rocks branding in the footer)
Price 2:
$40 ($15 base price + $25 branding-free)
Don't have a PayPal account yet or want to use a new account to purchase this mod? Sign up with PayPal now and get $5 reward!
Want to pay using Credit/Debit Card? Contact us and we will send you an invoice where you can use your own card.
Comment