MediaWiki talk:Common.css

Only IE6- doesn't provide support for transparent PNGs. I've heard that Microsoft is going to force everyone to upgrade to IE7 (not a good idea)... --Kakurady 20:35, 2 February 2008 (PST)

Request Edit

Add

[Replace me with a newline]
table.mabitable caption,
table.prettytable caption,
table.roundtable caption,
table.imagetable caption {
    margin-left: inherit;
    margin-right: inherit;
    font-size: 116%;
    font-weight: bold;
}

Under

table.mabitable tr.image td, table.mabitable td.image,
table.prettytable tr.image td, table.prettytable td.image,
table.roundtable tr.image td, table.roundtable td.image,
table.imagetable td, table.imagetable th {
    color: #fff;
    padding: 5px;
    background-color: #333;
}
table.mabitable tr.image td, table.mabitable td.image,
table.imagetable td, table.imagetable th {
    background-color: #000;
}

table.roundtable th, table.roundtable td {
    border-radius: 5px;
    -moz-border-radius: 5px;
}

~kotarou3 ^TALK_CONTRIBS 06:22, 22 September 2010 (UTC)

Done. Curiosity : What's this going to be used for? --κєνıи _{(»тαıĸ«)} 06:35, 22 September 2010 (UTC)

Quest template :D ~kotarou3 ^TALK_CONTRIBS 07:09, 22 September 2010 (UTC)

roundtable class

For some reason, the tables only seem to have a radius of 2px. Is it just me? ~kotarou3 ^TALK_CONTRIBS 13:13, 23 September 2010 (UTC)

Another Edit (cuz of mediawiki update...)

Change

table.mabitable,
table.prettytable,
table.roundtable,
table.imagetable,
table.mabitable table,
table.prettytable table,
table.roundtable table,
table.imagetable table {
    text-align: center;
    border-collapse: collapse;
}

to

table.mabitable,
table.prettytable,
table.roundtable,
table.imagetable,
table.mabitable table,
table.prettytable table,
table.roundtable table,
table.imagetable table {
    text-align: center;
    border-collapse: collapse;
    background-color: #fff;
}

,

table.roundtable th, table.roundtable td {
    border-radius: 5px;
    -moz-border-radius: 5px;
}

to

table.roundtable th, table.roundtable td {
    border-radius: 8px;
    -moz-border-radius: 8px;
}

and

table.center { margin: 0em auto; }
div.center { text-align: center; }

to

