Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 20, 2015 at 4:00 pm #415318
    gigoz

    I want to make the color section of enfold have hover effect on mouseover. Please can you advice me on how to do this?
    Thanks

    March 20, 2015 at 4:03 pm #415321
    Yigit

    Hey gigoz!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .page-id-14731 #av_section_4:hover {
  background-color: #e2e2e2!important;
}

    It would change the background color of your “Meet your instructors” section on hover

    Cheers!
    Yigit

    March 20, 2015 at 4:13 pm #415335
    gigoz

    I would like to apply this to other sections in same page and other pages. kindly explain how you make up this code so I can apply it in other sections.

    Thanks

    March 20, 2015 at 4:15 pm #415340
    Yigit

    Hey!

    You can edit your color sections and give them a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png
    and then change the code to following 

    #your-unique-id:hover { background-color: orange !important; }

    Regards,
    Yigit

    March 20, 2015 at 4:24 pm #415352
    gigoz

    Fantastic!. Now another question. if i want hover effect on an element, how can i go about doing that. For example, lets say I have 4 column in a section. How can i make the hover effect affect each column separately?

    Thanks

    March 20, 2015 at 4:29 pm #415359
    Yigit

    Hey!

    You can inspect elements on your page and target them using page ID avia element ID – http://i.imgur.com/OwA3ofs.png?1
    then add following code to Quick CSS in Enfodl theme options under General Styling tab

    .page-id-987 .avia-builder-el-1:hover { background-color: orange; padding: 10px; border-radius: 5px; }

    Regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.