Thanks for visiting Stormraven Gaming! We've moved to a new, private server. Please visit (and update your bookmarks to):

http://www.stormravengaming.net/wiki/

Editing and article creation here have been disabled. Thanks for your patience during our move to our new and happier home!

Header

From Stormravengaming

(Difference between revisions)
m (Nested table width.)
(Baseline alignment for stat tables)
 
(48 intermediate revisions not shown)
Line 2: Line 2:
   /*
   /*
       Notes:  
       Notes:  
-
       -You must log as admin to edit this page
+
       -You must log in with sysop privileges to edit this page
       -Whatever you enter in this page will be added to the html in the header after the standard style sheet, so you can override styles.  
       -Whatever you enter in this page will be added to the html in the header after the standard style sheet, so you can override styles.  
       -if you want your code to look nice on this page, put a space at the beginning of each line
       -if you want your code to look nice on this page, put a space at the beginning of each line
       -This is the default style sheet that you can override : http://editthis.info/wiki/skins/monobook/main.css  
       -This is the default style sheet that you can override : http://editthis.info/wiki/skins/monobook/main.css  
-
     
+
-
       For example uncomment this next section to turn all the text green:
+
       For example, uncomment this next section to turn all the text green:
   */
   */
   /*
   /*
Line 14: Line 14:
  }
  }
   */  
   */  
 +
 +
/*  ---  HEADER STYLES  ---  */
   
   
-
  table.tiled {
+
  /*
-
     vertical-align: top;
+
h2 { font-size: 160%; }
 +
h3 {
 +
    font-size: 140%;
 +
    font-weight: normal;
 +
    text-decoration: underline;
 +
}
 +
h4 { font-size: 120%; }
 +
  */
 +
 
 +
/*  ---  OVERFLOW STYLE FOR PRE  ---  */
 +
 +
  pre {
 +
     overflow-x: auto;
     width: 100%;
     width: 100%;
  }
  }
 +
 +
/*  ---  TILED TABLES for FRONT PAGES  ---  */
   
   
-
  table.tiled td {
+
  div.tile {
-
     background-color: inherit;
+
     background-color: #FAFAFA;
 +
    border: 1px outset #E0E0E0;
 +
    margin: 0 6px 6px 0;
     padding: 6px;
     padding: 6px;
-
    vertical-align: top;
+
     width: 100%;
-
     width: 50%;
+
  }
  }
   
   
-
  table.tiled td h2 {
+
  div.tile h2 {
 +
    background-color: #E0E0E0;
 +
    border: 1px outset #C0C0C0;
     color: #000;
     color: #000;
     font-family: sans-serif;
     font-family: sans-serif;
Line 37: Line 56:
  }
  }
   
   
-
  table.tiled td h3 {
+
  div.tile.hero {
-
     font-size: 110%;
+
     background-color: #F6F6FE;
-
     padding-top: 0;
+
     border: 1px outset #CCCCF4;
-
    padding-bottom: .4em;
+
  }
  }
   
   
-
  table.tiled td table {
+
  div.tile.hero h2 {
 +
    background-color: #CCCCF4;
 +
    border: 1px outset #9898E8;
 +
}
 +
 +
div.tile.dnd {
 +
    background-color: #FEFCF6;
 +
    border: 1px outset #F4EACC;
 +
}
 +
 +
div.tile.dnd h2 {
 +
    background-color: #F4EACC;
 +
    border: 1px outset #E8D598;
 +
}
 +
 +
div.tile.guide {
 +
    background-color: #F6FEF6;
 +
    border: 1px outset #CCF4CC;
 +
}
 +
 +
div.tile.guide h2 {
 +
    background-color: #CCF4CC;
 +
    border: 1px outset #98E898;
 +
}
 +
 
 +
/*  ---  STAT BLOCKS  ---  */
 +
 +
table.stats {
     background-color: transparent;
     background-color: transparent;
-
     vertical-align: top;
+
     border: 1px outset #E0E0E0;
-
     width: 100%;
+
    border-collapse: collapse;
 +
    margin-bottom: 1em;
 +
    padding: 0.2em;
 +
     width: auto;
  }
  }
   
   
