Build Your Own Business Website header image

CSS

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 9 – Understanding and Using Gradients

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The last thing we're going to do in this lesson on Customizing Thesis 2 with Background Images, Colors and Gradients is to work with gradients. If you're not familiar with a gradient, a gradient is essentially a color range. It starts with one color, ends with another color and then computes the various colors based

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

Customize Thesis 2.1 Like a Pro

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

This lesson series takes beginners from no knowledge of HTML, CSS and PHP to being fully capable of customizing Thesis 2.1. You'll need no prior knowledge of CSS, HTML or PHP. If you already have Thesis activated on a WordPress site and are comfortable with the basics of WordPress then this is a great place to start.

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