CSS 1

Late August 2012, Obsidian Portal put in full fledged CSS Stylesheet support. I will write a CSS 4 at some point that will take these rudimentary first steps and show you how to leverage the new features. For now consider these “intro to simple CSS.”

CSS 1 – Getting Started (Boxes)

Lots of folks have been asking me to get them started with CSS on Obsidian Portal recently. I felt that I could do so best via a series of “Training Tutorials” to give everyone the basics and tools they might need.

Please understand that I’m a beginner myself. There may be more efficient ways of doing things, this is just how I do things. The great thing about Obsidian Portal is that there’s many ways to do the same things.

On your own wiki site, create a [[Test Page]]. This is your homework lab. I have used HTML escape characters everywhere I could. You “should” be able to cut and paste directly from this tutorial page into your own wiki.




Intro to the DIV Tag and Style Information

First thing you need to learn about is the idea of a DIV tag. Think of them as fancy parenthesis surrounding your Wiki content.

Conceptually, think of everything on a web page as a collection of boxes inside other boxes. You draw these boxes with DIV tags (one to begin, one at the end).

<div>Wassap Obsidian Portal?!</div>

By itself, a DIV is nearly useless. But we can add Style information inside the opening (or starting) div tag. That takes the form of style="" and inside those quotation marks you put all kinds of information. The most basic is changing text color. You add a whole string of these “style” commands separated by semi-colons so just get in the habit of using them right now.

<div style="color:red;">Wassap Obsidian Portal?!</div>

More Common Style Tags (play around with these)

  • Changing Font Size: (Link)
  • More Colors: (Link)

The Obsidian Portal Style Box

Ok, now let’s do something useful. The gray Obsidian Portal boxes you see on the right side of your screen are here to stay. So why not modify your page to incorporate them into your style?

You’re stuck with them, so use them to help your site’s look and feel!

First I’ll give the code, then explain the parts.

<div class="overallOPStyleGreyBox" style="position:relative;border-color:#404040;border-style:solid;border-width:6px;padding:6px;background-color:#202020;border-radius:6px;color:white;text-align:center;">Wassap Obsidian Portal?!</div>

Explanations

  • Class="" = rather than go into a full definition, let’s use a functional definition. You’re going to have a TON of DIV tags all over your page. Eventually you’re going to want to make changes six-months later and you’ll be wondering… which div tag is this? Which box does this change? By giving your DIV tags a Class="" think of it as giving them a name. Use a name that means something to you. Remember… six-months from now which box is this?
  • position:relative; = This is what lets your box “float” on the page. If you stick more div boxes in front of it, it automatically moves down. Most of your boxes will wind up having this.
  • border-color:#404040; = This makes the surrounding line the default light gray.
  • border-style:solid; = This is what makes it a solid line instead of dotted or whatever.
  • border-width;6px; = This sets how thick that outer light gray line is going to be in pixels (PX).
  • padding:6px; = This sets how much empty space exists between the edges of the border and where your text starts.
  • background-color:#202020; = This is what makes the background of the box the default Obsidian Portal dark gray.
  • border-radius:6px; = If you’re using Internet Explorer you may not even know this but, the corners of these boxes are actually rounded off smooth. This is the command to do that. You can see it best in Chrome or Firefox.
  • color:white; = Same as before. This changes the color of any text you put inside the box.
  • text-align:center; = This centers any text you type in the center of your box. Leave it out to leave your text normal/justified.

First Box in a Box

White text on grey may suit some of us … but not everybody wants that look. So how do we make it look cool? We put a box inside it that suits our style.

First the code so you can cut and paste into your homework area.

<div class="overallOPStyleGreyBox" style="position:relative;border-color:#404040;border-style:solid;border-width:6px;padding:6px;background-color:#202020;border-radius:6px;color:white;text-align:center;">
I am text in the grey box, white and centered
<div class="overallAccentBox" style="position:relative;background-color:wheat;padding:10px;border-color:brown;border-style:solid;border-width:2px;background-image:url(https://lh3.googleusercontent.com/-zPlSF0rWv-E/TnBSjCfmJ6I/AAAAAAAAHmo/JzCDhxM2I-g/s800/DresdenTile.jpg);color:black;text-align:left;">
I am text in the new box, black and left justified
</div></div>

Explanation of New/Changed Stuff

  • Original grey box = I changed the text slightly so you can see the differences
  • overallAccentBox = This is our new “box within a box”
    • background-color:wheat; = Even though this new box has a graphical background, it’s a good idea to manually set a color that’s in the same spectrum as your background. Sometimes graphics don’t load and you don’t want your text to potentially vanish.
    • border stuff = This is what’s creating that thin reddish-brown line around my graphic background. It makes for a good visual separation.
    • background-image:url(); = Set the value inside the parenthesis to whatever picture you want. This needs to be the REAL url, not the Obsidian Portal picture link. If you don’t know what that is, go do some Google searches on IMG tags until you grasp that (or pop over to Tutorial 2 real quick, I cover it at the top). It’s pretty essential info.
    • color: and text-align: changes = If I didn’t put these in, the values of the original box (the box on the outside) would be used and the text would be centered and white. This is called “inheritance” – stuff inside inherits the values of the outer box unless you over-ride it. You could also just delete the color and text-align values from the grey box and accomplish the same thing.

White Boxes

I like to also use white boxes inside my graphics box to draw attention to stuff. Cut and paste the below into the overallAccentBox. Remember, boxes within boxes. So this should be BEFORE your final closing </div> tags (there are 2 of them, one for the “overall grey box” and one for your “accent box”).

<div class="whiteBox" style="position:relative;padding:6px;border-style:solid;border-color:black;border-width:2px;background-color:white;border-radius:6px;color:black;">
Now we’re talking
</div>

That’s it for this intro tutorial. You can type your regular wiki text inside these div tags and get started really making your site pop visually.


Next Tutorial: Moving Stuff Around

CSS 1

Dresden Files Dallas wolfhound wolfhound