css prefix

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • GeneralLife
    Member
    • Dec 2017
    • 43
    • 5.3.x

    css prefix

    Currently with xenforo I have this code within my exta.less file to call via a setting to make my prefixes look like


    This is the code
    HTML Code:
    .prefixphotos {
        background: none repeat scroll 0 0 #008000;
        color: #FAFAFA !important;
        font-weight: normal;
        border: double !important;
        font-size: 10pt;
    }
    .prefixphotos:before {
        content: "\f03e";
        font-family: FontAwesome;
        margin-right: 4px;
    }
    .prefixphotos {
       border-radius: 4px !important;
       padding: 0px 5px;
    }
    and I call it using


    How can I replicate this in vbulletin
    Running vBulletin 5 on Google Cloud Platform
  • Mark.B
    vBulletin Support
    • Feb 2004
    • 24286
    • 6.0.X

    #2
    I have prefixes working in similar fashion on my cloud demo:
    https://www.adminammo.com/forum/gene...are-discussion

    This is the css code I used:

    Code:
    /* Prefixes */
    .prefix.prefixOrange {
        background-color: orange;
        border-color: #ffc520;
        color: black;
    }
    .prefix.prefixSkyBlue {
        background-color: skyblue;
        border-color: skyblue;
        color: black;
    }
    .prefix.prefixLightGreen {
        background-color: lightgreen;
        border-color: lightgreen;
        color: black;
    }
    .prefix.prefixYellow {
        background-color: yellow;
        border-color: #e0e000;
        color: black;
    }
    .prefix.prefixLightSalmon {
        background-color: #F9966B;
        border-color: #E18B6B;
        color: black;
    }
    .prefix.prefixMaroon {
        background-color: #C48189;
        border-color: #C48793;
        color: black;
    }
    .prefix.prefixTeal {
        background-color: #3EA99F;
        border-color: #3B9C9C;
        color: black;
    }
    .prefix.prefixCherryRed {
        background-color: #C11B17;
        border-color: #9F000F;
        color: black;
    }
    .prefix {
          background: transparent url('core/css/0/0/0/0/9/4/images/white-gradient.png') repeat-x scroll center top;
        border: 1px solid transparent;
        border-radius: 4px;
        display: inline-block;
        padding: 0 6px;
          font-weight: normal;
          font-size: 14px;
    }
    /* End Prefixes */
    What I then do, is add the prefixes and reference the appropriate class in the "Title (Rich Text)" field:
    For example:
    Code:
    <span class="prefix prefixOrange">vBulletin</span>
    Code:
    <span class="prefix prefixSkyBlue">XenForo</span>
    etc

    Those don't look exactly like yours, but hopefully the code above will give you an insight into how to achieve what you need.
    MARK.B
    vBulletin Support
    ------------
    My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
    My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

    Comment

    • GeneralLife
      Member
      • Dec 2017
      • 43
      • 5.3.x

      #3
      Thanks that's almost what I want I'll play around with the coding a bit but that's almost exactly what I wanted and I was actually gonna message you because I noticed your prefixes
      Running vBulletin 5 on Google Cloud Platform

      Comment

      • Mark.B
        vBulletin Support
        • Feb 2004
        • 24286
        • 6.0.X

        #4
        Glad it has been of some use.
        MARK.B
        vBulletin Support
        ------------
        My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
        My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

        Comment

        • Wayne Luke
          vBulletin Technical Support Lead
          • Aug 2000
          • 73927

          #5
          You can still use the "content::before" technique to add Font Awesome glyphs. The syntax would be the same as you used in Xenforo. Just apply it to the classes you have set up in vBulletin.
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud demonstration site.
          vBulletin 5 API

          Comment


          • GeneralLife
            GeneralLife commented
            Editing a comment
            Thanks Wayne I'm making the official switch soon
        • Nintenex
          Senior Member
          • Oct 2016
          • 179
          • 5.2.x

          #6
          Originally posted by Mark.B
          I have prefixes working in similar fashion on my cloud demo:
          https://www.adminammo.com/forum/gene...are-discussion

          This is the css code I used:

          Code:
          /* Prefixes */
          .prefix.prefixOrange {
          background-color: orange;
          border-color: #ffc520;
          color: black;
          }
          .prefix.prefixSkyBlue {
          background-color: skyblue;
          border-color: skyblue;
          color: black;
          }
          .prefix.prefixLightGreen {
          background-color: lightgreen;
          border-color: lightgreen;
          color: black;
          }
          .prefix.prefixYellow {
          background-color: yellow;
          border-color: #e0e000;
          color: black;
          }
          .prefix.prefixLightSalmon {
          background-color: #F9966B;
          border-color: #E18B6B;
          color: black;
          }
          .prefix.prefixMaroon {
          background-color: #C48189;
          border-color: #C48793;
          color: black;
          }
          .prefix.prefixTeal {
          background-color: #3EA99F;
          border-color: #3B9C9C;
          color: black;
          }
          .prefix.prefixCherryRed {
          background-color: #C11B17;
          border-color: #9F000F;
          color: black;
          }
          .prefix {
          background: transparent url('core/css/0/0/0/0/9/4/images/white-gradient.png') repeat-x scroll center top;
          border: 1px solid transparent;
          border-radius: 4px;
          display: inline-block;
          padding: 0 6px;
          font-weight: normal;
          font-size: 14px;
          }
          /* End Prefixes */
          What I then do, is add the prefixes and reference the appropriate class in the "Title (Rich Text)" field:
          For example:
          Code:
          <span class="prefix prefixOrange">vBulletin</span>
          Code:
          <span class="prefix prefixSkyBlue">XenForo</span>
          etc

          Those don't look exactly like yours, but hopefully the code above will give you an insight into how to achieve what you need.
          Hi Mark, I used this code and it works fine but i cant get orange to work.

          this is what i have i changed some of the colors.

          Code:
          /* Prefixes */
          .prefix.prefixOrange {
              background-color: orange;
              border-color: #ffc520;
              color: black;
          }
          .prefix.prefixPurple {
              background-color: purple;
              border-color: purple;
              color: black;
          }
          .prefix.prefixPink {
              background-color: pink;
              border-color: pink;
              color: black;
          }
          .prefix.prefixBlue {
              background-color: blue;
              border-color: blue;
              color: black;
          }
          .prefix.prefixRed {
              background-color: Red;
              border-color: Red;
              color: black;
          }
          .prefix.prefixGreen {
              background-color: green;
              border-color: green;
              color: black;
          }
          .prefix {
                background: transparent url('core/css/0/0/0/0/9/4/images/white-gradient.png') repeat-x scroll center top;
              border: 1px solid transparent;
              border-radius: 4px;
              display: inline-block;
              padding: 0 6px;
                font-weight: normal;
                font-size: 14px;
          }
          /* End Prefixes */
          all the other colors work fine but not orange and its a pretty important color so i cant just change it.

          any idea what could be wrong?

          Comment

          • Mark.B
            vBulletin Support
            • Feb 2004
            • 24286
            • 6.0.X

            #7
            Originally posted by Nintenex

            Hi Mark, I used this code and it works fine but i cant get orange to work.

            this is what i have i changed some of the colors.



            all the other colors work fine but not orange and its a pretty important color so i cant just change it.

            any idea what could be wrong?
            Would need to see the site, and example of the prefix that doesn't show, and also get an explanation of what "doesn't work" actually means.

            It's standard css and it works on every site I've used it on so something hasn't been done correctly somewhere.
            MARK.B
            vBulletin Support
            ------------
            My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
            My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

            Comment

            • Mark.B
              vBulletin Support
              • Feb 2004
              • 24286
              • 6.0.X

              #8
              Scratch that....logged in and fixed it.

              Above your prefix CSS code is another comment line from some earlier css:
              Code:
              /* End over-ride postbit avatar size */
              You had managed to knock the closing '/' off the end of that line...it was like this:
              Code:
              /* End over-ride postbit avatar size *
              That was messing up just the next consecutive item of CCS which was the orange prefix code.
              MARK.B
              vBulletin Support
              ------------
              My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
              My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

              Comment

              • Nintenex
                Senior Member
                • Oct 2016
                • 179
                • 5.2.x

                #9
                Originally posted by Mark.B
                Scratch that....logged in and fixed it.

                Above your prefix CSS code is another comment line from some earlier css:
                Code:
                /* End over-ride postbit avatar size */
                You had managed to knock the closing '/' off the end of that line...it was like this:
                Code:
                /* End over-ride postbit avatar size *
                That was messing up just the next consecutive item of CCS which was the orange prefix code.
                Ahh, that makes sense, I didn't see that! Thanks Mark!

                Comment

                • TBB1990
                  New Member
                  • Feb 2024
                  • 23

                  #10
                  Originally posted by Mark.B
                  I have prefixes working in similar fashion on my cloud demo:
                  https://www.adminammo.com/forum/gene...are-discussion

                  This is the css code I used:

                  Code:
                  /* Prefixes */
                  .prefix.prefixOrange {
                  background-color: orange;
                  border-color: #ffc520;
                  color: black;
                  }
                  .prefix.prefixSkyBlue {
                  background-color: skyblue;
                  border-color: skyblue;
                  color: black;
                  }
                  .prefix.prefixLightGreen {
                  background-color: lightgreen;
                  border-color: lightgreen;
                  color: black;
                  }
                  .prefix.prefixYellow {
                  background-color: yellow;
                  border-color: #e0e000;
                  color: black;
                  }
                  .prefix.prefixLightSalmon {
                  background-color: #F9966B;
                  border-color: #E18B6B;
                  color: black;
                  }
                  .prefix.prefixMaroon {
                  background-color: #C48189;
                  border-color: #C48793;
                  color: black;
                  }
                  .prefix.prefixTeal {
                  background-color: #3EA99F;
                  border-color: #3B9C9C;
                  color: black;
                  }
                  .prefix.prefixCherryRed {
                  background-color: #C11B17;
                  border-color: #9F000F;
                  color: black;
                  }
                  .prefix {
                  background: transparent url('core/css/0/0/0/0/9/4/images/white-gradient.png') repeat-x scroll center top;
                  border: 1px solid transparent;
                  border-radius: 4px;
                  display: inline-block;
                  padding: 0 6px;
                  font-weight: normal;
                  font-size: 14px;
                  }
                  /* End Prefixes */
                  What I then do, is add the prefixes and reference the appropriate class in the "Title (Rich Text)" field:
                  For example:
                  Code:
                  <span class="prefix prefixOrange">vBulletin</span>
                  Code:
                  <span class="prefix prefixSkyBlue">XenForo</span>
                  etc

                  Those don't look exactly like yours, but hopefully the code above will give you an insight into how to achieve what you need.
                  Thnx man realy goog view.
                  Last edited by TBB1990; Sun 18 Feb '24, 1:21am.

                  Comment

                  widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                  Working...