• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Creating custom thread and resource prefix CSS

Creating custom thread and resource prefix CSS

Brogan

XenForo moderator
Staff member
#1
Brogan submitted a new resource:

Creating custom thread prefix CSS (version 1.0) - Oooh, look at the pretty colours.

I'm sure lots of people will want to create their own thread and resource prefix CSS, so this guide will help you do that.

The following code should be added to EXTRA.css

In the example below we're going to create two classes; CTA1 and CTA2.
Of course you can choose whichever class names you like.

Code:
.prefix.prefixCTA1 {
color: @textCtrlBackground;
background-color: @primaryDarker;
border-color: @primaryDark;
}
    a.prefixLink:hover...
Read more about this resource...
 

ArnyVee

Well-known member
#2
Thanks for this Brogan :)

I haven't had a chance to install 1.1 on my test sites, but this was going to be one of my questions once I did. ;)
 

HydraulicJack

Well-known member
#3
I'm sure lots of people will want to create their own thread prefix CSS, so this thread will help you do that.
Definitely... Thanks very much for this!

In the file structure (or is it via the ACP?), what is the path to Extra.css, please. This will be my first time editing it.
Thanks!
 

Andy.N

Well-known member
#8
I'm sure lots of people will want to create their own thread prefix CSS, so this thread will help you do that.

The following code should be added to EXTRA.css
Paul,
How do we add the miniMe avatar in front of the prefix text so it will show [pic] Prefix
 

yavuz

Well-known member
#10
Paul how do we add images to prefixes? for example like this:



I tried ading this:

Code:
background: url("styles/xenforo/icons/image.png") no-repeat left scroll #769DCE;
padding: 0 4px 0 17px;
 

Shelley

Well-known member
#11
Paul how do we add images to prefixes? for example like this:



I tried ading this:

Code:
background: url("styles/xenforo/icons/image.png") no-repeat left scroll #769DCE;
padding: 0 4px 0 17px;
That looks like a screenshot from my site one of the prefixes I created. I slapped this into the Extra.css template although bare in mind my prefix class will differ from yours or anyone else's depending on how it's named. The following is what I put into the extra.css

Code:
.xenforo{
background: url("@imagePath/xenforo/icons/xenforo-prefix.png") no-repeat left scroll #769dce;
padding: 0 4px 0 17px; 
border: 1px solid #5d7da5!important;
border-radius: 3px !important;
display: inline-block;
color: white;
box-shadow: 0 0 1px #c6d7eb inset;
line-height: 18px;
font-size: 12px;
text-shadow: 0 0 1px #557298;
vertical-align: middle;

}
.xenforo:hover {
opacity: 0.35;
}
 

yavuz

Well-known member
#12
Thanks Shelley, I looked up your prefixes, tried the css I got from chrome but couldn't get it right. With Paul's tutorial in mind should it be something like this?

Code:
.prefix.prefixCustom {
background: url("@imagePath/xenforo/icons/xenforo-prefix.png") no-repeat left scroll #769dce;
padding: 0 4px 0 17px;
border: 1px solid #5d7da5!important;
border-radius: 3px !important;
display: inline-block;
color: white;
box-shadow: 0 0 1px #c6d7eb inset;
line-height: 18px;
font-size: 12px;
text-shadow: 0 0 1px #557298;
vertical-align: middle;
 
}
 a.prefixLink:hover .prefix.prefixCustom {
opacity: 0.35;
}
 

yavuz

Well-known member
#15
Not sure what you mean. If you mean it fades when you hover over the prefix then you'll have to remove the following:

Code:
a.prefixLink:hover .prefix.prefix[B][COLOR=#ff0000]Custom[/COLOR][/B] {
opacity: 0.35;
}
Bad choise of words, when I go over the prefix it resizes rather than fade away like yours. I tried removing that already didn't help.
 

yavuz

Well-known member
#19
That should now be fixed for you.
Thank you for your help Shelley, very much appreciated. (y)

For those wonder how to add an image to the prefix like I wanted:

Code:
.prefix.prefixCustom {
background: url("styles/default/xenforo/icons/xenforo-prefix.png") no-repeat scroll left center #769DCE;
    border: 1px solid #5D7DA5 !important;
    border-radius: 3px 3px 3px 3px !important;
    box-shadow: 0 0 1px #C6D7EB inset;
    color: white;
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    padding: 0 4px 0 17px;
    text-shadow: 0 0 0 transparent, 0 0 1px #557298;
    vertical-align: middle;
}
.prefix.prefixCustom:hover {
opacity: 0.35;
background: url("styles/default/xenforo/icons/xenforo-prefix.png") no-repeat scroll left center #769DCE !important;
    border: 1px solid #5D7DA5 !important;
    border-radius: 3px 3px 3px 3px !important;
    box-shadow: 0 0 1px #C6D7EB inset;
    color: white !important;
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    padding: 0 4px 0 17px !important;
    text-shadow: 0 0 0 transparent, 0 0 1px #557298;
    vertical-align: middle;
}
 

AzzidReign

Well-known member
#20
That should now be fixed for you.
Thank you for your help Shelley, very much appreciated. (y)

For those wonder how to add an image to the prefix like I wanted:

Code:
.prefix.prefixCustom {
background: url("styles/default/xenforo/icons/xenforo-prefix.png") no-repeat scroll left center #769DCE;
    border: 1px solid #5D7DA5 !important;
    border-radius: 3px 3px 3px 3px !important;
    box-shadow: 0 0 1px #C6D7EB inset;
    color: white;
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    padding: 0 4px 0 17px;
    text-shadow: 0 0 0 transparent, 0 0 1px #557298;
    vertical-align: middle;
}
.prefix.prefixCustom:hover {
opacity: 0.35;
background: url("styles/default/xenforo/icons/xenforo-prefix.png") no-repeat scroll left center #769DCE !important;
    border: 1px solid #5D7DA5 !important;
    border-radius: 3px 3px 3px 3px !important;
    box-shadow: 0 0 1px #C6D7EB inset;
    color: white !important;
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    padding: 0 4px 0 17px !important;
    text-shadow: 0 0 0 transparent, 0 0 1px #557298;
    vertical-align: middle;
}
I just wanted to thank you 2 for offering up the code you guys used. Thanks a bunch! It got me started and was able to make my own...which I feel are 100x better than the default ones xf has. I'll probably release the code I have later since I used CSS gradients instead of solid colors but a big thanks to you 2 for making this process much easier as I don't think I could have done it to the quality we have now without you!