Title: Styling
Last modified: August 24, 2016
---
# Styling
* [jtmf](https://wordpress.org/support/users/jtmf/)
* (@jtmf)
* [11 years, 3 months ago](https://wordpress.org/support/topic/styling-44/)
* How to change the button styling?
* Please check an example on my page: [link](http://nanovideos.info/video/observation-of-graphene-growth/)(
below the video)
* My knowledge about this is a bit limited. How to change the style of the button
to be only, for example, a nice star like the other buttons in my page?
* Thanks.
* [https://wordpress.org/plugins/favorites/](https://wordpress.org/plugins/favorites/)
Viewing 5 replies - 1 through 5 (of 5 total)
* Thread Starter [jtmf](https://wordpress.org/support/users/jtmf/)
* (@jtmf)
* [11 years, 3 months ago](https://wordpress.org/support/topic/styling-44/#post-6006086)
* Note: I want a similar button like the one you have in the website of this plugin.
The yellow star.
* [RightBeatRadio](https://wordpress.org/support/users/rightbeatradio/)
* (@rightbeatradio)
* [11 years, 3 months ago](https://wordpress.org/support/topic/styling-44/#post-6006307)
* 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 ``
* This is where the button icon is displayed. I personally like to use Font Awesome,
as they have a nice selection of icons. [http://fortawesome.github.io/Font-Awesome/icons/](http://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 `` code with `<
i class="fa fa-heart">`.
* 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:
` Favorite`
* Button Text (Favorited):
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 🙂
* anonymized-14239226
* (@anonymized-14239226)
* [11 years ago](https://wordpress.org/support/topic/styling-44/#post-6006375)
* How can I center it on the page?
* Thank you
* [CoffeyRD](https://wordpress.org/support/users/coffeyrd/)
* (@coffeyrd)
* [10 years, 9 months ago](https://wordpress.org/support/topic/styling-44/#post-6006387)
* 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: [http://belcourtartleasing.com/portfolio-items/andy-warhol-double-daisy/?portfolioID=173](http://belcourtartleasing.com/portfolio-items/andy-warhol-double-daisy/?portfolioID=173).
* Thanks in advance!
* [rhoeffner](https://wordpress.org/support/users/rhoeffner/)
* (@rhoeffner)
* [10 years, 8 months ago](https://wordpress.org/support/topic/styling-44/#post-6006396)
* 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!
Viewing 5 replies - 1 through 5 (of 5 total)
The topic ‘Styling’ is closed to new replies.
* 
* [Favorites](https://wordpress.org/plugins/favorites/)
* [Frequently Asked Questions](https://wordpress.org/plugins/favorites/#faq)
* [Support Threads](https://wordpress.org/support/plugin/favorites/)
* [Active Topics](https://wordpress.org/support/plugin/favorites/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/favorites/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/favorites/reviews/)
* 5 replies
* 5 participants
* Last reply from: [rhoeffner](https://wordpress.org/support/users/rhoeffner/)
* Last activity: [10 years, 8 months ago](https://wordpress.org/support/topic/styling-44/#post-6006396)
* Status: not resolved