Social Media buttons in Buildr Xero Template

jonburdon1

I use the xero template with Buildr all the time. I have added Facebook and Twitter Links to the template settings, but for some reason they are not showing on the front end.

http://staging1.soulinmotion.co.uk

Any ideas?

I'd also like to change the background and font colours used in the buttons.

saguaros

jonburdon1

Kindly share admin + FTP account of your site, I will check for you.

jonburdon1

I have shared the username and password now.

saguaros

jonburdon1
Could you grant super admin permission and share the ftp account so I can check?

jonburdon1

saguaros I've not resolved this. Can you help?

jonburdon1

I really do need help with workout this problem out. I can't get the buttons to appear.

aman204

jonburdon1 Hi

Please recheck as the admin details are still needed for super user access level or you may upgrade the similar details provided through users --> manage in admin backend

Also, You may kindly provide ftp details too in edit fields to enable us to troubleshoot the relative issue closely as requested earlier

jonburdon1

aman204 That's all done.

aman204

jonburdon1 Kindly recheck as the ftp is returning with blank with no files/directories to be seen

jonburdon1

aman204 I have now checked and verified that the ftp details now work.

jonburdon1

aman204 Can you see why these buttons are not visible?

aman204

jonburdon1 Hi

Thanks. Files/directories are appearing fine through ftp access however, unable to figure out exactly as to why specific position-social isnt reflecting in Zengrid due to which specific module isnt appearing as Zengrid framework provides distinguishable functionality through JS for dynamically calling such positions

Have requested other team member for assistance here. Please be patient while we revert back

jonburdon1

aman204 have you had any success with this? This is a built in feature of the template, it might be something simple you have missed.

@paulus1031 any ideas? The social media buttons that are activated through the standard Buildr template are not visible - all I did was add the social media links in the menu settings as normal. it's a new install of the Buildr template but I was previously using the Joomla Bamboo Sidewinder template on this site.

jonburdon1

Update.

The buttons are now showing (square, coloured.) although I did not make any changes to the site and I had previously refreshed the cache - did anyone change anything?

I also notice they are overlapping the right hand edge of the screen for some reason - never seen that before with this template, which I use a lot.

I'd really like to update them to round with a black background and orange icons, to match the site.

Here is my screenshot of my icon settings.

aman204

jonburdon1 Nice to see that functionality to reflect social icons is working now as envisaged. It could have been due to cache issues as I did try to cross check files for relative code snippets to align with default stage and making changes wherever needed, however the same didnt render at that time 🙂

I also notice they are overlapping the right hand edge of the screen for some reason - never seen that before with this template, which I use a lot.
I'd really like to update them to round with a black background and orange icons, to match the site.

Try add this to custom.css file and adjust right value accordingly :

.social-wrap{right:20px !important;}
.social-wrap .zen-icon-facebook, .social-wrap .fa-facebook,.social-wrap .zen-icon-twitter, .social-wrap .fa-twitter{background:#000 !important;border-radius: 50%;}
.social-wrap .zen-icon-twitter:before, .social-wrap .zen-icon-facebook-f:before,.social-wrap .zen-icon-facebook:before{color:#f0a02f !important;}

Kindly ensure to clear your browser cache if changes dont reflect.

jonburdon1

aman204 Thanks. The buttons look great now. I did add an instagram using that option in the template, but the styling didn't apply. I make a few small changes to your css, hoping they would also apply to the instagram icon - but the changes didn't work.

Can you take a look at the css to see if they can be changed to target the fa-instagram icon.

aman204

jonburdon1 I did add an instagram using that option in the template, but the styling didn't apply. I make a few small changes to your css, hoping they would also apply to the instagram icon - but the changes didn't work.

Try change the above CSS :

.social-wrap .zen-icon-facebook, .social-wrap .fa-facebook,.social-wrap .zen-icon-twitter, .social-wrap .fa-twitter{background:#000 !important;border-radius: 50%;}
.social-wrap .zen-icon-twitter:before, .social-wrap .zen-icon-facebook-f:before,.social-wrap .zen-icon-facebook:before{color:#f0a02f !important;}

.social-wrap .zen-icon-facebook, .social-wrap .fa-facebook,.social-wrap .zen-icon-twitter, .social-wrap .fa-twitter,.social-wrap .zen-icon-instagram, .social-wrap .fa-instagram{background:#000 !important;border-radius: 50%;}
.social-wrap .zen-icon-twitter:before, .social-wrap .zen-icon-facebook-f:before,.social-wrap .zen-icon-facebook:before,.social-wrap .zen-icon-instagram:before{color:#f0a02f !important;}

which would ensure Instagram FA icon inherits similar style