Reusing Existing Code and Creating Custom CSS
The next thing we’re going to do is remove these borders and we’re going to that using custom CSS. Everything we’ve done so far has been dragged and dropped and borrowing CSS from the Thesis Classic Responsive theme which is what you should do as long as you can.
You should go ahead and reuse code rather than creating code from scratch especially since it works but now, we’re going to go directly to our Custom CSS and make some other changes.
BYOB Resource Page with CSS Code Snippets
I want to direct your attention to my resources page because I have created a couple of new resources for you. I have a CSS version of a code snippets for Thesis Classic Responsive skin, it’s a CSS file and I also have a plain text version of it. All you have to do is click on it to download and actually, in my browser what I really have to do is right click on it and say, “Download”. I’m just going to leave it like this for the time being but these are code snippets that you can take and use or modify in any way you see fit.
Viewing Code in a Code Editor
I’m going to show you what it looks like in a code editor just because it looks better on a code editor, it’s not straight black and white. This is that form in my NetBeans code editor. This gray color, this is all comments and then the colored sections are the actual code.
Remove Code for the Borders
What we’re going to do is come down and take a look at my Remove Borders area. The first border I’m going to get rid of is the header border. So if we come over here to Custom CSS, you can just paste that here and you can see how this is color coordinated? It’s using a syntax highlighting to help you to see whether or not you’ve made errors.
We’re going to save the Custom CSS. This is saying that in the container with the class of header show no border or border:none. If we refresh this, now that border that used to be coming across there is gone.
Now we’re going to do the same thing with this border and with this border and the border for the content as well. I’m just going to grab the content and the footer borders together, come back over here and paste that.
In order to remove the column border for the content column, we’re using the first content box child of the columns box and give it a no border and then footer has no border. Save that, refresh this and now we don’t have any borders there. We’re also going to do something similar to our menu in a few minutes.