Announcement

Collapse
No announcement yet.

Topic Prefix style that rocks!

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

    #31
    Not sure how to phrase the question, so a picture instead.

    Click image for larger version

Name:	Screen Shot 2022-02-23 at 10.32.17 AM.png
Views:	248
Size:	325.4 KB
ID:	23979

    Basically, can CSS change the look of selective content in a Notice so that the selective content appears the same as the identified Prefix?
    The Linux Community has given me much. I do what I can to return the favor!

    Comment


      #32
      You can use the same HTML (as mentioned in Step 1 in the first post) you use for the prefix to the Notices but with a slight change.

      HTML Code:
      <span class="js-topic-prefix"><!-- Insert your Prefix HTML here --></span>
      Snowhog, in your case it would be like this:
      HTML Code:
      <span class="js-topic-prefix"><span class="prefix-next_release_discuss" title="Next Release Discussion">NRD</span></span>
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #33
        Something isn't right when I apply this 'in total'.

        This is what I replaced the existing Notice with:
        Code:
        The following Topic Prefixes are designated for use in Community Cafe:
        <br>
        <span class="js-topic-prefix"><span class="prefix-distribution_showdown" title="Distribution Showdown">DS</span></span> (Distribution Showdown)
        <span class="js-topic-prefix"><span class="prefix-geek_news" title="Geek News">GN</span></span> (Geek News)
        <span class="js-topic-prefix"><span class="prefix-kubuntu_or_linux_discuss" title="Kubuntu or Linux Discussion">KLD</span></span> (Kubuntu or Linux Discussion)
        <span class="js-topic-prefix"><span class="prefix-the_water_cooler" title="The Water Cooler">TWC</span></span> (The Water Cooler)
        <span class="js-topic-prefix"><span class="prefix-kubuntu_user_testimony" title="Kubuntu User Testimony">KUT</span></span> (Kubuntu User Testimony)
        <span class="js-topic-prefix"><span class="prefix-next_release_discuss" title="Next Release Discussion">NRD</span></span> (Next Release Discussion)
        <br>
        While use is not required, doing so allows for efficient Filtering.
        And this is how the Notice displays:
        Click image for larger version

Name:	Screen Shot 2022-02-23 at 1.09.59 PM.png
Views:	164
Size:	104.0 KB
ID:	23986

        With just a single modified line; the one for NRD; this is how the Notice displays:

        Click image for larger version

Name:	Screen Shot 2022-02-23 at 1.10.41 PM.png
Views:	202
Size:	104.0 KB
ID:	23987

        What is incorrect with the code above?
        The Linux Community has given me much. I do what I can to return the favor!

        Comment


          #34
          Doh!!! :slap_myself:

          Never mind! I know exactly why it is displaying this way. I've only included those three in the code in css_additional.css. Haven't added the other three yet.

          Geez. What a doofus I am!
          The Linux Community has given me much. I do what I can to return the favor!

          Comment


          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            Glad you figured it out yourself.

          #35
          Fixed. The result:

          Click image for larger version

Name:	Screen Shot 2022-02-23 at 1.51.21 PM.png
Views:	198
Size:	105.1 KB
ID:	23990

          The Linux Community has given me much. I do what I can to return the favor!

          Comment


            #36
            Click image for larger version

Name:	Screen Shot 2022-02-23 at 1.53.12 PM.png
Views:	175
Size:	127.1 KB
ID:	23992

            The Linux Community has given me much. I do what I can to return the favor!

            Comment


              #37
              I've already adjusted the size of the colored background. Changed to padding: 0px; in
              Code:
              .post-action-wrapper [class^="prefix-"] {
              padding: 0px;
              font-size: 11px;
              font-weight: bold;
              border-radius: 3px;
              position: relative;
              bottom: 2px;
              text-transform: uppercase;
              white-space: nowrap;
              }
              What controls the position? The Prefix's horizontal 'center' is slightly above the horizontal 'center line' of the other text, i.e., the bottoms of the text in the Prefix's is higher than the non-prefix text. I'd like to 'lower' the Prefix's so they are the same. It's a visual thing, and I'm a visual person.
              The Linux Community has given me much. I do what I can to return the favor!

              Comment


              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                Adjust the bottom property. It can also be a negative value.

              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                Right-click and Inspect the element then adjust the bottom property value there so you know the final value to use before updating css_additional template.

              #38
              Excellent. Setting it to 0px gives me the horizontal centering I want. Thank you.
              The Linux Community has given me much. I do what I can to return the favor!

              Comment


                #39
                Updated the CSS code in the first post to support prefixes in the Last Post column on Forum directory on homepage. I specifically added the lines/section containing ".lastpost-title-wrapper"
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                • asd937
                  asd937 commented
                  Editing a comment
                  I tried adding the code but still not appearing in last post column though

                #40
                Can you post or pm a link to your forum?
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                #41
                I don't see the latest code in your css_additional.css. As I mentioned, the latest code has ".lastpost-title-wrapper" but I don't see it in yours. Please check the latest code in the first post again.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                • asd937
                  asd937 commented
                  Editing a comment
                  whole code added but still not working

                #42
                Originally posted by glennrocksvb View Post
                I don't see the latest code in your css_additional.css. As I mentioned, the latest code has ".lastpost-title-wrapper" but I don't see it in yours. Please check the latest code in the first post again.
                any update for this issue?

                whole code added but still not working​

                Comment


                  #43
                  You did not follow the instructions correctly. I see prefix-xxxxxx and prefix-yyyyyy in your css_additional.css.

                  In Step 1, it says "Change xxxxxx to your preferred prefix class (no spaces)".
                  In Step 2, it says "Change xxxxxx and yyyyyy to the corresponding prefix class you used in Step 1."
                  Please read the instructions carefully.

                  I also noticed that you use spaces in your prefix class in the HTML. For example:

                  HTML Code:
                  <span class="prefix-a clinical pearl" ...>...</span>
                  As I said in Step 1, the prefix class should have no spaces. You can use hyphens or underscores instead of spaces.
                  Helpful? Donate. Thanks!
                  Buy me a coffeePayPal QR Code
                  Fast VPS Host for vBulletin:
                  A2 Hosting & IONOS

                  Comment


                  • asd937
                    asd937 commented
                    Editing a comment
                    working great!
                    thank you for clarification

                  • glennrocksvb
                    glennrocksvb commented
                    Editing a comment
                    Glad to help!

                  • glennrocksvb
                    glennrocksvb commented
                    Editing a comment
                    asd937, I noticed that you also removed the spaces in the Prefix Title. You can have spaces in the title as this is displayed on the page. Only the Prefix ID should have no spaces and the CSS class. For example, you can have a_clinical_pearl as Prefix ID and class="prefix-a_clinical_pearl" without spaces, but for the Title you can set it to "A Clinical Pearl" as shown in the below Rich text Title :

                    HTML Code:
                    <span class="prefix-a_clinical_pearl" title="A Clinical Pearl">A Clinical Pearl</span>
                    And the Title (Plain Text) as "A Clinical Pearl".
                    Last edited by glennrocksvb; 10-21-2023, 10:17 PM.

                  #44
                  I tried this MOD, but it only works on desktop, on mobile it doesn't work in forumhome.

                  Comment


                    #45
                    Are you using vB 5.7.5 as it says on your profile? This mod works on this site on mobile.
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment

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