FANDOM


  • I have a css file I added locally under MediaWiki:RightMenu.css

    I want to only apply to a template, but the change does not take affect.

    importArticles({
        type: "text/css",
        articles: [
            "MediaWiki:RightMenu.css",
        ]
    });
    <div class="box">
    <div class="top">
    [[File:{{{top-image}}}]]
    <span class="label">
    {{{top-label}}}
    </span>
    </div>
    <div class="bottom">
    [[File:{{{bottom-image}}}]]
    <span class="label">
    {{{bottom-label}}}
    </span>
    </div>
    </div>
    

    Am I misunderstanding the use of ImportArticle? I have also tried using

    @import "MediaWiki:RightMenu.css"
    

    as the documentation also suggested, but that had no effect either.

      Loading editor
    • Hello, you need to put the following into the very top of your wiki's MediaWiki:Wikia.css (you should remove the extra stuff that isn't CSS):

      @import url('/load.php?articles=MediaWiki:RightMenu.css&only=styles&mode=articles');
      

      Then, the template only needs the wikitext - it doesn't need the importArticles. importArticles is only for JavaScript, and isn't necessary here.

        Loading editor
    • Will this apply the CSS onto all articles?

        Loading editor
    • Echoing the same question, will this apply to all pages or is there a way to apply only to the template? Same with javascripts.

        Loading editor
    • You of course can apply CSS or JS to specific templates, but seeing what you are trying to do will make it far easier to help. Please give a link to MediaWiki:RightMenu.css in the least.

        Loading editor
    • If you want to apply it to a specific template, you need some way to identify the template. Typically, this is done using a class. For example:

      <div class="myclass">
      template stuff
      </div>
      

      Then your CSS would look something like:

      .myclass rest-of-selector {
          property: value;
      }

      Or, if you are using a portable infobox template:

      <infobox type="myclass">
      </infobox>
      

      Then your CSS would look something like:

      .portable-infobox.type-myclass rest-of-selector {
          property: value;
      }
        Loading editor
    • @Fandyllic

      Here is RightMenu.css

      .box {
        overflow: hidden;
        display: flex;
      }
       
      .box div {
        display: relative;
        width: 100%;
        height: 0;
        padding-top: 100%;
        flex-shrink:0;
        transform: skew(-45deg) translateX(-50%);
        overflow: hidden;
        border-top: .25em black solid;
        border-right: .25em black solid;
      }
       
      .box span {
        width: 100%;
        height: auto;
        position: absolute;
        transform-origin: center;
        color: black;
        font-family: Abel;
        font-weight: bold;
        font-size: 125%;
        transform: skew(45deg);
        text-align: center;
      }
       
      .box .top img {
        top: -20%;
        left: 40%;
      }
       
      .box .top span {
        top: 0;
        left: 0;
      }
       
      .box .bottom {
        border-left: .25em black solid;
      }
       
      .box .bottom img {
        top: 0;
        right: -35%;
      }
       
      .box .bottom span {
        bottom: 0;
        right: 0;
      }
       
      .box img {
        transform: skew(45deg);
        position: absolute;
        width: 160%;
        height: auto;
      }
       
      .box div:hover span {
        color: white;
      }
       
      .box div:hover img {
        filter: brightness(0);
      }
      

      @Andrewds1021 For CSS, that seems excessive since you're still applying the CSS to every page, but otherwise I agree that seems to be the way to go. However, for javascript, I'm surprised there's no way to specify which page to apply. I could see situations where you wouldn't want certain scripts to run all the time.

        Loading editor
    • Both CSS and JS can be "applied to specific pages". I put that last part in quotes because MediaWiki (least how Wikia has configured it) doesn't actually let you do that. What you do is write your CSS/JS so that it has no effect on pages other than the target page; but it is still loaded for every page.

      If you are using the template on only one page, I am not sure I see what the purpose of having the template is. Generally, you use templates so that you can place the same content and/or format similar content in an identical manner on multiple pages. The only common exception I am aware of is main page content. A lot of wikis use one-use templates to simplify editing the main page.

        Loading editor
    • Not sure why you can't give us a link.

        Loading editor
    • Schen13#7
      for javascript, I'm surprised there's no way to specify which page to apply. I could see situations where you wouldn't want certain scripts to run all the time.

      usually, scripts works when they have something to work with, otherwise they just stops. script authors are not insane, they will not create scripts that will work for 100% of the time, consuming your cpu for nothing.

      if you want to create your own script/style, i'd suggest to read JavaScript_Cookbook and CSS_Cookbook.

        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.