Custom Profile Contact Icons

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

Re: Custom Profile Contact Icons

Post by cprgolds »

BTW, this is the revised icons_contact.png that I created.
(temp name on the file)
(temp name on the file)
mod_contacts.png (15.69 KiB) Viewed 2457 times
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Custom Profile Contact Icons

Post by Hanakin »

They are not font-awesome they are handled via an image sprite. A sprite uses css background position cords and element size to render the appropriate image.

Font-awesome icons can only use 1 colours per icon which we opted not to use in 3.2 also because they did not have all of the icons at the time.

It this and many other reasons why we are overhauling the icons in 3.3 to allow for the use of svg/font/png in that order of fallback.
User avatar
cprgolds
Registered User
Posts: 459
Joined: Thu Oct 11, 2007 5:49 am
Location: Portland, Oregon

Re: Custom Profile Contact Icons

Post by cprgolds »

OK, got the change to work. Added one line in colours.css and used the revised icons_contact.png shown earlier. Then clear cache in both the board and my browser, and voila!

Code: Select all

/* Profile & navigation icons */
.pm-icon				{ background-position: 0 0; }
.email-icon				{ background-position: -21px 0; }
.jabber-icon				{ background-position: -80px 0; }
.phpbb_icq-icon				{ background-position: -61px 0 ; }
.phpbb_wlm-icon				{ background-position: -182px 0; }
.phpbb_aol-icon				{ background-position: -244px 0; }
.phpbb_website-icon			{ background-position: -40px 0; }
.phpbb_youtube-icon			{ background-position: -98px 0; }
.phpbb_facebook-icon			{ background-position: -119px 0; }
.phpbb_googleplus-icon			{ background-position: -140px 0; }
.phpbb_skype-icon			{ background-position: -161px 0; }
.phpbb_twitter-icon			{ background-position: -203px 0; }
.phpbb_yahoo-icon			{ background-position: -224px 0; }
.phpbb_zynga_prof-icon                  { background-position: -264px 0; }
2018-07-13.png
2018-07-13.png (15.45 KiB) Viewed 2410 times
Thanks All for the assistance
User avatar
wads24
Registered User
Posts: 662
Joined: Fri Jun 10, 2005 4:44 am
Name: James

Re: Custom Profile Contact Icons

Post by wads24 »

I would like to add icons for Google Maps, Home Phone, Cell Phone, and Instagram for my custom profile fields. Right now they are showing up as "Send Private Message" icon.

I read the previous posts, but did not quite understand. Could some provide me with step by step instructions?
Attachments
Capture.JPG
Capture.JPG (12.87 KiB) Viewed 2190 times
Thanks in advance for a reply.
User avatar
3Di
I've Been Banned!
Posts: 17538
Joined: Mon Apr 04, 2005 11:09 pm
Location: I'm with Ukraine 🇺🇦
Name: Marco
Contact:

Re: Custom Profile Contact Icons

Post by 3Di »

🆓 Free support for our extensions also provided here: phpBB Studio
🚀 Looking for a specific feature or alternative option? We will rock you!
Please PM me only to request paid works. Thx. Buy me a coffee -> Image
My development's activity º PhpStorm's proud user º Extensions, Scripts, MOD porting, Update/Upgrades
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Custom Profile Contact Icons

Post by Hanakin »

have a look at this pr for some insight as to how these icons work

https://github.com/phpbb/phpbb/pull/4765
User avatar
Cowboy of Bottrop
Registered User
Posts: 4
Joined: Wed Apr 29, 2020 3:19 pm
Location: Bottrop, DE
Contact:

Re: Custom Profile Contact Icons

Post by Cowboy of Bottrop »

Sorry for pick up this old thread, but why it is not possible to upload an icon file in the contact field's settings? Everything I add to the style sheet will be lost on next update.

I don't think that Font Awesone will be the best, there are so many possible icons Font Awesone is not delivering.

I added contact fields and png icons for Threema, Komoot and myTischtennis.de. All this icons are not available on Font Awesome and I have to repeat this after each update of the used styles.

Keep it Country,
Cowboy
Post Reply

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