Published
on
March 19, 2014
| 4,292 views
| 1 follower
members are following updates on this item.
First things first: Before we go editting and poking about in the CSS for your community, I have one important piece of advice. Always make a copy of the contents of your theme editor before you start making changes. Just copy it all into Notepad, and save a copy. This makes it much easier to go back if things go wrong.
The first thing to know about styling the like button is that it has two states: Default and Liked. The default state is when the active user has not liked an object. When you click "Like" it changes to the Liked state. You can change the look of one or both of these states using CSS.
If you like the default grey, but want to change up the highlighting colour when an object is liked, you can add the code below to your theme, replacing the colour codes with your own. (The example below looks like this: You'll probably want to change up the colours, unless you're a big fan of magenta.)
/*Liked*/
.ig-meta-like.liked a.ig-button-badge {
background-color: #F68BD8; /* Colour behind number of likes */
color: #fff !important; /* Text colour */
}
.ig-meta-like.liked a {
border-color: #F68BD8; /* Colour of border */
}
If the grey of the default view is too dull for you, you can change it up using the code below in the same way as above. This will let you change the colour of the border, and the colour behind the number on the left side, as well as the colour behind the word "Like". If you change the colour behind "Like", this will also change it on the Liked version of the button. The example below will make the default view of the button look like this:
/* Default */
.ig-meta-like a.ig-button-badge {
background-color: #FAC9C9; /* Colour behind number of likes */
}
.ig-meta-like a {
background-color: #FAE2E2; /* Colour behind "Like" */
border-color: #FAC9C9; /*Colour of borders */
}
So if you combine both of those blocks, and add them to the Theme in your control panel, your like buttons will look like this:
There are many more ways that you can change the look of the like button, if you are handy with CSS, so experiment away, and style to your heart's content! (Just don't forget to back up!)
Page Options