CSS 3

CSS 3 – Putting It All Together

Previous Tutorial: Moving Stuff Around



Ok so let’s be realistic for a minute. You know, and I know, that tutorials are great… but until you get PRACTICE using the stuff the tutorial talks about… it’s just pecking on the surface.

So this page is a bunch of “sample code” that as a wiki owner on Obsidian Portal you might find useful.


Custom Wallpaper

Technically we haven’t talked about z-index or some of the other options available for the background-image:url() style tag(s). Think of this as a freebie:

Big image that doesn’t move:
<div class="customWallpaper" style="width:100%;height:100%;background-image:url(http://cdn.obsidianportal.com/assets/72973/DallasSkyline4.jpg);background-repeat:no-repeat;position:fixed;top:0px;left:0px;z-index:-100;"></div>

If you want to use an image that tiles (repeats like a texture) just take out the “background-repeat:no-repeat;” part.


Guest Stars

This is the code I use for my Guest Stars boxes (NPC listings). BE SURE you put this inside a containing DIV box. On my Guest Page it’s inside my acccent box (the one with the graphic background). The “Episodes” page is basically a souped up version of this box.



The Witch of White Rock Lake

First Appearance: In a Cowslip’s Bell I Lie

She appeared mysteriously and vanished leaving only a small puddle of water. But she arrived with dire tidings and a curious manner of speech reminiscent of the Fae. Who is she? What is she? What does she want?

Location: n/a

<div class="NPCBox" style="margin:2px;left:-2px;position:relative;width:678px;height:160px;background-color:white;border-radius:6px;padding:2px;border-color:black;border-style:solid;border-width:2px;">
<div class="leftThumbnail" style="position:absolute;left:6px;top:48px;height:64px;width:64px;border-color:black;border-style:solid;border-width:2px;"><img style="width:64px;" src="http://cdn.obsidianportal.com/assets/80561/DrWho.png"></div>
<div class="moreButton" style="position:absolute;left:612px;top:48px;height:64px;width:64px;">[[Character Page|<img style="width:64px;" src="http://cdn.obsidianportal.com/assets/75830/ButtonMore.jpg">]]</div>
<div class="npcName" style="position:absolute;left:76px;top:0px;font-size:large;font-family:‘Rockwell Extra Bold’;color:brown;padding:2px;font-weight:bold;">NPC Name</div>
<div class="firstAppearance" style="position:absolute;left:76px;top:30px;color:black;font-weight:bold;padding:2px;">First Appearance: [[Sample Postgame]] </div>
<div class="summaryText" style="position:absolute;left:76px;top:50px;color:black;padding:2px;width:528px;">This is where I talk about this NPC</div>
<div class="locationText" style="position:absolute;left:76px;top:133px;color:black;font-weight:bold;padding:2px;">Location: [[Some Place In My Campaign]]</div>
</div>


Three Graphic Wiki Row

I replaced my Wiki main page with graphics. This is something StephenWollet did on his outstanding Star Trek Late Night wiki that I loved. I think it reallly draws the reader into your campaign and makes them want to know more. The buttons are 220px by 110px (2:1 aspect ratio).

Like the Guest Stars box, you’ll want to make sure these are inside a DIV of their own. I use the accent box for these as well.


<div class="TriBox" style="position:relative;left:-2px;width:678px;height:150px;padding:2px;margin:-30px 0px -15px;">
<div class="leftImage" style="position:absolute;left:5px;top:35px;">[[Wiki Page 1|<img src="http://cdn.obsidianportal.com/assets/89707/BlankWikiButton.png">]]</div>
<div class="centerImage" style="position:absolute;left:230px;top:35px;">[[Wiki Page 2|<img src="http://cdn.obsidianportal.com/assets/89707/BlankWikiButton.png">]]</div>
<div class="rightImage" style="position:absolute;left:455px;top:35px;">[[Wiki Page 3|<img src="http://cdn.obsidianportal.com/assets/89707/BlankWikiButton.png">]]</div>
</div>


Your Own Menu Bar

I first learned how to do this by dissecting what Duskreign did on his amazing wikis. I’ve tweaked the code a little since then, but he was the source.

The following code creates a box that covers up the existing Obsidian Portal menu bar with one of your own. There are a billion ways to do this, this is how I chose to do it. This code works on your WIKI* pages.

