This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Circle Icon Hover Effect

Open 7 replies themetheme-vantage
machoi
11 years ago · Last reply by Greg Priday 11 years ago

Hello there!

I got the Vantage Theme and the Page Builder and I really like it a lot.
I wanted to ask, how I can add a Hover effect to the cricle icons. I want that the background of the whole field changes (not just the icon by itself).

Kind regards,
machoi

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. machoi 11 years, 2 months ago

    Is there real no possibility to do that?

    Kind regards,
    machoi

  2. shaiboopk 11 years, 2 months ago

    I would also be interested to know this. I use Vantage Premium Theme.

    Regards,
    Shaiboopk

  3. Andrew Misplon Staff 11 years, 2 months ago

    Hi

    There is unfortunately no option to handle this in the Circle Icon widget or similar, SiteOrigin Features widget.

    If you’re using the Circle Icon widget it’s possible to add the following to Appearance > Custom CSS or your own Custom CSS plugin and edit as required:

    /* Circle Icon Widget Hover Color */
.widget_circleicon-widget .circle-icon-box .circle-icon:hover {
background-color: #000000;
}

    Edit #000000 as required.

  4. machoi 11 years, 2 months ago

    Hi Andrew,

    thank you very much. It worked!

    Kind regards,
    machoi

  5. machoi 11 years, 2 months ago

    One more question about this topic: how can I change on hover the color of the Icon itself?
    And how can I change the color of the background around the circle?

    Thank you very much for your help!

    Kind regards,
    machoi

  6. Alex 11 years, 27 days ago

    Hi Andrew,

    I’m struggling with adding the hover effect to the circle icons. I copy and pasted the below into the style.css but it didn’t work. Is this supposed to be pasted in a particular area? Any help would be greatly appreciated!

    .widget_circleicon-widget .circle-icon-box .circle-icon:hover {
    background-color: #000000;
    }

    Thank you!

    • Greg Priday Staff 11 years, 27 days ago

      Hi Alex

      Ideally you should be pasting this code into a custom CSS plugin. Our premium themes come with one, or you can use an alternative like this one https://wordpress.org/plugins/simple-custom-css/

      We’d like to help you, but if you need more help, can you please start a new thread with your question? We can only offer you the best support possible when you’re the owner of a thread.

      Page: New Thread

      If you’re a premium user, please be sure to enter your order number so we can properly prioritize your thread.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread