FANDOM


  • I'm relatively new to the whole 'Wikia' thing, I've had a look around and tried different possible solutions to this, but nothing really works. Basically, I copied a template from the Star Wars Wikia for use on my own personal Wikia, however on their version of the template, the text is very small and compact, yet on mine it is large and takes up too much space. 

    Here's an example of theirs:

    http://starwars.wikia.com/wiki/Battle_of_Yavin (notice the small text in the infobox)

    Now there's mine:

    http://thearchives.wikia.com/wiki/Battle_of_ex (notice the large text)

    I copied the source completely, but I don't understand why mine is so different... Sorry if it's an obvious answer but I'm really puzzled. Thanks.

      Loading editor
    • Copying the template is not enough sometimes. In this case there are also a bunch of CSS rules that govern that template. This is the one that's responsible for the font-size:

      .infobox {
          border-collapse: collapse;
          font-size: 0.8em;
          line-height: 1.5;
      }

      Try to add this rule to your MediaWiki:Wikia.css!

      See also:

      Help:JavaScript_and_CSS_Cheatsheet

      W3Schools CSS Tutorial

        Loading editor
    • Thanks! :)

        Loading editor
    • Creating a template through CSS is the way to go, because once you've figured out the basic style of your infoboxes, you can just "stamp out" infobox after infobox like an assembly line — and they all have a precisely similar visual style.

      If you create the infobox solely through inline CSS — i.e. the bit you can cut and paste by going to someone's template:whatever file — then you run the risk of gradual design decay. Edtior John will come in and tweak the left margin on one infobox but not on others. Editor Sally will come bay and tweak the shade of green on one infobox but not on others. And before you know it, your template:infoboxbook is looking radically different (or worse, annoyingly almost-but-not-quite the same") to template:infoboxmagazine.

      If you want to take some time to look at how CSS in MediaWIki:Common.css can be used to create a standard look for infoboxes, go to tardis:MediaWiki:Common.css and search for the phrase "Main style for all infoboxes". Then compare the things that are declared there to the things you see in, say, tardis:template:Infobox Person. If you stare at it for a while, you'll be able to see what's creating the text styling for individual items, what's creating the blue background for subheads, and so on.

      The way I've laid out the CSS is pretty logical. As you go down the list, you get a gradually more specific declaration. So, first there's the external shell for the box, then there's the broad style of the interior, then there's the style of the various subheads, then the style of what happens to the subheads on hover, and so on.

      Before you tackle infobox design, though, you have to get your mind around the HTML way of creating tables. Tons of tutorials on that. But until you understand the difference between <tr>, <td>, <th>, and <tbody>, you'll be at a serious disadvantage in understanding how to style those elements.

      This stuff might seem hard, but it's not. You just have to learn it in the proper order. Figure out what a tr is, and you'll understand better how to style it. If all you do is copy and paste from someone else's work, you'll never truly get it, and therefore you'll never have stylistic control over your wiki.

      If I can recommend a series of steps to you:

      Better still, cut and paste the Tardis css into your own Common.css, and the Tardis Infobox into your template namespace. Then play around with each line of the css. Make the background color red. See what part of the table that "redness" affects. Change the text color or a line to yellow. And so on. Before you know it, you'll have figured out everything.

        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