.center, .center * {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

(And can I be put back into the minion group now D:)~◕Д◕ ^TALK_CONTRIBS 19:57, 23 October 2010 (PDT)

Bump :o ~◕Д◕ ^TALK_CONTRIBS 11:26, 24 October 2010 (PDT)

Bump? ~◕Д◕ ^TALK_CONTRIBS 18:52, 25 October 2010 (PDT)

Bumpity bump bump ~◕Д◕ ^TALK_CONTRIBS 23:31, 30 October 2010 (PDT)

These updates fix the vector skin also :o ~◕Д◕ ^TALK_CONTRIBS 23:42, 30 October 2010 (PDT)

Just one problem, you forgot the closing brace in

.center, .center * {
    margin-left: auto;
    margin-right: auto;
    text-align: center;

Xp ~◕Д◕ ^TALK_CONTRIBS 12:26, 31 October 2010 (PDT)

Hmm... Okay. One more fix:
Add this to the start of the page

.center, .center * { width: auto; }

And we should have those tables working again :D ~◕Д◕ ^TALK_CONTRIBS 16:51, 3 November 2010 (PDT)

Bump... (Move me into the minion group so I don't have to annoy you peeps :U) ~◕Д◕ ^TALK_CONTRIBS 20:28, 6 November 2010 (PDT)

Changing admin rights isn't working, apparently. And where exactly do you want that line? I tried the very top but it screws up the entire page's formatting. --- Angevon (Talk) 07:30, 7 November 2010 (PST)

Above all this

/* Standard Navigationsleisten, aka box hiding thingy from .de.  Documentation at [[Wikipedia:NavFrame]]. */
 
div.Boxmerge,
div.NavFrame {
        margin: 0px;
        padding: 4px;
        border: 1px solid #aaa;
        text-align: center;
        border-collapse: collapse;
        font-size: 95%;
}

I tested it and it works... ~◕Д◕ ^TALK_CONTRIBS 10:12, 7 November 2010 (PST)

Can you make a new table type called Black Imagetable which is identical to a normal imagetable in every way excluding the icon area being a light shade of gray? This would be used on gallery pages such as this one or for items that only come in black and cannot be dyed.

Two more things. First, another blackimagetable but one with all squares as gray, and a navframe whose border only goes around the blue rectangle with the text and hide/show and not over the NavContent.

tell me how to code it & I'll do it =v

For the table, I may be wrong because I can't test this anywhere, but replace what's in the left side with what's in the right.

table.mabitable, table.prettytable, table.roundtable, table.imagetable, table.mabitable table, table.prettytable table, table.roundtable table, table.imagetable table { text-align: center; border-collapse: collapse; background-color: #fff; }

table.mabitable, table.prettytable, table.roundtable, table.graytable, table.imagetable, table.mabitable table, table.prettytable table, table.roundtable table, table.graytable table, table.imagetable table { text-align: center; border-collapse: collapse; background-color: #fff; }

table.mabitable td, table.mabitable th, table.prettytable td, table.prettytable th, table.roundtable td, table.roundtable th, table.imagetable td, table.imagetable th { vertical-align: middle; } table.mabitable td, table.mabitable th, table.imagetable td, table.imagetable th { border: 1px #aaa solid; padding: 4px; }

table.mabitable td, table.mabitable th, table.prettytable td, table.prettytable th, table.roundtable td, table.roundtable th, table.graytable td, table.graytable th, table.imagetable td, table.imagetable th { vertical-align: middle; } table.mabitable td, table.mabitable th, table.graytable td, table.graytable th, table.imagetable td, table.imagetable th { border: 1px #aaa solid; padding: 4px; }

table.mabitable caption, table.prettytable caption, table.roundtable caption, table.imagetable caption { margin-left: inherit; margin-right: inherit; font-size: 116%; font-weight: bold; }

table.mabitable caption, table.prettytable caption, table.roundtable caption, table.graytable caption, table.imagetable caption { margin-left: inherit; margin-right: inherit; font-size: 116%; font-weight: bold; }

So pretty much, it's the exact same thing as image table without this line being altered:

table.mabitable tr.image td, table.mabitable td.image, table.imagetable td, table.imagetable th { background-color: #000; }

As for the Navframe tag, I'll get back to you on that. I need to test it somewhere before we can use it here.

What are the intended uses of these new tables, may I ask?

I already said why, items that only come in black or black items in image gallery pages. Part of this conversation is here.

Replace the following:

/* Infobox template style */
div.infobox {
    border: 1px solid #aaa;
    float: right;
    font-size: 11px;
    background-color: white;
}

With:

/* Infobox template style */
.infobox {
    border: 1px solid #aaa;
    background: white;
    float: right;
    clear: right;
    font-size: 11px;
    width: 22em;
}

Propose:

This will actually eliminate a bit of code in the infoboxes as they will no longer require a <div> wrapper around them because the class can be applied directly to the infobox table. Furthermore, the infobox now has a default width and, in the event that other floating objects are present, will clear any right floating objects that precedes it.

the div tags also provide a padding inside the box

How much of a margin is really needed?

If we wish to keep the current style, it has a margin of 7px. But to have the margin, the div will be required anyway.

You can just apply the margin to the .infobox class. There shouldn't be a need for an extra div.

With the div thumb: http://i48.tinypic.com/2na8caq.png
With the div thumb: http://i47.tinypic.com/14x2bmr.png

Notice how the header line does not intersect with the infobox in the picture with the div, where as it does in without it. Plus, width should be changed to min-width. Clear is already provided by the thumb div.

You appear to got padding and margin confused there. Padding is inside the box, margin is outside the box. See this tutorial on the CSS box model. What you want to use is the margin, not padding.

Yeah. You got me confused after you said margin after I said padding.

But anyway, my argument still stands.

Humm. I really like to find a way to get rid of those wrapping divs. I know that Wikipedia doesn't have any problems like the one you displayed. Maybe it is a problem with how the headers are styled. But it will take some digging and I don't feel up to it right now.

[1] The left one is prettytable, the right one is prettytable center.

Yeah, I was starting to notice that. o_O

Although results seem to differ on Chrome. Firefox problem?

Yeah, it has to be a problem with Firefox. If you zoom in once, the problem disappears.

Is there any way to make text glow? Like the Quest Name and Rewards in a quest ingame. They use a white font with a black glow. If there is and we haven't implemented it to our coding yet, can we?

You're not going to be able to "implement" a css style. CSS Styles are read by the browser and only apply if the browser recognizes it.

You can make text glow using the text-shadow property with an offset of 0 and 0. Check the specs for more info ~小太郎 ^TALK_CONTRIBS 2011:08:19:07:40 (Friday)

Alright so... I made this page Template:SkillNavBox. It's suppose to have borders like seen here. Now, I have this working offsite on another wiki, but here he seems not to work even though I added the coding need on both this page and the Mediawiki: Common.js. You can see where I added code on both pages if you search my name.

Could there be a conflict in coding somewhere?

What exacly isn't working?

I HATE THIS THREADING CRAP

​

~◕Д◕ ^TALK_CONTRIBS2010:12:06:21:13 (Monday) 13:13, 6 December 2010 (PST)

The borders around the table. Unless you can see it, its not working.

I can't help if the template is locked Xp

I HATE THIS THREADING CRAP

​

~◕Д◕ ^TALK_CONTRIBS2010:12:06:21:23 (Monday) 13:23, 6 December 2010 (PST)

Add

.tabdiv > ul {
   border: 0;
   border-bottom: 1px solid #6f6f6f;
   list-style-type: none;
   padding-bottom: 2px;
   margin: 0;
   line-height: 1;
}

.tabdiv > ul a {
   background-color: #eee;
   padding: 2px 1em;
   border: 1px solid #6f6f6f;
   border-bottom: none;
   color: #448;
   margin-right: 0.5em;
   margin-bottom: 0;
}

.tabdiv > ul li {
   display: inline;
   margin: 0;
   margin-bottom: 0; // wiki sets this explicitly
}

.tabdiv > ul li.active {
   background: white;
}

.tabdiv > ul li.active a {
   background: white;
   font-weight: bold;
   position: relative;
   top: 1px;
   padding-top: 3px;
}

.tabdiv > div {
   margin: 0;
   border: 1px solid #6f6f6f;
   border-top: 0;
   padding: 1em 5px 5px 5px;
}

Please and Thank You~

Nevermind I don't even think this matters anymore. Read below.

Also revert Kotarou's latest request for

.center, .center * { width: auto; }

It's conflicting with style tags that align things to the left/right.

Why would that one conflict? All it does is reverts what is in Vector.css that makes everything with the center class have 100% width. In Monobook.css, IJ removed it directly, but he doesn't seem to be responding for this one, so I just did an indirect removal

​

​

~◕Д◕ ^TALK_CONTRIBS 18:01, 2 December 2010 (PST)

Here's something to try: Move

.center, .center * {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

To the 2nd line of the page or remove the text-align: center; from it

​

​

~◕Д◕ ^TALK_CONTRIBS 18:06, 2 December 2010 (PST)

Okay, that didn't work. Something I tested:
Change

.center, .center * { width: auto; }
.center, .center * {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

to

.center, .center * {
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

​

​

~◕Д◕ ^TALK_CONTRIBS 22:05, 2 December 2010 (PST)