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.

Lesson 5 – Part 8 – Fix the Thesis Button with CSS

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.

We’re going to start off by making it look right in Firefox. I have Firefox set up for this. Let’s go to our Books and we can even just start looking at it right here. This is the button that looks funny. It’s been obviously expanded beyond its normal size and that’s because of what Thesis does for comments. Thesis has this thing where it sets the width of input elements to 45%. What has happened here is that this is just automatically grown to 45%. So what we’re going to do is we’re going to get rid of that.

Use Web Developer and Firebug in Firefox

Here we are in Firefox and what I want to do is I want to go ahead and inspect the element and what you’ll see is that Firebug pops up below. What I want to do is to figure out which element I need to style in order to make this look right. This is an input element. Right now you can see hovering over that, that’s the input element with a class of eStore button. If you look over here on the right hand side you can see that it’s a format_text input class and that’s where that 45% width comes from. If we remove that 45% width here you can see that the Add to Cart button now goes down to the right size for everything. Obviously that doesn’t make it permanent so we’re going to look at how to actually write that now.

Model the CSS Change in Web Developer

With Web Developer let’s go ahead and open up our CSS and we’re going to edit it in Web Developer. Open up custom.css. You’ve probably seen me do this in the past but what we’re doing is we are going to type some sample CSS to see how it affects what we’ve done here. Once we like it then we’re going to copy it and paste it into our real CSS file. So anything we do here changes what it looks like for us but it doesn’t actually change the site.

This is a format_text with a class of input that has that width of 45%. Let’s just copy that and we’re going to start off with dot, custom, space, dot. Then we’ll paste that thing in that we had before. So dot, custom, format, text, input and then curly brace, Enter, Enter, another curly brace, move over a little bit and here we’re just going to say width, colon, auto, semi-colon. Now that 45% has gone away and the auto has taken over and so now it’s only as wide as it needs to be in order for this to show.

It also has this little gray background to it and it’s got this little border around it. It would be nice to get rid of those things as well. So if we come back over here and inspect the element we can see that again this is an input with a class of eStore underscore button.

What we’re going to do is to attach ourselves to the input selector with a class of eStore button. Come back over here and type custom and then input and then a dot and eStore, underscore, button, and then we will give ourselves our braces and then a couple of spaces. Now what we’re going to do is to get rid of the border first. We’ll say border none, border, colon, none, semi-colon and then we are also going to say that the background color is white. So background, hyphen, color, colon and the symbol for white is pound sign, ffffff, semi-colon.

You can now see that this button looks the way you’d want it to look. It doesn’t have that funny gray stuff and it’s not too large. So what we’ll do is we‘ll take this custom css that we’ve just copied or that we just typed, we’ll copy it. I want you to see what happens. If we don’t copy it we’re going to automatically lose it once we move someplace else. You can see I just moved to this page, a different page entirely, and when we come back over here and look at our custom.css it’s not there. It’s not there because it only exists in this little window for as long as that window is current. As soon as you move windows you lose all your test changes.

Paste New CSS into custom.css File

We copied it and now we’re going to open up our custom.css file which as you can see is blank. Come down here and paste the code that we typed in Firefox into our custom.css file. I’m using the NetBeans ID 6.8 for that purpose. This is my custom.css that’s sitting in my local file system. Save that and then open up FileZilla.

Upload custom.css and Test Changes

In Filezilla I want to connect up to this website and so for me that would be the eStore website. I’m going to go ahead and abort it and then we’re going to go to Themes, Thesis 1.7, Custom and here’s the custom.css I just changed and we will upload that.

Now custom.css is the same on the remote site. Let’s test it to see if it is actually the same. Come back over here and look at it and let’s refresh that and there it is. Our little Add to Cart button has changed so that it looks nice now. Come back over to Our Products and if we go over to Books you can see that all of the books display much more nicely now. If we go over to our Demonstration page, come back over to Pages and view our Demonstration page you can see that it is significantly improved. Right now the Add to Cart button is nice and small. Obviously in this case you wouldn’t want white as the background for your Add to Cart button because now the white shows up where it didn’t show up before. But you do have the nice drop down choices here and obviously in this case you’d want the drop down button to be a dark charcoal instead of the white.

That’s how CSS can fix that one thing. We’ll look at other CSS fixes here as we work our way through this process.

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