Custom prefixes with images

[oman]

Is there a guide/add on in which the above can be achieved?

Thanks

 

[Jake Bunce]

When adding/editing a prefix you can specify a CSS class name:



Then you can define the class in your EXTRA.css to create any custom styling you want:

Admin CP -> Appearance -> Templates -> EXTRA.css

 

[oman]

When adding/editing a prefix you can specify a CSS class name:

View attachment 35949

Then you can define the class in your EXTRA.css to create any custom styling you want:

Admin CP -> Appearance -> Templates -> EXTRA.css

Sorry, I don't understand what a CSS class is. How can they be created within extra.css?

 

[Jake Bunce]

Example CSS using a class name of "classname":

.classname
{
	background: url('path/to/background.gif');
}

 

[oman]

Example CSS using a class name of "classname":

.classname
{
	background: url('path/to/background.gif');
}

Ah, I see. So the background.gif is the image that backs the prefix text.

What would be a suggested size?

 

[oman]

Ah, I see. So the background.gif is the image that backs the prefix text.

What would be a suggested size?

Actually, that probably depends on the prefix length.

 

[Jake Bunce]

Actually, that probably depends on the prefix length.

Exactly. You will have to play with the CSS attributes to style it like you want.

 

[oman]

Exactly. You will have to play with the CSS attributes to style it like you want.

I'll probably have a go tomorrow morning.

 

[erich37]

edit