CSS Stylesheet

This is my Custom CSS as of 10/5/2012. Feel free to use it for your own Werewolf Site (or any other site). It’s non-destructive, so you should be able to paste this directly into any Obsidian Portal site that doesn’t have its own custom CSS and gain the benefits. I still recommend creating a “throwaway” campaign on your Obsidian Portal account to test it though, assuming you have the ability to do so.

To change the colors and pictures, these are the key values:

  • background-color: ? (this is pretty much what it sounds like)
  • color: ? (font color)
  • border-color: ? (the outlines)
  • background-image:url(‘?’) (the image used)
  • font-family:? (the font used, I use google fonts)
  • font-size:?% (the font size)
  • line-height:?% (how squished lines of text are, aka the “gap” between a line and the line below it)
  • CAVEAT:
    • I don’t recommend changing any of the values in the block in between ‘#post-navigation’ and ‘label’ as those govern all the various fields and values you use when you edit your pages and campaign settings.
/* background wallpaper */
body {background-image:url('http://cdn.obsidianportal.com/assets/156476/RustTextureWithPurple.jpg');}

/* the main logo of your site */
#campaign-banner-container {border-style:solid;border-width:2px;border-radius:6px;border-color:indigo;padding:10px;background-image:url('http://cdn.obsidianportal.com/assets/156476/RustTextureWithPurple.jpg');width:710px;}

/* the overall obsidian portal boxes */
#wrapper {background-color:#202020;border-style:solid;border-width:2px;border-radius:6px;border-color:darkorange;padding:5px;background-image:url('http://cdn.obsidianportal.com/assets/156478/BlackGrunge.jpg');}
#content {background-color:transparent;border-style:none;}

