FANDOM


  • Hello!

    I have a CSS class that can change an image on mouseover:

    .face { 
      background: url('https://vignette.wikia.nocookie.net/street-fighter-sprites/images/8/84/Adon-SFA2-Heavy-Punch.gif/revision/latest?cb=20171224003921') no-repeat; 
      width: 132px;
      height:107px;
    } 
    .face:hover { 
      background: url('https://vignette.wikia.nocookie.net/street-fighter-sprites/images/a/ab/Adon-SFA2-Heavy-Punch-Hitbox.gif/revision/latest?cb=20171230004239') no-repeat; 
    }
    

    It works perfectly, but I would like to do this with a lot of other images, not just these two. Is there a template I can create so I can choose what images can be used and also change the width/height instead of the example above?

    I do have another css class that can change image on mouseover that uses a template, but it doesn't work very well, especially when the backgrounds are transparent as parts of the hover image can be seen behind the image on top.

    Any help would be great. Thanks.

    Edit: Or as an alternative, is it possible to create css mediawiki pages? In case I had to create many of these classes, it would be easier to organize them in different .css pages

      Loading editor
    • Yes, as an admin, you can create additional CSS pages in the MediaWiki namespace. However, it must be included using @import.

      Would it be possible for you to link to your template?

      Did you want to change the width/height to adjust for each image or adjust for where the image is used? If the latter, consider using the CSS property background-size. If the former, you can just do that in the style-sheet.

      Lastly, chances are you will need to write CSS for each image. However, if you want to be able to use all combinations of your images, you can do something like the following.

      .face-Adon-SFA2-Heavy-Punch,
      .face-hover-Adon-SFA2-Heavy-Punch:hover { 
        background-image: url('https://vignette.wikia.nocookie.net/street-fighter-sprites/images/8/84/Adon-SFA2-Heavy-Punch.gif');
        background-repeat: no-repeat;
      }
       
      .face-Adon-SFA2-Heavy-Punch-Hitbox,
      .face-hover-Adon-SFA2-Heavy-Punch-Hitbox:hover { 
        background-image: url('https://vignette.wikia.nocookie.net/street-fighter-sprites/images/a/ab/Adon-SFA2-Heavy-Punch-Hitbox.gif');
        background-repeat: no-repeat;
      }
        Loading editor
    • Hi Andrewds, thanks so much for your reply!

      I've tried adding my custom MedaiWiki:.css page in the @import section of Wikia.css, but I don't see the css taking effect. The code on Wikia.css is:

      @import url("/load.php?mode=articles&articles=MediaWiki:Common.css|MediaWiki:Adon.css&only=styles");
      


      I got this image hover code template called ButtonHover from a FANDOM user, can't remember who though. The above template works with the following CSS:

      .fadeout img:hover {
      	opacity:0;
      }
      .fadeout img:active {
      	opacity:0;
      }
      body:not(.editor) .fadeout-container.fadeout-hide-bottom > :nth-child(2) {
      	visibility: hidden; /* the 'body:not(.editor)' is used to prevent hiding the image in editing mode where it is not displayed properly */
      }
      

      It works ok but both images/gifs have to be exactly the same dimensions and animations/pixels frame for frame, which wouldn't work with what I'm trying to achieve.

      Regarding your last question, I would be adjusting width and height for each image, so I would need to do css for each individual image, but that's fine, I'm ok with that.

      Thank you.

        Loading editor
    • RoIento
      RoIento removed this reply because:
      created by mistake
      21:35, December 30, 2017
      This reply has been removed
    • Well, for the importing issue, it needs to be done on MediaWiki:Common.css. If that isn't enough, you can additionally try the following instead of what you currently have.

      @import "MediaWiki:Adon.css?ctype=text/css&action=raw";
        Loading editor
    • I think it works now! Thanks for all your help :) have a good day!

        Loading editor
    • I took a look at your template. Just to verify, what you are trying to do now is separate from fixing that template, correct?

        Loading editor
    • Yeah it's separate :) I don't believe I have any issues anymore, as I don't need to use that template. Thank you again!

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message