Previous || Beginning of Primer || Next

Session 1: A Glimpse Under the Hood of the E2 Zen Theme

In this part of the CSS Primer for the E2 Zen Theme, you will learn how to act like you know what you're doing for a few minutes through a hands-on peek at what CSS can do and how a stylesheet is written. Specifically, you will start with a blank stylesheet to learn the most basic movable parts of the E2 page and how CSS is used to position them.

Tabula Rasa

Switch to the Zen theme and create a blank CSS: Go to your User Settings page by clicking on the "Main" item in the "Epicenter"; nodelet. Near the top of the User Setting page you should see a pop-up menu labeled "Theme:" Use that menu to change your theme to "Zen" and then go down to the bottom and click on the button labeled "Submit". If the button label is "Stumbit" or something like that, just laugh at the darling cuteness of E2 and click on it anyway.

OK. Everything looks differerent in Zen. What you see now is the Default Zen Style, which is currently the Kernel Blue theme.

Now go to the draughty atelier, which is the page that let's you define your own E2 Zen style.

Type the name you choose for your style in the text box labeled "Sheet Title". (See footnote.) In the "Content" text box, type "body { }". (If you already have something in there, first save it somewhere and then delete everything to make the Contents empty.)

Find the Create Stylesheet button below the Content text box and click it. When the new page loads, it has your stylesheet name as the title, but nothing else has changed.

Now find the "Use this stylesheet" checkbox& below the Content text box and click on it to check it. Then click on the "Submit" button. What you see now is the result of your blank stylesheet.

It''s a mess. Everything is there somewhere, but just not in the familiar places. For example, the E2 logo text is almost at the bottom of the page and it takes a lot of scrolling down to get there. We will now fix that.

Telling Things Where to Go

The general E2 page has a header section, a body section and a footer section. Your blank stylesheet doesn't tell your browser where to put things, so the browser just strings them all out in in a line in the order E2 serves them. Let's use some CSS code to sort things out. We will not try to understand the code itself in detail yet. We just want to see what it looks like and what effects it has.

To bring the header section up to the top of the page where we expect to see it, paste this

	#header {position: absolute; top: 0; left: 0; right: 0;}

	#wrapper {margin-top: 4em; padding-right: 206px;
		        width: 200px; margin-right: -206px;}

	#footer {clear: both;}

into your Contents text box, which should still be near the top of the page. Now click Submit.

It's a Worse Mess!

Sort it out: OK, a little patience is needed here. We now have the three main sections or boxes of the E2 page in order, but each box has boxes inside it that we have still not put in their places.

Let's start with the header box (#header in the code). Two boxes inside the header box are still out of place. Paste the following into your Contents window below what's already there, and then click the Submit button.

	#e2logo {position: absolute; top: 0.2em; left: 0.6em; 
          margin: 0; width: 30px; height: 30px;}

	#searchform {margin-top: 0.5em; text-align: right;}

Ah, it's looking better

Get rid of that annoying sentence that says, "What you're viewing now is a skeleton of the zen theme. It needs CSS to make it pretty (and hide this)".

Paste the following code into your stylesheet.

	#announcements {display: none;}

This illustrates a feature of CSS that seems to break with the separation of content and presentation that we so glorified earlier in The E2 Zen Theme for Subgeniuses. Stylesheet designers can actually leave stuff altogether out by just not displaying it at all.

We're almost done with this session. Just one more thing. Most of the page is still lined up against the left side. We'll fix that now with the following.

	#mainbody {position: relative; float: left; width: 100%;}

	#sidebar {position: relative; float: left; 
        width: 200px; margin-right: -206px;}

There. It's beginning to look like E2 again.

In the next session, we will look at the CSS code to understand how to write it and tweak our nascent Zen theme some more. Until then, here's a tantalizing little bonus:

       body {background-color: pink;}

To get out of Zen, go back to your User Setting page and change the theme setting.

Note: Unless you are in the edev user group, you are limited to a single style of your own. If you already have a stylesheet and are limited to one, you can type in the name of your existing stylesheet in the title box instead.

Previous || Beginning of Primer || Next