Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #212377

    Hello,

    When I hover over an image I get an orange circle with two white arrows pointing in the opposite direction. How do I change this image to show our logo or some other image? Any restrictions on it, such as resolution, file type, etc.? This might help: https://www.dropbox.com/s/i5h5eakomtd4bkz/hover%20image%20enfold.png

    Thank you!

    #212552

    Hi Lead!

    Edit css > base.css, find this code on line 363:

    .image-overlay .image-overlay-inside:before{content:"\E869"; font-family: 'entypo-fontello'; font-size: 18px; font-weight: normal; }

    Replace the content value “\E860” with a different fontello icon.You can refer to this link for more icon codes: http://www.entypo.com/characters/

    Regards,
    Ismael

    #212595

    Hi Ismael,

    Thanks for the reply. I’m a bit lost though. We are using the Enfold Child Theme. I go to Appearance > Customize is goes to a Preview screen. When I go to Appearance > Editor I don’t see the base.css file.

    On a separate note, I saw the update to the Enfold Theme and I tried to run the automatic update. I got this error, I don’t see a custom.css anywhere. https://www.dropbox.com/s/oolfaujx4s86dqr/Screenshot%202014-01-20%2020.00.15.png

    #212606

    Hi!

    You need to edit those files via FTP or you can add the code on the child theme’s style.css.

    Cheers!
    Ismael

    #212633

    Here is my quick.css in the Child Theme. You can see I added the line at the bottom. When I hover over the image it shows the character code, in this case “E73C”, and not the icon. Thoughts? My preference is to not touch the main theme files to make upgrading easy.

    /* Below added on 1/10/14 to make the main body text larger. Added by Ryan Schefke */
    body, body p {
    font-size: 17px;
    }
    
    .main_menu ul:first-child > li > a {
    font-size: 18px !important;
    }
    
    .image-overlay .image-overlay-inside:before {
    content:"\E73C"; font-family: 'entypo-fontello'; font-size: 18px; font-weight: normal; 
    }
    #212692

    Hey!

    Did you check if the character code is valid? Maybe \E73C does not exist in the “entypo-fontello” font family. If it’s a custom character the font family may vary (i.e. maybe it’s called “fontello”).

    Cheers!
    Peter

    #213170

    Hello,

    Am I doing it right? I go to the link recommended above by Ismael, http://www.entypo.com/characters/. Then I use the character code under the image. For example, if I wanted to use the phone (image on very top left), then the code is U+1F4DE. I enter in “1F4DE” in the code entered into quick.css. My quick.css ends up looking like this:

    /* Below added on 1/10/14 to make the main body text larger. Added by Ryan Schefke */
    body, body p {
    font-size: 17px;
    }
    
    .main_menu ul:first-child > li > a {
    font-size: 18px !important;
    }
    
    .image-overlay .image-overlay-inside:before {
    content:"\1F4DE"; font-family: 'entypo-fontello'; font-size: 18px; font-weight: normal; 
    }

    Again, when I hover over the image it just shows “1F4DE” and does not show the phone icon.

    #213241

    Hey!

    Ok. My bad! You really need to edit base.css then find the code I posted above. Change the icon code.

    Best regards,
    Ismael

    #470144

    Ismael, I’m confused, I added the code you wrote at the start of this post into my quick css, and it worked perfectly. No need to add it to base.css (I did add !important for the icon, I don’t know if I needed to, but it’s working anyway!)

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Changing Image When Hovering Over Images’ is closed to new replies.