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:	24
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
      Senior Member
      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:	28
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:	26
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


          #35
          Fixed. The result:

          Click image for larger version

Name:	Screen Shot 2022-02-23 at 1.51.21 PM.png
Views:	26
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:	27
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
                Founder/Coder
                glennrocksvb commented
                Editing a comment
                Adjust the bottom property. It can also be a negative value.

              • glennrocksvb
                glennrocksvb
                Founder/Coder
                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

              Latest Topics

              Collapse

              Working...
              X