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

Re: Custom Profile Contact Icons

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

BTW, this is the revised icons_contact.png that I created.
mod_contacts.png
(temp name on the file)
mod_contacts.png (15.69 KiB) Viewed 476 times

User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 853
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Custom Profile Contact Icons

Post by Hanakin » Fri Jul 13, 2018 3:37 pm

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.
Donations welcome via Paypal Image

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 » Sat Jul 14, 2018 12:41 am

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 429 times
Thanks All for the assistance

User avatar
wads24
Registered User
Posts: 513
Joined: Fri Jun 10, 2005 4:44 am
Name: James

Re: Custom Profile Contact Icons

Post by wads24 » Mon Dec 31, 2018 8:19 pm

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 209 times
Thanks in advance for a reply.

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

Re: Custom Profile Contact Icons

Post by 3Di » Mon Dec 31, 2018 8:29 pm

Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
__________________________________
👨‍🏫 | Take a tour to | The Studio | 👨‍🏫

User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 853
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Custom Profile Contact Icons

Post by Hanakin » Wed Jan 02, 2019 4:53 pm

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

https://github.com/phpbb/phpbb/pull/4765
Donations welcome via Paypal Image

Post Reply

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

Who is online

Users browsing this forum: No registered users and 4 guests