MediaWiki talk:Common.css

pretty table

Could we import one? This would make it easier/prettier to create tables, that would also be more standard. If we use wikipedia's table, and apply the colors used in the infobox, this is what we get.

EDIT:Removed bad css

Happypal 13:51, 19 May 2011 (UTC)

---

After studying the tables on the wiki more, I came up with the css that creates this:

	Slime Type	Health
Green Slime	15	8
Blue Slime	25	7

table.terraria {
	margin: 1em 1em 1em 0;
	background: #f9f9f9;
        border: 1px #aaaaaa solid;
        padding: 0.2em;
	-moz-border-radius: .7em;
        -webkit-border-radius: .7em;
}
.terraria th, .terraria td {
	padding: 0.2em;
}
.terraria th {
	background: #E4F0F7;
        color: #063B5E;
	text-align: center;
}
.terraria td {
}
.terraria caption {
	font-weight: bold;
}

I think it would be really beneficial to the wiki if we added this in. It would mean any editor is able to easily create a pretty, standardized, table. Happypal 06:27, 20 May 2011 (UTC)

ul

Why does it float left? It makes it so I can't make bullets center with text without super mega ridiculously complex code. See User:Null/sandbox "The game".--Null^Talk 03:30, 29 August 2011 (UTC)

Anyone? --Null^Talk 22:25, 29 August 2011 (UTC)

Tables default to a left alignment. -- Wynthyst File:Curseicon.png talk 22:34, 29 August 2011 (UTC)

What about bullets? Can we remove float: left from them since float: none doesn't do anything? --Null^Talk 22:43, 29 August 2011 (UTC)

border radius

Is it ok to add border-radius: for support on opera and other browsers? I'm not going to do it because I'm not sure if it will stress the server. (probably not since this page is loaded client-sided) --Null^Talk 23:22, 2 September 2011 (UTC)

Yes. In fact, that's what we should be using instead of the prefixed versions (although it probably can't hurt to keep them). IIRC, -moz-border-radius was introduced when Mozilla was ahead of everyone's game and added preliminary support for it, but now, it's part of the CSS3 standard, and the latest versions of the big 4 (Internet Explorer, Firefox, Opera, Chrome) all support border-radius. --Lunboks 23:32, 2 September 2011 (UTC)

Mostly true. Happy pal told me Firefox 3.6.x doesn't support border radius, as Chrome 5/Safari 5 or under doesn't, but they do support -moz- and -webkit-, so adding all to -moz- and -webkit- would make it work for all except IE (at most IE8)! --Null^Talk 23:37, 2 September 2011 (UTC)

You can add, but not remove the others. -- Wynthyst File:Curseicon.png talk 04:49, 3 September 2011 (UTC)

Fixed - looks great on Opera -- except for the main page D: --Null^Talk 14:32, 3 September 2011 (UTC)

Image rendering

Since we're working with pixel art, it would probably be a good idea to use crisp, nearest-neighbor-interpolated images when zoomed in far, such as on File pages. I think it looks so much better than whatever interpolation mode is used currently. It was meant to be like that for much larger images, where other interpolation modes look less choppy. A way we can change it is by using:

img[src$=".gif"], img[src$=".png"] {
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
}

Also, since transparency is widely used, a simple checker pattern showing transparency should make it much easier to see if an image has transparency using:

.gallerybox .thumb img, .filehistory a img, #file img {
	background: url("http://i.imgur.com/1KOF7.png") repeat;
}

Comparison:

There might be something wrong here, and I wanted to check if we decide to implement this. --Null^Talk 05:41, 8 December 2011 (UTC)

Table ruled rows

Since people are already doing this manually by adding a border style to every single cell, I would like to add the following to the CSS:

.ruledrow td {
    border-top: 1px solid #CCCCCC;
}

That will allow us to replace this:

|- 
| align="center" style="border-top: 1px solid #CCCCCC;" | <b>Mana</b>
| style="border-top: 1px solid #CCCCCC;" | Arcane
| style="border-top: 1px solid #CCCCCC;" align="center" | +20
| style="border-top: 1px solid #CCCCCC;" align="center" | +1
| style="border-top: 1px solid #CCCCCC;" align="center" | +32.25%

With this:

|- class="ruledrow"
| align="center" | <b>Mana</b>
| Arcane
| align="center" | +20
| align="center" | +1
| align="center" | +32.25%

And to apply it to every row, simply change the start of the table from class="terraria" to class="terraria ruledrow". I'm using border-top instead of border-bottom because you'll get an extra border at the edge either way, and at least this way it blends in with the header cell background.

HTML-code

You forget semicolon in the end of:

z-index:-9999

← Alex Great ^talk 04:43, 21 August 2015 (UTC)