/* this is stuff you probably want to leave alone */
#post-navigation {color:white;background-color:#202020;}
#manage-members {color:white;background-color:#202020;}
.edit-game-character {color:white;background-color:#202020;}
.archived-version-compare {color:white;background-color:#202020;}
.search-result {color:white;background-color:#202020;border-style:dotted;border-width:1px;border-color:orange;border-radius:6px;}
span.match {background-color:darkred;color:orange;}
fieldset {color:white;background-color:#202020;}
.notification-controls {color:white;background-color:#202020;}
label {color:white;background-color:#202020;}

/* how your comments page looks */
.comment-list .comment {border-bottom:none;}
.comment-list .comment {background-color:white;padding:5px;margin:3px;color:black;border-color:darkorange;border-style:solid;border-width:2px;border-radius:6px;background-color:white;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');}
.comment-header {min-height:50px;}
.comment-text {background-color:white;padding:5px;margin:3px;color:black;border-color:indigo;border-style:solid;border-width:2px;border-radius:6px;background-image:url('http://cdn.obsidianportal.com/assets/156497/WhitePaper.jpg');}

/* default wiki page behaviors */
#campaign-content {border-style:solid;border-width:2px;border-radius:6px;border-color:indigo;padding:10px;background-image:url('http://cdn.obsidianportal.com/assets/156468/RustTexture.jpg');}
#campaign-content .textile_longtext {border-style:solid;border-width:2px;border-radius:6px;border-color:indigo;padding:5px;background-color:white;color:black;background-image:url('http://cdn.obsidianportal.com/assets/156497/WhitePaper.jpg');}

/* how your page headers look */
#campaign-content h1 {font-family:'Metal Mania';font-size:300%;margin:5px;color:black;text-shadow: 0px 0px 4px darkred;}
#campaign-content h2 {font-family:'Metal Mania';font-size:250%;margin:5px;color:black;text-shadow: 0px 0px 4px darkred;}
#campaign-content h3 {font-family:'Metal Mania';font-size:200%;margin:5px;color:black;text-shadow: 0px 0px 4px darkred;}
#campaign-content h4 {font-family:'Metal Mania';font-size:150%;margin:5px;color:black;text-shadow: 0px 0px 4px darkred;}
#campaign-content h5 {font-family:'Metal Mania';font-size:100%;margin:5px;color:black;text-shadow: 0px 0px 4px darkred;}

/* default link behavior */
#campaign-content a:link {color:indigo;text-decoration:none;}
#campaign-content a:visited {color:indigo;text-decoration:none;}
#campaign-content a:hover {color:darkred;text-decoration:underline;}
#campaign-content a:active {color:indigo;text-decoration:none;}

/* how links to pages that don't exist yet look */
#campaign-content a:link.create-wiki-page-link {color:darkgreen;background-color:#EFE;text-decoration:none;}
#campaign-content a:visited.create-wiki-page-link {color:darkgreen;text-decoration:none;}
#campaign-content a:hover.create-wiki-page-link {color:green;text-decoration:underline;}
#campaign-content a:active.create-wiki-page-link {color:darkgreen;text-decoration:none;}

/* the columns and sidebars on the right side */
#secondary-column .sidebar {border-style:solid;border-width:2px;border-radius:6px;border-color:darkorange;padding:10px;background-image:url('http://cdn.obsidianportal.com/assets/156478/BlackGrunge.jpg');background-color:#202020;}
#secondary-column .sidebar a:link {color:darkorange;text-decoration:none;}
#secondary-column .sidebar a:visited {color:darkorange;text-decoration:none;}
#secondary-column .sidebar a:hover {color:red;text-decoration:underline;}
#secondary-column .sidebar a:active {color:darkorange;text-decoration:none;}

#secondary-column .sidebar h1 {font-family:'Metal Mania';font-size:300%;margin:5px;color:darkred;text-shadow: 0px 0px 4px orange;border-bottom:0px;}
#secondary-column .sidebar h2 {font-family:'Metal Mania';font-size:250%;margin:5px;color:darkred;text-shadow: 0px 0px 4px orange;border-bottom:0px;}
#secondary-column .sidebar h3 {font-family:'Metal Mania';font-size:200%;margin:5px;color:darkred;text-shadow: 0px 0px 4px orange;border-bottom:0px;}
#secondary-column .sidebar h4 {font-family:'Metal Mania';font-size:150%;margin:5px;color:darkred;text-shadow: 0px 0px 4px orange;border-bottom:0px;}
#secondary-column .sidebar h5 {font-family:'Metal Mania';font-weight:bold;font-size:100%;margin:5px;color:darkred;text-shadow: 0px 0px 4px orange;border-bottom:0px;}

/* how your adventure logs look */
#campaign-content .adventure-log-list {}
.adventure-log-page .post-footer {border-bottom:6px dotted indigo;margin:10px;}
.adventure-log-page {background-color:white;padding:5px;margin:3px;color:black;border-color:darkorange;border-style:solid;border-width:2px;border-radius:6px;background-color:white;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');}

/* the big pictures on the character and item pages */
.character-avatar {padding:2px;background-color:orange;border-style:solid;border-width:2px;border-color:indigo;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');margin:3px;}
.item-avatar {padding:2px;background-color:orange;border-style:solid;border-width:2px;border-color:indigo;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');margin:3px;}

/* in case you add pictures to character pages */
.character-page .textile_longtext img {padding:2px;background-color:orange;border-style:solid;border-width:2px;border-color:indigo;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');margin:3px;}

/* default character page look and feel */
.character-page .static-sheet {border-style:solid;border-width:2px;border-radius:6px;border-color:indigo;padding:5px;background-color:white;color:black;background-image:url('http://cdn.obsidianportal.com/assets/156497/WhitePaper.jpg');min-height:400px;}
#campaign-content .character-page .static-sheet .textile_longtext {border-style:none;}

/* default item page look and feel */
#campaign-content .item-page .textile_longtext {border-style:none;}
#campaign-content .item-page {border-style:solid;border-width:2px;border-radius:6px;border-color:indigo;padding:5px;background-color:white;color:black;background-image:url('http://cdn.obsidianportal.com/assets/156497/WhitePaper.jpg');}
#campaign-content .item-page .textile_longtext img {padding:2px;background-color:orange;border-style:solid;border-width:2px;border-color:indigo;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');margin:3px;}

/* generic pictures on wiki pages get the following, your campaign may not want this one as I am automatically moving them to the right side */
.wiki-page .textile_longtext.page-body img {float:right;padding:2px;background-color:orange;border-style:solid;border-width:2px;border-color:indigo;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');}

/* these govern how the Character tab lists Characters */
#character-list .pc-list {margin:10px;border-style:solid;border-width:2px;border-radius:6px;border-color:indigo;padding:5px;background-color:white;color:black;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');}

#character-list .npc-list {margin:10px;border-style:solid;border-width:2px;border-radius:6px;border-color:darkorange;padding:5px;background-color:white;color:black;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');}

#character-list .gm-only-npc-list {margin:10px;border-style:solid;border-width:2px;border-radius:6px;border-color:red;padding:5px;background-color:white;color:black;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');}

.pc-list a:link {font-family:'Metal Mania';font-size:200%;}
.npc-list a:link {font-family:'Metal Mania';font-size:200%;}
.gm-only-npc-list a:link {font-family:'Metal Mania';font-size:200%;}

.pc-list a:link.character_link {text-shadow: 0px 0px 4px orange;}
.npc-list a:link.character_link {text-shadow: 0px 0px 4px orange;}

li.character-list-item a:link.tag-link {position:relative;top:-12px;font-size:xx-small;font-family:'Georgia',serif;}

.pc-list li.character-list-item {border-color:indigo;border-style:solid;border-width:2px;border-radius:6px;margin-bottom:5px;background-image:url('http://cdn.obsidianportal.com/assets/156497/WhitePaper.jpg');}
.npc-list li.character-list-item {border-color:darkorange;border-style:solid;border-width:2px;border-radius:6px;margin-bottom:5px;background-image:url('http://cdn.obsidianportal.com/assets/156497/WhitePaper.jpg');}
.gm-only-npc-list li.character-list-item {border-color:red;border-style:solid;border-width:2px;border-radius:6px;margin-bottom:5px;background-image:url('http://cdn.obsidianportal.com/assets/156497/WhitePaper.jpg');}

#character-list img.game-content-image {height:60px;width:60px;}

/* these govern how the Item tab lists Items */
#item-list .item-list {margin:10px;border-style:solid;border-width:2px;border-radius:6px;border-color:indigo;padding:5px;color:black;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');background-color:white;}

#item-list .item-list a:link {font-family:'Metal Mania';font-size:200%;}

#item-list .item-list a:link.item_link {text-shadow: 0px 0px 4px orange;}

#item-list .item-list li.item-list-item a:link.tag-link {position:relative;top:-12px;font-size:xx-small;font-family:'Georgia',serif;}

#item-list .item-list li.item-list-item {border-color:indigo;border-style:solid;border-width:2px;border-radius:6px;margin-bottom:5px;background-image:url('http://cdn.obsidianportal.com/assets/156497/WhitePaper.jpg');}

#item-list img.game-content-image {height:60px;width:60px;}

/* how your forums look */
#campaign-forum {background-color:white;padding:5px;margin:3px;color:black;border-color:darkorange;border-style:solid;border-width:2px;border-radius:6px;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');}
.campaign-forum-topic {background-color:white;padding:5px;margin:3px;color:black;border-color:darkorange;border-style:solid;border-width:2px;border-radius:6px;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');}
.campaign-forum-post .textile_longtext.body {background-color:white;padding:5px;margin:3px;color:black;border-color:black;border-style:solid;border-width:2px;border-radius:6px;}

/* how your maps look */
#campaign-map-list {background-color:white;padding:5px;margin:3px;color:black;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');border-color:orange;border-style:solid;border-width:2px;border-radius:6px;}
.map-item-container .map-item {background-color:white;padding:5px;margin:3px;color:black;border-color:indigo;border-style:solid;border-width:2px;border-radius:6px;background-image:url('http://cdn.obsidianportal.com/assets/156497/WhitePaper.jpg');}

#campaign-content .campaign-map {overflow:auto;}

/* Your default Obsidian Portal navigation menu */
.tab-container {border-style:none;}
.tabnav {margin:1px;border-style:none;background:none;margin-bottom:5px;}
.tabnav a:link,.tabnav a:visited,.tabnav a:active {color:red;background-color:transparent;border-style:solid;border-color:darkred;border-width:1px;}
.tabnav a:hover {color:orange;background-color:transparent;border-style:solid;border-color:darkorange;border-width:1px;}
.tabnav a.active:link,.tabnav a.active:visited,.tabnav a.active:active,.tabnav a.active:hover{color:yellow;background-color:black;border-style:solid;border-color:orange;border-width:1px;}


/* how your calendar looks */
#campaign-calendar {background-color:white;padding:5px;margin:3px;color:black;border-color:darkorange;border-style:solid;border-width:2px;border-radius:6px;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');}
#campaign-calendar .fc-content {background-color:white;background-image:none;}

/* if your game doesn't use blockquotes and Horizontal lines ignore this */
blockquote {color:darkorange;}
hr {background-color:indigo;height:2px;width:95%;margin-bottom:20px;border-width:1px;border-style:solid;border-color:indigo;}

Everything above modifies Obsidian Portal’s CSS. The items below are my own custom classes.

/* everything below this are my custom CSS boxes */
.wyrm {font-family:Nosifer;background:black;padding:5px;margin:3px;color:chartreuse;border-color:chartreuse;border-style:solid;border-width:2px;border-radius:6px;background-image:url('http://cdn.obsidianportal.com/assets/156510/DarkGreenWyrm.jpg');font-size:100%;}

.weaver {font-family:Geo;background:black;padding:5px;margin:3px;color:lightsteelblue;border-color:lightsteelblue;border-style:solid;border-width:2px;border-radius:6px;background-image:url('http://cdn.obsidianportal.com/assets/156525/ChaosWeb.jpg');font-size:150%;line-height:90%}

.wyld {font-family:Underdog;color:orange;background:black;padding:5px;margin:3px;border-color:orange;border-style:solid;border-width:2px;border-radius:6px;background-image:url('http://cdn.obsidianportal.com/assets/156566/Vegetation.jpg');font-size:140%;line-height:95%}

.notebox {border-style:solid;border-width:2px;border-radius:6px;border-color:indigo;padding:5px;background:white;color:black;background-image:url('http://cdn.obsidianportal.com/assets/156756/MutedRust.jpg');}

.statbox {font-family:Courier New;adding:5px;margin:3px;border-color:black;border-style:solid;border-width:1px;border-radius:6px;padding:5px;background-image:none;background-color:#DDD;}

The Wiki Page Triple Box and Rollover Graphics

/* triple box with rollover buttons */

/* first we change the font color of the rollover text in case it needs to be different from the campaign default */
#campaign-content a.rollover:link {color:yellow;}
#campaign-content a.rollover:visited {color:yellow;}
#campaign-content a.rollover:hover {color:white;}
#campaign-content a.rollover:active {color:yellow;}

/* now we do graphic shenanigans. The image itself is 440px by 110px. The left side is 220×110 and is the default state. The right side is 220×110 and the hover state. */
#campaign-content a.rollover {position:relative;display:block;width:220px;height:110px;text-decoration: none;background:url('http://cdn.obsidianportal.com/assets/157294/ClawButton1.jpg');background-color:black;}
#campaign-content a.rollover:hover {background-position:-220px 0px;}

/* the text over the button */
.overtext {position:absolute;top:34%;left:0px;font-family:'Metal Mania';font-size:180%;text-shadow: -1px -1px 0 indigo, 1px -1px 0 indigo, -1px 1px 0 indigo, 1px 1px 0 indigo, 0px 0px 4px darkorange;text-align:center;width:220px;line-height:95%;}

/* a row just with text, like a title row */
.tribox-banner {font-family:'Metal Mania';font-size:x-large;color:indigo;text-align:center;width:684px;left:0px;padding:0px;margin:0px;background-color:none;height:40px;text-shadow: 2px 2px 2px darkorange;}

/* the formatting for the actual row of 3 boxes */
.tribox {position:relative;left:0px;width:684px;height:122px;padding:0px;margin:0px;margin-bottom:5px;background-color:none;}
.tribox.left {position:absolute;left:0px;top:3px;height:110px;width:220px;}
.tribox.center {position:absolute;left:230px;top:3px;height:110px;width:220px;}
.tribox.right {position:absolute;left:460px;top:3px;height:110px;width:220px;}

And on the Wiki page itself where you want to use it…

<div class="tribox-banner">ImaTitle</div>
<div class="tribox">
<div class="tribox left"><a href="#" class="rollover"><span class="overtext">Text1</span></a></div>
<div class="tribox center"><a href="#" class="rollover"><span class="overtext">Text2</span></a></div>
<div class="tribox right"><a href="#" class="rollover"><span class="overtext">Text3</span></a></div>
</div>

CSS Stylesheet

Werewolf: Auld Lang Syne wolfhound wolfhound