Announcement

Collapse
No announcement yet.

Topic Starter Ribbon for vBCloud

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Paid Mod Topic Starter Ribbon for vBCloud

    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:

    Click image for larger version  Name:	topic-starter-ribbon3.png Views:	1 Size:	58.5 KB ID:	6028

    Demo:
    See the gold Topic Starter ribbon at the upper left corner of postbit here on this topic.

    Changes in the CSS not included in the package: (Fix for vB 5.6.6 included)
    1. 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 }.

      Code:
      	font-family: Arial, sans-serif;
      NOTE: For vB 5.3.4 and up, replace all instances of .vmtr-topic-starter #post with .vmtr-topic-starter > .anchor
    2. 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 }.

      Code:
      	text-decoration: none;
      NOTE: For vB 5.3.4 and up, replace all instances of .vmtr-topic-starter #post with .vmtr-topic-starter > .anchor
    3. 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:

      Code:
      	background-color: #fc7f00;
      with:

      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);
      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/
    4. [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)

    Buy Now Add to Cart View Cart

    Price 2:

    $40
    ($15 base price + $25 branding-free)
    Buy Now Add to Cart View Cart

    Need help or not comfortable installing this mod? Purchase the installation service below:

    Product Installation Add-On: $20
    Purchase this product add-on to get professional installation of this mod from us.

    Add to Cart View Cart


    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.

    Last edited by glennrocksvb; 05-01-2023, 10:43 AM.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    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 ribbon CSS, replace this line:

    Code:
    background-color: #fc7f00;
    with:

    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);
    If you are using a different ribbon color than the default gold, use this CSS Gradient Generator to generate the gradient CSS.


    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      See postbit here for demo of the new ribbon style.

    #3
    Updated suggested CSS changes in first post. Added change #2. Please see description for more details.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #4
      I found a breaking change in the upcoming vB 5.3.4 version that breaks the CSS for this Topic Starter Ribbon mod.

      To fix this issue, change all instances of the code below in the custom CSS added for this mod:

      Code:
      .vmtr-topic-starter #post

      with:

      Code:
      .vmtr-topic-starter > .anchor
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #5
        Re-opened all orders to send the updated mod with the new ribbon style. It also includes the 5.3.4 fix. No need to re-install the mod. Only the CSS code was updated. Follow the instructions in "I: Add Topic Starter Ribbon CSS" section.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #6
          Glenn
          What issues does the new 5.3.4 update cause? Mine seems ok, i have yet to add the fix

          Never mind it seems i already purchased it after the update you posted...

          Comment


            #7
            Bought, thanks Glenn. Had been looking at this one for a while and just pulled the trigger

            Comment


            • glennrocksvb
              glennrocksvb commented
              Editing a comment
              I didn't see your purchase coming in for this mod. Did you encounter any issues? Let me know.

            #8
            Not at all. Easy to understand instructions. I’m gonna toy with the visuals a bit but I like this one a lot

            Comment


              #9
              Installed topic starter ribbon today on my cloud site.

              Works great, instructions easy to follow.

              Thank you Glenn!

              Comment


              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                Thanks for the purchase! Buyer badge added to your postbit

              #10
              Mod is no longer working with 5.6.6.. This is the cloud version.

              Comment


                #11
                Originally posted by Mitch View Post
                Mod is no longer working with 5.6.6.. This is the cloud version.
                Mitch, first post updated with suggested fix (#4). Please let me know if it works or not.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #12
                  Originally posted by glennrocksvb View Post

                  Mitch, first post updated with suggested fix (#4). Please let me know if it works or not.
                  glennrocksvb Yes Glenn, that worked perfectly

                  Comment


                  • glennrocksvb
                    glennrocksvb commented
                    Editing a comment
                    Thanks for confirmation

                  • BTMike
                    BTMike commented
                    Editing a comment
                    Worked great for me, thanks Glenn!

                Users Viewing This Page

                Collapse

                There is 1 user viewing this forum topic.

                • Guest Guest

                Latest Posts

                Collapse

                Working...
                X
                Searching...Please wait.
                An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                Please push the back button and reload the previous window.'
                An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                Please push the back button and reload the previous window.'
                An internal error has occurred and the module cannot be displayed.
                There are no results that meet this criteria.
                Search Result for "|||"