For basic information on adding the icons to your site, check out Weebly's Help Center example.
In the example above, I have changed both the original color and the hover color to suit each company's brand color scheme. Obviously you're free to replace the colors with your own choices or copy mine. If you would like to modify the natural and/or hover colors for Weebly's Social Icons the CSS below can be added to either your pages' SEO Settings (in the HEADER CODE), or to your theme's main CSS file. The Social Icons only appear in the published site if
The CSS modifications are only visible on the public (published) site, not within Weebly's site editor. Changes to the .wsite-social-item class - I've modified this rule to produce a little space around each icon which allows the background to feature when the mouse hovers over each icon. To change the color of each icon you can use this sort of CSS: .wsite-social-facebook { color: #3b5998; } This is telling the social icon with the Facebook class to be hex color #3b5998 which is currently Facebook's blue. The 3 main methods of setting colors in CSS are by name, RGB, or hexadecimal. Click on each one to find out more about each method. You can find a lot of Brand Colors here. To change the look of the icon when your mouse hovers over it you can use this sort of CSS: .wsite-social-facebook:hover { color: #fff; background: #3b5998; } This is telling the social icon with the Facebook class to be white (#fff) in color with a blue (#3b5998) background when the mouse hovers over it. Each icon has its own class that can be tailored to your needs. To my knowledge this can't be done without modifying the CSS. The CSS classes start with .wsite-social- and conclude with the icon's brand name. For example: .wsite-social-facebook. I've listed all 13 icons' class names below. |
Adding the CSS to the page's SEO Settings.
|
Adding the CSS to the main CSS file in the theme editor.
ADVICE!
If you are making changes to your theme's HTML or CSS files I suggest you make a backup copy of the markup/rules in a plain text file on your computer, just in case something goes awry.
If you are making changes to your theme's HTML or CSS files I suggest you make a backup copy of the markup/rules in a plain text file on your computer, just in case something goes awry.
If you are using this in your SEO Settings the CSS needs to be surrounded by <style> and </style> tags as below. If you are adding this to your theme's main CSS file, copy only the content between the style tags.
CSS
<style>
.wsite-social-item {padding-top: 8px; padding-right: 11px; padding-bottom: 8px; padding-left: 11px;}
.wsite-social-facebook { color: #3b5998; }
.wsite-social-facebook:hover { color: #fff; background: #3b5998; }
.wsite-social-twitter { color: #00aced; }
.wsite-social-twitter:hover { color: #fff; background: #00aced; }
.wsite-social-instagram { color: #000; }
.wsite-social-instagram:hover { color: #fff; background: #f09433; background: -moz-linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); background: -webkit-linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433',endColorstr='#bc1888',GradientType=1); }
.wsite-social-linkedin { color: #0077B5; }
.wsite-social-linkedin:hover { color: #fff; background: #0077B5; }
.wsite-social-mail { color: #000; }
.wsite-social-mail:hover { color: #fff; background: #000; }
.wsite-social-flickr { color: #0063DC; }
.wsite-social-flickr:hover { color: #FF0084; background: #0063DC; }
.wsite-social-pinterest { color: #C92228; }
.wsite-social-pinterest:hover { color: #fff; background: #C92228; }
.wsite-social-plus { color: #d34836; }
.wsite-social-plus:hover { color: #fff; background: #d34836; }
.wsite-social-rss { color: #f26522; }
.wsite-social-rss:hover { color: #fff; background: #f26522; }
.wsite-social-vimeo { color: #1ab7ea; }
.wsite-social-vimeo:hover { color: #fff; background: #1ab7ea; }
.wsite-social-yahoo { color: #410093; }
.wsite-social-yahoo:hover { color: #fff; background: #410093; }
.wsite-social-youtube { color: #cd201f; }
.wsite-social-youtube:hover { color: #fff; background: #cd201f; }
.wsite-social-dribbble { color: #ea4c89; }
.wsite-social-dribbble:hover { color: #c32361; background: #ea4c89; }
</style>
.wsite-social-item {padding-top: 8px; padding-right: 11px; padding-bottom: 8px; padding-left: 11px;}
.wsite-social-facebook { color: #3b5998; }
.wsite-social-facebook:hover { color: #fff; background: #3b5998; }
.wsite-social-twitter { color: #00aced; }
.wsite-social-twitter:hover { color: #fff; background: #00aced; }
.wsite-social-instagram { color: #000; }
.wsite-social-instagram:hover { color: #fff; background: #f09433; background: -moz-linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); background: -webkit-linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433',endColorstr='#bc1888',GradientType=1); }
.wsite-social-linkedin { color: #0077B5; }
.wsite-social-linkedin:hover { color: #fff; background: #0077B5; }
.wsite-social-mail { color: #000; }
.wsite-social-mail:hover { color: #fff; background: #000; }
.wsite-social-flickr { color: #0063DC; }
.wsite-social-flickr:hover { color: #FF0084; background: #0063DC; }
.wsite-social-pinterest { color: #C92228; }
.wsite-social-pinterest:hover { color: #fff; background: #C92228; }
.wsite-social-plus { color: #d34836; }
.wsite-social-plus:hover { color: #fff; background: #d34836; }
.wsite-social-rss { color: #f26522; }
.wsite-social-rss:hover { color: #fff; background: #f26522; }
.wsite-social-vimeo { color: #1ab7ea; }
.wsite-social-vimeo:hover { color: #fff; background: #1ab7ea; }
.wsite-social-yahoo { color: #410093; }
.wsite-social-yahoo:hover { color: #fff; background: #410093; }
.wsite-social-youtube { color: #cd201f; }
.wsite-social-youtube:hover { color: #fff; background: #cd201f; }
.wsite-social-dribbble { color: #ea4c89; }
.wsite-social-dribbble:hover { color: #c32361; background: #ea4c89; }
</style>