style-a-gardening-blog-pt1-configure-design-options

In part 1 of this series on Styling a Gardening Blog, prepare the site for changes by backing it up and by upgrading WordPress and Thesis.

Rick:  Here’s where we are. Here’s where we’re going to be. But the first thing I’m going  to do here is talk about how this is created. The way this works is we’re using the Full Width Backgrounds Plugin and we have a background image that repeats itself in the body.

Thesis Full Width Background Plugin

We have, in the header area, a background image that makes up the header. In the content area, we have a background image that makes up the appearance of the page. And in the footer area, we have a background image that makes up the appearance of the footer.

We’re using the Full Width Backgrounds Plugin to create that structure for the site. But before we do that, we’re just going to make sure that the site has the right dimension because this graphic was created for a specific set of dimensions. So let’s see, wp admin. Okay so here we go.

When is the last time you backed up?

Jared:  Me? Back up?

Rick:  Yeah.

Jared:  Me? Probably never.

Rick:  Okay. I should have asked you that question before we jumped into this.

Jared:  I just always hit the update at every chance.

Prepare the Site for Design Changes

Rick:  I’m going to do that but I’m going to do it safely. Let’s see, deactivate… this is actually the Yoast plugin which actually doesn’t work with Thesis. We’ll deactivate that one. Actually you know, I should just deactivate all these plugins.

Rick:  Okay so we’ve deactivated all those. We may as well deactivae Nav XT too.

Jared:  How about Akismet?

Backup Database

Rick:  I don’t believe Akismet’s going to cause us any issues. Some plugins are very stable and aren’t likely to cause issues. And so now what we’re going to do is we’re going to backup your database. Okay, we’ll backup all those. We’ll back it up to the server. We’re going to backup now. What version of Thesis are you running here?

Jared:  3.18, I think.

Rick:  1.83 or 1.82 or 1.8?

Jared:  1.82 or 1.83, I don’t know.

Rick:  Oh no, just 1.8. Okay.

Jared:  Can that be updated?

Rick:  Yeah, do you have ftp access to your site here?

Jared:  I do it from here.

Rick:  I want you to start your ftp up and connect up to your site.

Jared:  I am. I’m in.

Rick:  Okay. So go to wp content and themes.

Jared:  You mean under public html?

Rick:  Yeah so open up public html and then go to whatever the root of this site is.

Jared:  Which is wp-content?

Rick:  Okay so wp-content and then themes. What do you see there?

Jared:  Thesis_1.8.

Rick:  What else?

Jared:  Flex Professional 2.2 which iThemes. Let me open this up a little bit bigger. 2011 2010 classic default.

Rick:  That’s okay.

Jared:  Do you want me open up Thesis 1.8?

Rick:  No. I just want to know that you can see it. I’m going to upload 1.83 from here. But then once I’ve done that, I’m going to want you to rename the custom sample folder. But we’re not going to do that until after we’ve gotten through this backup.

Jared:  So I’ll leave this open?

Update WordPress and Thesis

Rick:  Okay backup is complete. So now what we’re going to do is update. Actually, no. Now we’re going to deactivate that. Okay so we’ve deactivated all those plugins. Now we’re going to upgrade WordPress 3.3.1. Update now. Okay so we’ve got the latest version of WordPress and let’s to Appearance and Themes. Let’s get the latest version of Thesis.

Rick:  Okay so now you should see a Thesis 1.83. Actually, you need to refresh your view in your ftp client. And once you refresh that view, you should be able to see Thesis 1.83, do you?

Jared:  No. wp content, themes…

Rick:  Thesis 183 should be there now.

Jared:  No, I don’t see it

Rick:  I’m going to make you a presenter so we can see your screen.

Jared:  Do you see it?

Rick:  I do, okay.

Jared:  I can go back here and then come back here but it brings me back to this.

Rick:  Go up there, hover over action and… what are you looking at it with?

Jared:  This is called Transmit. It’d be really to easy to close it out and come in again.

