Build Your Own Business Website header image

Troubleshooting Thesis Custom Templates – Part 2 – Column Layout

Difficulty Level -

Filed Under Topics - , , , ,

Listed Under Lesson Subjects - ,

The member has a Thesis custom template but needs to have custom CSS to make it look right. The site is set up as a 3 column layout while the custom template is a 2 column layout. We troubleshoot this in Firefox using Firebug and Web Developer. We write the css code to make this work.

This video is best viewed full screen

Select the link below to watch a high definition version of this video

[S3VIDEO file=’public/liveanswers/LA12-20-10a1-custom-template-part2.mp4′ bgimage=’https://www.byobwebsite.com/wp-content/uploads/2011/02/LA12-20-10a1-custom-template-part2.jpg’ displaymode=’overlay’]

Video Transcript

Jason: But what I would like is you see how over here there’s a line that separates? What I would like is for all of this text to be over here and be able to have a sidebar over here.

Rick: Sure that’s the… you have to… hang on a second. You’ll also have to apply your you know, CSS to that custom template ‘coz at the moment you know, it’s using the standard default CSS and so I mean, you’d have to have a definition of the sidebar and of the… actually that’s right. Your custom template doesn’t even have a sidebar in it. So you’re back live, Jason.

Jason: Okay

Rick: So look at your code

Jason: Look at the code, alright

Rick: So scroll down to the custom template. Okay, actually you do have a MBD sign up sidebar there and why don’t you… oh, there’s the MBD sign up sidebar down lower. Scroll down just a little bit further for us for a second so you can see this whole function that’s below you there. Okay so this is MBD sign up sidebar and that’s MBD sign up sidebar. So now scroll back up to the top and let’s take a look at the code that created the sidebar. A little further up ‘coz there’s the code that we’re looking at just at the very top. Scroll up a little further. Alright, there’s your sidebar… okay, array. Sign up sidebar, okay well… so then I’m gonna make you live and then I’m gonna switch you back to my screen and I’m gonna take a look at it in Firefox.

Jason: Okay. Then I’ll go back to Firefox?

Rick: Well, I’m actually taking back over

Jason: Okay, got it

Rick: And okay so let’s see, let’s go to your site. That’s Mindful Business Development. Okay Mindful Business Development, okay. Programs… so don’t mind this blank space. That’s just a funny thing since it’s just back here, it doesn’t necessarily show up. If I close Web Developer, it’ll come back and see how this is set up. So we have right now, we’ve got our content box and then our div id content and our div id sidebars and so the trick here then is to look at the CSS and see what our CSS looks like for this. Yeah, so there isn’t any custom css set up for this style of template. So if were to just for a moment… you know, I think what we need to do then is to go back into your site and add a custom css value to this and then we’d add css. I’m going to bring you back on here.

Jason: Okay

Rick: So you’re back now

Jason: Alright

Rick: If we were to… let’s see. I’m gonna view page source and it has a… okay that’s its custom class and so then what’s we’re gonna do is create a new css style for that and it’s gonna be .custom… this is how you can do page specific CSS using the Thesis custom class. I’ve got a video in there about this but now if what we do is we say, that was the custom class. What we want to do is to do content and then what we’re gonna do is just gonna float that left. Float:left;. Okay so that brings that over and then now the sidebar’s over on the right and probably what you want to do is make your sidebar wider so the content is here 52 sidebar’s 21 so it’s probably 42.7. If we change that to 42 for a second and see what happens, now hit sidebar. So now the sidebar goes all the way. You know, maybe all your really want is that… if we just cut this for a second and paste it below. Instead of that, we’re gonna make it sidebar and we’re not gonna do float left but we are going to say, give it a width. So that would be width:320 pixels. Now there’s your sidebar 320 pixels and so you could make this thing wider now as you make your content wider. And so now it would have a width say of 560 pixels. Oh maybe we need to make it 600, maybe 560 was not enough. Oh yeah, there you go. Okay, that’s what it was. So if we go back here now you’ve got… okay I’m gonna put your microphone back on. So does that look like what you were trying for?

Jason: That’s very close. I’d seen how to do it where I could very easily go back and I could adjust the width on my own now too. It’s very helpful.

Rick: Sure

0 Comments… add one
0 comments… add one