FANDOM


  • I barely understand only the very basics of css and was hoping someone can point me in the right direction.

    Since wikia doesn't allow javascript I found a way to hide images using css by making it transparent until clicked on:

    .spoiler img {
       transition: all 0s 9999999s;
        opacity: 0.0;
        filter: alpha(opacity=00);
    } 
     
    .spoiler img:active {
        transition: all 0s; 
        opacity: 1.0;
        filter: alpha(opacity=100);
    

    I would like to adopt this for my character page. Normally the characters that are dead have red frames around their images. I would like that to be hidden until the click on a button. I have had a bit of success but have come across some issues I can't figure out.

    Here is the template that I want to apply the css to. I have three tests of the template being used below it on the same page so that you can see the problem.

    • The first test is just putting the template directly below the button and it mostly works (the area behind the name doesn't change color still)
    • The second test has the template a few spaces below and it doesn't work at all.
    • The third test has the template in a table, which is how I am using it on the Characters page and it doesn't work.

    Here is the css that I am using for this. I know that this is not a very traditional use of css and am still very new to it. I would appreciate any help you can give.

    .spoilerbox { 
           transition: all 0s 9999999s;
           border-radius: 5px;
           background: #653F03;
           padding: 3px; 
           width: 100px; 
           position: relative;
    }
    .spoilerboxname {
        transition: all 0s 9999999s;
        position: absolute; 
        right: 0px; 
        bottom: 0px; 
        font-size: x-small; 
        font-weight: bold; 
        color: white; 
        padding: 0 5px; 
        border-radius: 5px 0;
        background: #653F03;
    }
    .spoilerbutton:active +
    .spoilerbox{
       transition: all 0s; 
       border-radius: 5px;
       padding: 3px; 
       width: 100px; 
       position: relative;
       background:#8b0000;
    }
    .spoilerbutton:active +
    .spoilerboxname {
        transition: all 0s; 
        position: absolute; 
        right: 0px; 
        bottom: 0px; 
        font-size: x-small; 
        font-weight: bold; 
        color: white; 
        padding: 0 5px; 
        border-radius: 5px 0;
        background: #8b0000;
    }
    
      Loading editor
    • Sithkazar wrote: Since wikia doesn't allow javascript [...]

      Wikia does allow JavaScript, if you request it to be enabled on your wiki through Special:Contact/general. After enabling JavaScript you would be able to use a script for hiding spoilers such as SpoilerAlert.

        Loading editor
    • I tried asking last year on another wikia so I could add an interactive graph and it was ignored. I don't know if they were busy or didn't think it was appropriate, but I just linked to the graph on a regular webpage instead.

      I figured they must be pretty strict with that stuff and I don't want to get in trouble. Though the spoileralert doesn't work like I would want this to, it would be a lot easier with javascript.

      Or I could just make two versions of the page, one with spoilers and one without... Its not a pretty solution, but it would work.

        Loading editor
    • Out of curiosity, what wiki was it that got ignored? They should respond to a request to enable JS. Once that is done, adding the script KockaAdmiralac linked to should be quick work.

        Loading editor
    • It was at least a year ago for the Tales of Demons and Gods wikia. They responded once asking if I understood the rules of what was allowed and what wasn't with javascript and I said I did. Then nothing came of it. I'm guessing they were busy and forgot. Or maybe there was something wrong with the graph and it broke the rules? Anyway, here is the graph.

        Loading editor
    • Based on your community's JS pages, I am guessing they just forgot. You could try asking again.

        Loading editor
    • I figured out part of it. I needed to change the "+" selector to a "~" selector. Now both test 1 & 2 are mostly working. Number 3 is still not working. I think it might have something to do with a <div> not working right inside of a table.

      Edit:oops. I know to use <nowiki>, I just goofed :P
      Edit 2: Oh the irony...

        Loading editor
    • I am glad you found a solution. By the way, use nowiki tags if you want to show inline HTML or MediaWiki markup.

        Loading editor
    • So it seems that all my problems are with my selectors. I was able to get the part behind the name to change color on test one and two with the addition of this:

      .spoilerbutton:active ~ .spoilerbox * .spoilerboxname {
         transition: all 0s; 
         background:#8b0000;
      }
      

      Now I just have to find the right selector to do the same with the template inside the table. This has been a fun challenge. I'm updating this post because someday in the future someone else will be hopelessly searching these forums, looking for something similar.

        Loading editor
    • I figured out the problem is that the "~" symbol is a sibling combiner and when the character boxes are put inside the table, they become descendants of that sibling. I wasn't sure how to fix it though.

      I had the question also posted on stackoverflow and found out that two combiners can be combined. Using "~*" does just what I want, it looks at a sibling's descendant.

      .spoilerbutton:active ~ * .spoilerbox {
         transition: all 0s; 
         background:#8b0000;
      }
      .spoilerbutton:active ~ * .spoilerbox * .spoilerboxname {
         transition: all 0s; 
         background:#8b0000;
      }
      
        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