Welcome back to Part 4 of Lesson 2 of the Customize Thesis Like a Pro tutorial series. In the fourth part of this lesson, we are looking at the second best practice in editing the Thesis theme using CSS which is to write the minimum amount of code necessary. That may seem sort of simple and obvious to you on the surface but, in fact, lots of new Thesis users don’t follow this practice.
An Extreme Example of What Not To Do When Writing Code
The most extreme example I have seen of this is when a person took all of layout.css and pasted it directly into custom.css and then modified a couple of items that they wanted to have different. So in that case, they wrote way more than the minimum amount of code that was necessary in order to affect the change. They thought that they were being clever in this and making their job easier but in fact, what they really did was they made their job a great deal harder. In the first place, that version of their CSS would now overwrite any changes they made in Design Options. So if they make a change in Design Options, like column width, that change would no longer be reflected on their site because the original layout.css is what’s controlling their site. Secondly, because it loads way too much code, twice the amount that is necessary to render the site, it makes pages load more slowly and can therefore affect your rating with Google.
Finally, layout.css is just way too difficult to read. It has been minimized to load very quickly. Your custom file is not going to be minimized. Your custom file is going to follow a normal CSS standard for editing and as such, it will be much easier to read. But layout.css is actually not an easy file to read and if you code in that format, it will be difficult for you or anybody else following you to trace what’s happening with your code. So that’s the extreme example.
A Not So Extreme Example of What Not To Do When Writing Code
A not so extreme example is to copy a portion of layout.css and edit it. We have a member who just this week had a problem with his CSS that he asked me about. Lo and behold he had taken the one little section of layout.css that dealt with the issue that he was working on, copied it and pasted it into his custom.css and then made a minor change. Unfortunately, that wrote more than the minimum amount of code that is necessary and it still eliminates the ability for Design Options to affect all those other changes. And in fact, it made troubleshooting a little bit more difficult because it wasn’t clear really what was acting where. So that’s a not-so extreme example.
An Example of What to Do – Styling the Site Headline
Now we’re going to look at a positive example of writing the minimum amount of CSS code necessary to affect the changes you want. And in this example, we’re going to take our site headline that is this and we are going to make it purple, Arial, and italic. So first off, we need to take a look at what can be set inside of Design Options. Let’s go to the dashboard and Thesis Design Options and then take a look at the header. And you can see that inside of the header we can pick the font color, its family and the size but we cannot specify a style.
Use thesiscss.com and w3schools.com as References When Writing Code
Let’s go over to another site that I’ve created to help you visualize CSS and that is thesiscss.com. Take a look at the header under our page framework. You can see that the heading here is called div id #logo and under logo, you can see that its font-size is set at 3.6 em from layout.css and its line-height is set. Then its font-weight is currently set in Bold and that’s actually set in style.css. And then its color is black currently and it’s set in layout.css. So we are going to be editing this #logo. We’re going to change the color property and then we are going to add a font style property.
Let’s go over and look at one more website that I want you to use for reference and that’s w3schools.com. Go to the learn CSS section and let’s take a look at Styling Fonts. The font families are these things right here that can be set inside of Design Options. So we’re not going to set the families there but the font-style property can be used to make it italic, to make it oblique or to make it normal. And really what we used here is italic. If you want to turn something that was italic back to not being italic, you would use normal. But we’re going to use the font- style italic and, in fact, we’re going to use this exact designation here.
We’ll open our site in Firefox. Firefox has a couple of tools that I will be teaching in Lesson 3 but that you’re going to see in action here. But first, we’re going back to our Design Options and make the changes we can there. We want to make this Arial. And we want to make this purple so now we have to hit save. If we come back over to our site, you can see now that it’s purple and it’s Arial and if we look at the site changes in Web Developer, refresh that, you can see it’s purple and it’s Arial. Let’s download that revised layout.css just to demonstrate what happens here because that’s where the color was changed, in layout.css. We open this file, open the revised CSS and if we scroll down here near the bottom, you can see that #logo and #logo a has been changed to this purple color #982bb5. That’s how you can see where the styles get traced through.
Now let’s go ahead and make it italic. So we’re going to use Web Developer to test this. We’re going to start off with this .custom and then id #logo. This is actually not just a font, it’s also a link so we need to add the link HTML element and then we’ll enter, put an opening bracket, enter, enter again, put a closing curly bracket in, tab in and then we’re going to steal the text from right here. Font-style italic – right over there. You can see now that we’ve made that change.
Copy this text and bring it in to our custom.css and paste it there. Now we’ve actually made the change, we need to save the document. We will upload custom.css to our website and then we’ll take a look at the file and see how it turned out. If we refresh this, you can see now it has been italicized.
An Example of What to Do – Styling the Site Tagline
For the next example of writing the minimum amount of CSS code necessary to affect the changes you want, we’ll make this tagline bold. First we need to see what is available to us in Design Options, Go back over to Dashboard, Design Options and again, the Header. We can choose our font family, our size and our color, but we cannot choose the font weight here. And so let’s go back to CSS3 and look at font family, style and size. But if we look down here under More Examples, you can see “Set the boldness of the font”. If you select that, there is a font-weight property and that in this case is bold. And so, that is what we want to use here.
Return to Firefox and inspect the element. That element is called a #tagline or if we look over here, it’s #header #tagline. And so we will type .custom #header #tagline and then 1, 2, 3 and let’s just copy it from that site. We are going to say font-weight:bold; and now you can see this changed bold.
So again, this is our selector. It has the custom class and the ids and this is going to apply to anything that’s inside this class and id. We could have added the HTML element, the h1 selector, and that would do the same thing although this change would apply only to the h1 tag then. And on some pages this is not actually an h1 tag so we’re going to take that out. And we’re going to make anything that is under custom header tagline bold. Let’s copy this and come back over to NetBeans, move over some space and paste it. Save it and then upload it then we’ll test it. And you can see it has now turned bold.
Comment Your Code
Finally, we want to look at comments. You can see that these are all comments and that they show up light grey in NetBeans. You definitely want to comment your code as you go along. Let’s look at my CSS file for byobwebsite and you can see that I have thousands of lines in custom.css. Scroll all the way down to the bottom of this and I have 22080 lines of code. It can be difficult to read or find what you are looking for if you don’t have blocks of comment breaking it up. So that’s what we’re going to do here in custom.css.
Comments in custom.css start with a slash and an asterisk and then end with an asterisk and a slash. So type /* and then space and then say header and then type in */ and now we have a comment here. Actually, that’s not actually how I do it though. I usually make a little box around it. That makes it easier. It makes it stand out more as you’re scrolling through the page. Go ahead and save that.
And that wraps up Part 4 of Lesson 2, Write the Minimum Code Needed to Customize the Thesis theme, of the Customize Thesis Like a Pro tutorial series.