Creating custom thread and resource prefix CSS

[DRE]

Thanks!

 

[Mr Lucky]

Brogan submitted a new resource:

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

I pasted the code into extra.css, then put CTA1 or CTA2 in the box for custom styling, but all I get for the prefix is text and no button (ie no background, no border) at all.

What could I be doing wrong?

 

[Paul B]

Which class names did you use in EXTRA.css and for the prefix?

If you follow the instructions in the resource it will work.

 

[Mr Lucky]

Which class names did you use in EXTRA.css and for the prefix?

If you follow the instructions in the resource it will work.

Got it thanks, at the top it mentions the class names CTA1 and CTA2, but later on it mentions prefix prefixCTA1 so it's all good now.

 

[jayramfootball]

I have defined my class and it works fine EXCEPT for some reason i still get the gradient on the prefix (even though I did not define it?)
Is it possible and how can i remove the gradient?

 

[Paul B]

Add background-image: none; to the CSS.

 

[jayramfootball]

Add background-image: none; to the CSS.

Great - worked... thanks for the fast reply.

 

[celebrir]

Is there a way to add those self-created .classes to the main selection menu?

 

[Paul B]

Not without custom development, no.

 

[celebrir]

Not without custom development, no.

So there's no template where the default prefixes are stored and I could add some?

 

[PBN Ian]

Has there been any change to this? i.e. custom prefixes or is Brogan's way still THE way?

 

[Amaury]

There are prefixes in the XenForo core, but they would still need to be styled to suit.

 

[PBN Ian]

Ok that's cool, just so i know. Thanks for replying

 

[ioneti]

I need a prefix colour like my forum #229954

I modificate extra.css :

.prefix.prefixArduino {
color: @textCtrlBackground;
background-color: #229954;
border-color: @primaryDark;
}
a.prefixLink:hover .prefix.prefixArduino {
color: white;
background-color: #229954;
border-color: @primaryDarker;
}

what i write on personal class css¿?

 

[Luis]

what i write on personal class css¿?

prefix prefixArduino

 

[ioneti]

prefix prefixArduino

I write this but i see all black

 

[Luis]

Try with:

.prefix.prefixArduino {
color: @textCtrlBackground;
background: #229954;
border-color: @primaryDark;
}
a.prefixLink:hover .prefix.prefixArduino {
color: white;
background: #229954;
border-color: @primaryDarker;
}

 

[ioneti]

Try with:

.prefix.prefixArduino {
color: @textCtrlBackground;
background: #229954;
border-color: @primaryDark;
}
a.prefixLink:hover .prefix.prefixArduino {
color: white;
background: #229954;
border-color: @primaryDarker;
}

Look, don't work, see white

 

[Dixie McCall]

With 2.0 ...What am I doing wrong with this? I'm just getting text.

.prefix.prefixfemale {
color: white;
background-color: #ffd0d7;
border-color: #ff8396;
}
a.prefixLink:hover .prefix.prefixfemale {
color: white;
background-color: #ffd0d7;
border-color: #ff8396;
}

.prefix.prefixfemale {
color: white;
background-color: #ffd0d7;
border-color: #ff8396;
}
a.prefixLink:hover .prefix.prefixfemale {
color: white;
background-color: #ffd0d7;
border-color: #ff8396;
}

prefix prefixfemale

 

[KawaiiHannah]

When typing no your prefix into the custom case how are you typing it ate you typing prefixfeamale