Build Your Own Business Website header image

How to Convert an Existing Site to Thesis

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.

This member needs wants to convert an existing WordPress site to the Thesis Theme. In this video we discuss the various elements of his site and the tools needed in order to convert the site to Thesis. His site has a couple of items that can only be recreated using custom_functions.php such as a rotating banner in the header, special symbols for his menu, and a custom footer. He also has elements that can be easily recreated simply by setting design options. Finally we discuss the various places he will need custom CSS.

Video Transcript

And so next, we’re going to take a look at Jared’s other question which we didn’t answer this morning and that was how to… essentially, how to take this and turn it into a Thesis website. Now this is more complicated than the one that we looked at this morning. We still have almost everything on byob website to tell you how to do this. The most complicated part of it is this thing right here, where we’ve got the April 30th date and I don’t have anything on the website that describes how to do this but it is something that I would myself be interested in playing around with. But I probably will, here, sometime in the next few days to come up with a system for creating that.

So what you have here is you have this header right now and the header is running a slideshow and the slideshow just links to the homepage. The slideshow doesn’t link off to some other page. And that is very much like the question that I answered last week where there was a logo here and then a slideshow here. And this video has not been posted because of you know, our new video editor is new and she didn’t get all of our stuff done and blah blah. But we don’t have… so we don’t have last week’s videos posted yet. But I went and added a video supplement to showing how to use the SH slideshow plugin for creating a rotating banner like this to place inside of the header. And so, I do have that video that you’d be able to use to add this slideshow to the header.

And after you add the slideshow to the header, now you’ll have the navigation menu. And in most respects, navigation menu is exactly like a Thesis navigation menu. You have 2 unique parts to it. The first one is the little green background halo that shows up when you hover and then the 2nd one is the icon for home rather than the term… the word home. Now the word home would be slam dunk simple, right? In order to create this, what you would do is you would create rather than… you would create an image link and hook it to the Thesis hook before nav bar… nav menu… Thesis hook before nav… must be nav bar. Yeah, Thesis hook before nav bar. And you would wrap it inside of an LI with a you know… well, you’d wrap it with an LI item but instead of putting text inside of it, you would give it this little image link and then the hover behavior would follow because it’s part of the menu itself.

And the hover part… I do have a couple of videos actually on how to add background images to the nav menu for hover conditions. So if you go and… well actually, even if you go to the Live Answers section and just go down to the navigation menu… maybe nav menu customization… yeah, this one here will do the job just fine. Shows how to create a nav menu and then gives a hover background image. This is not the one I was thinking of though. There is another one that we did that let’s see… rounded tabs… you know, I think this is it actually. Yes, this is it.

So anyway, there are a couple of tutorials here on how to do that. So you should be able to figure that part out, how to add this little hover menu.

And then you have the background image inside of the page and as you know from this morning, we have a whole series of tutorials on how to add background images and you would just add this background image to the page component or the page element of the page itself. And then let’s see, these… the text styling you would do inside of the Thesis Design Options… but this background color would be a background color that you would add to UL .menu. I’m sorry, that’s not true. It would be to sidebars h3. And so, and example of that could be here, I think. Oh, I don’t have any widgets yet in this. But is that sidebars h3? Let’s see. That actually is sidebar h3.

So you could you know, you’d create a .custom .sidebar h3 and then you could say background color green. You’d give it a little bit of padding so it stands off and then you could make the font color white. And now you have something very similar, right? So it’s quite easy to add a background color to that bit of text.

So then the next part of this… obviously, you already know that these are just plugins and when you transfer the site to Thesis, these plugins will actually stay with it and so you’d just keep on using those plugins. This I a… I’m guessing actually that this is an image in a text widget. Let’s look at that for a second. Maybe that isn’t what that is. Yes, that’s all that is. It’s an image link inside of a text widget so you’re going to be just fine with that. In fact, you wouldn’t do anything because it will automatically be part of the site.

And then here, what you would do would be to do essentially, the same thing that I said this morning for your other site is you’d need to create this little you know, footer text that you would add down there and you would also change the footer background color so that it matched the background color of your site which again, is relatively easy thing to do.

Pam is asking how this date is produced and to tell you the truth, I think the way the date is produced is that this is a div with a background image and then this is a div and this is a div with different styles applied to them. And then this is a php value and a php value both for April and for the 30th. That’s how I think that is. And so that’s why I said it would be interesting to play with because you could you know, construct a date that looks like this fairly easily in Thesis and then just hook it to the Thesis hook before header. I’m sorry, not before heading but before headline and have this sort of a style. What you have to do is extract… you’re not just taking the date. You’re extracting part of the date, reformatting its… the month into 3 character and then you are extracting the day of the month and you’re putting those 2 pieces in 2 separate fields. So it’s a little more complicated but nevertheless, that is something I want to play with so we will do that sometime here in the next couple of weeks.

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