Tardis:CSS notes
From Tardis Wiki, the free Doctor Who reference
The following important notes were removed from MediaWiki:Common.css in order to reduce lag. They are vital to understanding the general design goals of the wiki.
/***** HISTORY AND THANKS *****/ /* This wiki was late in adopting CSS. V E R Y late. So late, in fact, that we didn't have any CSS formatting until early 2011. As a result we have only worked with CSS since well after Fandom introduced the Wikia (or Oasis) skin. This means that we were considerably less pissed off than other Wikia communities when they forced the Wikia skin on us in mid-2010. Our late start on CSS means that we've been able to cherrypick from the hard work of other people around the larger wikia community. I've tried to remark from where I've gotten specific elements, but, as with any bit of wiki editing, the code has gradually become more and more unique, and some of the origins have become obscured. Nevertheless, it is fair to say that the basic underpinnings come largely from the fusion of CSS styling "ideas" from MemoryAlpha, Wookieepedia, the Fable wiki, the CSS code wiki, the Russian Wikipedia, and others. That said, almost nothing here actually looks all that similar to styling elements from other wikis, as our color palette and design goals are simply different to others. Moreover, some stylistic elements — such as the user warning system — wholly originated here. Others, like catlinks, top-of-page banners, TOC styling, and others are also stylistically novel to this wiki, even if the underpinning came from elswhere. We nevertheless gratefully acknowledge all those code warriors out there who helped make their home wikis more beautiful, and therefore inspired us. -- CzechOut 13 Mar 2011 */ /* +++++++++++++++++++ THE BIG CHART in which our Heroes define the basic stylistic elements of This Fine Wiki +++++++++++++++++++ CHAPTER THE FIRST: Colors in which our Heroes explore the color pallet of the wiki =-=-=-=-=-=-=-=-=-= The following colors are used extensively throughout this style sheet: #2F2CB8 - is the main "blue" of the site. Nicknamed "New Tardis Blue" or "NTB", it's the color of blue at the dead center of the gradient used in the DW "TARDIS device" seen in our logo. Thus, the blue on the site perfectly matches our logo. #7473BE - is a pale "reflection" of New Tardis Blue, used in concert with NTB on buttons to give them a 3D look through gradients. The color itself was not defined by me but by wikia as an automatic process associated with selecting NTB as button color with Theme Designer. It's used to define links, headlines, borders, and "glowy" effects. #6E6AC4 - is another pale reflection of NTB. It's used mainly as the color for Bots, but also is the "visited link" color. Could be used as a color in gradients with NTB, but isn't at of 9/11. #ECECEC - is the off-white color which comprises the bulk of the "white" space on most pages. It's caused by setting the pages transparent, and then setting #BOBOBO as the main color of the background in Theme Designer. In general, it's preferred to set background-colors to "transparent", but for drop-down menus, it's better to set it as the "color of transparency" so that there IS a color to the background, but the color matches the rest of the page. If you simply set a drop-down background to transparent, the letters on the drop-down bleed down to the text underneath. #D5D4F0 - is what the Theme Designer automatically sets as the "hover color" for drop-down menus, if you set the text and button colors to be "New Tardis Blue". It complements NTB precisely, as it's simply a less saturated version of the same color. #C47042 - is an orange compound of New Tardis Blue (as calculated by kuler.com) It's used as the mouseover link color. #B92F2D - is a red within the same color palette as New Tardis Blue. It's the "red link" red. #CC6600 - is a red deliberately out of accord with the NTB palette. It's the red for when you've attempted to visit a red-link before. #1F1E38 - is a darker blue that's an absolute shade of NTB. It's used to differentiate the names of editors who've made an edit in the Recent Wiki Activities module #5A54A0 - It's used to show when you've visited a link, and therefore help with navigation. Note that there are other colors which are currently specified as special link colors, but they don't, as of 12 March 2011, seem to be working in Wikia, even though they do in Monobook. +++++++++++++++++++ CHAPTER THE SECOND: Page dimensions in which our heroes take note of anything having to do with the size of pages =-=-=-=-=-=-=-=-=-= Width of text area in Wikia skin is 680px. +++++++++++++++++++ CHAPTER THE THIRD: Font stacks in which our Heroes define font stacks that have been tested on this wiki, and gives notes as to their general suitability. =-=-=-=-=-=-=-=-=-= SANS-SERIF =-=-=-=-=-=-=-=-=-= font-family: 'Trebuchet MS' is sans-serif font with clear diff btween l and I and thin when bolded font family:'Century Gothic', 'Gill Sans', 'Franklin Gothic Medium', Verdana, Tahoma, 'URW Gothic L', 'Nimbus Sans-L', sans-serif; are sans-serif fonts where l and I look alike and are typically extremely thick when bolded =-=-=-=-=-=-=-=-=-= SERIF =-=-=-=-=-=-=-=-=-= font-family: Baskerville, // Mac 90+ "Baskerville Old Face", // Win Perpetua, // Win Caslon, // Unix preferred, but only 5% have this "DejaVu Serif", // Unix 90+% Georgia, // All the stragglers serif; this serif font-stack is mainly transitional, save maybe Georgia. Looks Great in regular text, but the bold and bold italic is just a bit funky. font-family: "Footlight MT Light", //Mac 40/Win 60 "Big Caslon", //mac 53 Caslon, //Linux preferred, but only 5 "Calisto MT", //Win 24/Mac 3 "Lucida Bright", //Win 13/Mac 3/Linux 60 Georgia, //Win 5/Mac .02/Linux 25 "DejaVu Serif", //Linux 11 (but 90& of Linux users have this one) serif; this serif font stack features big, readable characters. Footlight is sort of the odd font out, as it has the most unusual characters, especially amongst lower case letters. font-family:'Footlight MT Light', 'Big Caslon', Caslon, 'Calisto MT', 'Lucida Bright',Georgia,'DejaVu Serif',serif !important; this serif font stack has a problem with its top line fonts. they don't transform "a"s and other letters when italic, making the thing look all squashed up, especially when italic AND bold. I love the regular fonts of these, though. =-=-=-=-=-=-=-=-=-= MONOSPACE =-=-=-=-=-=-=-=-=-= font-family: Monaco, // zeros are clear here "Andale Mono" // zeroes are clear here too "Lucida Sans Typewriter", // Nice, naturally dark, preferred monospace "Lucida Console", // Nicest thing most Windows users have "Nimbus Mono L", // for 99% of UNIX friends "Courier New", // An all-purpose fallback monospace;