FANDOM


  • Screenshot 2020-05-19 at 9.59.32 AM
    (1) I'm trying to customise the rail modules, and I'm pretty happy so far. However I noticed that the Spotify rail module is full width, and hence if I add the padding on the left like everything else, it would end up spilling over on the right. Is there a way to specifically change the left padding to 0 for this particular module? It is a RailModule template. The code seems to apply for everything in the rails 

    https://towerofgod-anime.fandom.com/wiki/MediaWiki:Wikia.css

    https://towerofgod-anime.fandom.com/wiki/Template:RailModule

    Custom code for rail module taken from 

    https://steven-universe.fandom.com/wiki/MediaWiki:Common.css (WikiaRail)

    (am I using the correct font and settings for the title? I'm trying to mimic the existing titles for other rail modules.)



    (2) Seeing this I would like the box template to have a similar look as the railmodules, with the symbol centered and repeated as background. 

    https://towerofgod-anime.fandom.com/wiki/Template:Box

    https://towerofgod-anime.fandom.com/wiki/MediaWiki:Wikia.css (bgbox) - copied bg image code from WikiaRail 

    But at one point, the most it managed to give me was an off centered image, and now it doesn't show up lol.

    With the original code, it works occasionally with other tiled images, so I'm not sure what's the case here. 

    Code from here 

    https://steven-universe.fandom.com/wiki/Template:Home 

    https://steven-universe.fandom.com/wiki/MediaWiki:Common.css (bg revo)



    (3) 

    Screenshot 2020-05-19 at 2.24.27 AM
    I've imported some refpopup js, but I've noticed that for some reason the background is white, despite the theme is dark.  

    Example: https://towerofgod-anime.fandom.com/wiki/Twenty-Fifth_Bam

    Here is the relevant page from dev wiki. They did say they will take the colour scheme from the Theme Designer but I'm not sure why this is not the case. 

    https://dev.fandom.com/wiki/ReferencePopups 

    Most other sites I've copied from had semitransparent boxes with the same content colour as the wiki background, and border colour of the headers

    https://towerofgod.fandom.com/wiki/Twenty-Fifth_Baam

    https://attackontitan.fandom.com/wiki/Eren_Jaeger_(Anime)

    Relevant pages for my site

    https://towerofgod-anime.fandom.com/wiki/MediaWiki:ImportJS (

    dev:ReferencePopups/code.js
    dev:ReferencePopups/custom.js
    

    I tried copying the customised css into the Wikia css, but I'm not sure what I need to change to get it to show up? 

    https://dev.fandom.com/wiki/MediaWiki:ReferencePopups/demo.css

    https://towerofgod-anime.fandom.com/wiki/MediaWiki:Wikia.css (refpopups)



    Thank you in advance 

      Loading editor
    • #1. You can just change the width of the widget so that it doesn't spill outside the module. This'll do:
      iframe[data-wikia-widget="spotify"] {
        width: 100%;
      }
      The Spotify module certainly can use some more customization for the title. It currently doesn't look quite like the other modules, so it's rather visually jarring. I'll explain what can be done about it in a bit.

      #2. .bgbox is using background-image to specify both image URL and background position (scroll; it's already set with default, though, so you don't need it) and attachment (center). However, background-image works only with adding an image URL. For the other both, the properties are background-attachment and background-position respectively. However, you can just use the background shorthand, like so:

      .bgbox {
        background: url("https://files.catbox.moe/kxt25g.png") center;
      }
      Note that it doesn't need !important. !important is used for forcing an element to use a certain style over the preexisting styles in certain cases; which isn't needed here. However, you may also want to keep in mind that !important isn't considered an optimal practice. It's generally recommended to increase the specificity instead when the need of !important arises.
      #3. The reason behind the reference popups not making use of the ThemeDesigner properties is due to a CSS styling in Wikia.css. You need to remove the following so that the ThemeDesigner properties can be used:
      .refpopups-box {
          background: none repeat scroll 0 0 #fff !important;
          border-color: #961414 !important;
          color: #3a3a3a !important;
          font-size: 13px !important;
      }
        Loading editor
    • CrazyForMyself wrote:
      #1. You can just change the width of the widget so that it doesn't spill outside the module. This'll do:
      iframe[data-wikia-widget="spotify"] {
        width: 100%;
      }
      The Spotify module certainly can use some more customization for the title. It currently doesn't look quite like the other modules, so it's rather visually jarring. I'll explain what can be done about it in a bit.

      #2. .bgbox is using background-image to specify both image URL and background position (scroll; it's already set with default, though, so you don't need it) and attachment (center). However, background-image works only with adding an image URL. For the other both, the properties are background-attachment and background-position respectively. However, you can just use the background shorthand, like so:

      .bgbox {
        background: url("https://files.catbox.moe/kxt25g.png") center;
      }
      Note that it doesn't need !important. !important is used for forcing an element to use a certain style over the preexisting styles in certain cases; which isn't needed here. However, you may also want to keep in mind that !important isn't considered an optimal practice. It's generally recommended to increase the specificity instead when the need of !important arises.
       #3. The reason behind the reference popups not making use of the ThemeDesigner properties is due to a CSS styling in Wikia.css. You need to remove the following so that the ThemeDesigner properties can be used:
      .refpopups-box {
          background: none repeat scroll 0 0 #fff !important;
          border-color: #961414 !important;
          color: #3a3a3a !important;
          font-size: 13px !important;
      }

      I see, thanks so much! Really appreciate the explanations. Most of them worked, the Spotify one seemingly didn't even after the rest loaded, so I resorted to just defining the width. 

      Yea I wasn't sure what's going on with the Spotify module title haha, don't think it's even the right font. I managed to change the line thickness and colour as "article-tabs-bottomline" under css, but that's about it. Will be grateful for pointers! Thank you 

        Loading editor
    • You're welcome! :)

      Haha, yeah, it can be tricky to match with the other styles. Here's how I'd approach this. Use this on the template:
      <div class="spotify-headline">[[File:Spotify.png|25px|link=]] Opening & Ending Songs</div>
      
      <spotify uri="spotify:playlist:3zl7n4ftz5PlOOtN7sEvDt" height=285 width=280/>
      And then use following CSS to customize it:
      .spotify-headline {
        margin-bottom: 16px;
        border-bottom: 1px solid #3f4359;
        padding: 0 0 4px 2px;
        font-size: 16px;
        font-weight: bold;
      }
      .spotify-headline img {
        vertical-align: middle;
      }
      This should replicate the headlines of the other modules well enough!
        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.