Styling

Note: I want a similar button like the one you have in the website of this plugin. The yellow star.

Hi, I cannot find the button on your website, but I might be able to help with styling the button.

The developer added an easy way to add a new icon to your button.
Check under Favorites Settings > Display (Tab) > Button Text

Here you can set the text for the button.
See the part that says
<i class="whatever-class-here"></i>

This is where the button icon is displayed. I personally like to use Font Awesome, as they have a nice selection of icons. https://fortawesome.github.io/Font-Awesome/icons/
——————
I decided to go with a heart icon instead of the star. The font awesome icon class for a heart is “fa-heart”.

So I replaced the original <i class="whatever-class-here"></i> code with <i class="fa fa-heart"></i>.

To change the color of the icon, you can do that with simple css.
In my case, since I’m using the font awesome heart icon, the class I want to add css to is “fa-heart” (as you can see above).

So the css would look like this:
.fa.fa-heart { color: rgb(227, 43, 35); }

This adds a nice red color to my heart icon.

If this is a bit confusing, here’s everything I did to style my buttons.
——————————————————
In Settings Menu –

Button Text:
<i class="fa fa-heart-o"></i> Favorite

Button Text (Favorited):
<i class=”fa fa-heart”></i> Favorited
——————————————————
CSS Styles –

.fa.fa-heart-o { color: rgb(227, 43, 35); font-size: smaller; }
.fa.fa-heart { color: rgb(227, 43, 35); font-size: smaller; }

——————————————————
Even further, adding a bit more CSS to my entire button to customize to our theme –

.simplefavorite-button { border: 1px solid #CDCDCD; background-color: rgb(221, 221, 221); border-radius: 3px; opacity: .5; }

(The above css changes the border color, the background color of the button, the border radius, and the opacity of the button.)

I know this might all sound confusing, but I hope it helps.
Any questions, feel free to ask ??

How can I center it on the page?

Thank you

Hi there Right Beat Radio and Kyle Phillips,

I read through RightBeatRadio’s response to the query above, which was incredibly helpful, but I have another question.

How do I make the button larger/more prominent? It seems small on my site, compared to the other text. I think I need to edit or add custom CSS, but I’m not sure how to go about doing that. Any suggestions would be great. Here is a link to an example portfolio post on my site: https://belcourtartleasing.com/portfolio-items/andy-warhol-double-daisy/?portfolioID=173.

Thanks in advance!

CoffeyRD,

I added “text-size” to .simplefavorte-button css code. Also if you want to change the color of the text just add “color”.
I also made the heart bigger by changing both .fa CSS to a specific size from just smaller. Specifically I used 1.5rem on both my text and icon. I think rem is not the correct styling and you should use px, but I didn’t ??

This plugin calls no CSS of it’s own so you have to override your theme’s CSS for buttons – if that is needed. My theme’s buttons are big huge circles, which just doesn’t work with a little favorite button!