CSS from DCoGC - Mercenaries Guild

So Tim made mention of doing something with the main wiki page, and I thought i’d offer up the CSS code I used for my little test campaign I use to fool around with. I hadn’t really thought of it before because it adds a bit of complexity to setting things up in some scenarios. So I am going to try and comment it as best as possible to make any needed edits as easy as possible.

Core CSS

This is the core style CSS, allowing a number of adjustments to various aspects.

A working example of this CSS, albeit with different stylings, can be found here: Eclipse Phase – Titanomachy

/* High Level Look and Feel Items */

#content {border:1px solid gold; background-color:black; background-image:url(‘http://cdn.obsidianportal.com/assets/221811/stacked_stone_small.jpg’);}
#wrapper {border:none; background-image:url(‘http://cdn.obsidianportal.com/assets/221805/seamless-dark-wood-texture3.jpg’);}
#campaign-banner-container {border:1px solid gold;border-radius:6px;}
#campaign-content {border:1px solid gold;border-radius:6px;background-image:url(‘http://cdn.obsidianportal.com/assets/221815/Parchment04.jpg’);font-family:‘Georgia’,serif;}

/* If you want change the background wallpaper, change the below URL */
body {background-image:url(‘http://cdn.obsidianportal.com/assets/221805/seamless-dark-wood-texture3.jpg’);background-attachment:fixed;}

/* your campaign comments */
.comment-list .comment {border-bottom:1px solid gold;}
.comment-list .comment {border:1px solid gold;margin:5px;border-radius:6px;}
.comment-list .comment-header {min-height:50px;}
.comment-list .comment-text {border:none;padding:3px;}

/* the columns and sidebars on the right side */
#secondary-column .sidebar {background-image:url(‘http://cdn.obsidianportal.com/assets/221812/rawleather.jpg’);color:black;}
#secondary-column .sidebar p {color:black;}
#secondary-column .sidebar {border:1px solid gold; border-radius:3px; padding:5px; background-color:black;}
#secondary-column .sidebar a:link {color:gold; text-decoration:none;}
#secondary-column .sidebar a:visited {color:gold; text-decoration:none;}
#secondary-column .sidebar a:hover {color:#FD0; text-decoration:underline;}
#secondary-column .sidebar a:active {color:gold; text-decoration:none;}

#secondary-column .sidebar h5 {margin:2px; color:gold; border-bottom:1px solid gold; font-weight:normal; font-size:175%; font-family:‘Jim Nightshade’; }
#secondary-column .sidebar .recent-update {border-bottom:1px dotted gold;}

/* 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:white;background-color:transparent;border-style:solid;border-color:gold;border-width:1px;background-image:url(‘http://cdn.obsidianportal.com/assets/221812/rawleather.jpg’);}
.tabnav a:hover {color:#FD0;background-color:transparent;border-style:solid;border-color:yellow;border-width:1px;background-image:url(‘http://cdn.obsidianportal.com/assets/221812/rawleather.jpg’);}
.tabnav a.active:link,.tabnav a.active:visited,.tabnav a.active:active,.tabnav a.active:hover{color:gold;background-color:transparent;border-style:solid;border-color:yellow;border-width:1px;background-image:url(‘http://cdn.obsidianportal.com/assets/221812/rawleather.jpg’);}

/* how your page headers look */
#campaign-content h1 {font-family:‘Jim Nightshade’; color:gold;margin-top:5px;margin-bottom:10px;border-bottom:none; font-weight:normal; font-size:266%;}
#campaign-content h2 {font-family:‘Jim Nightshade’; color:gold;margin-top:5px;margin-bottom:10px;border-bottom:none; font-weight:normal; font-size:233%;}
#campaign-content h3 {font-family:‘Jim Nightshade’; color:gold;margin-top:5px;margin-bottom:10px;border-bottom:none; font-weight:normal; font-size:200%;}
#campaign-content h4 {font-family:‘Jim Nightshade’; color:gold;margin-top:5px;margin-bottom:10px;border-bottom:none; font-weight:normal; font-size:175%;}
#campaign-content h5 {font-family:‘Jim Nightshade’; color:gold;margin-top:5px;margin-bottom:10px;border-bottom:none; font-weight:normal; font-size:150%;}

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

/* how links to pages that don’t exist yet look */
#campaign-content a:link.create-wiki-page-link {color:yellow;text-decoration:underline;}
#campaign-content a:visited.create-wiki-page-link {color:yellow;text-decoration:underline;}
#campaign-content a:hover.create-wiki-page-link {color:purple;text-decoration:underline;}
#campaign-content a:active.create-wiki-page-link {color:yellow;text-decoration:underline;}

/* WIKI PAGES */
.wiki-page .textile_longtext.page-body img {border:1px solid gold;}
.wiki-page {padding:4px;}
.campaign-home {padding:4px;}
.campaign-home .textile_longtext.page-body img {border:1px solid gold;}

/* ADVENTURE LOG */
#campaign-content .adventure-log-list {background-image:url(‘http://cdn.obsidianportal.com/assets/221812/rawleather.jpg’);padding:5px;border-radius:6px;}
#campaign-content .adventure-log-page .post-footer {border-bottom:1px dashed black;margin:10px;}
#campaign-content .adventure-log-page {margin-bottom:5px;background-image:url(‘http://cdn.obsidianportal.com/assets/221815/Parchment04.jpg’);padding:4px;border-radius:6px;border:1px solid black;}
#campaign-content .adventure-log-page .post-header {border-bottom:2px solid black;}
#campaign-content h3.post-title {border-bottom:none;}
#campaign-content h4.post-tagline {border-bottom:none;}
#campaign-content h5.post-time {border-bottom:none;color:black;}
.adventure-log-page .textile_longtext.post-body img {border:1px solid gold;}

/* MAP TAB */
#campaign-content h3.map-name {border-bottom:none;}
#campaign-content h2.map-name {border-bottom:none;}

/* FORUM TAB */
.header-row th {background:none; border-bottom:1px solid maroon; font-weight:normal; font-size:150%; font-family:‘Jim Nightshade’; color:gold;}
.post-metadata {padding:5px;}
.subforum-row.odd td {background:none;}
.subforum-row.even td {background:none; border-top:1px dotted gold; border-bottom:1px dotted maroon;}
.topic-row.odd td {background:none;}
.topic-row.even td {background:none; border-top:1px dotted gold; border-bottom:1px dotted maroon;}
.campaign-forum-post .textile_longtext.body {background:none; margin:5px; padding:5px; border:1px dotted gold;}

/* CHARACTERS TAB */
#character-list .pc-list {margin-bottom:5px;padding:4px;}
#character-list .npc-list {margin-bottom:5px;padding:4px;}
#character-list .gm-only-npc-list {margin-bottom:5px;padding:4px;}

.pc-list a:link {font-size:220%;font-family:‘Jim Nightshade’; }
.npc-list a:link {font-size:220%;font-family:‘Jim Nightshade’; }
.gm-only-npc-list a:link {font-size:220%;font-family:‘Jim Nightshade’; }

.pc-list a:link.character_link {}
.npc-list a:link.character_link {}

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

.pc-list li.character-list-item {border:1px dotted black;margin-bottom:5px;}
.npc-list li.character-list-item {border:1px dotted gold;margin-bottom:5px;}
.gm-only-npc-list li.character-list-item {border:1px dotted yellow;margin-bottom:5px;}

#character-list img.game-content-image {height:58px;width:58px;border:1px solid maroon;}

/* ACTUAL CHARACTER PAGETHE DEFAULT NON DYNAMIC ONE */
#campaign-content .character-page .static-sheet {min-height:400px; padding:4px;}
#campaign-content .character-page .static-sheet .character-metadata {height:256px;width:455px;border:1px solid gold; text-align:center; background-image:url(‘http://cdn.obsidianportal.com/assets/176305/leather2.jpg’); border-radius:6px;}
#campaign-content .character-page .static-sheet .character-metadata span {font-family:‘Jim Nightshade’; font-size:150%;}
#campaign-content .character-page .static-sheet .character-avatar {border:1px solid maroon; height:256px; width:256px; }
#campaign-content .character-page .static-sheet .character-avatar img {}

/* ITEM TAB */
#item-list .item-list {}
#item-list .item-list a:link {font-size:220%;font-family:‘Jim Nightshade’; }
#item-list .item-list a:link.character_link {}
#item-list li {margin-bottom:5px;}
#item-list li.item-list-item a:link.tag-link {position:relative;top:-12px;font-size:xx-small;font-family:‘Georgia’;}
#item-list .item-list li.item-list-item {border:1px dotted gold;margin-bottom:5px;}
#item-list img.game-content-image {height:58px;width:58px;border:1px solid gold;}

/* ACTUAL ITEM PAGE */
#campaign-content .item-page {min-height:400px; padding:4px;}
#campaign-content .item-page .item-metadata {height:256px;width:455px;border:1px solid maroon; text-align:center; background-image:url(‘http://cdn.obsidianportal.com/assets/176305/leather2.jpg’); border-radius:6px;}
#campaign-content .item-page .item-metadata span {font-family:‘Jim Nightshade’; font-size:150%;}
#campaign-content .item-page .item-avatar {border:1px solid gold;}

/* block of items best left 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;}
span.match {color:white; background-color:#202020;}
fieldset {color:white; background-color:#202020;}
fieldset h4 {color:white;}
.notification-controls {color:white; background-color:#202020;}
label {color:white; background-color:none;}
#flash-messages {position:absolute; top:0px; left:0px; color:black;}
#wiki-list {color:white; background-color:#202020;}
legend {color:white; background-color:#202020;}
/* end of the block of items best left alone */

/* I WOULD RECOMMEND PUTTING YOUR CUSTOM CSS BELOW THIS LINE */

Sliders CSS

This is the CSS that causes the side bar and top bar to collapse until hovered over.

/* Sliders */

#header {
border: 1px solid white;
border-radius: 5px;
width: 42px;
margin: 5px 0px -50px -50px;
opacity: .5;
transition: all 0.3s ease-in-out;
}
#header:hover {
width: 1090px;
margin: 5px 0px 5px -50px;
opacity: 1;
transition: all 0.3s ease-in-out;
}

