The Blog

So-called “fluid” headers and footers are quite the rage in web development, aren’t they? So pretty, So shiny, So, so fluid. You want it, and I can’t blame you. I want it too.

A future version of Headway will include the ability to create a fluid header and footer more easily without any custom code, but until then, this tutorial should suit. Let’s get on the same page about what we’re talking about: A fluid header and footer, as it’s often defined, really refer to anything where the header and/or footer area appear to fill the entire screen – no matter the width – while the page and header content (logos, phone numbers, etc) actually stay centered on the page. This is different than a strong trend in web design now called responsive design. You can see examples of fluid header and footer on this site, and at BBC News, WordPress.org, and WPTuts+.

Fluid Header

This part is the simplest – and doesn’t require any custom CSS at all.

1. Create a background image. You can do this in simple, free online image editors – like pixlr.com, for example. The image should be as small as possible, since we’ll just repeat it across the screen. For example, it might be a solid blue line that is 100px tall and just 3 px wide. Like this one. 
2. Upload the background.  If you wanted this as the background for the top of the site – to create the look of a fluid header – then upload it to Design Mode on the BODY element as a background, and tile it horizontally using the options in the Options Panel.

If you only want a fluid header, you can stop here. If you want a fluid footer, then you can go one step further. Right now, this one does require a little custom CSS (and, again, we will be improving this in the future)

Fluid Fooder

3. Create your footer background. Maybe this one’s black! With a gradient overlay! Mix it up a little, have fun! Anyway, same principle as before – small, and repeatable! Like this one!
4. Upload to the Media Library in WordPress. Keep the link to the file handy, we’ll need it in a moment.
5. Add the CSS.  Go to the VIsual Editor in Manage or Design mode to access the Live CSS (members only) editor.

Code:

body.custom #whitewrap {
background-image: url(http://yourdomain.com/wp-content/uploads/1/12/footerbg.jpg);
background-repeat: repeat-x;
background-position: bottom left;
}

What does this do?

It adds a background to another full-screen element in Headway – the “Whitewrap” – which comes directly after the body and covers 100% of the screen. By using this, we can appear to have two background images (or one image that has a “fluid” center that grows with the content on the page). We’ve set the backgound to appear on the bottom left of the page, and to repeat across (x) the screen.

This post is actually a series of posts that are designed to help you get the process down to building a site with Headway Themes. Each post will walk you through about 10 minutes of video filled with everything you need to get a site up and running. Each video only takes on specific parts of the whole site design so that you are working on pieces for 10 minutes at a time.

Getting Started

Before you get started you need to get WordPress installed. There’s several ways to get it installed but we recommend these as the best. Once you’ve got WordPress installed, you need to get Headway installed. If you haven’t purchased Headway Themes, make sure you go check out our pricing page and choose the option that best works for you.

And if you need help installing Headway, we’ve got you covered for that as well.

Once you have got WordPress and Headway running you are ready to check out this steps.

Step 1

This first step is all about laying down the foundation to the site. We’re going to move fast through this, so feel free to pause the video as you are going through it. If you have questions about the video, please make sure to leave a comment on the blog post and we’ll try to help you out.

Part 1 of Building a Site in 5 Easy Steps

Step 2

The second step is sort of a continuation to step 1. Here we’re going to take a look at adding more to our foundation.

Part 2 of Building a Site in 5 Easy Steps

Step 3

In this video we’re going to take a look at borders and fonts of other areas to help really make the design start to come together.

Part 3 of Building a Site in 5 Easy Steps

Step 4

In this video we’re going to take a look at working with the post meta and finding an icon for the comments post meta area.

Part 4 of Building a Site in 5 Easy Steps

Step 5

In this video we’re going to take a look at working with the post thumbnails and getting those into a place we’re satisfied with.

Part 5 of Building a Site in 5 Easy Steps

Your Next Steps

When you’ve completed each step, you should have a working site that you could use. Of course we only covered one page. There’s definitely some refinements you can now make on your own to handle the inside pages of the site. But the design should mostly be there. If you have questions, please let us know!

We are here everyone! We are at the last of the series for the building a website in 10 minutes. It has been a lot of fun working on this project and showing you some of how my process is when I’m working on a site from a PSD or HTML site into putting it Headway Themes. This has been a popular series. If you have other ideas for a series, let me know. I’d love to do another one!

In this video we take a look at finishing the design with our thumbnails. If you didn’t do the homework before the previous video, make sure that you take a few minutes and add a couple of thumbnails to your posts, so you have something to work with when you work through this video. I ran just a little longer, closer to 15 minutes in this video, but it was just to finish up. Hope you guys enjoy!

How to Build a site in 10 Minute Series

• Part 1 – Backgrounds and Layouts
• Part 2 – Header and Footer background
• Part 3 - Borders, fonts, and more
• Part 4 – Post Meta, Icon Finder

We’re going to tidy up the Post Title and Post Meta in this 10 minutes. It’s all about the subtle differences to really make your site stand out! And a great tool to make sure you are getting the most out of it is to use a tool like IconFinder. It’s a great site that can help you find just the icon(s) you are looking for. The comment icon I chose for the comments area was this one.

If you have watched the first 3 parts of this series, you can see part 1, part 2, and part 3 with these links. Definitely go back and check those out if you haven’t been following along, or if you need a little bit of a refresher.

I’m going to finish this up with a part 5. We could likely go on, but there’s other great tutorials that I want to get out. There will definitely be things in the design that you could add to (take a look at the widget areas for one!), outside of this tutorial series. This certainly has been a fun tutorial series to do! I’ll leave the wrap-up for part 5 tomorrow.

The more I write the title to this post, the more I think we should change it to something like ‘Building a Site 10 minutes at a time.’ It makes more sense since that’s what we’ve turned this into! Just to play catch in case you have not been following us through this series, we’ve been building a site using Headway’s Visual Editor and adding in some CSS when needed. We’ve also been limiting it to 10 minutes at a time. So hopefully it’s just enough time to get you going until the next video.

Before watching this video, make sure you take some time to watch part 1 and part 2 for the first time or as refreshers if you need to.

In this video we take a look at adding borders via CSS to the entry title and post meta area. We also take a look at tidying up the continue reading button so that it looks closer to what Six Revisions has, except we’re going to place it on the right hand side of the content instead of the left. This video is just under 10 minutes (9:30ish) since I’ve been going over my 10 minute timeframe in the past videos.

Part 4 will be up later today, so make sure you stick around the Headway blog for the next installment of How to Build a Site in 10 Minutes.