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)
(Create D&D styles)
(Baseline alignment for stat tables)
 
(24 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  ---  */
   
   
   /*
   /*
Line 24: Line 26:
  h4 { font-size: 120%; }
  h4 { font-size: 120%; }
   */
   */
 +
 +
/*  ---  OVERFLOW STYLE FOR PRE  ---  */
   
   
-
  /*  ---  TILED TABLES for FRONT PAGES  ---  */
+
  pre {
-
+
     overflow-x: auto;
-
table.tiled {
+
-
     vertical-align: top;
+
     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 49: Line 56:
  }
  }
   
   
-
  table.tiled td.hero {
+
  div.tile.hero {
     background-color: #F6F6FE;
     background-color: #F6F6FE;
-
     border: 1px solid #CCCCF4;
+
     border: 1px outset #CCCCF4;
  }
  }
   
   
-
  table.tiled td.hero h2 {
+
  div.tile.hero h2 {
     background-color: #CCCCF4;
     background-color: #CCCCF4;
-
     border: 1px solid #9898E8;
+
     border: 1px outset #9898E8;
  }
  }
   
   
-
  table.tiled td.dnd {
+
  div.tile.dnd {
     background-color: #FEFCF6;
     background-color: #FEFCF6;
-
     border: 1px solid #F4EACC;
+
     border: 1px outset #F4EACC;
  }
  }
   
   
-
  table.tiled td.dnd h2 {
+
  div.tile.dnd h2 {
     background-color: #F4EACC;
     background-color: #F4EACC;
-
     border: 1px solid #E8D598;
+
     border: 1px outset #E8D598;
  }
  }
   
   
-
  table.tiled td.guide {
+
  div.tile.guide {
     background-color: #F6FEF6;
     background-color: #F6FEF6;
-
     border: 1px solid #CCF4CC;
+
     border: 1px outset #CCF4CC;
  }
  }
   
   
-
  table.tiled td.guide h2 {
+
  div.tile.guide h2 {
     background-color: #CCF4CC;
     background-color: #CCF4CC;
-
     border: 1px solid #98E898;
+
     border: 1px outset #98E898;
  }
  }
-
+
 
  /*  ---  STAT BLOCKS  ---  */
  /*  ---  STAT BLOCKS  ---  */
   
   
  table.stats {
  table.stats {
     background-color: transparent;
     background-color: transparent;
-
     border: 1px solid #F4F4F4;
+
     border: 1px outset #E0E0E0;
-
     margin: 0 auto 1em auto;
+
    border-collapse: collapse;
-
     padding: .2em;
+
     margin-bottom: 1em;
 +
     padding: 0.2em;
     width: auto;
     width: auto;
  }
  }
   
   
-
  table.stats th,
+
  table.stats tr {
-
table.stats td {
+
     vertical-align: baseline;
-
     padding: 0 .2em;
+
  }
  }
   
   
  table.stats th {
  table.stats th {
-
     background-color: #FEFEFE;
+
     background-color: #FAFAFA;
 +
    padding: 0.2em 0.2em 0 0.2em;
 +
}
 +
 +
table.stats td {
 +
    padding: 0 0.2em;
  }
  }
   
   
Line 115: Line 127:
     background-color: #FEFCF6;
     background-color: #FEFCF6;
  }
  }
-
+
 
-
table.stats.vspace th,
+
-
table.stats.vspace td {
+
-
    padding: .2em;
+
-
}
+
-
+
  /*  ---  MESSAGE BOXES  ---  */
  /*  ---  MESSAGE BOXES  ---  */
   
   
  .message {
  .message {
-
     background-color: #FEFEFE;
+
     background-color: #FAFAFA;
-
     border: 1px solid #F4F4F4;
+
     border: 1px outset #E0E0E0;
     margin: 0 auto 1em auto;
     margin: 0 auto 1em auto;
-
     padding: .2em;
+
     padding: 0.2em;
     width: auto;
     width: auto;
  }
  }
Line 140: Line 147:
     border-color: #F4EACC;
     border-color: #F4EACC;
  }
  }
-
+
 
-
  /*  ---  INFO BOXES   ---  */
+
  /*  ---  INFOBOXES   ---  */
   
   
  .infobox {
  .infobox {
-
     border: 1px solid #e0e0e0;
+
     background-color: #FAFAFA;
-
     background-color: #fafafa;
+
     border: 1px outset #E0E0E0;
-
     color: black;
+
     color: #000;
     margin-bottom: 0.5em;
     margin-bottom: 0.5em;
     margin-left: 1em;
     margin-left: 1em;
Line 155: Line 162:
  }
  }
   
   
-
  .infobox th,
+
  .infobox tr {
-
.infobox td {
+
     vertical-align: top;
     vertical-align: top;
  }
  }
Line 177: Line 183:
     color: #F4EACC;
     color: #F4EACC;
  }
  }
 +
 +
/*  ---  PLAQUES  ---  */
   
   
-
  /*  ---  INFOBOX TITLES  ---  */
+
  .plaque {
-
+
     background-color: #E0E0E0;
-
th.infotitle,
+
     border: 1px outset #C0C0C0;
-
td.infotitle {
+
    font-family: sans-serif;
-
     background-color: #e0e0e0;
+
     font-size: 120%;
-
     border: 1px solid #c0c0c0;
+
-
     font-size: larger;
+
     font-weight: bold;
     font-weight: bold;
-
     margin: 2px;
+
     margin: 0.2em 0.2em 6px 0.2em;
 +
    padding: 0.2em 0.4em;
     text-align: center;
     text-align: center;
 +
    text-transform: none;
  }
  }
   
   
-
  .hero th.infotitle,
+
  .hero .plaque {
-
.hero td.infotitle {
+
     background-color: #CCCCF4;
     background-color: #CCCCF4;
-
     border-color: #9898E8;
+
     border: 1px outset #9898E8;
  }
  }
   
   
-
  .dnd th.infotitle,
+
  .dnd .plaque {
-
.dnd td.infotitle {
+
     background-color: #F4EACC;
     background-color: #F4EACC;
-
     border-color: #E8D598;
+
     border: 1px outset #E8D598;
-
}
+
-
+
-
.infobox caption {
+
-
    font-size: larger;
+
-
    margin-left: inherit;
+
-
}
+
-
+
-
.infobox.bordered {
+
-
    border-collapse: collapse;
+
-
}
+
-
+
-
.infobox.bordered td,
+
-
.infobox.bordered th {
+
-
    border: 1px solid #e0e0e0;
+
-
}
+
-
+
-
.infobox.bordered .borderless td,
+
-
.infobox.bordered .borderless th {
+
-
    border: 0;
+
-
}
+
-
+
-
/* styles for bordered infobox with merged rows */
+
-
+
-
.infobox.bordered .mergedtoprow td,
+
-
.infobox.bordered .mergedtoprow th {
+
-
    border: 0;
+
-
    border-top: 1px solid #e0e0e0;
+
-
    border-right: 1px solid #e0e0e0;
+
-
}
+
-
+
-
.infobox.bordered .mergedrow td,
+
-
.infobox.bordered .mergedrow th {
+
-
    border: 0;
+
-
    border-right: 1px solid #e0e0e0;
+
  }
  }
   
   
  </style>
  </style>
-
+
 
  <script type="text/javascript">
  <script type="text/javascript">
   //Add your javascript code here.
   //Add your javascript code here.
  </script>
  </script>

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