.sidebar { overflow:hidden; }
#campaign-controls-sidebar, #campaign-party-info-sidebar, #campaign-search-sidebar, #campaign-latest-updates-sidebar, #campaign-quick-stats-sidebar, #campaign-fans-sidebar, #wiki-page-tags-sidebar, #wiki-filter-by-tag-sidebar, #social-sharing-sidebar, #model-versions-sidebar, #wiki-page-tools-sidebar, #add-npc-sidebar, #sort-by-tag-sidebar, #manage-forums-sidebar, #calendar-next-event-sidebar, #calendar-subscribe-webcal-sidebar, #game-character-tools-sidebar {
max-height:15px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
#campaign-controls-sidebar:hover, #campaign-party-info-sidebar:hover, #campaign-search-sidebar:hover, #campaign-latest-updates-sidebar:hover, #campaign-quick-stats-sidebar:hover, #campaign-fans-sidebar:hover, #wiki-page-tags-sidebar:hover, #wiki-filter-by-tag-sidebar:hover, #social-sharing-sidebar:hover, #model-versions-sidebar:hover, #wiki-page-tools-sidebar:hover, #add-npc-sidebar:hover, #sort-by-tag-sidebar:hover, #manage-forums-sidebar:hover, #calendar-next-event-sidebar:hover, #calendar-subscribe-webcal-sidebar:hover, #game-character-tools-sidebar:hover {
max-height:3000px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
#secondary-column #campaign-controls-sidebar h4, #secondary-column #campaign-party-info-sidebar h4, #secondary-column #campaign-search-sidebar h4, #secondary-column #campaign-latest-updates-sidebar h4, #secondary-column #campaign-quick-stats-sidebar h4, #secondary-column #campaign-fans-sidebar h4, #secondary-column #wiki-page-tags-sidebar h4, #secondary-column #wiki-filter-by-tag-sidebar h4, #secondary-column #social-sharing-sidebar h4, #secondary-column #model-versions-sidebar h4, #secondary-column #wiki-page-tools-sidebar h4, #secondary-column #add-npc-sidebar h4, #secondary-column #sort-by-tag-sidebar h4, #secondary-column #manage-forums-sidebar h4, #secondary-column #calendar-next-event-sidebar h4, #secondary-column #calendar-subscribe-webcal-sidebar h4, #secondary-column #game-character-tools-sidebar h4 { margin:0px; }

