Tags

Dresden Files Dallas

CSS 5

Code Snippets

Code snippets are by far and away the most popular of my tutorials… so here you go.

My Fancy Rollover Buttons

Your Text

Put this in your CSS Stylesheet (aka the one in your ‘Edit Settings’). Explanations of all the various parts will follow afterwards.

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;}

On the Wiki page(s) you want to have the button(s) put this…

<a href="http://url-to-your-page-here" class="rollover"><span class="overtext">Your Text</span></a>

Explanation

Background Rollover Image

Ok, so first thing first, the art file. Notice it’s 440px by 110px. This is the part you set in the a.rollover bit. It’s the stuff inside this: background:url('URL-To-Your-Image-Here');

In the a.rollover and a.rollover:hover the height and width use half the graphic width: 220px. What happens is, you see the left half when the image is at rest. Then when you mouse-over the image you see the right half (that’s what the -220px in the a.rollover:hover is doing… it’s shifting the image 220 pixels to the left faster than your eye can register).

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.


My Overtext

For yours, obviously if you use a different sized button, you’ll need to adjust the width:?px; accordingly. Of course you’ll probably have different color:?; values to fit your particular scheme. The .overtext:hover is how you set your color when somebody moves a mouse over the text. This isn’t really needed since the background has a rollover but I like to be sure.

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

There’s a reason my rollover image is a semi-transparent PNG file. It’s so that I can do a layered background image and build fancy buttons on the fly without having to fire up GIMP or Photoshop all the time.
That’s still the same rollover and overtext from before. However, now I have an image behind it. I use images that are already found elsewhere on the site, if the user browses my site regularly then they’ve already been downloaded by the browser to their local machine… so I just put them to use as buttons.

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>

So you have to set the height:?; and width:?; to the same value as you’re using for your buttons. The background:url(''); is the image you’re using. You move the image around to suit your fancy by setting background-position:leftright updown;. You’ll have to fiddle with that to suit your personal taste.

My Triple Box

Now I personallly don’t use individual DIVs to contain all my images, I use a triple box.
The Marchioness
The Duke
Die Erlfürstin
Here’s the code for the triple box, this goes into your CSS Stylesheet in “Edit Settings”

The only thing I want to explain in detail first is the background image. That’s my absolute basic default image when I create a triple box. It’s those books. In this way, I always have a graphic even if I don’t have a link to put there yet. You don’t need it.

.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:white;border-style:solid;border-width:2px;background-image:url('http://cdn.obsidianportal.com/assets/160661/BookbacksDark.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/160661/BookbacksDark.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/160661/BookbacksDark.jpg');}

This is what you paste into your wiki page.

You’ll set your background image and the rollover yourself. Oh, and change the position to move it all around of course.

<div class="tribox">
<div class="tribox left" style="background:url('');background-position:-0px -0px;">YOUR-ROLLOVER-HERE</div>
<div class="tribox center" style="background:url('');background-position:-0px -0px;">YOUR-ROLLOVER-HERE</div>
<div class="tribox right" style="background:url('');background-position:-0px -0px;">YOUR-ROLLOVER-HERE</div>
</div>

If you leave the custom style out, because we have a default image set, it still looks fine.


Character Creation

Skill List

Fate System Overview

Code here, just to be sure you see the difference

<div class="tribox">
<div class="tribox left">YOUR-ROLLOVER-HERE</div>
<div class="tribox center">YOUR-ROLLOVER-HERE</div>
<div class="tribox right">YOUR-ROLLOVER-HERE</div>
</div>