Build Your Own Business Website header image

Thesis 2.1 for Web Design Professionals – Part 3 – Using the Thesis 2.1 Code Editor

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

So you’ve got a grasp on the Thesis 2.1 file structure and now we’re going to move on to using the code editor for the design professional.

Skin CSS and Custom CSS

We’re working here on this Barking Chihuahua Café and this is where we finished customizing it in the DIY Website Builders seminar on Wednesday. Let’s take a look at the CSS. We can see this in two places. We can see it in custom css which is in the skin menu.

You can see here in custom css, this is a code we wrote on Wednesday to make that set of columns and everything. So it shows up here and you see it again over here in css. So this is the skin css and the other one is custom css. So when we talk about pasting something in custom css or talk about pasting in skin css, we are talking about those two things.

Based on Code Editing System Code Mirror

This code editor is based on code editing system called Code Mirror. In fact, there’s a site, And there is a nice, little user reference here explaining how it’s used and that sort of thing. So if you want more information about this and information about customizing it for your own use, there’s quite a bit of information here. And this is designed for you, the professional web designer, web developer. It’s very specifically intended for professionals. This is not a toy.

Syntax Highlighting

And in any case, it has syntax highlighting.

Color Coded System

You can see that syntax highlighting in place where it can tell what the selector is and it can tell what the property is because the selector is in blue, the property is in gray. Things it doesn’t recognize are in black.

I think it deliberately doesn’t recognize stuff like web kit and mos, browser-specific codes because it’s based on CSS 3 standards which also doesn’t recognize those things. So you can see the selector and operator, colors. You can see the properties and their values.

And when the value is text based and correct, it’s green… when it’s text based and incorrect, notice what happens. It went to gray. The whole thing went off because I went from border box to border boss. So it does tell you whether or not you’ve made a mistake. It does help you, in any case, see whether or not you’ve made a mistake.

These are variables and all your variables are going to be in red. And this is something special that Chris has added to the Code Mirror version here.

And then you also have numbers and the numbers are in this darker red color.

These colors help you see whether or not you’re making a mistake. If we take out this semi-colon, you see this color… this line height property changes color. If the stuff is not properly colored, that means there’s an error someplace, generally above it or below it. Somewhere along the line, you’ve got an error in here. In any case, this is one of the reasons it’s totally cool.

Automatic Indentation

Something else is that it uses is automatic indentation. So you can continue typing like this and say padding bottom and it will continue indenting for you. And this indentation system, of course, is critical to making your code readable. So you may be used to the method that Chris and, in fact, I have borrowed from Chris to sort of stretch the code out and to reduce the number of line breaks and reduce the number of spaces and stuff like that. You’d do that in order to pseudo minimize your CSS file.

However, that does not aid in the readability of the CSS file. And so my suggestion to you is that in your own css, you make sure that you have one property per line and that they are all properly indented.

Custom CSS Ability to Enter Variables

Another thing is that the custom CSS has this cool ability to enter variables. So if we go back over here to custom css and if you were here last week, you saw that. We can come over here to say our color… well, that’s the other thing that we didn’t see in the other side which is colors. When they’re hexadecimal colors they are shown in this magenta purply color. And URLs are shown in this purplish color here.

So anyway, we could come along like this and then click this button here and choose a different color. So let’s just say we use color 2. And all you have to do is click this and it’s going to change the variable. As you click the variable, it’s changing the variable. And Ctrl Z, Ctrl Z, Ctrl Z until you get back. It’s got a what seems to be a relatively unlimited range of control z’s.

My Keyboard Shortcut Cheat Sheet for the Code Editor

Now that I say that you’ve got control z’s, I want to draw you back again to my resources page because I have created a keyboard shortcut cheat sheet for you. I have a PC version and I have a Mac version and we’re just going to take a look at this PC version here right now. Because this code editor actually has a whole bunch of very useful tools in it. I’m going to draw your attention here to one very important tool, I think, which is the shift tab.

Now let’s just say that you use very bad coding practice and your stuff is really all over the place. So it’s essentially impossible to read, right? Well, what you can do with your mouse inserted in there is hit shift tab… pardon me, you have to select it. So control A, you select everything and then hit shift tab and it will automatically fix all of that those tab problems. Well, it didn’t fix all of them. It needed a little bit of help from me here, I guess..

So if you’ve got a whole bunch of these things where there’s no indentation, if you select them and shift tab, they’ll automatically take the correct indentation. This is also the case down here under… say the media queries. We have an additional indentation for the media query and to the extent that we break that indentation, to that extent, it will fix it. And it will fix it all for an entire block of choices which is totally cool.

If you screw up while you’re typing your stuff in and somehow you know, break the indentation, you can also say, select a block of this to further indent if you choose. And again, if we take this and shift tab, it will all go back to the right space. So that’s one tool, this automatic indentation fix tool. Clearly, it has some limitations but not too many.

The other one that I really like is the fine which is control F and the replace all which is shift control R. We’re going to use that here later on this morning. So anyway, this keyboard shortcuts, either for the PC or for the Mac has the ability to significantly increase your productivity as you’re working in this code editor.

And to the extent that you want to do other stuff with the code editor, you can look at ways to customize it because there’s all kinds of things you can do this code editor to customize it if you so choose. But that’s a conversation for another day except just to say that it is possible.

Okay so that’s the new Thesis 2.1 code editor.

0 Comments… add one
0 comments… add one

Leave a Comment