/* End Sliders */



h2. Character page CSS

The CSS is a bit problematic, as it requires the DM to manually update the portraits for all characters on the character page. May be more trouble than it is worth, especially if you expect to have a lot of NPC’s on the site. Still, you should only ever need do it once per character.

Each character will have an entry that looks like this:

#character-list-item-471767.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/215087/RXgi52.jpg”); }

The number in character-list-item-471767 is unique to each character, and you’ll need to determine that characters ID, and replace the above with it. This can be found by viewing the source code of the character page. The background-image:url(“enter image url here”); needs to have the image, best if it is square.

/* Characters */

/* ALTERATIONS FOR CHARACTER LISTING */

.character-list-item {
position:relative;border:2px solid black;width:156px;min-height:156px;
display:inline-block;margin-bottom:5px;margin-right:7px;text-align:center;
background-repeat:no-repeat;background-size:156px 156px;font-size:50%;overflow:hidden;
}
.character-list-item a {
position:absolute;bottom:0px;text-decoration:none;display:block;
padding-top:130px;width:100%;font-size:50%;font-family:‘Orbitron’;text-align:center;max-height:156px;
max-width:156px;
}
a.character_link {
font-size:16px;font-size:50%;font-weight:bold;color:white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
-1px 1px 0 #000, 1px 1px 0 #000, 2px 2px #000000;
}
#character-list img.game-content-image, #character-list .tag-list { display:none; }