* Your initial first page you’ll have to futz with the TOP and LEFT settings and move it around (the first page is special and OP treats it differently). However every other wiki page will use the same TOP and LEFT values.

You’ll notice that I only use a couple of buttons on sub-pages and only use the entire full menu on a handful of main pages. This is because if I one day change my menu… I only have to edit 4-5 pages instead of hundreds!

Also notice I used ABSOLUTE web URL addresses (take them from your web browser address line) for both the pages they link to as well as the images. I found this was the most reliable and less likely to have glitches.

<div class="fancyMenuBarUpTop" style="position:relative;top:-82px;left:50%;margin-left:-367px;width:731px;background-color:white;"><p><a href="http://www.obsidianportal.com/campaign/dfd/wikis/episodes"><img src="http://cdn.obsidianportal.com/assets/75802/ButtonEpisodes.jpg" alt="Episodes"></a><a href="http://www.obsidianportal.com/campaign/dfd/wikis/cast"><img src="http://cdn.obsidianportal.com/assets/75801/ButtonCast.jpg" alt="Cast"></a><a href="http://www.obsidianportal.com/campaign/dfd/wikis/guest-stars"><img src="http://cdn.obsidianportal.com/assets/75816/ButtonGuestStars.jpg" alt="Guest Stars"></a><a href="http://www.obsidianportal.com/campaign/dfd/wikis/main-page"><img src="http://cdn.obsidianportal.com/assets/75823/ButtonWiki.jpg" alt="Wiki"></a><a href="http://www.obsidianportal.com/campaign/dfd/wikis/latest"><img src="http://cdn.obsidianportal.com/assets/80558/ButtonLatest.jpg" alt="Latest Updates"></a><a href="http://www.obsidianportal.com/campaign/dfd/comments"><img src="http://cdn.obsidianportal.com/assets/75827/ButtonComments.jpg" alt="Comments"></a><img src="http://cdn.obsidianportal.com/assets/75829/Blurb.jpg"></p></div>


Your Own Clickable Map

This is my map of Dallas. Rather than try to show the code, I’ll just tell you how I did it. Believe it or not you had the tools you needed to do it after the first tutorial. There are several ways to do maps like this, I think this is probably one of the easier ways.

The map itself is a giant div tag containing a background image (you set the div height and width to the same size as the map you’re using). All the clickable links are smaller absolute positioned boxes inside the map’s div tag. That’s it; “boxes within boxes.”

Here’s the code for the map container div:
<div class="theMap" style="position:relative;background:wheat;height:756px;width:695px;left:5px;background-image:url(http://cdn.obsidianportal.com/assets/87938/MapDallasProper.jpg);">
All your text boxes go here
</div>

And one of the text boxes (obviously every text box will have a different LEFT and TOP value):
<div style="position:absolute;background:#202020;left:500px;top:505px;padding:2px;border-color:#404040;border-style:solid;border-width:2px;border-radius:6px;"><A style="color:white;font-size:x-small;" HREF="http://www.obsidianportal.com/campaign/dfd/wikis/pleasant-grove">Pleasant Grove</A></div>


Header with a different Font

This gets tricky, not everybody will have the same fonts installed as you. But here’s the code anyway (just change the color, font-family, the centering, and size to suit yourself).

Header

<div class="header" style="font-size:xx-large;font-family:'Rockwell Extra Bold';color:brown;font-weight:bold;text-align:center;">Header</div>


Change the Color of a Link

I learned this trick from killervp and his phenomenal work on A God… Rebuilt. All you’re doing is adding styling to a normal link tag.

It has to be a regular HTML Link, not a wiki style:
<a style="color:blue;" href="http://www.obsidianportal.com/campaigns/dfd">the text</a>


Just in case it needs to be said…

If it’s not obvious: if you see something on this Wiki or Tutorial you like… USE IT. I’m not the jealous type. Just shoot me a note so I can see what you’ve done! We’re all in this hobby together, let’s enjoy it.

CSS Stylesheets

Once again, late August 2012, Obsidian Portal implemented real CSS stylesheets. Those will make a LOT of these snippets obsolete. When I have time I will provide a part 4 which helps you leverage these new tools.

It will be located here CSS 4

CSS 3

Dresden Files Dallas wolfhound wolfhound