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 3 – Part 8 – Workflow Case Study – Styling a Submit Button

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Welcome back to the 8th and final part of Lesson 3 of the Customize Thesis Like a Pro tutorial series. In this final part of the lesson, we are going to go through a practical application of all the tools that we’ve learned so far and we are going to add CSS styles to a typical submit button.

Let’s take a look at a website that I’ve created for the Build Your Own Ecommerce Website tutorial series and that is www.estore7.byobtutorial.com and we’re going to go over here to Publications and Books and then down to the Banana Lust book. If we scroll down here to the bottom, this is the button that we want to edit.

Open custom.css File

Next we’re going to open up our custom css file in NetBeans. This is the custom css file for that website and this is a little bit of custom css that I already inserted into that from a previous ecommerce lesson. And then finally, we’re going to open up FileZilla and make sure that we login to the right website because in this lesson, what you’re going to learn also is a process for making these kinds of edits or revisions. So we’ll go ahead and go to themes and thesis _17 and custom and this the file that we’re going to be editing, this custom css file.

Styling the Button – Change the Color

So go ahead and minimize those and then we’re going to change the button color. Let’s come over here to the button and open up Firebug and hit inspect element and now as we inspect this element, we can see that it is an input type of submit and that the elements that control it are this custom format text input that I have in here that says width of auto. Also, the format text input which gives it a border and a padding and then the input which gives us a background color, a border turned off if we turn that off to the background, turn off the border style, turn off the color, so on and so forth… is controlled by these things. And so if we want to change the color, you can see that that is being controlled right here by input text area background color of this gray.

We are going to address ourselves to this. Probably the easiest way to do that is to copy this piece over here because it’s a similar and paste it back there again. And now we are going to start off by giving it a background color and I picked this color off of another website and it is #ffff81. Now we get a yellow background color.

The reason I scrolled up here is to show you that unfortunately, this affects every element that is part of custom format text input including this button. And since this button is also controlled by that, the background color becomes yellow and so we need to make this a little bit more specific.

The way we make that more specific is by telling it what type of input it is and it is the. So if we come over here and put a brace and type equals and then double quotes submit, double quotes and brace again, now it no longer affects the color of this Add to Cart button but it still colors this Buy Now button. So we needed to enter the. We’ve given it a background color.

Styling the Button – Change the Size

Now let’s make it larger. So the way we’ll make it larger is to give it some padding. I’m going to give it a padding: 5 pixels at the top and the bottom and then a space and 25 pixels on the left and the right. Okay so that made the button larger. It feels like it’s a little bit too close to the dropdown above it so I’m going to give it a bit of margin. So that’s margin top: 10 pixels;. Okay that drops us down a little bit.

It’s kind of subtle but what’s happening here is that the border color makes it look like it’s inset rather than sticking out and I’d like my buttons to look like they’re sticking out so we are going to change the border color. And you can see over here that the border color is aaa ddd ddd aaa, that’s how it accomplishes that. What we’re going to do is border color: dddddd and then aaaaaa and then aaaaa and then dddddd and now the button projects out.

Styling the Button – Add a Hover Behavior

I’d kind of like it to project out a little bit more so I’m going to give that border a little bit more width so I’m going to say border width: 2 px;. Now the button stands out but it doesn’t really indicate to you that this is something to click on. This could just as well just be a stylistic thing so I want to change the cursor when we hover over that and so we’re going to say cursor colon and then pointer which is a style of cursor that gives it a pointing finger.

It looks pretty good but still I like a little bit more difference when we hover over this so we’re going to give it a hover behavior as well. Come down here and select that, copy, enter and paste. And then we come over beside that Submit and we add colon hover. Then we can get rid of this padding and margin because that’s still being controlled by the standard and we can also do that with border and cursor because it can be controlled by the standard.

But what we want to do is to change the color so I’m going to take this f and I’m going to turn it to an 8 so that now when you hover over this, the color changes. And then I’m also going to go back to the other kind of border style so I’m going to reverse this border style so it looks like it’s being pressed in when you hover. I’ll come over here and copy that original border style, come back over here and paste it. And now when you hover over it, it changes color and it looks like it’s being pressed in. So that’s how to edit this.

Update and Test the Newly Styled Button

Well now that we’ve edited this, what now? We need to somehow get that onto our website and here’s where the other part of this equation comes into play. We are going to copy this and we’ll need to go to a different page. You know, that custom css we created in the Edit CSS from Web Developer would be completely lost. So what we’re going to do is come over here to our custom css file and paste this code that we just inserted into it and then we’re going to save it. We’ll open up FileZilla and we will upload it and then we will come back to Firefox and refresh it. Look into custom css, now it’s there. Scroll down here, see it works and we’ve done it. We’ve made this change.

There is one last thing that we need to do though and that is test this in the other browsers. So I’m going to bring up this, copy that 8 URL.  I’m going to bring up Internet Explorer and paste that URL there and we’ll scroll down, see how it looks. Looks great. Okay, let’s take a look at it in Chrome. It’s important to always test changes in all of the browsers. If you don’t test it in every browser every time you make changes like this then you can lose track of what change actually caused the problem. So you should always test this in all different browsers but you can see it works fine in Chrome as well.

That wraps up Part 8 of Lesson 3 of the Customize Thesis Like a Pro tutorial series. Hopefully you all have a basic decent knowledge now of the tools of the trade for customizing the Thesis theme and you can begin to apply those tools to the everyday issues that you see on your site.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
5 Comments… add one
5 comments… add one
  • BlankSlate December 5, 2011, 12:42 pm

    Very cool plugin – measure it. Thanks

  • Arman Jon Villalobos October 13, 2012, 10:57 pm

    I wish these course was free =)

    • Rick Anderson October 14, 2012, 9:15 am

      It was for quite a while. Generally, when I teach a course it is free and when I’m finished I move it over to premium.

  • Jan W December 17, 2012, 8:38 pm

    I had skipped the tool session, but then on one of your videos(background images etc.), I noted the fluent manner in which you played then wrote CSS. That got my attention and I said, That’s what I needed when I first did my site. Thanks a bundle!

    • Rick Anderson December 18, 2012, 8:54 am

      You’re welcome, I’m glad you found it useful.

Leave a Comment