Like Button

[icecast]

I have received feedback from readers that it is not obvious that the heart icon is a like button that one should click. Any suggestions to turn the heart icon and number into a button?

.masonry-items .blog-item .comments-likes {
display: block;
}

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Any chance you could provide a screenshot of how you want it to look?

– Kyle

[icecast]

Hi Kyle,

I have noticed that you have a tendency to answer a question with another question, which is frustrating because it just adds more time to the process.

My question was fairly specific about how to change the heart icon and number into a button. I can style the button later.

[Kyle – SUPPORT]

The reason I asked for a screenshot is so I could provide the correct css, but if you’re happy to do it yourself that’s fine. Add this to your custom css:

.love-it-wrapper {
  background: #f97f93;
}

– Kyle

[icecast]

I styled the “like” button similar to the “share this” button, but of course it affected the styling of the love count on the .masonry items .blog-item .comments-likes on posts page.

Any suggestions to make the new “like” button similar to “share this” button (with same hover effects) and not have it affect styling of .blog-item .comments-likes on posts page?

——————————-

.love-it-wrapper {
border-radius: 2px!important;
padding: 12px 18px 11px!important;
position: relative;
z-index: 3;
background-color: #fe504f!important;
color: #ffffff!important;
}
i.ss-heart {
color: white;
}
.comments-likes .loved span.love-count {
color: white;
}
.blog-item .comments-likes .love-it-wrapper {
background: none !important;

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Before each of your rules add:

.single article

So the top rule would be:

.single article .love-it-wrapper {
border-radius: 2px!important;
padding: 12px 18px 11px!important;
position: relative;
z-index: 3;
background-color: #fe504f!important;
color: #ffffff!important;
}

– Kyle

[icecast]

works, great, thank you – any suggestions to add the same hover effect from share this button to new like button?

[Kyle – SUPPORT]

Can you provide a link so I can check?

– Kyle

[icecast]

http://femscribe.com

also, do you have any suggestions to turn the most recent blog post counter number font color to white while hovering over the post when it turns to red?

all the other post counter numbers turn white when post hover turns red

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Change your CSS to:

.single article .love-it-wrapper > a.love-it {
  background-color: #fe504f !important;
  border-radius: 2px !important;
  color: #ffffff !important;
  padding: 12px 18px 11px !important;
  position: relative;
  z-index: 3;
}
.single article .love-it-wrapper > a.love-it:hover {
  opacity: 0.8;
}

For number 2, it already is white? (see screenshot)

– Kyle

Attachments:

You must be logged in to view attached files.

[icecast]

thank you, works great

re #2, looks like issue only occurs when i am logged in – not a big deal but let me know if there is an easy fix

[Kyle – SUPPORT]

Not sure why that would be happening sorry

– Kyle