spiralofhope

<noinclude>
[[CSS]] + [[MediaWiki]] > common.css

; See also:
* [[MediaWiki:Monobook.css]]
* [[MediaWiki:Monobook.js]]
* {{SERVER}}/skins/monobook/main.css
* {{SERVER}}/skins/common/commonPrint.css

----

= Darkening =

</noinclude>
/*<pre><nowiki>*/
/* This resolves an issue with CSS not working correctly.  It must be the first entry. */
thisneverworks {
}

body {
  background-color:SlateGray !important;
}

/*</nowiki></pre>*/
<noinclude>

= Misc settings =

* <tt>TrueType text</tt>

</noinclude>
/*<pre><nowiki>*/
/* This resolves an issue with CSS not working correctly.  It must be the first entry. */
thisneverworks {
}

/* Give TrueType <tt> text a background colour */
tt {
  background-color:#f4f4f4 !important;
}
/* Move the horizontal lines on top */
h1 {
  border-top: 1px solid #aaa !important;
  border-bottom: none !important;
  background-color:#f2f2f2 !important;
}
h2 {
  border-top: 1px dashed #aaa !important;
  border-bottom: none !important;
  background-color:#f8f8f8 !important;
}
/*</nowiki></pre>*/
<noinclude>

= Left sidebar =

</noinclude>
/*<pre><nowiki>*/
/* This resolves an issue with CSS not working correctly.  It must be the first entry. */
thisneverworks {
}

.portlet {
    border: none;
    margin: 0 0 0.5em 0;
    float: none;
    padding: 0;
    width: 11.6em;
    overflow: hidden;
}

.portlet ul{
  /* Remove the bullets from the sidebar */
  list-style: none;
  list-style-image: none;
}

.portlet a:link, .portlet a:visited{
 text-decoration: none;
}

.portlet a:hover, .portlet a:active{
 text-decoration: underline !important;;
}

/* portlet body */
.pBody {
    font-size: 95%;
    background: White;
    border-collapse: collapse;
    border: 1px solid #aaaaaa;
    padding: 0 0 0.3em 0;
}

/*</nowiki></pre>*/
<noinclude>

= Table styles =

== Before ==

