Build Your Own Business Website header image

How to Use 2 Images Side by Side in the Header of Thesis Classic Responsive

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we show how to use 2 images side by side in the header of the Thesis Classic Responsive skin. We have a seminar called Create a Responsive 2 Column Responsive Header in Thesis 2.1 that will show how to do this without writing much code and only uses mostly classic responsive code to do it. You create some boxes such as columns, content and sidebar which mimic the regular content and adjust the widths inside of Custom CSS and adjust them in the media queries. We also walk through the process of repeating the structure that Thesis uses to make everything responsive and demonstrate how to create a footer menu.

We also talk about adding a background image above the nav menu by looking at our seminar  Introduction to HTML for WordPress & Thesis 2.1 Users that introduces the fundamental CSS syntax and talk about our upcoming seminar Customize Thesis 2 Skins Using Background Images, Colors & Gradients where we will show several examples of different ways of customizing Thesis Classic Responsive and the concepts of how they’re applied to the skin that will not require you to build any boxes but will only use all CSS functions.

Video Transcript

Member: I’d like to be able to split my header and I just typed in a URL to kind of give you a visual of what I’m looking for. On the left I want to have the logo that clicks to the Home page but on the right side of the header, I’d like to have a different image, like an affiliate of some product then I would click it and you would be taken to that page.

Rick: So which theme are you using?

Member: I’m using the Classic Responsive Skin.

Rick: Okay. So you want a header image on one side and something else on the other?

Member: Yep.

Rick: Now, I have demonstrated how to do that in the Launch Party and let’s see which Launch Party video it is. Ooopps, this is the one I want. I think it’s actually Thesis 2.1 for the Web Design Professionals. Now that I say that, Code Editor, Using Variables, Leveraging Packages, Understanding… okay, Create a Responsive 2-Column Header in Thesis 2.1.

So this section here, shows you how to do it in such a way that you don’t have to write much of your own code. You’ll end up using mostly Thesis 2.1 or you’re using mostly Classic Responsive code to do it.

Member: Okay

Rick: But essentially what it means is that you are creating another couple of boxes up there. Three boxes, one called Columns  and then Content and a Sidebar box which mimics the regular content. Then you can put your stuff in that. If your sidebar and your content are theoretically the wrong dimension in the header, you can adjust the width inside the Custom CSS and then again adjust them in the media queries and I’ll show you how to do that here too but at the moment, that’s the only way to do that in Classic Responsive. Now…

Member: And then… Because I put in a box in that area and I didn’t quite do it this way. I hadn’t watched this video yet but I did put a box in there but then I couldn’t figure out how to put that content into that box.

Rick: Well, you create html boxes that gives you your structure. Then you would either create a widget area and put that in one of those structure boxes or a text box. For what you’re doing here, it’s going to be one of the two. You can put an html text box in there and put your html in and that would call the image and respond as a link. Or you can create a widget area and then you could stick that content in the text widget. When I say that, does that immediately made sense to you?

Member: Well, no, do I then have to put that up in the Custom CSS area? Because I wasn’t able to see my box visually anywhere other than that Editor.

Rick: Well if it doesn’t have any content, it’s not going to show up. I mean you’re not going to be able to visually see it. So, we can just kind of walk through this. Let’s see, we may as well do it here. I’m just going to restore the default for Classic Responsive.

Okay, so here’s our page. We’ll just do this on the front page for the moment. What you’re doing is repeating the structure that Thesis uses. Thesis has got a structure called Content Columns and Sidebar that it uses to make everything responsive. So what you do is come over to this container and add the class of columns to it which is the same classes here. Then you would add an HTML Container and call this one Content. So this will be the Header Left Column. The Content Column has a class of content. The Sidebar column has the class of sidebar. So we’ll create one more HTML Container, call it Header Right Column, give it a class of sidebar. Now we’ve created exactly the same structure as this.

We’ve got a wrapper, and I’m just going to drag Site Title and Site Tagline in here. Actually I’m going to drag Site Tagline in the Header Right Column. So we’ve got a structure, a wrapper with a class of columns, same thing this has. And you’ve got two columns in there. The left one has the class of content and the right one has the class of sidebar, okay?

Member: Okay

Rick: Then let’s just put a header image in the left one so then we would add a text box and we’ll call it Header Image. In this case it doesn’t need a wrapper so we’re going to say NO html wrapper. Shift+drag that and drop it into the left column. If we save this and refresh it, here’s our text box and here’s our sidebar.

Member: Okay

Rick: Now it looks like there’s a little bit of modification that needs to happen here, probably because it’s inside of header. Yeah, so we’ll need to remove padding in our custom css but once we’ve done that…

Member: And then I would just… oh, I’m sorry.

Rick: No, you would go to your Skin Content and your Header Image Box and you put the html in there for your header image.

Member: Okay, great.

