How To change weebly default Social buttons ? add new ones

[BFMIX]

Hello 

I would like to know how To change weebly default Social buttons, to add my own social network that's not on weebly ?

[WebfireThemes]

Hi @BFMIX

This will require some customisation of your theme... and you will have to sacrifice one of the icons in the social picker that you do not wish to use.

Normally we'd use something like Font Awesome as our icon font and then once installed you can add some css to override the icon that is displayed when selecting an icon from the social picker in Weebly.

This is however a customisation that will require you customising your theme by adding new css and new files.

If you PM me the URL to your site I'd be happy to take a look. If you're already using a custom theme there may be a way to do this quite easily depending on how the theme is setup.

If you are going to have a go at this yourself.. install font awesome into your theme. then use something like Firebug to inspect the social icons. this should give you the information you need to override the standard weebly social icons with your own..

Please however do this on a copy of your website and work on a fresh install of your theme... (either that or export your theme as it is now before making any changes so you can quickly revert if anything goes wrong).

Hope this helps!

[BFMIX]

Hi 

Yes i'm using a custom theme,

here's my website : http://bfmix.com/

i'm not relly good at css & coding

if i add you as an admin on my website can you help me set this up ? 

Thank's

[WebfireThemes · Accepted solution]

Hi BFMIX

Just had a look at your site...

Nice site too btw... I'd love you to consider webfire themes if you ever deicded to upgrade!

Anyway, back to your issue more importantly..

Looking at your site... your theme is not using an icon font for it's social icons but instead is using an image... and then using css to define the co-ordinates of that image to display the icon...

The good news is you can probably get around this without touching any code, but you would require to do some graphical editing.

if you look here: http://www.bfmix.com/files/theme/socials.png?1463828616

This is the image that defines your social icons... what you could do, is pick an icon you don't care about. and edit the image to use an icon you do want to use. then reupload this file(make sure it's called "socials.png" and when you select the icon you disregarded it will show the icon you updated.

You just need to be really careful that when you update the image, you replace the icon you don't want with the one you do in it's exact dimension otherwise the co-ordinates being mapped in the code will not work.

The hard bit here is finding the icon you wish to add and making sure it ties in with the style of the other icons. once you've done that it's just a matter of some basic image editing in photoshop or gimp... re-upload the new file and bobs your uncle, the new icon should work in Weebly.

Let us know how you get on.

[BFMIX]

Thank you So much

i've been looking for a solution for this since a long time,

and it's was really simple to do  

[WebfireThemes]

It's a pleasure BFMIX

Good luck with your site... and don't forget us if you ever wanted to update to a new premium theme

[BFMIX]

i didnd't know about your website before, i'll check it out 

do you have any Music Style Themes for Artist ?

[WebfireThemes]

Thanks BFMIX

We don't have any themes specific to music, but we find most people that create this type of site go for the single page style... it's more funky

check parallax out... I personally think this one page style site is perfect for any sort of creative portfolio.

http://wft-parallax.weebly.com

[charliecat61]

Hi, I've hacked the social icons table to add my own variations, eg I've used the Google+ for Streetlife and the LinkedIn for Instagram.

It works great on the website, but still shows the Google+ and LinkedIn icons on the mobile site - which is where Instagram is going to be used.

See http://naturepark.littlechalfont.org.uk/

So, the question is, how to I get my substituted icons in the mobile site?

Keiron.