-
  table.tiled td table td {
+
  table.stats tr {
-
     padding: 0 6px 6px;
+
     vertical-align: baseline;
  }
  }
   
   
-
  table.tiled td.hero {
+
  table.stats th {
 +
    background-color: #FAFAFA;
 +
    padding: 0.2em 0.2em 0 0.2em;
 +
}
 +
 +
table.stats td {
 +
    padding: 0 0.2em;
 +
}
 +
 +
table.stats.hero {
 +
    border-color: #CCCCF4;
 +
}
 +
 +
table.stats.hero th {
     background-color: #F6F6FE;
     background-color: #F6F6FE;
-
     border: 1px solid #CCCCF4;
+
     font-size: 70%;
 +
    text-transform: uppercase;
  }
  }
   
   
-
  table.tiled td.hero h2 {
+
  table.stats.dnd {
-
     background-color: #CCCCF4;
+
     border-color: #F4EACC;
-
    border: 1px solid #9898E8;
+
  }
  }
   
   
-
  table.tiled td.dnd {
+
  table.stats.dnd th {
     background-color: #FEFCF6;
     background-color: #FEFCF6;
-
    border: 1px solid #F4EACC;
 
  }
  }
 +
 +
/*  ---  MESSAGE BOXES  ---  */
   
   
-
  table.tiled td.dnd h2 {
+
  .message {
-
     background-color: #F4EACC;
+
     background-color: #FAFAFA;
-
     border: 1px solid #E8D598;
+
     border: 1px outset #E0E0E0;
 +
    margin: 0 auto 1em auto;
 +
    padding: 0.2em;
 +
    width: auto;
  }
  }
   
   
-
  table.tiled td.guide {
+
  .message.hero {
-
     background-color: #F6FEF6;
+
     background-color: #F6F6FE;
-
     border: 1px solid #CCF4CC;
+
     border-color: #CCCCF4;
  }
  }
   
   
-
  table.tiled td.guide h2 {
+
  .message.dnd {
-
     background-color: #CCF4CC;
+
     background-color: #FEFCF6;
-
     border: 1px solid #98E898;
+
    border-color: #F4EACC;
 +
}
 +
 
 +
/*  ---  INFOBOXES  ---  */
 +
 +
.infobox {
 +
    background-color: #FAFAFA;
 +
    border: 1px outset #E0E0E0;
 +
    color: #000;
 +
    margin-bottom: 0.5em;
 +
    margin-left: 1em;
 +
    padding: 0.2em;
 +
    float: right;
 +
    clear: right;
 +
    width: 25%;
 +
}
 +
 +
.infobox tr {
 +
    vertical-align: top;
 +
}
 +
 +
.infobox.hero {
 +
    background-color: #F6F6FE;
 +
    border-color: #CCCCF4;
 +
}
 +
 +
.infobox.hero hr {
 +
    color: #CCCCF4;
 +
}
 +
 +
.infobox.dnd {
 +
    background-color: #FEFCF6;
 +
    border-color: #F4EACC;
 +
}
 +
 +
.infobox.dnd hr {
 +
    color: #F4EACC;
 +
}
 +
 
 +
/*  ---  PLAQUES  ---  */
 +
 +
.plaque {
 +
    background-color: #E0E0E0;
 +
    border: 1px outset #C0C0C0;
 +
    font-family: sans-serif;
 +
    font-size: 120%;
 +
    font-weight: bold;
 +
    margin: 0.2em 0.2em 6px 0.2em;
 +
    padding: 0.2em 0.4em;
 +
    text-align: center;
 +
    text-transform: none;
 +
}
 +
 +
.hero .plaque {
 +
    background-color: #CCCCF4;
 +
    border: 1px outset #9898E8;
 +
}
 +
 +
.dnd .plaque {
 +
    background-color: #F4EACC;
 +
     border: 1px outset #E8D598;
  }
  }
   
   

Current revision as of 17:31, 27 June 2008

<style type="text/css">
  /*
     Notes: 
      -You must log in with sysop privileges to edit this page
      -Whatever you enter in this page will be added to the html in the header after the standard style sheet, so you can override styles. 
      -if you want your code to look nice on this page, put a space at the beginning of each line
      -This is the default style sheet that you can override : http://editthis.info/wiki/skins/monobook/main.css 

      For example, uncomment this next section to turn all the text green:
  */
 /*
body {
   color: green;
}
 */ 
