Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #500673

    Hello,

    I’m trying to override the rollover icon on an image for external links, to use the Soundcloud logo instead. Preferably, this would apply to one specific page to allow the rollover to show the usual icon when used on other pages, if possible.
    Assuming this is still not possible via custom CSS, I’ve followed the info from these posts:

    https://kriesi.at/support/topic/different-hoverimage-overlay-icons/
    https://kriesi.at/support/topic/rollover-disc-arrow-replacement-part-2/#post-121206

    I’ve changed the existing line in base.css from this:

    .image-overlay.overlay-type-extern .image-overlay-inside:before{content:”\E832″;}
    to this:
    .image-overlay.overlay-type-extern .image-overlay-inside:before{content:”\E913″;}

    … but I see no change to the icon after emptying the cache in more than one browser. Have I done something wrong?

    Thanks for any assistance you can provide.

    #501392

    Hi Leosoki,

    Not sure why but the last one is displaying a different icon than the other three? content: ‘\E869’; vs content: ‘\E832’; not sure if you managed to change it or not?

    Thanks,
    Rikard

    #501597

    Hi, thanks for taking a look.

    Yes, only the last one was displaying E832 as that was the only one with an external link. The others were still set to use lightbox and so displaying the ‘open with lightbox’ arrows (E869). I’ve now added links to the others to minimise confusion but what I’m trying to achieve is for all of the linked images (ideally, only on that page) to display E913 instead of E832.

    This is currently in my base.css but I can’t see why it’s not displaying the icon I’d like for those images (E913):

    .image-overlay .image-overlay-inside:before{content:”\E869″; font-family: ‘entypo-fontello’; font-size: 18px; font-weight: normal; }
    .image-overlay.overlay-type-extern .image-overlay-inside:before{content:”\E913″;}
    .image-overlay.overlay-type-video .image-overlay-inside:before{content:”\E897″;}

    #502203

    Hi,

    I can’t see the CSS applying, could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.

    Thanks,
    Rikard

    #502302

    Log in created.

    Thanks.

    #503299

    Hi,

    Sorry for the late reply, I tried logging in but the details don’t seem to work. Could you check them please?

    Regards,
    Rikard

    • This reply was modified 5 years ago by  Rikard.
    #503354

    Hi,
    Sorry, not sure what happened there.
    I’ve reset the password and tested the login, should be OK now with the same details.
    Thanks.

    #504127

    Hey!

    You can add this to a codeblock element in the page.

    <style type = "text/css">
    .image-overlay.overlay-type-extern .image-overlay-inside::before { content: "\e913" !important; }
    </style>

    Though when I updated your page nothing was changing so I assume you have some sort of caching going on. Try deactivating all of your plugins to see if they are the cause. If the is still not updating then contact your hosting provider to see how to disable server caching.

    Cheers!
    Elliott

    #504168

    Great,
    that code’s worked for me, without deactivating plugins. Don’t seem to have found any caching issue.

    Many thanks!

    #504496

    Hi,

    Great, glad we could help. Please let us know if you should need any more help on the topic.

    Best regards,
    Rikard

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.