Rick:  Okay, go ahead and close it out and come in again.

Jared:  It’s there.

Rick:  Okay so open it up and rename custom-sample to custom. Okay, go ahead and save that. We made that stuff go away. So now we’ll go to Design Options.

Jared:  You want me to do anything more like change the numbers or anything?

Rick:  No, we’re good.

Jared:  Okay.

Rick:  Okay, 550, 330. Let’s see, column orders right. HTML framework is full width. Outer padding is 0.

Jared:  I can’t see you.

Rick:  Oh yeah because I’ve left you as the presenter. Okay so can you see me now?

Jared:  Yes.

Rick:  Okay.

{ 0 comments }

In part 2 of this series on Styling a Gardening Blog, we add background images using the Thesis Full Width Backgrounds Plugin.

Install BYOB Plugins

Rick:  So the next thing we’re going to do then is install some plugins. We’re going to install my Thesis Simple Header Widgets plugin and we’re going to install the Full Width Backgrounds plugin. And we’ll start with Full Width Backgrounds. Okay, save link as… save. While we’re here, we may as well get our WP Menus plugin and then let’s go to the Simple Nav Menu. Actually, we’ll install the Simple Nav Menu from inside the site.

So plugins, add new… okay, Thesis. Okay, install that, activate the plugin. We may as well just add new, upload and we’re going to do the BYOB Thesis Full Width Backgrounds. And add new, upload and BYOB Thesis WP Menus plugin.

Get Background Images

Now we’re going to go look at the site. The site’s going to look crazy now, I think. Oh, it looks fine. Okay so then the next thing we’re going to do here is configure the Full Width Backgrounds plugin. And I’m going to open up the Media Library because we are going to drag 3 images into here. Let’s see… documents, websites. Okay, I’ve got 3 images. We’re going to add the dirt which is the big background image. We’re going to use the footer image… that’s funny.

Jared:  How about the favicon too?

Configure Thesis Full Width Background Plugin

Rick:  Yeah, we’ll do that separately. Footer background header, transparent logo, dirt… okay. And we’re just going to drag those there. We’re going to start off with the Full Width Backgrounds plugin and we are going to customize everything. So header, body, header area, content area and footer area.

And in terms of the body background, we are going to choose this image. It’s going to repeat in both directions. We’re going to start it at top center. We’re not going to give it any specific position and we’re just going to hit save.

Header Area

Okay and so then the header area… actually, we’re going to need to define a height for this header area. And let’s see how tall this is. This is 300 pixels tall so that’s how high the header area’s going to be. So back over here, header area’s going to be 300 pixels tall.

We’re not going to do any borders. No drop shadow, hover over the background. We’re going to make the background itself transparent but we’re going to put this as the background image. It’s not going to repeat and it’s going to be in the top center. And we are going to make header area .page transparent as well. And we’re just going to save this so we can see what it looks like because this should give us the big background plus some stuff in the header now. Yeah, okay.

And so what’s happening here is that this background actually extends all the way down but it’s being covered up by the content area color and the footer area color. And so that’s the next set of things we’re going to change.

Footer Area

And so we’re going to go to content area background color and image. We’re just going to make the background transparent and let it go at the moment. And then we’re going to do the same thing with the footer area. Now I think the footer area’s going to need a height. We’re going to start off at 400 pixels but I’m not quite sure how tall that really needs to be.

We’re going to make its background transparent. We’re going to give it a background image from here. Let’s look at the footer. Footer is 289 but I also wanted some space below, I think so copy that and put it here. Now this one does repeat in the y direction or repeats horizontally and we’re going to make it top center.

And we’re going to make its footer area .page transparent and hit save. And we should be about 90% there with the background. Oh now, we’re not repeating it, my mistake. We don’t repeat that background image, no repeat, save, refresh.

Content Area

Okay so we’ve got the header background. We’ve got the dirt in the background and we’ve got the footer background. And so the next thing we need to do is take care of our content area background. And I believe that I failed to download this one image so I need to get that one there.

