Forum:Proposed changes to Common.css (2012)
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:
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. --
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. -- 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. -- 18:32, July 15, 2012 (UTC)
- It was too crappy. I redirected it. I'll try something cool with CSS and shadows. --
- Yeah, Wikia is evil. They let WoWWiki and Memory Alpha have their own domain names, but not us.
- Next thing you know, they'll have merged our account database into main Wikia's, and shut us down for libel and copyright infringement. --
- 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
- That used to be the case. The new version of MediaWiki just fucked up everything. --
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. --User:Jack Phoenix/sig 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. -- 00:08, July 17, 2012 (UTC)
- I've added it to my own CSS file. --
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. • Puppy's talk page • 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
For. -- 00:58, July 17, 2012 (UTC)- Tested and has merit • Puppy's talk page • 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.
~ 
19:59, 17 July 2012
- I use {{ambox}} sometimes, and it looks cool for other purposes, for example awards and page headers. -- 20:22, July 17, 2012 (UTC)
- I use {{ambox}} sometimes, and it looks cool for other purposes, for example awards and page headers. --
Should we implement the sigvanish stuff?
- For. -- 00:58, July 17, 2012 (UTC)
- Abstain See above. • Puppy's talk page • 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?
~ 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). -- 20:34, July 17, 2012 (UTC)
- 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). --
WTF? --