We are going to take a brief look at the Thesis code editor before we move on to working on creating and using variables in Thesis 2.3.
Code Editor Keyboard Shortcuts
But before we go over there I would like to draw your attention to this Resources menu item on my website. Under Resources/Articles if you scroll down here you can find resources for Thesis 2.3.
In those I have the keyboard shortcuts for the code editor for the PC and the Mac. There are lots of really cool shortcuts that you can use. You can click on the keyboard shortcut and you’ll see these keyboard shortcuts for this code editor.
Syntax Highlighting – Visual Cues for Mistakes
Let’s come over here to Custom CSS, this is that Thesis code editor. There are some things you should notice about the code editor. First it uses CodeMirror so if you’ve used CodeMirror in other types of editors this should seem reasonably familiar to you.
In any case, it has syntax highlighting which means that it’s going to show you whether or not you are messing up.
If, for example, I had display inline block like that, you’d see this was gray. That’s because display inline block like this is not an actual valid rule or property. That’s the actual property, inline block. You’ll start seeing things like that.
If we misspell the word display, that’s going to turn black. So you have this syntax highlighting that gives you clues whether or not you’ve messed something up.
If I take this out, so I’ve just removed a closing bracket now you can see all this stuff is black. That’s the visual cue that you are missing something. So that’s the code highlighting.
You also get automatic indentation. So if you are writing a rule like, body and then you hit the return key it indents for you. I’ll add background color here, background color colon red. And then I hit again and it indents and then I put the bracket in and it pulls the bracket back to where it’s supposed to be. So you have this automatic indentation which is quite nice.
If you are using one of the HTML colors then it’ll be orange. If you misspell the HTML color it will go back to gray. Again, that’s the syntax highlighting.
And if you put in an incorrect color like that, it will show up black. And as soon as it’s correct it will turn this purple color. Again, that’s the syntax highlighting.
It also gives you the ability to insert variables. Now these variables are the variables that are in Skin CSS. We’ll just go over there for a moment. Go to the Skin Editor and go to CSS. These variables right here.
As I think I’ve said in the past, these variables are actually dynamically generated. The variable value right here is currently generated from that Skin Design section. So, these same variables exist over here. You have those exact same variables. You see essentially the variable call out.
Use for Your Color Scheme
I strongly recommend that you setup your color scheme with variables. And then you use custom CSS and insert those variables in which gives you the ability to then change the color scheme down the road. And that will change all the variables down the road which will change it all throughout the site. It’s a very useful tool.
If, for example, I wanted my body background to be this color here, I could highlight that space and push the button and it goes into that place. It just replaces it. Now if I do this, come over here and it color, it just fills the space in. So that’s a slick tool for keeping your standard going across the site.
Beginning web developers or designers will often insert a color, the hard color code, and they may insert it 5 or 6 times in their code. But professionals use a variable, put the color in that variable and sticks that variable in 5 or 6 times. Then when they want to change the color scheme all they have to do is change the variables.
I just want to draw your attention back here to the code editor. If for some reason your tabbing gets broken up. Say this happens. Somehow you pasted things in there and it got weird. All you have to do according to this cheat sheet is just hit Shift+Tab and that’s going to re tab everything for you. Everything will be put back into its place with Shift+Tab which is a very cool trick.
Search and Replace Shortcuts
The other thing I really like is the search and replace. I’ve highlighted my favorites here. My favorite is the shift control r because that will go replace all of the instances…you get the idea.
You can control f to find something and then you can control g and that will find the next one and so on and so forth. And if you have to go back to the previous one you can shift control g and it’ll take you to the next one. Then shift control f and shift control r will do the replace. So these are my absolute favorite productivity tools when working inside Custom CSS.