Campaign of the Month: December 2011
Dresden Files Dallas
CSS 5
This page has not been updated since the Obsidian Portal Reforge in the Fall of 2013. Consider all this information potentially obsolete.
Code Snippets
My Fancy Rollover Buttons
a.rollover {position:relative;display:block;width:220px;height:110px;text-decoration: none;background:url('http://cdn.obsidianportal.com/assets/160769/GlowLettersRollover.png');background-color:transparent;}
a.rollover:hover {background-position:-220px 0px;}
.overtext {position:absolute;top:34%;left:0px;text-align:center;width:220px;color:darkorange;}
.overtext:hover {color:orange;}
<a href="http://url-to-your-page-here" class="rollover"><span class="overtext">Your Text</span></a>
Explanation
Background Rollover Image
The other thing about this graphic, is for my personal preference there’s a 50% transparent black background. This allows any text I put over the button to have a darker background. That’s a personal preference.
Overtext
The Overtext is the actual text of the button. I prefer hard coding the full URL rather than use the Obsidian Portal dynamic wiki links method because sometimes I want the text on the button to be slightly different from the page name, and I don’t want there to be a conflict between Obsidian Portal markup and pure HTML.
Now, MY overtext is fancier than the one I listed above. It has a font-family value set and a drop shadow. You can do anything with it that you can do with regular HTML text.
Layered Background Images

The code is really simple. Just put the link, inside a div, and set the div to have a background image that you move around via the background-position feature.
So you can see why I use a 50% transparent background, the image I am using is displayed in this box. If I didn’t darken the image, my Overtext would have to be an even brighter color – which might take away from my visual theme.
<div style="height:110px;width:220px;background:url('URL-TO-YOUR-IMAGE-HERE');background-position:-18px -73px;">THE-AHREF-AND-SPAN-FOR-YOUR-ROLLOVER-GOES-HERE</div>
New Dynamic Wiki Buttons
This is a way of adding a few CSS keywords to your rollover graphic and this allows your buttons to dynamically “sort” themselves into rows and columns FOR you. This means no hunting and pecking through lines of CSS trying to figure out which tribox contains which button.
First, the CSS (part 1 of 3)
a.newroll { position:relative; display:block; width:218px; height:108px; text-decoration: none; background:url('http://cdn.obsidianportal.com/assets/162319/Glowborder.png'); background-color:transparent; border-top:2px solid gray; border-left:2px solid gray; border-right:2px solid black; border-bottom:2px solid black;}
a.newroll:hover { background-position:-220px 0px; }
Explanation
Here’s the graphic above (feel free to use it):

More CSS (part 2 of 3)
.newovertext { position:absolute; top:34%; left:0px; text-align:center; width:220px; color:darkorange; font-size:x-large; font-family:'Rye'; line-height:97%; text-shadow:-2px 0px black,0px -2px black, 2px 0px black, 0px 2px black; }
.newovertext:hover { color:orange; text-shadow:-2px 0px maroon,0px -2px maroon, 2px 0px maroon, 0px 2px maroon; }
Explanation
More CSS (part 3 of 3)
.newwiki { display:inline-block; vertical-align:top; height:110px; width:220px; margin:2px; background:url('http://cdn.obsidianportal.com/assets/162315/DFRPG_WoodButton.jpg'); }
Explanation

Now the CSS is set up, now we need the actual Code that goes on your WIKI page itself.
Wiki Page Side HTML
Version 1 – Default Graphic
<div class="newwiki"><A class="newroll" href="#"><span class="newovertext">Your Text Here</span></A></div>
Explanation
Here’s what it all looks like.
Version 2 – Customized Graphic
You can also embed ANOTHER graphic for even more customization. Remember the CSS has a “default” graphic… you can overwrite that with something more relevant to your page content.
<div class="newwiki" style="background-image:url('http://cdn.obsidianportal.com/assets/231696/SpecialRangerBadge.jpg'); background-position:-18px -73px;" ><A class="newroll" href="#"><span class="newovertext">Your Text Here</span></A></div>
Explanation
Here’s what it looks like:
This is the graphic that I am using (that I have to move it around a bit)
So What’s the Big Deal?
Now, when I put a button on my page. I just add the full div and forget about it. My page will dynamically create all my rows and columns for me. The 3 button row that I begin this section with looks like this:
<div class="newwiki"><A class="newroll" href="http://www.obsidianportal.com/campaign/dfd/wikis/jade-court"><span class="newovertext">Jade Court</span></A></div>
<div class="newwiki"><A class="newroll" href="http://www.obsidianportal.com/campaign/dfd/wikis/the-confederacy"><span class="newovertext">The Confederacy</span></A></div>
<div class="newwiki" style="background-image:url('http://cdn.obsidianportal.com/assets/231696/SpecialRangerBadge.jpg'); background-position:-18px -73px;"><A class="newroll" href="http://www.obsidianportal.com/campaign/dfd/wikis/ranger-special-force"><span class="newovertext">Texas Rangers</span></A></div>
I just add new boxes, or cut and paste to move them around, easy peasy.
For instance, if I delete The Jade Court, everything shifts to the left for me.