Tagged: CSS, icon, image overlay, rollover
-
AuthorPosts
-
September 9, 2015 at 6:27 pm #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-121206I’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.
September 11, 2015 at 5:21 am #501392Hi 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,
RikardSeptember 11, 2015 at 1:13 pm #501597Hi, 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″;}September 13, 2015 at 7:19 am #502203Hi,
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,
RikardSeptember 13, 2015 at 1:38 pm #502302Log in created.
Thanks.
September 15, 2015 at 12:56 pm #503299Hi,
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 9 years, 2 months ago by Rikard.
September 15, 2015 at 2:20 pm #503354Hi,
Sorry, not sure what happened there.
I’ve reset the password and tested the login, should be OK now with the same details.
Thanks.September 16, 2015 at 2:32 pm #504127Hey!
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!
ElliottSeptember 16, 2015 at 3:12 pm #504168Great,
that code’s worked for me, without deactivating plugins. Don’t seem to have found any caching issue.Many thanks!
September 17, 2015 at 5:48 am #504496 -
AuthorPosts
- You must be logged in to reply to this topic.