Rick: And you go to Custom CSS and you say, .header and space and then {padding and I would keep the top and bottom at 25px and left and right at 0px. Save our custom css and now it should actually fit. So now you have both of those and when you adjust it, it becomes responsive. That’s what you’re looking for, once you put two columns in there, you’re looking for them to be responsive.

Member: Right and if I wanted the part on the left, the column, to be more 11:15 and the sidebar to be wider, would I do that in the Custom CSS?

Rick: Yes, you would and here you would say .header.columns >  and then using the same system that Thesis uses, let’s just show you the way in Firefox and this is the way I’m teaching that. Let’s reload it here. Oh, I’m in the wrong one. This is the one, I’ll reload this one.

Okay, if you inspect this element and choose content, you can see that it’s width comes from .columns > .content { so we’re going to use the same thing in our css. So, .header.columns > .content and we want this to apply only the one in the header that’s why we have .header.columns >  and .content{ well say width:50%;

Member: And you would use a percent rather than a fixed pixel?

Rick: Well, not necessarily but…

Member: Okay

Rick: And then say, min-width:300px; and then you do the same thing for header sidebar. Okay, so now they’re there half and half, right? And then as you work your way down, once it gets to the points where if they’re half and half, oh actually, then we need to make sure that they go 100% in the media queries with media (max-width: 897px;) So, we are going to… this is the Thesis Media Query, given the current setup of my skin, right, yours is likely to be different.

Member: Uhuh.

Rick: But then we would just take this here and say width:100%; we don’t need the min-width. In fact, we probably don’t need this min-width:300px; anymore either, I’ve forgotten that this stuff go automatically to 100%. I mean, it’s supposed to go automatically to 100% the first break. So inside this Media Query, we have… why is that not recognizing? Well, let’s just save and see if it works.

Member: oh, unless you enclosed an end bracket

Rick: It suggests I’m missing an end bracket but I’m not unless I’m just misreading it. So there it is, as soon as it goes to responsive, everything goes back to 100%.

Member: Very cool. Okay.

Rick: So that’s how you would do that. You can adjust its width in this kind of a format as long as once you’ve done that you come inside of a Media Query and switch it back to 100%. Because the code that exists there looks like this, .columns > .content{ width:100%;

Member: Right.

Rick: So that’s being over-ridden by our more specific .header.columns > and so we have to repeat the rule that  applies to .columns > .content}, we need to repeat it for .header.columns > .content{ since we have neither rule that was more specific that is going to be applied to that.

Member: Awesome. Okay, thanks!

Rick: Anything else?

Member: In the Classic Responsive theme, is it possible to have a footer nav, a footer menu as well?

Rick: Oh, of course!

Member: Okay.

Rick: Yeah, all you have to do is create it. Have you watched the Beginner’s Guide to the Thesis Skin Editor?

Member: I did. I went through the Launch Party and I went through the intermediate level so I’ve gone to that big bulk of videos and I don’t remember seeing that or when I tried to do it, I wasn’t getting it to work so I must have missed something.

Rick: It is as simple as creating a box… I’m going to copy this code for you, I’ll just stick it in the chat window.

Member: Thank you.

Rick: It is as easy as creating a box and dragging it into the template.

Member: Okay.

Rick: So you come over to the Skin Editor, and just for grins we’re going to do it on the front template and the box you crate is here, Nav Menu. We’ll call this one Footer Menu, we’ll go ahead and use that Responsive output control and then just drag it down and drop it in the Footer, save it. Then the only other thing you have to do is go to Content Options and specify the menu that’s supposed to be displayed. So I’ll pick test menu and then if we refresh this page, there it is down here.

Member: Perfect.

Rick: So, that’s very simple.

Member: Okay, I just missed a step.

Rick: Okay.

Member: And then one last thing, if I want to create just a band of color across the top, would I do that by putting a box in the header area or would that go…

Rick: What do you mean a band of color across the top?

Member: If I just wanted a stripe, a horizontal stripe going say, in this example, it would be above the Nav Menu or actually, I guess…

Rick: Is there going to be any content that sits over the top of it?

Member: Well you know I’m thinking about in my example, I guess it’s really the Nav Menu, the band that goes all the way across.

Rick: Yeah, so what you want to do, and it’s not live yet, what you want to do is… you need to do a couple of things because the answer to this is yes and I’ve just taught this and it doesn’t mean that you need to build a box, you don’t need to build a box. You’re going to do that with a background image.

Member: Okay.

Rick: And then Custom CSS and the seminars to watch are, the first seminar to watch really is Introduction to HTML for WordPress & Thesis 2.1 Users. So you have to start here because this is the very basic introduction. Well, unless you have a reasonable handle on how to write CSS.

Member: Okay.

Rick: If you have a reasonable handle on how to write your own CSS, of course you can skip this because it introduces some of the fundamental concepts of CSS syntax. Then what you want to do is watch the class I recorded on Thursday which is going to be Lesson 1 on Customize Thesis Like a Pro and it’s entitled, Customize Thesis 2 Skins Using Background Images and Color, and I showed several examples of different ways of customizing Classic Responsive, specifically.

It doesn’t really matter whether it’s Classic Responsive or not, I actually was using Social Triggers but that’s not really important. What’s important is the concepts, how to apply the skin and I demonstrate all that stuff there. It does not require you to build any boxes, it’s all CSS function.

Member: Okay, awesome! I just found you last week and this has been very helpful, thank you.

Rick: Oh good, well, I’m glad you find it useful and you know, I have staff hurrying to get those videos published, so I’m guessing that by this time next week, we’ll have that course on the site. Under that, you’ll find the Customize Thesis Like a Pro course under Courses, you’ll see that there actually is one right now but it is for Thesis 1.8.5, so the Thesis 2.1 course will show up here as soon as those videos are edited.

Member: Okay.

Rick: So, one of them, seminars are already there. The course will be posted here very shortly.

Member: Awesome. Thanks very much.

Rick: You’re welcome. Anything else?

Member: I think that’s it.

Rick: Okay. Well, you have a terrific day!

Member: You too.

Rick: Bye, bye.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment