For a while now, I've been wanting to implement a feature on the board that would make it easier for users to make their own schemes without needing either Xkeeper or I to add them.
I'm just getting around to implmenting it. Introducing the NullScheme™ a special scheme that removes the default stylesheet from each page load, allowing you (the user) to specify a custom stylesheet through something like a user stylesheet (in Opera) or the Stylish extension (in Chrome and Firefox.)
Who knows, maybe if your scheme is good enough, we might consider adding it to the board... maybe.
THE INSTRUCTIONS
Opera
First off, you'll need to edit Jul's site preferences. Do this by right clicking anywhere on the page and selecting "Edit Site Preferences":
Next, you'll need to find the stylesheet you want to use on the site. Go to the "Display" tab in the site preferences dialog and select "Choose":
Once that's done, you'll need to go to the "Manage Modes..." dialog to get the user stylesheet working correctly. Select View → Style → Manage Modes... from the menu. Be sure to select "User Mode" from here as well.
In the "Style Options" dialog, make sure that both "Page style sheet" and "Page fonts and colors" ARE selected:
Chrome
Open Chrome, and go to the extensions window. Select "Get more extensions»", and do a search for "Stylish" and install the first extension on the list.
After that, you'll need to go back to the extensions list and configure Stylish. Click "Add new style" and paste in the stylesheet you want to use.
Lastly (but not leastly) is the mostly-documented stylesheet that will act as a template for your own schemes. Go nuts!
/* Jul NullCSS template!
* most of the colors have been lifted from the Night scheme (the default)
* the style classes (and what they do) will be documented here. */
/* the following style declaration will apply a no-text-decoration and
* bolding to all links.
*
* the visited psuedo-element (a:visited) is pretty obvious, it's a link
* that has already been visited
*
* the hover psuedo-element (a:hover) is for when you're hovering over a link
*
* the active psuedo-element (a:active) is for when a link has been selected */
/* TODO: fix these later, maybe through userjs? */
#f_ikachan, #f_doomcounter, #f_mustbeblind { display: none; }
a:link, a:visited, a:active, a:hover { text-decoration: none; font-weight: bold; }
/* The link colors also need to be defined, as well. */
a { color: #BEBAFE; }
a:visited { color: #9990c0; }
a:active { color: #CFBEFF; }
a:hover { color: #CECAFE; }
body {
color: #DDD;
font: 13px sans-serif;
background: #000F1F url('http://xkeeper.rustedlogic.net/img/starsbg.png')
}
/* the following classes also need to be defined:
.font - font size and family
.fonth - same as above but for table headers
.fonts - smaller fonts
.fontt - smallest fonts
.center - center-aligned text
.right - right-aligned text
.table - general table styling
.tbl - bottom-right corners of tables
.tdbg1 - default table cell background;
.tdbg2 - alternate background color for table cells
.tdbgc - forum category table cells
.tdbgh - table headers
*/
font { font: sans-serif; }
.font { font:13px; }
.fonth { font:13px; }
.fonts { font:10px; }
.fontt { font:10px; }
.tdbg1 { background: #111133; }
.tdbg2 { background: #11112B; }
.tdbgc { background: #2F2F5F; }
.tdbgh { background: #302048; }
.center { text-align: center; }
.right { text-align: right; }
.table { empty-cells: show;
border: 1px solid #000;
border-width: 1px 0 0 1px;
width: 100%;
}
td.tbl { border: 1px solid #000; border-width: 0 1px 1px 0; }
code {
overflow: auto;
width: 100%;
white-space: pre;
display: block;
}
code br { display: none; }
/* next, the forms will need to be styled.
Each input type (radio, checkbox, submit) will need to be styled, as
well as the select and textarea elements */
input { background: #000; color: #FFF; border: 1px solid black; }
textarea { background: #000; color: #FFF; font-family: monospace; }
____________________
