Creating custom thread and resource prefix CSS

[Paul B]

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.

.prefix.prefixCTA1 {
color: @textCtrlBackground;
background-color: @primaryDarker;
border-color: @primaryDark;
}
    a.prefixLink:hover...

Read more about this resource...

 

[ArnyVee]

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]

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!

 

[Paul B]

It's a template.

 

[HydraulicJack]

It's a template.

Thanks! I hope you're sitting down so the shock won't entirely stun you, but I didn't have to ask you for the breadcrumbs! I'm >finally< starting to get the hang of locating some of this stuff.

 

[Paul B]

With the introduction of ACP search in 1.1, it's a lot easier to find things.

For example:

 

[HydraulicJack]

Sweet! Thanks for the spiff!
Cheers,
HJ

 

[Andy.N]

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

 

[Kainzo]

Lovely - thanks

 

[yavuz]

Paul how do we add images to prefixes? for example like this:

I tried ading this:

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

 

[Shelley]

Paul how do we add images to prefixes? for example like this:

I tried ading this:

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

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

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?

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

It works with the code above but the image fades away:

 

[Shelley]

It works with the code above but the image fades away:

View attachment 22650

Not sure what you mean. If you mean it fades when you hover over the prefix then you'll have to remove the following specifically the opacity property

a.prefixLink:hover .prefix.prefix[B][COLOR=#ff0000]Custom[/COLOR][/B] {
opacity: 0.35;
}

 

[yavuz]

Not sure what you mean. If you mean it fades when you hover over the prefix then you'll have to remove the following:

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.

 

[Shelley]

can you link me to your forum with the prefix showing?

 

[yavuz]

can you link me to your forum with the prefix showing?

Send yo a PC with the link.

 

[Shelley]

That should now be fixed for you.

 

[yavuz]

That should now be fixed for you.

Thank you for your help Shelley, very much appreciated.

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

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

That should now be fixed for you.

Thank you for your help Shelley, very much appreciated.

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

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