Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #829949

    I have some icons I have inserted in a text box that links to social media pages. Are the icons suppose to have mouse over/hover effects out of the box?

    The icons I am talking about are on the page in the link below, right above core service separator.

    Thanks!

    Dave

    #831470

    Hey Dave,

    These icons do not have the same classes as the ones on the social widget, so they don’t have the same hover effect. We can help you add the effect you need. Just let us know what you’re trying to achieve.

    Best regards,
    Victoria

    #831929

    Hi Victoria,

    I just want the icons to change color on mouse over, that really it.

    Thank you,

    dave

    #832320

    Hi,
    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file: 

    .avia-builder-el-5 > .av_textblock_section > .avia_textblock > div > .av_font_icon:first-child > .av-icon-char:hover {
       /* twitter */
       color:#46d4fe !important;
       }
    .avia-builder-el-5 > .av_textblock_section > .avia_textblock > div > .av_font_icon:nth-child(2) > .av-icon-char:hover {
       /* linkedin */
       color:#419cca !important;
    } 
    .avia-builder-el-5 > .av_textblock_section > .avia_textblock > div > .av_font_icon:nth-child(3) > .av-icon-char:hover {
       /* facebook */
       color:#37589b !important;
    } 
    
    .avia-builder-el-5 > .av_textblock_section > .avia_textblock > div > .av_font_icon:last-child > .av-icon-char:hover {
       /* googleplus */
       color:#de5a49 !important;
    } 
    

    Please note that this is dependent on the current order of the icons. If you move them, you may need to change the CSS code as well. It might be easier if you turn on the Custom CSS Class field for ALB elements: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    If you do that, you can do something like: .twitter-texticon:hover { color:#46d4fe !important; }

    I hope that helps! Let us know if you need further help.

    Best regards,
    Sarah

    #833138

    Hi, Sarah!

    Thank you for your help. I just put this in and it’s not working, Any suggestions? If you need a login, please let me know.

    Thank you,

    Dave

    #833165

    Hi Dave,

    Can you provide us with admin access in the Private Content section of your reply so we can take a closer look?
    Best regards,
    Sarah

    #834113

    Hi, Sarah,
    Thank you very much, the information you requested is below.

    Dave

    #835861

    Hi,

    Sorry for the late reply!

    Can you please post the link to your login page? /wp-admin and /wp-login.php did not work for me.
    Also, now you no longer need to add following code to Functions.php file

    add_theme_support('avia_template_builder_custom_css');

    Instead, please go to Enfold theme options > Layout Builder and check “Show element options for developers”

    Best regards,
    Yigit

    #836050

    Hi Yigit,

    I have put the login link below and have removed the line from the function.php file and enabled the feature in the theme options. Thank you for letting me know of the change. As a side question, do you know why I’m not seeing the Automated Schema.org HTML Markup option in the theme options though?

    #837943

    Hi dmpitzer,

    You can assign a class to each of those icons and then it will be very easy to target them with css

    
    custom_class=''
    

    The Automated Schema.org HTML Markup option moved to a Layout builder section.

    Best regards,
    Victoria

    #838414

    Hi Victoria,

    Great idea! It worked perfectly.

    Thank you,

    Dave

    #838459

    Hi Dave,

    Great, glad you got it working. Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

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