Forums

Custom colour for social media icons

Permalink
Hi all,

I have added some a row of buttons for social media sharing etc. However the colour of the button [ a circle rim with text inside ] I would like to change the colour of the [ rim ~part of the button ] The inner text I can edit . Its a bit hard to describe what I'm after here. Here is a link to view a screen capture with Evernote:+ plus attached a very short screen record. Any help would be great as would be great to have this if I can change the colour.
IMAGE REVIEW:http://goo.gl/zNq3vg
Attached: Video

1 Attachment

melange
 
mnakalay replied on at Permalink Reply
mnakalay
the css responsible for the rim is:
.ccm-block-social-links a, .ccm-block-share-this-page a {
    display: inline-block;
    padding: 5px 7px;
    border-radius: 50%;
    color: #ddb700;
    background: rgba(255,255,255,0.1);
    border: solid 3px #ddb700;
}

You only want to change the border color so you only need to modify the last line. You should add a custom class to your block like you see in your video at about 0:37. Let's say you call it my-social-icons

Then if your website's theme is a custom theme that you don't need to update from the marketplace, you can just add to its css:
.my-social-icons .ccm-block-social-links a,
.my-social-icons .ccm-block-share-this-page a {
    border: solid 3px #ddb700;
}

and replace #ddb700 with the color you want.

If on the other hand you might want to update from the marketplace later then you shouldn't edit the theme's CSS directly but create a template for the social block instead and add your custom CSS in a file called view.css in the template's folder.