CSS 4

This page has not been updated since the Obsidian Portal Reforge in the Fall of 2013. Consider all this information potentially obsolete.

CSS 4 – Custom Stylesheets

Ok… advanced class.

As of August 2012, if you go to your Manage Campaign → Edit Settings… scroll down to just underneath where you select a wallpaper and just before where you select your location… you’ll see some new features.

We’ll be focusing on that big empty Custom CSS box.

Ok, so necessary warning… you can seriously blow up your site with this stuff. So take it slow. Test everything line by line, don’t try to do too much all at once.

Personally, I created a throwaway campaign with my Obsidian Portal account that the only purpose was to test the Custom CSS before applying it to my Dresden Dallas site.

Let’s get started!

What is it?

That Custom CSS box represents a “stylesheet” for your campaign account here on Obsidian Portal. Basically think of it as a single place where you can put your CSS “style” tags and now they apply across your entire Campaign. If you change your mind down the road… you edit one place and it changes your entire site.

Powerful right? If you do it right it will save you HOURS of work. So let’s just dive in and learn how to do it with the single most useful example I can provide…

Example 1 – Custom Background

In our sample code provided in Tutorial 3 I gave you this:

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

This set your custom wallpaper on every page. But… you had to paste it on EVERY page. What happens when you have over 100 wiki pages etc etc and you decide to change your wallpaper? I’ll tell you what.. you won’t change your wallpaper. :)

What if you instead could make 1 change and it changes all your pages?

In that above-mentioned Custom CSS (Manage Campaigns → Edit Settings) box paste this:

body {background-image:url('http://cdn.obsidianportal.com/assets/72973/DallasSkyline4.jpg');background-attachment:fixed;}

Now go to one of your test pages and delete your CSS DIV tag that specifies a custom wallpaper … it should still be there if you did it right. Now hopefully you see the potential of what that Custom CSS box can do. But we’re not even CLOSE to scratching the surface. This is just a taste.

Class vs ID, the quick and dirty version

Some DIV tags have a class specified. These are prefixed with a . (period) in a CSS Stylesheet. Some DIV tags have an ID specified. These are prefixed with a # (hash/pound symbol/etc.).

In your Custom CSS box, paste this:

.whitebox {background-color:white;padding:5px;margin:3px;color:black;border-color:black;border-style:solid;border-width:1px;border-radius:6px;}

Now on a test page, paste this:

<div class="whitebox">I am test text</div>

Look familiar?

I am test text

Now, anywhere, and I mean anywhere on your site, if you throw that DIV class=“box white” around some text… it’ll appear in that “custom class” you just created. Neat eh?

.whitebox = This declared the custom class you were creating.
{} = everything inside the curly brackets is just like all those “style” tags you’ve been creating up to now. Except now, you make one change, and every single “box white” class on your site changes with it (after you refresh/reload the page that is).

So to the .whitebox class… add “color:red;” inside the curly brackets. What happens?

ID is similar… <div id="whitebox">I am test text</div> … rather than go into a long explanation. Just know they’re different. In your Custom CSS box you declare it as #whitebox instead of .whitebox.

Also know that if you have both an ID and a Class… ID wins. So use them carefully.

Reading Page Source…

and then doing something with it.

Ok… everything before has brought you to this. Reading page code that somebody ELSE did, and turning that into something YOU can use.

Go grab a drink, clear your head, come back fresh. This is where rubber meets the road.

Right Click, View Code

Internet Explorer, right click on the page, and select “View Source”
Firefox, right click on the page, and select “View Page Source”

Your browser will have something similar. This tutorial is written with Firefox as my browser.

Oh My Stars… what is all that jibberish?!?!?!?!

We’re going to focus on the IDs and Classes. Basically, the folks at Obsidian Portal were nice enough to make sure just about everything was surrounded with a DIV that had either an ID or class name. This is really a great thing believe it or not.

Rather than take too long to explain, let’s do something with it.

Search for this <div id="content">

Search

Control + F will almost always launch your “word find” feature when you’re viewing page code

ps – This intro tutorial doesn’t include using stuff like Firebug to help decipher code.

Notice how basically, the bulk of the page’s code is after this tag? Turn it off and see if you notice a change to your page, I’ll give you a hint… ever get sick of that big white background box?

In your Custom CSS box, paste this: #content {background-color:transparent;border-style:none;}

Apply it and check out your page. See how the white box is now gone?

You just found something that had a specific ID name (id="content") and overwrote it with your own value (by setting a new value inside the curly brackets for #content).

See where this is going? Basically your world consists of finding Class names and ID names, and setting new values inside the curly brackets.

But, but, my pages are ALL transparent!!!!

Yeah I know we’ll get there. Go remove your Custom CSS, we’ll revisit it.

CSS crap inside other CSS crap

The real problem with complex CSS is nested CSS. I’ll just call it like it is… sometimes figuring out how to make X change because it’s nested inside Y and also Z is a pain… in… the… you know.

Let’s take it slow.

Let’s turn off that white box again, but turn ON white boxes on our own page’s stuff. Apply this:

#content {background-color:transparent;border-style:none;}
#campaign-content {background-color:white;color:black;padding:5px;}

I didn’t pick these two arbitrarily. Basically, everything in between content and campaign-content is Obsidian Portal’s CSS. If you want to change it, it’ll change the overall look and feel of how your page is presented. It’s cool, but it’s work.

Basically ‘campaign-content’ is nested way way down and yet still inside ‘content’ … yeah, even though all that additional text and crud are in between, it’s still a X inside Y.

There’s another form of nesting… we’ll get there. It’s the worse of the two.

If you want to do this, lemme give you a couple more tags that will just make your life easier. These are IDs/Classes that pretty much control all your forms, editing boxes, search boxes, and all the crud that you see when you hit “Edit Page.” The below just sets the background color to that generic Obsidian Portal dark grey, with white text so you can read it.


fieldset {color:white;background-color:#202020;}
.notification-controls {color:white;background-color:#202020;}
label {color:white;background-color:#202020;}
.archived-version-compare {color:white;background-color:#202020;}
.search-result {color:white;background-color:#202020;}
span.match {color:white;background-color:#202020;}
legend {background-color:#202020;}

Revenge of CSS crap inside other CSS crap

More to come…. so, so much more…

CSS 4

Dresden Files Dallas wolfhound wolfhound