Custom Profile Contact Icons

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
User avatar
cprgolds
Registered User
Posts: 446
Joined: Thu Oct 11, 2007 5:49 am
Location: Portland, Oregon

Custom Profile Contact Icons

Post by cprgolds » Wed Jul 11, 2018 10:14 pm

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?

Image

Thanks!

User avatar
Dan Stylez
Registered User
Posts: 152
Joined: Tue Jan 16, 2018 6:17 am
Contact:

Re: Custom Profile Contact Icons

Post by Dan Stylez » Thu Jul 12, 2018 4:02 am

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 :)

User avatar
cprgolds
Registered User
Posts: 446
Joined: Thu Oct 11, 2007 5:49 am
Location: Portland, Oregon

Re: Custom Profile Contact Icons

Post by cprgolds » Thu Jul 12, 2018 5:40 am

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/

User avatar
david63
Jr. Extension Validator
Posts: 14651
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Custom Profile Contact Icons

Post by david63 » Thu Jul 12, 2018 7:31 am

Dan Stylez wrote:
Thu Jul 12, 2018 4:02 am
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?
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
Dan Stylez
Registered User
Posts: 152
Joined: Tue Jan 16, 2018 6:17 am
Contact:

Re: Custom Profile Contact Icons

Post by Dan Stylez » Thu Jul 12, 2018 12:56 pm

david63 wrote:
Thu Jul 12, 2018 7:31 am
Dan Stylez wrote:
Thu Jul 12, 2018 4:02 am
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:
Image
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.

User avatar
3Di
Registered User
Posts: 12899
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Custom Profile Contact Icons

Post by 3Di » Thu Jul 12, 2018 1:24 pm

cprgolds wrote:
Wed Jul 11, 2018 10:14 pm
.. for a custom profile link ..
Dan Stylez wrote:
Thu Jul 12, 2018 4:02 am
Job done :)
Seems you are missing the most important thing here..
david63 wrote:
Thu Jul 12, 2018 7:31 am
.. how will it pick up the backend data?
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
Extensions, Scripts, MOD porting, Update/Upgrades
My development's activity º PhpStorm's proud user

User avatar
david63
Jr. Extension Validator
Posts: 14651
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Custom Profile Contact Icons

Post by david63 » Thu Jul 12, 2018 1:36 pm

Dan Stylez wrote:
Thu Jul 12, 2018 12:56 pm
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
cprgolds wrote:
Wed Jul 11, 2018 10:14 pm
a custom profile link
which I took to mean a totally new link - not a CPF which is totally different!
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
david63
Jr. Extension Validator
Posts: 14651
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Custom Profile Contact Icons

Post by david63 » Thu Jul 12, 2018 1:37 pm

3Di wrote:
Thu Jul 12, 2018 1:24 pm
Seems you are missing the most important thing here..
Not if it is CPF - it will pick it up
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
3Di
Registered User
Posts: 12899
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Custom Profile Contact Icons

Post by 3Di » Thu Jul 12, 2018 1:45 pm

david63 wrote:
Thu Jul 12, 2018 1:37 pm
3Di wrote:
Thu Jul 12, 2018 1:24 pm
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!
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
Extensions, Scripts, MOD porting, Update/Upgrades
My development's activity º PhpStorm's proud user

User avatar
Brf
Support Team Member
Support Team Member
Posts: 51320
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: Custom Profile Contact Icons

Post by Brf » Thu Jul 12, 2018 2:00 pm

Those are not individual images. They are all part of

Code: Select all

[img]https://www.phpbb.com/community/styles/prosilver/theme/images/icons_contact.png[/img]
Image

User avatar
Dan Stylez
Registered User
Posts: 152
Joined: Tue Jan 16, 2018 6:17 am
Contact:

Re: Custom Profile Contact Icons

Post by Dan Stylez » Thu Jul 12, 2018 3:13 pm

david63 wrote:
Thu Jul 12, 2018 1:36 pm
Dan Stylez wrote:
Thu Jul 12, 2018 12:56 pm
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 Image if there was a similar Font Awesome icon the green and blue man would have to be the same colour.

User avatar
3Di
Registered User
Posts: 12899
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Custom Profile Contact Icons

Post by 3Di » Thu Jul 12, 2018 3:26 pm

Dan Stylez wrote:
Thu Jul 12, 2018 3:13 pm
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
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
Extensions, Scripts, MOD porting, Update/Upgrades
My development's activity º PhpStorm's proud user

User avatar
Dan Stylez
Registered User
Posts: 152
Joined: Tue Jan 16, 2018 6:17 am
Contact:

Re: Custom Profile Contact Icons

Post by Dan Stylez » Thu Jul 12, 2018 4:47 pm

3Di wrote:
Thu Jul 12, 2018 3:26 pm
Dan Stylez wrote:
Thu Jul 12, 2018 3:13 pm
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 :)

User avatar
3Di
Registered User
Posts: 12899
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Custom Profile Contact Icons

Post by 3Di » Thu Jul 12, 2018 6:20 pm

Yeah, I am using stacked FA icons for a rating system. :)
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
Extensions, Scripts, MOD porting, Update/Upgrades
My development's activity º PhpStorm's proud user

User avatar
cprgolds
Registered User
Posts: 446
Joined: Thu Oct 11, 2007 5:49 am
Location: Portland, Oregon

Re: Custom Profile Contact Icons

Post by cprgolds » Fri Jul 13, 2018 3:11 am

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. :)

Post Reply

Return to “[3.2.x] Styles Support & Discussion”

Who is online

Users browsing this forum: No registered users and 4 guests