FANDOM


  • Hey, I was hoping you could check out something I'm testing. I wanted add icons to {{CardHover}} and {{KeywordHover}}, to give a visual indicator for what's a hover-popup instead of a normal link.

    I'm adding the icons in CSS, so to see them you would need to test the following in your common.css:

    .hoverLink.kwHover::after {
        content:'';
        display: inline-block;
        height: 12px;
        width: 12px;
        margin: 0 0 .25em -.2em;
        background: transparent url(https://slot1-images.wikia.nocookie.net/__cb7020017020012/common/skins/shared/images/sprite.png) -818px 0/auto 64px no-repeat;
    }
     
    .hoverLink.cdHover::before {
        content:'';
        display: inline-block;
        height: 1em;
        width: 20px;
        margin: 0 .1em -0.1em 0;
        background: transparent url(https://slot1-images.wikia.nocookie.net/__cb7020017020012/common/skins/shared/images/sprite.png) -1054px -81px/auto no-repeat;
    }
    

    These are just using a wikia sprite image that contains a few of their wiki icons, but we could customize them to something else if we wanted (something more 'Eternal'-y maybe).

    I think these look pretty good, but I'm hoping to get a second opinion before pushing something site-wide that affects a ton of existing pages. For an extreme example with a lot of hovers currently, check out the Icaria page.

    I added icons through CSS, instead of adding them directly with [[File:...etc]], because the CSS would be stripped away on the mobile wiki skin where I didn't want them to show. Ideally the hover content would only show on the desktop skin anyway. Currently it shows in-line on mobile and breaks the page flow, so figuring out how to hide the hover content on mobile is another project :P

    If you get the chance to try it, let me know what you think. If it looks fine I'll add it site-wide. Thanks!

      Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.