Admin Forum:Skins and changing how headings look

Forums: Admin Central Index → Technical Help → Skins and changing how headings look Wikia's forums are a place for the community to help other members. To contact staff directly or to report bugs, please use Special:Contact.

I would like to change how different levels of headings look on my wiki. This seems like something that should be easy to do, probably involving css, but I can't find any info on how to do it. Also, I'm not sure what skin my wiki is using, how do I check this? Vito homid galliard 02:44, September 11, 2011 (UTC)


 * Headings can be changed through some css, some wikis use their own templated headings though. Youe wiki is using the Wikia skin, there is only one skin a wiki can use. Personally you can use Monobook though.--

Headings should go like this:

Cheers! 09:19, September 11, 2011 (UTC)


 * Cool. So does that go in common.css or wikia.css?  And what level heading will that modify, or do I need to do h1{stuff} h2{stuff} inside the .mw-headline braces?

Vito homid galliard 09:24, September 11, 2011 (UTC) Well the .mw-headline element is just for sectional headers, as I understand it. And if that's all you want to change, then you would just go: .mw-headline .h1 through to .mw-headline h6 and there ya go. But that would mean you're changing headlines only as they appear wherever mw-headline applies. Which isn't everwhere .h1 - .h6 gets used. If on the other hand you want to just define the .h1 through .h6 directly, you'd do:

If you take this second route, however, it means that you may have to individually style some instances of h1 - h6 where your standard isn't working. That said, if you take the first approach, you'd have to style some instances where you do want your main h1 - h6 styling to apply. It's a wash, really, in terms of work, but I think it's better to start with a universal standard and then change only where needed.

And, again, it's up to you where you put it. If you put it in common, that means that the styling will apply to monobook as well. This can save you some time if you're trying to administer your wiki in both skins. However, it does take a little longer for changes in common.css to filter through to actual display in the wikia skin, for reasons not particularly well understood. So if you put it in wikia.css, you'll get a snappier changeover to modifications, but the price is maintaining two separate headline styles. If you're going to totally ignore monobook development on your wiki, I'd say you should definitely put it in wikia.css. 18:04:16 Sun 11 Sep 2011


 * Thanks, that helps a lot! From what I can tell, the mw-headline tag is only useful for redefining headlines of all levels, or am missing something? It looks like I can just use .h1 through .h6 to customize the different headline levels.  My goal, btw, is to change how =HEADING=, ==Heading==, etc. are displayed.  My wiki is darkeclipse.wikia.com, and the css is at http://darkeclipse.wikia.com/wiki/MediaWiki:Wikia.css

Vito homid galliard 18:44, September 11, 2011 (UTC)
 * Let me intervene: it's the headings that contain the span tags, not reversed. Therefore, if you wish to restrict the style to elements of a certain style, you'll need this:

Further, if you want to make all h elements of a certain type&mdash;like all h1s&mdash;look alike, including those found in the user masthead and similar locations, you can use this: I, however, do not recommend this, as it can cause unwanted changes to headings elsewhere. You can, of course, restrict this, but I would need more information to find that if you were to choose this way. 13:18, September 12, 2011 (UTC)

[Note: this message is coming after a bit of an edit conflict, where I see TK are struggling to say the same thing. Sorry if this text doesn't quite flow from the OP's last post as originally intended.]

Indeed, you should consider TK's caution here. These are two different approaches, each with their strengths and weaknesses. I'll explain as I go on, but first a bit of a retraction from my last post:

Sorry, I was typing a bit too quickly yesterday. There's no period before the h1. So it's: h1 { } h2 { } Apologies for that. And there's nothing wrong with using .mw-headline { styling } What that will do is style all your headlines at once, anywhere that .mw-headline is valid, with every level of headline. So if you just did the above command, you'd style all six headline levels within the main body of articles at once, accepting whatever defaults pre-existed on the wiki. If you wanted to define the specific levels of .mw-headline — perhaps because you wanted to be in control of the precise size of hte font at each level, you'd just add a bit afterwards, like: .mw-headline h1 { styling }

The reason you might want to use .mw-headline h1 is because you want to tightly define just the sectional headings within the body of a normal article. (There are a couple of other places where .mw-headline is used, but the article body is the main one.) It is a much more precise control than just using h1

See, there are tons of different uses for h1. There's .profile-hover wikia-tooltip h1 and .WikiaRail .module .WikiaRail #RIGHT_SKYSCRAPER h1 and .WikiaFooter h1 and .ChatModule h1 and so on. . . If you choose to define only .mw-headline h1, you'll not be affecting any of these other varieties of h1. The reason I chose to define the headlines broadly at w:c:tardis is because I want to start from a position of consistency across the site, and then "walk back" the individual instances that don't look quite right. This has saved me time because most of my specific instances of h2 "fit" right out of the box. And there are almost as many different kinds of h2 as there are h1. It's only the occasional h1 that I have to change. And the only reason this is true on my wiki is because my h1 is in a completely different font than h2-h6.

So, for my design ethic, I style broadly and then refine where necessary. This approach is not at all the "right" one. On the narrow question of how you accomplish your stated goals, styling ".mw-headline h1" will achieve the same results as styling "h1". It's just that styling "h1" does a lot more. Of course, if your headlines are all in the same font, font weight and font-style, the truth is you probably won't perceive a difference between styling "h1" and ".mw-headline h1". It becomes immediately apparent if you've styled h1 radically differently, in order to make the titles of articles appear clearly different to the section titles. 13:41:51 Mon 12 Sep 2011
 * (Correction) Styling like ".mw-headline h1" will not do anything, because it1s the h1 that contains the element and not vice-a-versa.15:49, September 12, 2011
 * Yep, absolutely. Take instances of ".mw-headline h1" as shorthand for the proper syntax you've amended, above: h1 > span.mw-headline Sorry for the confusion. Again, you have the option of either going for the tight control of narrowly defining just the headlines as they appear in the body of articles (the "h1 > span.mw-headline" approach) or defining all instances of h1 (the "h1 method"), then changing the individual instances of h1, as needed.  I'd recommend the "h1 > span.mw-headline" approach if your h1 is simply a larger version of your h2.  But if your h1 is radically different from your h2, you should consider the h1 method.  14:04:10 Mon 12 Sep 2011
 * Thanks guys, I got it working! Vito homid galliard 05:11, September 16, 2011 (UTC)