Layout the Header – Case Study, Styling a Gardening Blog Part 3

by Rick Anderson on April 28, 2012

In part 3 of this series on Styling a Gardening Blog, we layout the header using the Thesis Simple Header Widgets Plugin.

Rick:  Let’s look at the Simple Header Widgets plugin. I think we’re only going to use one. We are. We’re going to put this in a separate CSS file there. We’re not going to use any defaults. The only thing we’re going to do… oh, we’re not going to do anything actually.

Add Text Widgets to the Header

We’re just going to leave that entirely alone. Oh no, we want to center the text. That’s what we want to do. And we’ll hit save to that and then we’re going to come over to our widgets and drag a text widget over into our left header area widgets. Drag that text widget over.

Let’s create a sandbox page here. Yeah, definitely don’t want a page name to blog. Oh no, I’m sorry. No, that’s not true at all. You don’t want a no title page though, that’s for sure. Okay, add new sandbox, make it private.

Insert Logo Image from the Media Library

Let’s insert an image from the media library and that’s the transparent logo which is an image that’s 750 pixels x 100 pixels tall and is entirely transparent. So we’re going to make it center. We are going to make it link directly to the homepage and go back to our homepage and we’re going to use it full size and insert it into the post.

Add Tag line to the Header

And then the only other thing we’re going to do here is put the tag line in. I just deleted that silly thing. Now I’ve got to find one again. Let’s see, Control + Z.

Actually, we’re going to just start off by doing this. Copy that, come back over to our widgets, paste it. Okay and then what was your tag line?

Jared:  I don’t know. What do you mean by tag line?

Rick:  Well, we have this, “Tips, Strategies, and Conversations for Organic Gardening”. Maybe that….

Jared:  Go ahead and use it.

Rick:  We’ll use that and then we’re going to automatically add paragraphs so let’s hit save. Come over here…

Jared:  It doesn’t make a difference if you change it.

Rick:  No, it doesn’t.

Jared:  As far as Google is concerned?

Header Text Alignment

Rick:  No. So we’ve got our header in place. This did not get centered though… okay, that’s good enough for that. Let’s go back to plugins and let’s go to Simple Header Widgets. And left header area, text alignment. We said it was center. Let’s try and save that again. Refresh that… oh crazy. Well, okay.

I think that I don’t really want to create a separate style for that. So what we’re going to do is go back to our sandbox page, go to the Visual Editor. We’re going to center it as well. Let’s open up our stuff here.

Let’s add some extra color. Actually, what is that color? Okay. Oh, that’s what I did. So that was the color that we used but what I did here was… I forgot about that. Under this here, I’m going to turn this around. We’re going to get rid of that span, delete and span. Delete and copy that and paste it here. Copy this and paste it there.

And then I’m going to give this an id of tagline, #tag… no, that’s not it. id = tagline. Okay, capture that. We’ll come back over to widgets and let’s place that in that text widget. Then we can use Thesis Design Options to style the tag line. Something doesn’t look quite right there for some reason or another. Well, let’s just go to Thesis Design Options now and style the tagline.

So we go down…

Jared:  The Tag line doesn’t show up, does it?

Fix Error in Widget for Tag Line Display

Rick:  Well, that’s okay. It doesn’t show up because for some reason or another, it’s showing as being 0 pixels tall. So, header. We’re not going to show this… actually, we don’t really care about that but… header, that’s what it was. Okay so we are going to make that say 16 point and then let’s go get that green color again. We can close that. Okay, hit save and refresh.

Okay so why does my style = text align center… oh no, I’ve got an error in the text widget. That’s what the problem is. Yeah, I need this bracket. There it is.

Okay so now, that should work just fine. No, it didn’t. Oh, it’s because changing here doesn’t matter. I have to change it in the widget. There we go.

We don’t want it to be that color or that style. What we want is it to be Georgia so let’s go back over to Design Options and under header, I’m going to pick Georgia. Refresh it. Okay, there we go.

So now if we go to one of these other things and click on that, it takes us back to the home page. That’s all getting there.

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: