Custom member rank pips

[Cedric V]

I have an image to replace the standard dot seen in forum member ranks. How do I change the dotted pip to my image?

[opentype]

You can’t replace the dot since it’s not an image, but you can set a custom image per rank in the ACP. 

[Jennifer M]

Opentype is correct that you can’t directly replace the pip but you can I believe use CSS to replace it with your custom image.

Im not at my PC at the moment to get you exact CSS but I’m pretty sure you can do it. If someone else doesn’t post the CSS answer first I’ll post it for you later today (as long as I’m correct)

[Cedric V]

Yeah, figured it would need css as it's a class. But I don't know which template to edit. If anyone could give the template name, that'd be awesome.

[opentype]

Don’t go that route. Just create the necessary images to represent “one dot”, “two dots”, “three dots” and so on and upload them in the ACP. You do not need to mess with the code. 

[Cedric V]

14 minutes ago, opentype said:

Don’t go that route. Just create the necessary images to represent “one dot”, “two dots”, “three dots” and so on and upload them in the ACP. You do not need to mess with the code. 

Why not? I have a completely custom theme for my forum and already customized the default avatar class. Now all I need to customize is the pips, so would rather change the css then go make 15 images of different pips.

[Cedric V]

Nevermind, I've made images with more pips. Thanks anyway.

[Marius]

But ... we can't use FontAwesome instead pips? Can we change it in custom.css the span class="ipsPip"? How should be the change code in custom.css?

[opentype]

14 minutes ago, Marius said:

But ... we can't use FontAwesome instead pips? 

It is using FontAwesome already. A simple override of the symbol (and not with an image) would be:

.ipsPip::before {
    content: '\f113';
}

 

[Marius]

Thank you @opentype!

 

[Jennifer M]

50 minutes ago, opentype said:

It is using FontAwesome already. A simple override of the symbol (and not with an image) would be:

.ipsPip::before {
    content: '\f113';
}

 

It's the same CSS to replace it with an image instead. The only difference is you change it this:

.ipsPip::before {
    content: url(URLTOIMAGE);
}

Just make sure the image is the right size.