Content background png… notice how thin this is? That’s how big your image is, really. It’s 12 pixels tall and 1012 pixels wide. And we just center it in the space and then we repeat it vertically.

So now that we’ve got that, come back over to this and let’s upload one more media image. Okay, let’s upload it from here. I need to refresh that, I guess. Content background, drag it, drop it there. I didn’t think that worked. Do it again. It did work. I just did it twice. I expected to see more out of it.

Okay so now we’re going to copy that image URL, come back over to our content area and in our background color and image, we’ve made the background transparent already but now we’re going to put that image in. We’re going to repeat it vertically but not both directions. We’re going to put it top center and then we’re going to make background area .page transparent or content area .page transparent.

And so now we refresh this and okay… so now we have that pretty well laid out. We are going to have to fix these widgets here because they’re a little too wide but we’ll take that on here in a few minutes. Actually, we’ll probably take that on in the morning but let’s go ahead and get this fixed.

{ 0 comments }

Layout the Header – Case Study, Styling a Gardening Blog Part 3

April 28, 2012

In part 3 of this series on Styling a Gardening Blog, we layout the header using the Thesis Simple Header Widgets Plugin. Rick:  Let’s look at the Simple Header Widgets plugin. I think we’re only going to use one. We are. We’re going to put this in a separate CSS file there. We’re not going […]

Read the full article →

Add and Style the Menu – Case Study, Styling a Gardening Blog Part 4

April 27, 2012

In part 4 of this series on Styling a Gardening Blog, we style the WP Nav menu using both Thesis Design Options and our Thesis WP Nav Menus Plugin. Add a WordPress Nav Menu Rick:  The next thing we’re going to do is put in the menu. So come back over here to our dashboard […]

Read the full article →

Create the Footer – Case Study, Styling a Gardening Blog Part 5

April 26, 2012

In part 5 of this series on Styling a Gardening Blog, we add and style widgets for the Footer using our Footer Widgets Plugin. Install Thesis Footer Widgets Plugin Rick:  Now I want to go down to the bottom part. We’re going to come down here to the footer and play around with the footer […]

Read the full article →

Style the Widgets – Case Study, Styling a Gardening Blog Part 6

April 25, 2012

In part 6 of this series on Styling a Gardening Blog, we style the widgets using the Thesis Widget Styles plugin. Rick:  And we have 4 recent posts. Now all we have left to do is to deal with the sidebar. And so in the sidebar, what we’re going to do is add the Widget […]

Read the full article →

Add a Menu to the Footer – Case Study, Styling a Gardening Blog Part 7

April 24, 2012

In part 7 of this series on Styling a Gardening Blog, we add a menu to the Footer. Add a Categories Menu to the Footer Rick:  You could choose to put another menu down here. It could be a category menu, right? You could put your biggest categories in there. So let’s go back over […]

Read the full article →

Style a Site Using Thesis Toolbox Plugins

January 18, 2012

Add Background Image – Part 1 Configure the Header Layout – Part 2 Style the Header Layout – Part 3 Add the Thesis Nav Menu – Part 4 Add the WP Nav Menus Plugin – Part 5 Style the Thesis Nav Menu – Part 6

Read the full article →

Add Widget Areas to the Thesis Header

December 23, 2011

Thesis Simple Header Widgets Plugin This is the introductory video to our Thesis Simple Header Widgets plugin. This plugin allows you to quickly add widgets to the Thesis Header and escape the typical Thesis look. We’ll begin at this Header Horizontal Widgets site I created to demonstrate the use of this plugin. And so far […]

Read the full article →

Add Logo Image Beside the Nav Menu in a Thesis Website

December 23, 2011

Thesis Simple Header Widgets Plugin Let’s begin by going to the dashboard of our site and opening the Thesis Simple Header Widgets plugin. Now that we know how to add widgets to the header area, we’ll be adding a logo image and beside that we are going to place a navigation menu. Then we’ll add […]

Read the full article →