This is Part 7 of the One Hour Website Makeover for DJ Sean Denard’s site and in this session we show how to style the header text using the BYOB Thesis Header Widgets plugin.
Now the next thing we need to do is style the bottom part, add the bottom part of the circle to this and then also to style our text here.
So we’ll start off actually by styling this text and yeah, we’re going to start off by styling that text and we’re going to do that in our Footer Widgets… oh no, I’m sorry… Header Layout plugin. This plugin gives you complete control over the styling of each of those pieces of text and this is header row 1 settings. So we’re going to style the header row text style, go ahead and hit save. And once we say we want to style that then it brings up a bunch of choices for us. We’re going to go ahead and stick with Arial. We are going to put make our font size 24 pixels tall. We’re going to make our font color a yellow color. Now you know, I mean, we could figure out what the actual color was but we’re not going to bother… yeah, I am going to bother with that. I don’t know why I said that. No, I still don’t want to update Firefox. And then we’re going to thesisbyobtutorial.com.
It’s got a little bit of sound as you can probably hear now. That plays for just a moment. We have it set up so it’ll only do it on the homepage and once you move off… on any other page, you will never hear the sound. We would’ve liked to have it so we can… this won’t flash for the whole dang time too but I haven’t figured out that part yet. I’m actually not that good at flash.
But let’s see, we want ColorZilla here and I want to get that yellow color. That’s it, okay. And we’ll grab that color there, come back over to the site here, paste that yellow color. We don’t have a link color or a hover color so we don’t really care about that. And at this point, I think we can almost say that.
The other thing we want to do is we want to center it. So under widget column 1 settings, we’re going to center the text right there and hit save. See the way this works is you can set the settings for… if you’ve got more than 1 column in a row, you can set text settings differently. So for example, on this one where we’ve got 2 blocks of text, the right hand column, we actually want that text to be aligned to the right. Now, the normal alignment is to the left so this allows us to have a right alignment in one column and left alignment in another column. And actually, if we had 3 columns, we could center you know, the text in the center column, if that’s what we wanted to do. So it has a lot of flexibility.
And so then we come back over to this and refresh it. Okay so there we go, DJ Entertainment: Serving the Seattle Area. How does that compare… yeah, looks exactly like it. So we’ve got that part down.
Art asks, “How do I create all my header images? I have no design experience. Do I have to learn Photoshop or something?” Well, if you don’t’ have any design experience, what you ought to do is hire an artist to help you. I didn’t come up with this stuff myself. I didn’t come up with the design on my site. I’m not an artist. This design work was done by Kim who’s making the presentation tonight. Yeah, you can go ahead and learn Photoshop but you know, unless you’ve got real artistic ability, design like this, you should just find somebody you know, you trust to do a nice design for you. Yes or learn Photoshop and do it that way.
Okay so now we’ve got… you see how check my availability dropped to the right and the phone number’s over here on the left? Now, the next thing that we are going to do is… actually, that’s interesting. This looks like… it doesn’t look like it’s centered properly. Center that is under the E here… oh no, it is. Okay, that’s fine. Just an optical illusion.
Okay so then the next thing we’ll do is we’re going to style these and then we’re going to drop the background image and that gives us the bottom of the circle and then we’ll keep on going with our stuff. So back over to header row 3 settings, we are going to set the text style here in a way that’s similar to what we did before except maybe a little smaller. And let’s grab our text style color here again and then come down to the text style. We’re going to stick with 3. We are going to… let’s just take that down to 20, the font size. The color is going to be yellow. No actually, I’m going to have the link color be yellow too and then the link hover color will be white because actually, that check my availability ultimately will be a link.
And then we’ll save this but we’re going to adjust some margins here in a minute so that we can line up the text the way we want it lined up. Refresh this, okay.
So now what we want to do is we want to take this text and we want to move it over to under the S. We want to take this Y and we move it over to under the D. You know what, I think we want to take it up to 22. So we’re going to do that back under the Header Widgets again. First thing we’ll do is we’ll take the text style up to 22 pixels and then the second thing we’re going to do is we’re going to give ourselves some left margin and some right margin. This is left margin for the widget. This is the right margin for the widget. The setting we’re going to do right now will set the left and right margins the same for both widgets which works just fine in this situation because here, it’s right aligned. We don’t care about the left margin. Here, it’s left aligned. We don’t care about the right margin so we can set them to apply to both widgets and still get our text the way we want it to line up.
So our typical widget left margin here, let’s say 30 pixels. We’ll see how that turns out. In fact, let’s say the same for both. Let’s just say 30 pixels for both of them and then let’s see what happens. I know it’s probably not quite right but… and refresh this.
Okay so looks like we want to go 35 or something with that one and actually, it looks like 30 is okay on this side. So let’s move that over 35 and that was column 1 settings. Pardon me… we’re not… this is the typical setting that we’re setting right now which is column padding and margins. And so let’s make the left 35 pixels, save. There we go. It almost looks like. I wonder… yeah, that’s okay. You understand the concept now and you can see how these things all kind of fit together there.
Now the next thing we’re going to do is add… you see where that blue thing is highlighted? We’re going to add a background image to that which is going to complete that circle. That’s interesting. Give me just a second here. I’m just looking at my background image. Yeah, I did center that. The image itself though look like it… let’s see, LI class widget, text widget. Yeah, I guess the image itself is not quite centered really. I thought I had that at 949. I guess I didn’t so it’s actually not quite centered in there but we’re going to pretend it is. We’ll just keep going with this.