Forum:Proposed changes to Common.css (2012)

Forums: Index > Village Dump > Proposed changes to Common.css (2012)

Note: This topic has been unedited for 4483 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

I've thought of some ideas for changes that should be made to the system CSS file. We've spent a lot of time creating templates and "crackin' wise with the navigation tools," as SPIKE cleverly put it. I've thought of some features we could add to the common.css page.

Oh, and if you're wondering why I put 2012 in the title of this forum, it's because I don't want to impede anyone who wants to crack wise with the CSS again in the future. They can't just recycle this forum.

Firstly. Most people here don't use Template:Ambox for stuff, but it's still useful for some things. And Wikipedia really makes good use of it. Practically all of their template messages use {{Ambox}} (short for: Article Message Box), and their version looks pretty stylish. I've used it before and strongly encourage it.

If we decide to use WP's version of ambox, we can insert the following CSS code into Common.css:

/**
 * Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes (sporked from Wikipedia)
 *      --Qzekrom
 */
th.mbox-text, td.mbox-text {   /* The message body cell(s) */
    border: none; 
    /* @noflip */
    padding: 0.25em 0.9em;     /* 0.9em left/right */
    width: 100%;               /* Make all mboxes the same width regardless of text length */
}
td.mbox-image {                /* The left image cell */
    border: none; 
    /* @noflip */
    padding: 2px 0 2px 0.9em;  /* 0.9em left, 0px right */
    text-align: center; 
}
td.mbox-imageright {           /* The right image cell */
    border: none;
    /* @noflip */
    padding: 2px 0.9em 2px 0;  /* 0px left, 0.9em right */
    text-align: center; 
}
td.mbox-empty-cell {           /* An empty narrow cell */
    border: none;
    padding: 0px;
    width: 1px;
}

/**
 * Article message box styles (sporked from Wikipedia)
 *      --Qzekrom
 */
table.ambox {
    margin: 0px 10%;                  /* 10% = Will not overlap with other elements */
    border: 1px solid #aaa; 
    /* @noflip */
    border-left: 10px solid #1e90ff;  /* Default "notice" blue */
    background: #fbfbfb; 
}
table.ambox + table.ambox {      /* Single border between stacked boxes. */
    margin-top: -1px;
}
.ambox th.mbox-text, 
.ambox td.mbox-text {            /* The message body cell(s) */
    padding: 0.25em 0.5em;       /* 0.5em left/right */
}
.ambox td.mbox-image {           /* The left image cell */
    /* @noflip */
    padding: 2px 0 2px 0.5em;    /* 0.5em left, 0px right */
}
.ambox td.mbox-imageright {      /* The right image cell */
    /* @noflip */
    padding: 2px 0.5em 2px 0;    /* 0px left, 0.5em right */
}
 
table.ambox-notice {
    /* @noflip */
    border-left: 10px solid #1e90ff;    /* Blue */
}
table.ambox-speedy {
    /* @noflip */
    border-left: 10px solid #b22222;    /* Red */
    background: #fee;                   /* Pink */
}
table.ambox-delete {
    /* @noflip */
    border-left: 10px solid #b22222;    /* Red */
}
table.ambox-content {
    /* @noflip */
    border-left: 10px solid #f28500;    /* Orange */
}
table.ambox-style {
    /* @noflip */
    border-left: 10px solid #f4c430;    /* Yellow */
}
table.ambox-move {
    /* @noflip */
    border-left: 10px solid #9932cc;    /* Purple */
}
table.ambox-protection {
    /* @noflip */
    border-left: 10px solid #bba;       /* Gray-gold */
}

Secondly. I had this crazy idea that you could label certain text so that when you hover over it, some of it disappears. This makes a great complement to the collapsible-signature thing we do here. I added the declaration:

/* Allows for hiding "vanishing" sig sections. --Qzekrom */
.sigvanish { display: inline; }
.sigexpand:hover .sigvanish { display: none; }
.sigclick:active .sigvanish { display: none; }

