Custom Profile Contact Icons

[cprgolds]

Can someone point me to where in the prosilver style that I would make a change to add a custom icon to the contact panel for a custom profile link in place of the stock icon?



Thanks!

[DTMWC]

The icons are in the style image folder: styles/prosilver/theme/images

Your new icon would ideally need to be 16x16 or less, upload it to the images folder mentioned above,

Then you need to make a little change to the Colours CSS style sheet: styles/prosilver/theme/colours.css

First make a back-up copy of the file,
Open colours.css and find: /* Icon images

At the bottom of the list, If your new contact field is called tester and your new icon image is called icon_tester.png you would need to add:

Code: Select all

/* tester custom profile link field icon */
.tester-icon {
	background-size: 16px 16px;
	background-image: url("./images/icon_tester.png");
}

Save the style sheet and upload it,
Then purge the cache in the ACP,

Job done

[cprgolds]

Thank you so much. That is easier than I expected. I was looking at view_topic_body.html and could't figure out how the custom items were handled.

Will try this tomorrow/

[david63]

The icons are in the style image folder

I thought that those "icons" were Font Awesome icons.

How will adding an icon in a .css file add that icon to the template and how will it pick up the backend data?

[DTMWC]

The icons are in the style image folder

I thought that those "icons" were Font Awesome icons.

How will adding an icon in a .css file add that icon to the template and how will it pick up the backend data?

All the other icons are Font Awesome, but these are image icons, (A good way to tell is that some of them have more than one colour i/e msn icon has a green man and a blue man, I don't think that's possible with the Font Awesome icons)

Here is the image of the icons:

https://www.phpbb.com/community/styles/prosilver/theme/images/icons_contact.png

So for the email icon, in the colours.css file there is:

Code: Select all

.contact-icon {
    background-image: url("./images/icons_contact.png");
}

And then for it's position:

Code: Select all

.email-icon {
    background-position: -21px 0;
}

When you add a custom profile contact field, if you use firefox inspector for it's icon, it shows as .customfieldname-icon so the class is already there but because there isn't any icon in the CSS for it the default icon loads.

[3Di]

.. for a custom profile link ..

Job done

Seems you are missing the most important thing here..

.. how will it pick up the backend data?

[david63]

I don't think that's possible with the Font Awesome icons

You can specify colours for Font Awesome icons either in the css or inline

I slightly misread the OP when he said

a custom profile link

which I took to mean a totally new link - not a CPF which is totally different!

[david63]

Seems you are missing the most important thing here..

Not if it is CPF - it will pick it up

[3Di]

Seems you are missing the most important thing here..

Not if it is CPF - it will pick it up

That's good to know, thx!

[Brf]

Those are not individual images. They are all part of

Code: Select all

https://www.phpbb.com/community/styles/prosilver/theme/images/icons_contact.png

[DTMWC]

I don't think that's possible with the Font Awesome icons

You can specify colours for Font Awesome icons either in the css or inline

What I meant was I don't think a single Font Awesome icon can have 2 colours, like the msn icon if there was a similar Font Awesome icon the green and blue man would have to be the same colour.

[3Di]

I don't think a single Font Awesome icon can have 2 colours

https://codepen.io/ameyraut/pen/yfzog

Also consider you can stack/overlap FA icons..
https://fontawesome.com/how-to-use/on-t ... king-icons

[DTMWC]

I don't think a single Font Awesome icon can have 2 colours

https://codepen.io/ameyraut/pen/yfzog

Also consider you can stack/overlap FA icons..
https://fontawesome.com/how-to-use/on-t ... king-icons

Thanks for posting this, I never knew you could do that, they really are awesome

[3Di]

Yeah, I am using stacked FA icons for a rating system.

[cprgolds]

Well, my first pass at this with the initial instructions did not work. I need top do some more research on this when I get a block of time.

I also tried adding the icon to the multi-icon .png file with all the other icons.

If those icons are from FA, where do I find the callouts for them? I assumed that colours.css was controlling those icons.

Thanks all. I retract my comment on this is simpler than I thought.