/* ALTERATIONS FOR CHARACTER LISTING */

/* CHARACTER PORTRAIT ASSIGNMENTS FOR CHARACTER LISTING */
#character-list-item-446337.character-list-item { background-image: url(“http://cdn.obsidianportal.com/images/1094755/man-silhouette-question-mark.jpeg”); }

/* CHARACTER PORTRAIT ASSIGNMENTS FOR CHARACTER LISTING */



h2. Custom Navigation CSS

This CSS allows you to rename the nav bar links. For instance, if you want ‘adventure log’ to say journal instead.

/* Nav Bar */

.tabnav li.adventure-log a, .tabnav li.adventure-log a.active {font-size:0pt;max-height:14px;}
.adventure-log a:before {content: “Journals”;font-size:10px;}

.tabnav li.wiki a, .tabnav li.wiki a.active {font-size:0pt;max-height:14px;}
.wiki a:before {content: “Guild Lore”;font-size:10px;}

.tabnav li.characters a, .tabnav li.characters a.active {font-size:0pt;max-height:14px;}
.characters a:before {content: “Members”;font-size:10px;}

.tabnav li.items a, .tabnav li.items a.active {font-size:0pt;max-height:14px;}
.items a:before {content: “Armory”;font-size:10px;}

.tabnav li.forum a, .tabnav li.forum a.active {font-size:0pt;max-height:14px;}
.forum a:before {content: “Messages”;font-size:10px;}

.tabnav li.comments a, .tabnav li.comments a.active {font-size:0pt;max-height:14px;}
.comments a:before {content: “Tavern Talk”;font-size:10px;}



h2. CSS/Non-CSS code. Three across Wiki.

This is the code required to have the three across wiki like on eclipse phase.

/* Tribox */

.tribox {position:relative;left:0px;width:684px;height:122px;padding:0px;margin:0px;margin-bottom:5px;text-align:center;background-color:none;vertical-align:middle;}

.tribox.left {position:absolute;left:0px;top:3px;width:220px;height:110px;background-color:black;border-style:solid;border-width:2px;border-color:#000;background-image:url(‘http://cdn.obsidianportal.com/assets/209791/bluecircuit.jpg’);}

.tribox.center {position:absolute;left:230px;top:3px;width:220px;height:110px;background-color:white;border-style:solid;border-width:2px;border-color:black;padding:0px;background-image:url(‘http://cdn.obsidianportal.com/assets/209791/bluecircuit.jpg’);}

.tribox.right {position:absolute;left:460px;top:3px;width:220px;height:110px;background-color:white;border-style:solid;border-width:2px;border-color:black;padding:0px;background-image:url(‘http://cdn.obsidianportal.com/assets/209791/bluecircuit.jpg’);}

Non-CSS code. Three across Wiki.

So this is code that goes on specific pages, and is tied to the CSS above. If you do not use this, it should function as default. The image is the background image used, the font can be changed to any google font.

<div class="tribox"> <div class="tribox left" style="background:url('http://cdn.obsidianportal.com/assets/209937/location1.jpg');font-family:'Orbitron';background-position:-0px -0px;"><a href="http://www.obsidianportal.com/campaign/eptitan/wikis/sunward-locations" class="rollover"><span class="overtext">Sunward</span></a></div> <div class="tribox center" style="background:url('http://cdn.obsidianportal.com/assets/209938/location2.jpg');font-family:'Orbitron';background-position:-0px -0px;"><a href="http://www.obsidianportal.com/campaign/eptitan/wikis/rimward-locations" class="rollover"><span class="overtext">Rimward</span></a></div> <div class="tribox right" style="background:url('http://cdn.obsidianportal.com/assets/209939/location3.jpg');font-family:'Orbitron';background-position:-0px -0px;"><a href="http://www.obsidianportal.com/campaign/eptitan/wikis/other-locations" class="rollover"><span class="overtext">Other</span></a></div>

CSS from DCoGC - Mercenaries Guild

Dove's City of Greyhawk Campaign mrwakka