Announcement

Collapse
No announcement yet.

css prefix

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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

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

    TalkNewsUK - My vBulletin 5.4.4 Demo
    AdminAmmo - My Cloud Demo

    Comment


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

      Comment


      • #4
        Glad it has been of some use.
        MARK.B | vBULLETIN SUPPORT

        TalkNewsUK - My vBulletin 5.4.4 Demo
        AdminAmmo - My Cloud Demo

        Comment


        • #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 customization and demonstration site.
          vBulletin 5 Documentation - Updated every Friday. Report issues here.
          vBulletin 5 API - Full / Mobile
          I am not currently available for vB Messenger Chats.

          Comment


          • GeneralLife
            GeneralLife commented
            Editing a comment
            Thanks Wayne I'm making the official switch soon

        • #6
          Originally posted by Mark.B View Post
          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?
          My health forum Resurgelife.com

          Comment


          • #7
            Originally posted by Nintenex View Post

            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

            TalkNewsUK - My vBulletin 5.4.4 Demo
            AdminAmmo - My Cloud Demo

            Comment


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

              TalkNewsUK - My vBulletin 5.4.4 Demo
              AdminAmmo - My Cloud Demo

              Comment


              • #9
                Originally posted by Mark.B View Post
                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!
                My health forum Resurgelife.com

                Comment

                Related Topics

                Collapse

                Working...
                X