to my personal CSS file. This would allow you to tag certain portions of your signature so that they appear normally, until you hover over them, then they disappear.

Here's a usage example, tidied for readability:

<span class="sigexpand" style="font-weight: bold; color: red;">
 iWillKillYou
 <span class="sigvanish" style="color: black;">333</span>
 <span class="sighidden" style="color: black;">666</span>
</span>

This is what it looks like:

iWillKillYou333666

It looks as though the "333" in the signature magically turns into a "666" when you hover. Actually, what's happening is that the 333 vanishes and the 666 becomes visible.

So that's it. What do you think? Discuss! --QZEKЯOM Proud sponsor of Team Zombiebaron Tw$*ty Tw%#ve G*me$ FTW! Let's go for the g^@d! 02:22, July 15, 2012 (UTC)

Love the "sigvanish" stuff, I've been wanting to do something like that with my sig for a while now. Not sure about the other stuff.
So, I've been noticing on Wikipedia that while the main tab on the rest of their pages reads "Article," the one on the main page reads "Main Page." Is there some way we can do that with our main page? ~[ths] UotM 03:50, 07/15/2012

That used to be the case. The new version of MediaWiki just fucked up everything. -- Sir CuteKyogreOnTheRadio [CUN • PBJ'12 • PLS(0) • Stuy'16] 15:12, July 15, 2012 (UTC)

I hate how Wikia treats us like we're their slaves. I mean, we're only their most popular wiki, but then they subject us to all these moronic changes, like the content warning (love how it's gone now btw) and then forcing us into the new MediaWiki before letting us beta-test it. Next thing you know, we'll be on the "Oasis" theme just like the rest of the wikis. ~[ths] UotM 17:42, 07/15/2012

Next thing you know, they'll have merged our account database into main Wikia's, and shut us down for libel and copyright infringement. -- Sir CuteKyogreOnTheRadio [CUN • PBJ'12 • PLS(0) • Stuy'16] 18:05, July 15, 2012 (UTC)

Yeah, Wikia is evil. They let WoWWiki and Memory Alpha have their own domain names, but not us.
Hey, your old sig didn't last long, did it? ~[ths] UotM 18:27, 07/15/2012

It was too crappy. I redirected it. I'll try something cool with CSS and shadows. -- Sir CuteKyogreOnTheRadio [CUN • PBJ'12 • PLS(0) • Stuy'16] 18:32, July 15, 2012 (UTC)

Okay. Say, I noticed a while ago that the Edit tab isn't bold in Monobook (it should be if we want to sufficiently parody Wikipedia). Just saying. I fixed it in my CSS, though.
Also, how about CTAM? ~[ths] UotM 18:41, 07/15/2012

i reccomend vandalising the community portal.--WELCOME TO UNCYCLOPEDIA HELL!!!! 10:33, July 16, 2012 (UTC)

i reccomend cheeikng your spellnig. -- Sir CuteKyogreOnTheRadio [CUN • PBJ'12 • PLS(0) • Stuy'16] 23:10, July 16, 2012 (UTC)

Compatibility concerns

The sigvanish stuff doesn't work correctly on my Internet Explorer 9 (at least on this page). Sure, we're Uncyclopedia, but we still gotta have some quality standards...also, you deserve a good stabbing for not following best practises, that is, indenting with a tab character. -- Jack Phoenix, professional killer admin (Whine?) • (Wikia ♥ ads) 23:38, July 16, 2012 (UTC)

That's probably because the code hasn't been added yet. ; ) —Sir Socky (talk) (stalk) GUN SotM UotM PMotM UotY PotM WotM 23:48, 16 July 2012

I've added it to my own CSS file. -- Sir CuteKyogreOnTheRadio [CUN • PBJ'12 • PLS(0) • Stuy'16] 00:08, July 17, 2012 (UTC)

Spanner, meet works

