Build Your Own Business Website header image

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.

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.

What are 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 on the distance from one color to the other.

ColorZilla, a Great Tool for Using Gradients

My favorite tool for using gradients is ColorZilla because it works exactly like the gradient generator in Photoshop where you have bars. You have the beginning bar, the ending bar, you can have spot bars, you can add lots of spots to it if you want and change colors up.

Options for the Gradient

You can change this color here and that’s this color. Let’s say now I want pink, so it goes to pink there instead or you can get rid of that color altogether. You can adjust where it’s dark and where it’s light. You can see what it looks like here, it can be diagonal, it can be radial so it starts from the center and moves out.

It can be vertical. You can reverse it so that if you want something where you’ve got a darker color at the bottom and a lighter color at the top. Then it’s got these starting places for you where you can pick one of these things as its starting place. Once you have a starting place, you can make adjustments or you can just grab one of their starting places and do your own thing.

You can see how this is working where you’ve got multiple different lines and different colors and that kind of thing going on. They can be as complicated as you want them to be and really, there’s just no end of the kind of things you can do here with a gradient like this.

Creating a Simple Gradient

Nevertheless we’re going to use a fairly simple gradient for the purpose of demonstrating this so I’m just going to get rid of both of these colors.

What I usually do when I’m creating a gradient my usual process looks like this. I’ll pick this color off my site and go back over to the gradient generator and paste that color in like this. So that was the dark color and then what I often do is I just come over to the place I want the light color and I paste that color in place and then I just drag the lightness down.

So if you want to essentially have the same color scheme or if you want it to just be monochromatic from one color to the next then you can put the same color in both places. Then you’d lighten up the one color. So that’s the way this is, we’re going to reverse it so that we’ve got dark on the bottom and light at the top.

When you do this, you end up with a code right here which we’ll use to add it to the site. We’re going to cut and paste this code into a CSS file. One of the things we are going to need to do here is add IE9 Support so we’re going to click on that Add IE9 Support. I’ll show you how this works here in a moment.

Apply the Gradient

So we’ve got our colors here, let’s go to IE and click that. We’ll copy this code and figure out where we want to apply the gradient. Come back over to Thesis and Custom CSS. Let’s say we want to apply this to body. I’m just going to come down below this, this will override, paste all that code in and close it out.

We’re going to shift+tab to make it all indent correctly. For all the browsers it’s just going to show a color. We’ve got a filter with a svg, we’ve got various different definitions depending upon which browser it is.

Addressing Different Browser Configurations

Notice that if you just use the plain old background linear gradient, it’s not going to work everywhere so this is why you use a tool like the Ultimate CSS Gradient Generator to generate the code for you because it essentially connects up to all of the various browser configurations that are necessary.

The other thing we need to do in this case is grab this little piece of code here. I’m going to actually put it a text box or I’m going to put it in the text here for a second. What has to happen is, this little piece of HTML needs to go in the head of of your document.

In fact, we’re not going to say gradient here, what we’re going to say is body because that’s where we put it so if you’re doing this with body you have to do it this way. I’m going to show you how to do it with a different element in a minute but in fact, what we’ll do is we’ll say body, .gradient because this will work for everything.

If you are working in my Carta skin or Agility skin, you don’t have to do this because I’ve already handled that in those skins but you do have to do this if you’re using somebody else’s skin.

Gradients Work Best in Fixed Sizes or Stable Directions

Let’s copy this and I’d show you what this looks like without that first. So I’m going to save this and come over here and refresh this. You can see this gradual gradient going down. Now, the problem with this gradual gradient from top to bottom is that on a page that is really long. The gradient stretches out further, right?

So it’s never going to be the same, it’s always going to be a little bit different because the darkest color is at the bottom and the lightest color is at the top. Gradients work more reliably on things where you know the size is fixed or if you are running the gradient in the direction that is stable.

So if you’re running the gradient horizontally, that direction is stable because as a general rule people don’t really resize their browser windows so that doesn’t have the same impact as it will have if you’re putting it in something that can grow or shrink. But depending upon its content you’re going to end up with slightly different results every time. Not that that bothers me in this situation, that’s fine.

Fix for the Browser IE

I want to show you though what happens then in IE because when you see it you’ll know what you have to do to fix it. Now in the first place, it works just fine in IE10. Sometimes it works fine in IE9 like it is here but if we change browser mode again from IE9 to IE8 or lower it’ll give us a different result. I’m not actually able to show you the problem here but I can guarantee you that if you don’t do this fix, somebody is going to notice the problem.

Here’s the fix. For the element that has a gradient applied to it, you’ll say that if it’s greater than IE9, take out the filter because we’ve put the filter in there to make it work. The way that works is you come back over to your site and your HTML Head and then Head Scripts and then you just add that directly into your Head Scripts.

Let’s see what it looks like now once we’ve done that and let’s go back to IE8, okay it looks fine. Well you’re not seeing a good test of it because for some reason or another right now it’s not properly simulating what this would look like but be that as it may, you need to have to this Head Scripts bit. You need to have this little style in the head of your document. It’s essentially a conditional tag that only Internet Explorer can read and what it will do is essentially turn off the filter for this.

With the code like this, if you’re in control of the element that’s using the gradient, you can just add the class gradient to it too. Let’s say for a moment that we were applying this to the header. We could add the class of gradient to the header and then in our Custom CSS, instead of body being this, let’s say #header.

Now the header has this gradient added to it. Unfortunately, it’s going to work just fine in IE so the example that I was going to show you of failure is failing but you can take my word for it. You need to have that in there if you expect the gradient to work properly in all versions of IE.

I just realized that it’s multi-stop gradients, that’s what it was. I don’t have multi-stop gradients, I only have a two stops, this stop and that stop. Multi-stop gradients would have another one in here someplace like that. So let’s copy that one and put it in. Then come down to our background here and use shift+tab to wheeled control over this. Save Custom CSS, refresh it and now you can see the differences in the different versions of IE.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment