FANDOM


  • I'm thinking about adding some quotes to some pages, but I don't want to make a list. Is there a way to use a slider to show quotes without making them into images?

      Loading editor
    • Yes, if you make use of site CSS. But you will be limited in the number of quotes.

        Loading editor
    • That could work. What do I do and what is the limit?

        Loading editor
    • You would be limited to 4 quotes and it would not work on mobile.

      What you can do is use a regular image slider but have site CSS that hides everything but the description. On a page, you would put something like this:

      <div class="quote_gallery">
      <gallery type="slider">
      DummyImage.png|Title1|linktext=content1
      DummyImage.png|Title2|linktext=content2
      DummyImage.png|Title3|linktext=content3|link=link3
      DummyImage.png|Title4|linktext=content4
      </gallery>
      </div>
      

      Then, in your site CSS, put:

      .quote_gallery .wikiaPhotoGallery-slider-body {
          height: auto;
      }
      .quote_gallery .wikiaPhotoGallery-slider-body img,
      .quote_gallery .wikiaPhotoGallery-slider-body .nav {
          display: none;
      }
        Loading editor
    • Oh. I was hoping for more. I'll just make them into a list. Though, a slider is way cooler looking.

        Loading editor
    • I gave it some more thought an you could accomplish what you want using custom JS. Would you be interested?

        Loading editor
    • I have a hard time with complicated codes.

        Loading editor
    • That is fine. It will take some time but I can make one for you if you want.

        Loading editor
    • I'm hoping for an unlimited amount, but if it can be around 10-15 at least, that would be great. I mainly want to have just enough to get a feel for the character, but to allow there to be enough to show key moments from a character as well. The limit I put also allows for quote from books where the character is a minor character with a funny or powerful line.

        Loading editor
    • Okay. The solution I am thinking of should allow you to put whatever you want and as much as your want. I'll post again when it is ready for testing.

        Loading editor
    • Ok. Thank you.

        Loading editor
    • Okay. I have a working solution. But first, do you know how to add JS to your wiki?

        Loading editor
    • I know how to copy and paste onto the MediaWiki:Wikia.css, if that is what you are asking.

        Loading editor
    • Sort of. But I am not talking about CSS. JS is a different page. Which wiki are you trying to do this on? We can go forward with the other parts but it won't work until we get the JS setup.

      Since you know how to add to your site CSS, go ahead and copy the following example.

      .ListSlider.active {
          height: 100px;
          min-height: 100px;
      }
       
      .ListSlider.active ul,
      .ListSlider.active ol {
          list-style-type: none;
          position: relative;
          margin: 0;
          height: 100%;
          overflow: hidden;
      }
       
      .ListSlider.active li {
          display: block;
          position: absolute;
          margin: 0;
          left: 100%;
          width: 100%;
          height: 100%;
      }
       
      .ListSlider.active .current {
          left: 0;
      }
       
      .ListSlider.active [class*=transition] {
          transition: left 1s linear;
      }
       
      .ListSlider.active .transition-out {
          left: -100%;
      }

      On a test page, you can also create some example page content. What you want to do is create a list (bullet or numbered) with each slide content as a list item. Then place the list in a div tag and give "ListSlider" as a word in the div's class attribute. For example:

      <div class="ListSlider">
      *Slide 1 Content
      *Slide 2 Content
      *Slide 3 Content
      </div>
      

      One thing to note is that, since we are using lists, the content of the slides is limited to whatever you can put in a list item. For example, you cannot put a syntaxhighlight tag (what I used for the example CSS) in a list so you can't put it in the slider. However, you can put something like an image, template call, or, with some care, a div tag.


      Edit:

      One thing I forgot to mention is that, if the JS isn't running (there could be multiple reasons), the slider should appear as a normal list. Using my example above, if the JS isn't running, it should look like:

      • Slide 1 Content
      • Slide 2 Content
      • Slide 3 Content

      This way, if a viewer doesn't have the JS running for some reason, they will still be able to see the quotes as a regular list.

        Loading editor
    • Okay. That works. I'm wanting to use it on the Dark Series Wiki, where quotes from individuals are on individual pages, and quotes from multiple/unknown characters would be on the book pages.

      So, how do I add this to the JS? I don't want to accidentally mess up the entire wiki for one cool feature.

        Loading editor
      1. Using this form, contact Wikia and ask for custom JS to be enabled for your wiki.
      2. Wait until it is enabled.
      3. Copy the contents (omit the very last line; the one that is just "//") in the code box on this page to here and save.
      4. Submit the JS for review using the button in the review status module in the right rail of the page.
      5. Add the following line to this page.
        ListSlider.js
      6. Wait for the JS in step #4 to be approved.
        Loading editor
    • I put in a request. Now, we play the waiting game.

      UPDATE: Custom JS is on, so now I'm waiting on the JS to be approved.

        Loading editor
    • Nice! That was fast. If a decision regarding the JS isn't made by the end of the week, it should almost definitely be made early next week. In the mean time, you can preview what it will look like by using the "Enter test mode" button in the review status module.

        Loading editor
    • It works great in the test. I can't use {{Quote|Content}} in it, but that's not too big of a deal. It just doesn't show up with the quote code, but we can reserve that for single quotes. Just the fact that quotes won't overwhelm people is cool. Though, I don't like the speed in which they go by, or the fact that I don't know how to allow people to chose if they want to go back or forward. It's a great code, otherwise, and I still plan on using it, but if there are any updates to allow for visitors to pick when they want to move through the quotes, can you message me? As for the speed, I'm thinking that is should only go a little slower because it goes by so fast that if the quote is long, it won't be enough time to read it if it is gone in one or two seconds.

        Loading editor
    • Yeah, it seems tables are one of the few things you can't put in a list. Allowing users to pick when and to which slide to move would require a bit more programming. I suggest you consider using CustomSlider from the dev wiki since it can already do that. The one downside I know of at the moment is that you can only have one slider per page with CustomSlider. However, I have a feeling that won't be too much of an issue.


      Edit:

      If you decide to use CustomSlider and need help setting it up, I can help with that as well. However, the page I linked to does contain some basic instructions.

        Loading editor
    • The problem with that is that there are some quotes that I can't put on a character page because multiple people speak, so I planned on putting them in on the book pages, where there are sliders for book covers.

        Loading editor
    • See my edit if you haven't already.

      My understanding is that your book cover sliders are using the gallery tag, correct? That shouldn't matter. CustomSlider is limited to 1 CustomSlider slider per page. So each page can have 1 CustomSlider slider and as many gallery sliders as you want.

        Loading editor
    • Oh, I see. Yes, I will need the link and an idea of how to add it to the wiki. I have a page set up so that I can test the feature on (a sandbox page) so I can see how it works. Adding a CustomSlider might come in handy as well. Thanks for all the help.

        Loading editor
    • I am not sure from your reply if you need any help at the moment. Regardless, if an when you do, feel free to ask.

        Loading editor
    • Well, I need the link to the CustomSlider and an idea of any other steps I need to do, but we can wait until the ListSlider has been approved.

        Loading editor
    • The link in #21 isn't working for you?

        Loading editor
    • I didn't see it was a link. LOL

        Loading editor
    • Okay, so I tried using the wiki code for the menu with right buttons, and it isn't working. It isn't sliding text through as a quote or anything. It's just showing a list. I'm not sure what to do to fix it.

      Quote Slider Test

        Loading editor
    • I am guessing you need to have slide content before it will work. Right now, all you have are the menu buttons.

        Loading editor
    • Okay, I did some tinkering and it looks like the CSS is also important. So you are going to have to import the CSS as well.

        Loading editor
    • I did. I figured that I should do every step to make sure it works, and I copied the code and put it on my wiki. I didn't see where to put text slides like what I'm wanting. If I need to have image slides, I might as well use the regular gallery slider.

        Loading editor
    • The content of the "image slides" don't have to be images. The authors just call them that because the CSS that gets applied is supposed to help with image display. As a matter of fact, I did some testing and the "image slides" are the only ones that display nicely. If you don't have that class, everything gets... weird. It seems the script documentation is a bit outdated since providing a value for the height other than "auto" seems to work fine (contrary to what the documentation claims).

        Loading editor
    • Okay, so instead of putting an image file, could I put text there instead?

        Loading editor
    • You said you imported the CSS? I am not seeing it. There are two things you need to import: JS and CSS. The two are not the same. You have clearly imported the JS but I don't see where you imported the CSS.

        Loading editor
    • Yes.

        Loading editor
    • I put it here.

        Loading editor
    • I see now. I guess I should have been more specific. You can copy-paste like that to import the stylesheet to your wiki. However, what I meant was import the stylesheet into your site CSS (which may optionally include importing the stylesheet to your wiki). Wikia checks only a few CSS pages and applies them according to their intended purpose. Currently, the ones of relevance are MediaWiki:Wikia.css and MediaWiki:Common.css. Given FANDOM's current configuration, the two serve the same purpose so CSS can go on either one. To import CSS into your site CSS, you need to use CSS's @import rule. When doing this, you can import other stylesheets both from your own wiki and from external sites/wikis.

      From Your Wiki

      You have two options when importing from your own wiki.

      @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:CustomSlider.css");
      @import url("/MediaWiki:CustomSlider.css?ctype=text/css&action=raw");

      What is the difference? Using the load.php version allows you to combine multiple requests into a single request. For example:

      @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:CustomSlider.css|MediaWiki:ListSlider.css|MediaWiki:AnotherCSS.css|MediaWiki:YetAnotherCSS.css");

      This can decrease the time it takes for the page to load. The downside is that it makes it harder to troubleshoot issues. Regardless of which import method you use, keeping your own copy of the CSS means you take on the responsibility of maintaining it. However, this also means that you can make whatever changes you want.

      From Other wikis/Sites

      Importing directly from the dev wiki means you don't have to take responsibility for maintaining the CSS. However, it also means you can't make any changes. If you choose to take this route, you can import the CSS like this.

      @import url("/w:c:dev:MediaWiki:CustomSlider.css?ctype=text/css&action=raw");

      Whichever import method you use, @import must be placed at the top of the CSS page. The only things allowed above @import are blank lines, comments, and other @import statements. If there is anything else above an @import statement, the import will not be performed.

        Loading editor
    • I don't think I understand how to actually import this. Where do I put the url?

        Loading editor
    • At the top of your site CSS.

        Loading editor
    • It works now. I just have to get the look just right.

        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
Community content is available under CC-BY-SA unless otherwise noted.