Firstly, hover doesn't work for me on smart phone, which means as more people are switching to mobile, the functionality of hover becomes less useful. This doesn't really matter for sigs - as long as the initial sig is an identifier, missing out on a sight gag won't be an issue. On articles like James Bevel, with pop up images, that does become an issue. To get around it I've had to make the "hover" links a "fake" link, which means it will pop when clicked. It's still not an ideal, but it was the only way I could get it to have even partial functionality on iPhone/iPad. I haven't tested it on the updated Nokia browser yet, but the Nokia browser I had a couple of years ago I know also had the same issue.

Secondly, we already have a "sigvanish" function in "sighidden/sigexpand". By adding in a span that is positioned over the top of the existing text, having the original as your class="sigexpand", and your replacement span as class="sighidden", and giving it a background colour (which would usually be white), you create the ability to replace existing text with new text, but the existing is just behind the first. Tweaking with spacing would allow you to increase the original text width to match the new text. It won't allow you to shrink it, but for the most part the issue with "sighidden" in the first place is the rejustification of text which can cause issues with some browsers. (While it's at a minimum it doesn't matter, but add a couple of lines and it becomes a pain.)

Which together means that there are some functionality issues, to create a solution which is somewhat redundant. I have no issue with it being introduced, but I see minimal added value, despite the work that has gone into it. And the spaghetti nature of our hacks and CSS suggests that the introduction of a feature may impact on existing features in unforeseen ways. TL;DR: I abstain as it seems pointless, but applaud the effort involved. Nominally Humane! 01:16 17 Jul

Vote

Because nothing's gonna happen unless there's some kind of vote. —Sir Socky (talk) (stalk) GUN SotM UotM PMotM UotY PotM WotM 00:22, 17 July 2012

Should we replace {{ambox}} with Wikipedia's version and add the ambox-related code to MediaWiki:Common.css?

Score: 2

•  For. -- Sir CuteKyogreOnTheRadio [CUN • PBJ'12 • PLS(0) • Stuy'16] 00:58, July 17, 2012 (UTC)
•  Tested and has merit Nominally Humane! 01:27 17 Jul
• What is this for, exactly? Wikipedia's ambox is very large, and we already have our own templates to serve the same functions. 1234 ~ 19:59, 17 July 2012
  • I use {{ambox}} sometimes, and it looks cool for other purposes, for example awards and page headers. -- Sir CuteKyogreOnTheRadio [CUN • PBJ'12 • PLS(0) • Stuy'16] 20:22, July 17, 2012 (UTC)

Should we implement the sigvanish stuff?

Score: 2 1/2

•  For. -- Sir CuteKyogreOnTheRadio [CUN • PBJ'12 • PLS(0) • Stuy'16] 00:58, July 17, 2012 (UTC)
• Abstain See above. Nominally Humane! 01:27 17 Jul
•  Do I really need to give a reason? ~[ths] UotM 02:16, 07/17/2012
• I know it may seem pretty cool, but again, what is the actual purpose? Does it really merit adding to a site-wide page that is already quite bloated? 1234 ~ 19:59, 17 July 2012
  • It's a really minor thing that complements sighidden. It allows you to configure your sig so that when someone hovers over it, some text appears (sighidden) and other text disappears (sigvanish). As I said above, (make sure you add it to your personal CSS file first) you can make a piece of text magically transform into another one, thus eliminating the need for an animated GIF image (as with Iwillkillyou333's signature). -- Sir CuteKyogreOnTheRadio [CUN • PBJ'12 • PLS(0) • Stuy'16] 20:34, July 17, 2012 (UTC)

Should we replace {{ambox}} with the warm boogers that came out of my nose when I blew it into a dirty piece of kleenex???

Score: 1

• YES. Yes we should. --ShabiDOO 03:45, July 17, 2012 (UTC)
• WTF? -- Sir CuteKyogreOnTheRadio [CUN • PBJ'12 • PLS(0) • Stuy'16] 16:10, July 17, 2012 (UTC)

So are we actually going to act on this?

Score: 1

1.  For. --QZEKЯOM Proud sponsor of Team Zombiebaron Tw$*ty Tw%#ve G*me$ FTW! Let's go for the g^@d! 22:56, July 23, 2012 (UTC)