{| width="100%"
|-
|
<pre>
{| style="text-align:center"
|+Multiplication table
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
</pre>
|
{| style="text-align:center"
|+Multiplication table
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
|}

== After ==

{| width="100%"
|-
| width="50%" |
<pre>
{| class="wikitable" style="text-align:center"
|+Multiplication table
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
</pre>
|
{| class="wikitable" style="text-align:center"
|+Multiplication table
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
|}

== wikitable class for skinning normal tables ==

</noinclude>
/*<pre><nowiki>*/
/* This resolves an issue with CSS not working correctly.  It must be the first entry. */
thisneverworks {
}

table.wikitable {
 margin: 1em 1em 1em 0;
 background: #f9f9f9;
 border: 1px #aaaaaa solid;
 border-collapse: collapse;
}

table.wikitable th, table.wikitable td {
 border: 1px #aaaaaa solid;
 padding: 0.2em;
}

table.wikitable th {
 background: #f2f2f2;
 text-align: center;
}

table.wikitable caption {
 margin-left: inherit;
 margin-right: inherit;
}

/*</nowiki></pre>*/

== Issue: Nested tables inherit style ==

{|
|-
|
<pre>
{| class="wikitable"
|-
| The "wikitable" class paints a border around its table
|-
|
{| style="border: none;" border="0"
|-
| A border appears around this table, even though I'm trying to explicitly turn it off
|}
{|
|-
| style="border: none;" | Method 1: explicitly remove the border from that line of the nested table.
|}
{|
|-
| border="0" | Just using "border" won't work.
|}
{| class="plain"
|-
| Method 2: Use a "plain" style which does not paint a border
|}
|}
</pre>
|

{| class="wikitable"
|-
| The "wikitable" class paints a border around its table
|-
|
{| style="border: none;" border="0"
|-
| A border appears around this table, even though I'm trying to explicitly turn it off
|}
{|
|-
| style="border: none;" | Method 1: explicitly remove the border from that line of the nested table.
|}
{|
|-
| border="0" | Just using "border" won't work.
|}
{| class="plain"
|-
| Method 2: Use a "plain" style which does not paint a border
|}
|}

|}

== Plain table class to allow nested tables to not inherit a parent style ==

</noinclude>
/*<pre><nowiki>*/

table.plain {
}

table.plain th, table.plain td {
 border: 0;
}

/*</nowiki></pre>*/
<noinclude>
== simple table class ==

{| class="simpletable"
|-
| one || two || three
|-
| four || five || six
|}

</noinclude>
/*<pre><nowiki>*/
/* This resolves an issue with CSS not working correctly.  It must be the first entry. */
thisneverworks {
}

table.simpletable {
 margin: 1em 1em 1em 0;
 background: #f7f7f5;
 border: 1px #aaaaaa solid;
 border-collapse: collapse;
}

table.simpletable th, table.simpletable td {
 border: 1px #aaaaaa solid;
 padding: 0.2em;
}

/*</nowiki></pre>*/

<noinclude>

== Other table effects ==

To be figured out later.


{|
|-
|
<pre>
{| class="sample"
|-
|colspan=2 align=center| 1 || 2 
|rowspan=2 align=center| 3 || 4
|rowspan=5 align=center| 5
|-
| 6 || 7 || 8 || 9
|-
| 10 
|colspan=2 rowspan=2 align=center| 11
|colspan=2 align=center| 12
|-
|rowspan=2 align=center| 13 || 14 || 15
|-
|colspan=3 align=center| 16 || 17
|}
</pre>
|
{| class="sample"
|-
|colspan=2 align=center| 1 || 2 
|rowspan=2 align=center| 3 || 4
|rowspan=5 align=center| 5
|-
| 6 || 7 || 8 || 9
|-
| 10 
|colspan=2 rowspan=2 align=center| 11
|colspan=2 align=center| 12
|-
|rowspan=2 align=center| 13 || 14 || 15
|-
|colspan=3 align=center| 16 || 17
|}
|}

</noinclude>
/*<pre><nowiki>*/
/* This resolves an issue with CSS not working correctly.  It must be the first entry. */
thisneverworks {
}


/*</nowiki></pre>*/
<noinclude>

= Custom link colour =

An [[sandbox|existing link]] and [[sandbox/sandbox|another existing link]] in a paragraph.

An [http://example.com external link] in a paragraph.

* How do I make a link "normal text colour"?  How do I know what that is and have it adjust automatically?

Other curiosities:
 background: gold !important; 
 font-weight:bold !important; 
 a.new:active {} is for when the link is clicked.

== Existing links ==

* [[CSS/existing links]]

== New links ==

Paragraph: [[sandbox/Some new link]] and [[sandbox/some other new link]].
* Bulleted list: [[sandbox/Some new link]] and [[sandbox/some other new link]].
# Ordered list: [[sandbox/Some new link]] and [[sandbox/some other new link]].
{|
|-
| Table: [[sandbox/Some new link]] and [[sandbox/some other new link]].
| Table: [[sandbox/Some new link]] and [[sandbox/some other new link]].
|-
| Table: [[sandbox/Some new link]] and [[sandbox/some other new link]].
| Table: [[sandbox/Some new link]] and [[sandbox/some other new link]].
|}
* You can see new links at the top of the page, by visiting [[Sandbox/This_page_does_not_exist|a page which does not exist]].

</noinclude>
/*<pre><nowiki>*/
/* This resolves an issue with CSS not working correctly.  It must be the first entry. */
thisneverworks {
}

/* By default, make new links black */
a.new {
 text-decoration: none !important;
 color: black !important;
}

/* When visited, make new links dark red */
a.new:visited {
 color: darkred !important;
}

/* On mouseover (hover) over a link, make new links red */
a.new:hover {
 color: red !important;
}

/* On mouseover (hover), reveal new links
   p  = paragraph
   ul = unordered list
   li = list
   td = tables
*/
p:hover a.new, ul:hover a.new, li:hover a.new, td:hover a.new {
 color: red !important;
 text-decoration: underline !important;
}

/* You can change the colour for new links in the tabs at the top of the page.
   To see it in action, view  example.com/This_page_does_not_exist
   Uncomment this for it to work.
#p-cactions .new a {
  color: green !important;
}
*/


/*</nowiki></pre>*/
<noinclude>