Announcement

Collapse
No announcement yet.

Topic Prefix style that rocks!

Collapse
This is a sticky topic.
X
X
Collapse
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 vbmods.rocks.

    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.
    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-"] {
        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.

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

    #2
    Fantastic

    Comment


      #3
      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.

      Comment


        #4
        what should I put to xxxxx and yyyyyy ?

        Comment


          #5
          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.

          Comment


            #6
            Originally posted by glennrocksvb View Post
            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?

            Comment


              #7
              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.

              Comment


                #8
                Originally posted by glennrocksvb View Post
                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

                Comment


                  #9
                  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.

                  Comment


                    #10
                    I will Try again.

                    It should apear like on your forum

                    Comment


                      #11
                      All done. Thanks

                      Comment


                        #12
                        Glad you figured it out.

                        Comment


                          #13
                          Work not

                          Click image for larger version

Name:	afbeelding.png
Views:	3
Size:	10.4 KB
ID:	17006


                          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-"] {
                              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 */
                          Attached Files

                          Comment


                            #14
                            Originally posted by iask View Post
                            Work not

                            Click image for larger version

Name:	afbeelding.png
Views:	3
Size:	10.4 KB
ID:	17006


                            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-"] {
                            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

                            Comment

                            Working...
                            X