Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 28, 2016 at 7:55 am #623505
    Jason E

    Good day,

    I would like to remove the circle around some icons within a page. Bonus points for removing the animation as well. In many cases both animations and the borders are a great benefit, but for this application, it just adds complexity where it is not needed. I have tried various techniques I found while searching through the support site, but none have been effective so far. I am removing those, so it is cleaner code to inspect.

    I have added a class to the icons “actionbar-icons”, so I can grab multiple, so if we can attach to that, it would be great.

    April 28, 2016 at 8:00 am #623506
    Jason E

    I forgot to add, this is a WP 4.5.1 install with the latest Enfold 3.5.4, running with a child theme. The child theme has a function added allowing elements to have css classes. Otherwise, it is a stock install.

    April 28, 2016 at 8:31 am #623516
    Vinay

    Hey!

    Please use the below CSS in Quick CSS under enfold > general Styling 

    .actionbar-icons .av-icon-char{
    border-width:0!important;
    border-style:none!important;
}

#top  .actionbar-icons a.av-icon-char:hover:after {
    -webkit-animation: sonarEffect 0s ease-out!important;
    animation: sonarEffect 0s ease-out!important;
}

    Cheers!
    Vinay

    April 28, 2016 at 8:40 am #623525
    Jason E

    This is great. Thank you!

    Instead of adding it to the Quick CSS, I added it to the child theme’s css file. This way it is safe from future edits.

    Thank you again for the help.

    April 28, 2016 at 8:43 am #623528
    Jason E

    Hey, quick follow-up question…

    I really wanted the whole line of icons centered, but when selecting center justification, it wants to put them all on separate rows. Am I missing something simple?

    April 28, 2016 at 3:10 pm #623807
    Yigit

    Hey!

    Can you please post a screenshot and show the changes you would like to make?

    Cheers!
    Yigit

    April 28, 2016 at 5:55 pm #623916
    Jason E

    Here you go. Really simple. I just want the sum of the icon buttons centered. If I could only wrap them in a div, I could easily handle it in css, but I just cannot find a way to grab hold of them, since the centered alignment option does not seem to work.

    April 29, 2016 at 5:50 am #624104
    Vinay

    Hey!

    Please try adding the following css

    .actionbar-icons.avia-icon-pos-center {
    display:inline-block!important;
}

    Then you need to add a custom class to the parent container of the icons and center them using 

    .parent-container {
text-align:center;
}

    Should you have any issues please feel free to get in touch with us.

    Cheers!
    Vinay

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Removing icon button circle and animation’ is closed to new replies.