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.


As of 8/13/2013 The “triple box” has been retired. However, I will leave the text here for folks that might be interested. I use a new “Dynamic Wiki Buttons” and it will be listed after all this below.

My Triple Box

Now I personallly don’t use individual DIVs to contain all my images, I use a triple box.
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.

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>

New Dynamic Wiki Buttons

OK! Now to use everything we learned up above plus a few new tricks.

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
  • Position:relative; display:block – these are what will allow your blocks to be treated as whole ‘units’ (blocks) by your browser
  • Width:218px; height:108px; – my graphic is 220 by 110, however because of my 2px borders I subtracted 2. If you decide to drop the border-top, border-left nonsense, these should go back to 220 by 110 or whatever you go with.
  • text-decoration:none; – just to keep away any underlines or anything like that
  • background:url(''); – this will be a link to YOUR rollover graphic. If your dimensions are 220 by 110, the graphic itself will be 440 by 110 because we only show half of it at a time.

    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
  • Ok so this is the Text that you will put OVER your button graphic. In my version it lights up and changes color, etc. etc. and the Google Font I use is “Rye”
  • Note the Text-shadow stuff doesn’t work in Internet Explorer so feel free to drop it, line-height:97%; is what allows my text to “scrunch up” vertically so it’s not so tall.

    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
  • This is our actual container DIV that we put on our WIKI page itself. Note the height:110px; width:220px; is my desired visible size.
  • The magic happens because of display:inline-block; vertical-align:top; this is what tells your browser to treat these buttons as units and align their top pixels and make your rows and columns on the fly.
  • background:url(''); This is what sets my “default” image. Meaning, when I create a brand new button, this is the basic background graphic that’s seen. In this case I use a woody grain thing.



    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
  • Replace the # with the full URL (from your browser address bar) to your page. You’ll want to have already created your wiki page before you hook it up to a button like this.
  • Replace “Your Text Here” with whatever you want the button to display. This doesn’t have to be exactly like your wiki page actual name/address, so you’re free to reword it/make it shorter/whatever.

    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
  • I’ve added a style= tag to the main DIV and in this style tag I give a new background-image and move it around a bit. This is because my default graphic size is 256px by 256px, so I like to move that around inside my 220 by 110 sized button. If you custom crop your images, you can skip the background-position:x y; stuff.

    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.

  • CSS 5

    Dresden Files Dallas wolfhound wolfhound