/*   ---   HEADER STYLES   ---   */

 /*
h2 { font-size: 160%; }
h3 {
   font-size: 140%;
   font-weight: normal;
   text-decoration: underline;
}
h4 { font-size: 120%; }
 */
/*   ---   OVERFLOW STYLE FOR PRE   ---   */

pre {
   overflow-x: auto;
   width: 100%;
}
/*   ---   TILED TABLES for FRONT PAGES   ---   */

div.tile {
   background-color: #FAFAFA;
   border: 1px outset #E0E0E0;
   margin: 0 6px 6px 0;
   padding: 6px;
   width: 100%;
}

div.tile h2 {
   background-color: #E0E0E0;
   border: 1px outset #C0C0C0;
   color: #000;
   font-family: sans-serif;
   font-size: 120%;
   font-weight: bold;
   margin: 0 0 6px 0;
   padding: 0.2em 0.4em;
   text-align: left;
}

div.tile.hero {
   background-color: #F6F6FE;
   border: 1px outset #CCCCF4;
}

div.tile.hero h2 {
   background-color: #CCCCF4;
   border: 1px outset #9898E8;
}

div.tile.dnd {
   background-color: #FEFCF6;
   border: 1px outset #F4EACC;
}

div.tile.dnd h2 {
   background-color: #F4EACC;
   border: 1px outset #E8D598;
}

div.tile.guide {
   background-color: #F6FEF6;
   border: 1px outset #CCF4CC;
}

div.tile.guide h2 {
   background-color: #CCF4CC;
   border: 1px outset #98E898;
}
/*   ---   STAT BLOCKS   ---   */

table.stats {
   background-color: transparent;
   border: 1px outset #E0E0E0;
   border-collapse: collapse;
   margin-bottom: 1em;
   padding: 0.2em;
   width: auto;
}

table.stats tr {
   vertical-align: baseline;
}

table.stats th {
   background-color: #FAFAFA;
   padding: 0.2em 0.2em 0 0.2em;
}

table.stats td {
   padding: 0 0.2em;
}

table.stats.hero {
   border-color: #CCCCF4;
}

table.stats.hero th {
   background-color: #F6F6FE;
   font-size: 70%;
   text-transform: uppercase;
}

table.stats.dnd {
   border-color: #F4EACC;
}

table.stats.dnd th {
   background-color: #FEFCF6;
}
/*   ---   MESSAGE BOXES   ---   */

.message {
   background-color: #FAFAFA;
   border: 1px outset #E0E0E0;
   margin: 0 auto 1em auto;
   padding: 0.2em;
   width: auto;
}

.message.hero {
   background-color: #F6F6FE;
   border-color: #CCCCF4;
}

.message.dnd {
   background-color: #FEFCF6;
   border-color: #F4EACC;
}
/*   ---   INFOBOXES   ---   */

.infobox {
   background-color: #FAFAFA;
   border: 1px outset #E0E0E0;
   color: #000;
   margin-bottom: 0.5em;
   margin-left: 1em;
   padding: 0.2em;
   float: right;
   clear: right;
   width: 25%;
}

.infobox tr {
   vertical-align: top;
}

.infobox.hero {
   background-color: #F6F6FE;
   border-color: #CCCCF4;
}

.infobox.hero hr {
   color: #CCCCF4;
}

.infobox.dnd {
   background-color: #FEFCF6;
   border-color: #F4EACC;
}

.infobox.dnd hr {
   color: #F4EACC;
}
/*   ---   PLAQUES   ---   */

.plaque {
   background-color: #E0E0E0;
   border: 1px outset #C0C0C0;
   font-family: sans-serif;
   font-size: 120%;
   font-weight: bold;
   margin: 0.2em 0.2em 6px 0.2em;
   padding: 0.2em 0.4em;
   text-align: center;
   text-transform: none;
}

.hero .plaque {
   background-color: #CCCCF4;
   border: 1px outset #9898E8;
}

.dnd .plaque {
   background-color: #F4EACC;
   border: 1px outset #E8D598;
}

</style>
<script type="text/javascript">
  //Add your javascript code here.
</script>
Personal tools