Monday, May 26, 2014

Campaign Journal 2: Website Obstacle Course

Originally published September 21, 2012

In my first podcast, I discussed my work with campaign websites. I also mentioned that I wanted to try out Obsidian Portal in the near future. With my Hunter: the Vigil game going forward, I decided to take a more serious look. This week’s blog is one part review and one part advice.

On the review side, after going over all the features I found that Obsidian Portal’s free service is only worth it if you are a player. The major limitations of the service compared to other wikis are more limited options for customizing the look of your site, minimal storage space for uploaded graphics, and a lack of the extra features that make Obsidian Portal so attractive. If you want free I would suggest using Wikidot.

On the other hand if you are willing to pay for more features, Obsidian Portal is well worth it. Membership is $40 a year and buys you unlimited campaigns (compared with Wikidot’s 5, unless you spend more money than I just mentioned), a gamemaster (GM) secrets area on each page (hidden from players but with sharable sections for specific players), a built-in calendar with email notification, a campaign forum, and no advertisement (as well a couple extra odds and ends).

Lastly note only the gamemaster needs the membership. The players can access all the advanced features on the GM’s site. For the price of a large rulebook a year, I find the service quite reasonable. The key for me is the number of campaigns combined with the GM area. In earlier games I would need a separate wiki for my game notes and this quickly was exhausting my free supply on Wikidot.

Now on to the advice. Or rather a minor complaint with a happy ending. The wiki in Obsidian Portal is fully customizable though the documentation put up by the staff does warn you what areas not to modify. Frustratingly, the forums seem to be filled with people who don’t believe you can modify as much of the layout as you can.

For example, the background color. I saw no examples and there was nothing on the forums about changing the background color on a global level. Everything involved hacks like placing a colored block behind your text. It took several hours but I eventually taught myself enough CSS to make the modifications I wanted. You, my readers, will can now learn those secrets.

Basically what you need to do is modify certain classes which define the various components of the website. A class might define a column containing the text, the style of a title, or how a particular font type rendered. The definition format is straight forward:

class {attribute1:setting1;attribute2:setting2}

In my case I wanted to create the effect of folder with papers in it. You can see the end result here: The Abyss Stares Back. The way I got this effect was by adding some class alterations to the Custom CSS section under the settings for my website. Specifically I added:

#secondary-column {background-color: #FFFFFF} #main-column {background-color:#E6DD93; margin: 10px 246px 10px 0px; padding: 0px} #campaign-banner-container {background-color: #FFFFFF; padding-right: 15px; margin-bottom: 0px} .tabnav {background-color: #FFFFFF; padding-top: 10px} .tabnav a:visited {background:#E6DD93;color: #000} .tabnav a:visited.active {border-bottom: 1px solid #E6DD93; background: #E6DD93} .page-title {color:#E6DD93;font-size:10%;font-family:"Courier","Courier New",monospace;}

So #secondary-column is the column behind the pods on the right hand side. Here I changed the background-color to be white (which in hex code is #FFFFFF) since it lies over the #main-column which has a background-color like a manilla folder. The margins and padding are to ensure that the color doesn't extend outside of the folder area, you might leave that out if you like. #campaign-banner-container is the code that contains your banner and .tabnav contains the tabs. I made some adjustments to ensure that the colors were right there as well.

Lastly .page-title is set to make the normal wiki page titles tiny and the same colors as the background (essentially invisible). This is because I have that paper background where all my text occurs.

The code for the background is part of each page and calls an image I uploaded:

url('http://cdn.obsidianportal.com/assets/141911/whitepaper.jpeg');width:95%;padding:10px">
your text goes here
</div>


You can learn more about CSS at w3school.com.

I hope this helps. Let me know if you know any interesting tricks or other website possibilities.

No comments: