Announcement

Collapse
No announcement yet.

css prefix

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

  • Nintenex
    replied
    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!

    Leave a comment:


  • Mark.B
    replied
    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.

    Leave a comment:


  • Mark.B
    replied
    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.

    Leave a comment:


  • Nintenex
    replied
    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?

    Leave a comment:


  • GeneralLife
    commented on 's reply
    Thanks Wayne I'm making the official switch soon

  • Wayne Luke
    replied
    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.

    Leave a comment:


  • Mark.B
    replied
    Glad it has been of some use.

    Leave a comment:


  • GeneralLife
    replied
    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

    Leave a comment:


  • Mark.B
    replied
    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.

    Leave a comment:


  • GeneralLife
    started a topic css prefix

    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
widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
Working...
X