Build Your Own Business Website header image

How to Convert a Static HTML Site to Thesis Part 12 – Transfer Existing CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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 transfer existing CSS to the new site. We begin by downloading Thesis 1.8.4 giving us access to the custom CSS file. Then we add the CSS and correct issues as they arise. We also install our Landing Pages plugin that allows us to easily remove page titles from pages.

Video Transcript

Rick: Okay so we’ve got our images in and those images all link to the appropriate page. So you know, we’ve essentially got an nice little image neavigation menu here. Let’s see, our homepage wants to be a no sidebars template. But now we need to edit this… add the CSS because you know, each of these Lis have a class, Scottsdale, Paradise Valley, Phoenix. And so there’s som existing CSS that already works for this.

And if we come back over and look at our file, you could it’s imported stylehome.css so that’s probably what we’re looking for. So let’s open up that file and we’re looking for stylehome css. We don’t care about the containers but we do care about Flash float, DD map and these DD map LIs. So we’ll copy all of that and then we’re going to open up our own custom CSS file for this. You know what, I don’t think I created a CSS file for this yet. So what we’re going to do then is we’re going to download that stuff, Biltmore… oh gosh, I haven’t even set this up yet. Okay well so let’s do that.

Let’s create a connection here. Site manager… I’m saving this at byob tutorial so I can pick this one as the base. And it’s going to go to Biltmore etc… it’s Biltmore etc. That’s undoubtedly the name of my folder. It’s got a local section here and that will work in our computer. Websites, byob website, tutorial sites and then Biltmore where that went. Not byob tutorial site… tutorial sites… Biltmore etc. Say okay to that and let’s just connect to make sure it works. It does.

Okay so however, we don’t have a wp content over here. We create a directory, wp-content on our local machine. We open that up, create a new directory called themes. Open that one up. We’ll download Thesis 1.8.4 and then we’ll have a custom CSS file that we can open up and add this CSS code to. Or nearly, I start this way but obviously, when I did this, I was in a hurry.

Okay and so then we’re going to open up Biltmore, wp-content, themes, thesis_184, custom and custom CSS. Okay, we’re going to paste that custom… that CSS in there just like it is. Go ahead and hit save. We may actually need to change some of the CSS to make it work in Thesis but we don’t know that until we start this. We come back over here and this page should look radically different now. Oh, look at that because it doesn’t’ show up unless you’re hovering over it. I see, okay. So we got to finish the rest of this stuff put together.

Let’s see, let’s look at that default aspx again for a second. So we have Flash float and DD map. And in my custom CSS file, I did search flow which we don’t care about so we’ll get rid of that. We have Flash float and DD map and those bits. Oh, we’re missing the background image, Biltmore gif, for this so we need to put that in. So let’s go back to this Media Library. Where did Media Library go? Okay, let’s just go… oh here’s the Media Library. Okay, we’re going to add one more new, that was Biltmore gif. Biltmore… was it Biltmore map gif? I think it was, Biltmore map gif. Okay, open. Now let’s grab that and then we can come back over to our CSS file and now we can properly reference it. And actually, I think, we need to enclose that in a single quotes.

So there’s our URL, width height position, position absolute left 500 pixels. Okay, let’s try that now. Save that. This is taking me a little bit longer than I thought it was going to take so we might not actually get… that’s not what I wanted. We might not actually get everything tonight that I was hoping we would. I sort of thinl about this as a 5-minute job but clearly, it wasn’t.

Okay so now we have this map overlaying nicely. Obviously, what’s happening here though is that the absolutely positioning of this thing is moving it up in this content area. Plus we want to get rid of home. So one of the things we’re going to do here is install another one of my plugins and add new. And we’re going to install the Landing Pages plugin and choose a file. The Landing Pages plugin allows us to easiliy remove things like the page title from pages. So now when we refresh this, now we can remove the page title to that. Hit update. Refresh that. Now the page title is missing.

So next, we have to figure out what the code is that’s pushing that, allowing that to climb up. And so we have a position absolute of left 500 pixels and that works if its wrapper is relative. That’s where the problem is. And so actually, we do need to include, just for ease of doing this, I don think we need to include this div id page container around that and then grab that page container code. That would be the easiest way to handle this.

So let’s first add that HTML to our page. So here’s our page opening div tag or our page container and our closing div tag. We’ll update that and then we need to go grab the page container code which we have up here, page container. We probably don’t need the width… we’ll go ahead and leave clear in place. We’re not going to… we’re going to say width is 100% instead of 800 pixels, 100%. There it is. Width 100%, margin left auto, margin right auto, background color 0 top 5% height 800 pixels. Okay, we’ll just go ahead and leave that for the time being. Obviously, we don’t want to change this original file but let’s put that in our custom CSS here as well. Let’s see how that works.

So our page container width of 100% clear both. What really matters here, I believe, is the position relative. I think we can almost safely delete everything else but let’s go see what happens. Refresh.

Okay so we do want to… oh, I understand now. That’s what it was trying to do is say that the page backgroudn for that thing is black. If we look at our Biltmore, this doesn’t have a white page background and I didn’t fully appreciate the implications of this thing bleeding to the edges. Let’s take a look at our… I think we may need to add a custom body class to this but let’s just see… body custom home. Okay so what we’re going to do is we’re going to make this page. We’re going to make it black so that we don’t see that white edge around it. And then we have to figure out exactly what it is trying to do with this positioning here. What it’s doing is it’s pushing it out to the edge. I see.

So we’re going to come over here first and say .custom .home and then #page and then background color: #000000; Okay, that’s going to make that page background black. It hink, we’re going to get rid of both of these things. We’re going to get rid of the background color for that too. I thinkw e’re just going to get rid of the width. I don’t really think we need clear both in here either. I’m going to leave it there just for a moment. We definitely need position relative because something’s got position absolute and it’s left 500 pixels. I think its width is 300 pixels and its height is 500 pixels so this should be much closer to what we were looking for. Okay so let’s see. No, it’s not much closer. In fact, the background is now white. Let’s look at this in Firefox so we can play it for a little bit more interactively.

Okay, let’s see. Movie not loaded. I don’t want… I don’t care about the movie at the moment. Inspect element. So we’ve got our Flash float is… so we’ve got our page container. Our Flash float is the thing on the side. Flash float is left, height 500 pixels, width 300 pixels. Okay and then we’ve got DD map and the height is 500 pixels and it’s left 500 pixels. And its top… yeah, that’s the problem. I missed that top. We don’t really want any top and actually, this probably wants to be the less 480 pixels or something like that. I got to figure out why on earth my page didn’t… oh, it’s because it’s… I got it. It’s because we’re using the Full Width Framework so okay. So I had the wrong selector for this black background.

Okay so the correct selector is content area .page. That’ll make that background black. The page container is fine. Actually, we don’t really need margin auto. Flash float is fine. Absolute position, we’re going to get rid of the top and we’re going to make left 480. And now we should be very close to what we’re shooting for.


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