Build Your Own Business Website header image

Background Images/Color

Style the Thesis Classic Responsive Menu

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing we are going to do in this Thesis 2.3 for DIY Website Builders seminar is to add styling to the Thesis Classic Responsive menu. Right now that menu spans all the way across. If you hover your mouse over this you can see that spans all the way across. We are going

Add Background Images and Color to Thesis Classic Using Custom CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now I want to add some background images and color to the Thesis Classic Skin. So we’re going to start off in Skin Design with this. I’m going to take this interior backgrounds out of here. And then let’s really, really lighten it up. Save design options. Let’s take a look at the site, flush

How to Add a Hover Style to a Thesis 2.1 Query Box

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this session we demonstrate how to add styling to the hover state of a Thesis 2.1 query box and add opacity to the image. Member: It's one little off, yeah. Rick: Yeah, got it. Member: Well, you can see there are 8 query boxes here with pages inside of, inside them. Rick: Uhuh. Member:

Part 8 – Adjusting Background Images for Mobile Devices

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing I want to do is show you in this lesson on Customizing Thesis 2 with Background Images, Colors and Gradients is how to use media queries to change up these images for mobile devices. This is really a big image and a mobile device can't see all these edges and doesn't need

Part 7 – Using a Semi-Transparent Background Colors Over a Background Image

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

You’ve now seen how to add multiple background images in the same HTML element on a Thesis 2 skin so the next thing we're going to do is add a page background color to this. First we have to figure out what we want that to be a background of, which element. So we're going

Part 6 – Using Multiple Background Images in the Same HTML Element

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that you’ve seen how to add a fixed background image in a Thesis 2 skin, the next thing we're going to demonstrate is how to put more than one background image in a container. I have a background image that I'm going to layer over the top of this body background image that is

Part 5 – Using a Fixed Background Image in a Skin

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing we're going to do in this lesson on Customizing Thesis 2 with Background Images, Colors and Gradients is to add a fixed a background image in a child theme. This is one of those cases where we will switch skins again. Manage Skins and we'll come back to the Classic Responsive and

Part 4 – Add a Color to the Sidebar with a Tiling Image

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Something else that I would like to demonstrate in this lesson on Customizing Thesis 2 with Background Images, Colors and Gradients is placing a color in the sidebar that goes all the way down to the bottom of the page. As it sits right now there is no background color here in the sidebar. So

Part 3 – Using Different Background Images on Different Pages

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

The next thing we're going to do in this How to Customize Thesis Skins with Background Images, Colors and Gradients lesson is to use different background images on different pages. What we have created so far looks just fine on the main front page but if we come over to the menu page, now all

Part 2 – Add a Tiling Background Image to the Body of a Skin

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

With that conversation about CSS Background Images and their properties out of the way, we're going to start off by looking at tiling a background image. I want to start off here in this Thesis 2.1 site, thesis2demo, and I am working in the Social Triggers skin. But first I should say that this class

Part 1 – Understanding Background Images in CSS

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Good morning everybody and welcome to this special session on How to Customize Thesis Skins with Background Images, Colors and Gradients. This is the first lesson in a continuing series called Customize Thesis 2.1 Like a Pro. I have a series like this for Thesis 1.8.5 and I am re-creating this with different information for

Customize Skins with Background Images, Colors & Gradients

In this first lesson of our Customize Thesis 2 Like a Pro video tutorial series we look at the various ways to customize a Thesis skin using background images, background color and gradients. We look at both tiling and fixed background images and demonstrate various ways to use them. We also examine how to use

Part 8 – Adjusting Background Images for Mobile Devices

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

The final part of this Customizing Genesis Child Themes with Background Images and Colors lesson is on how to use media queries to change up the images that you're loading. And the reason you would want to do that here is that these images are way too big for a smaller device. This is just

Thesis 2.1 for DIY Website Builders – Part 11 – Add Background Images and Color to Thesis Classic Using Custom CSS

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Now that we’ve removed borders from all page in the Thesis Classic Responsive skin, the next thing we're going to do is add some background colors and background images in Thesis 2.1 to make the page stand out. We’re going to start actually with design. And what I want to do is to take this