Community Central

Admin Forum:Skins and changing how headings look


Admin Forum:Skins and changing how headings look

19,673pages on
this wiki
Add New Page
Talk0 Share

This Forum has been archived

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.--GodPray  02:47,9/11/2011 
Headings should go like this:
.mw-headline {
<your style goes here>

Cheers! TK999 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
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:
.h1 {
.h2 {

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. czechout@fandom    fly tardis  <span style="">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, and the css is at
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:
h1 > {

Further, if you want to make all h elements of a certain type—like all h1s—look alike, including those found in the user masthead and similar locations, you can use this:

h1 { 

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. TK999 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 {

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 {

The reason you might want to use <pre>.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

See, there are tons of different uses for h1. There's

.profile-hover wikia-tooltip h1
.WikiaRail .module .WikiaRail #RIGHT_SKYSCRAPER h1
.WikiaFooter h1
.ChatModule h1
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.

czechout@fandom    fly tardis  <span style="">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. TK99915:49, September 12, 2011
Yep, absolutely. Take instances of ".mw-headline h1" as shorthand for the proper syntax you've amended, above:
h1 >
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 >" approach) or defining all instances of h1 (the "h1 method"), then changing the individual instances of h1, as needed. I'd recommend the "h1 >" 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. czechout@fandom    fly tardis  <span style="">14:04:10 Mon 12 Sep 2011 
Thanks guys, I got it working! Vito homid galliard 05:11, September 16, 2011 (UTC)

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.