Paragon Baby
I just got done putting together a baby section for information and updates just about the baby and what’s going on with the pregnancy.
Jodi will be updating this section for the most part. She’s been wanting me to put this section together for a couple weeks now - I finally got around to doing it tonight.
A couple exciting things about this section are (1) Jodi will be posting to a website. She’s been reading sites like dooce.com for quite a some time and has really been itching to have her own little place on the web. It will be great for her to answer questions and post her own thoughts and fears about the whole process.
Second of all, the baby section was created rather quickly with the help of 2 simple tools - Moveable Type (MT) and CSS. MT is a great system and if you aren’t already using it for things like this then you’re a sucker for wasting your time.
The more exciting tool though it CSS. I set up all my templates in MT and knew that I wanted to have the same layout but just a little bit different of a design.
For starters, I wanted to have a different masthead. Something that would pop out and give viewers an idea that they have reached a whole new section of theParagon site but still a part of the Paragon network. I also wanted to change a couple headline and background colors.
I started out by changing ID and CLASS names so I could edit them in the CSS. What I quickly figured out though was - this is really going to make my CSS file much bigger than it needs to be. Not only that but it’s going to make things much harder to move around and change than I’d hoped.
After a second of rethinking how the site was laid out it came to me - simply put an ID tag inside of the body tag.
<body id="baby">
From there I was able to go into my CSS file and only add small changes instead of having to rewrite everything.
For example:
#header h1 {
background: url(/img/header_native.jpg) no-repeat;
width: 700px;
height: 111px;
margin: 0;
padding: 0;
}
… turned into
#header h1 {
background: url(/img/header_native.jpg) no-repeat;
width: 700px;
height: 111px;
margin: 0;
padding: 0;
}
body#baby #header h1 {
background: url(/img/header_baby.gif) no-repeat;
}
You see how easily that worked? It’s kinda like saying, “If the body’s ID equals baby, then do this. If it doesn’t have anything - just do what you normally do.”
This is honestly why I love CSS and well coded websites.
Update
Ok, I know that’s how it works but for some reason it’s messing up on me after I start publishing content to the site. Give me a bit and I’ll figure out why. If you happen to know why this isn’t working - let me know.
About 15 minutes later I figured out that I simply screwed up one small detail. Up above in my post I put <body id="baby">. The problem, however, was that I didn’t convert my bracket signs. In my post I put - <body id="baby"> and not <body id="baby">. By me not converting that to show up correctly on the site it threw my whole site out of wack. Luckly I figured that out as soon as I did. Things like that have taken days out of my life.
Fris Says:
Have you seen brad b. skate lately ??? There’s a competition at the modern skate park that he’s going to OWN. Today … Sunday at 2pm.