css prefix

[GeneralLife]

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

.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

[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:

/* 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:

<span class="prefix prefixOrange">vBulletin</span>

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

[GeneralLife]

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

[Mark.B]

Glad it has been of some use.

[Wayne Luke]

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.

[GeneralLife]

Thanks Wayne I'm making the official switch soon

[Nintenex]

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:

/* 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:

<span class="prefix prefixOrange">vBulletin</span>

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

/* 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?

[Mark.B]

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]

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

Above your prefix CSS code is another comment line from some earlier css:

/* End over-ride postbit avatar size */

You had managed to knock the closing '/' off the end of that line...it was like this:

/* End over-ride postbit avatar size *

That was messing up just the next consecutive item of CCS which was the orange prefix code.

[Nintenex]

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

Above your prefix CSS code is another comment line from some earlier css:

/* End over-ride postbit avatar size */

You had managed to knock the closing '/' off the end of that line...it was like this:

/* 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!