Now that we’ve covered what HTML is, I’m going to propose some tools for you to use in order to help you learn HTML and CSS for WordPress and Genesis 2. I refer to these as the tools of the trade and there are really two sets of tools. There are those associated with Firefox which are Measure it, ColorZilla and View Source Chart and then there are WordPress tools. Those are the ACE Editor for WordPress and then a plugin that I just released which is the Child Theme Editor for Genesis.
We’re going to look at all of these tools here today but we’re going to start off with Firefox tools.
Firefox Developer Tools
In Firefox what you do in order to add these tools is you go over here to Addons. Once you’re there you can go to get addons and then just start searching for them. The first one I’m going to do is MeasureIt, so I’m going to install that. I’ll restart after we get ColorZilla and View Source Chart installed. Then I’ll demonstrate how these things are used.
Next we’ll install ColorZilla and then View Source Chart. As you can see adding these tools is really easy. Now that we have those installed, we’re going to click Restart and look at my extensions. You can see I’ve got ColorZilla, Measureit and View Source Chart installed. Let’s come back over and they’re sitting up here in my toolbar now.
MeasureIt
MeasureIt allows you to measure the dimensions of things. So if you want to try and figure out how big something is, you can use Measureit to draw rectangle around it and it will show you the size. Here the width of this that I’ve selected is 1147 pixels wide.
ColorZilla
ColorZilla will let you choose colors from the web page. So if you want to know what color this red color is in the word “BOB” down here, you just click on that and then click on it with your mouse and you’ll see it’s #c80000. And that value was copied to your clip file so you can paste that color number into something.
View Source Chart
Then finally there’s View Source Chart. You can right click on the screen and this View Source Chart shows up. Before we just said View Page Source but View Source Chart shows up and now it gives you a nice color coded view of the page.
Viewing the Page Code
So this is the head of the page and we can close that and now we’ve got the body of the page. You can see that if we close the body, that’s the whole page. If we open up the body, you can see the first container here is called “site-container”. It’s a div. Inside of that div is the “header” and then there’s the “nav” and then there is what they call “site-inner” and then “footer-widgets” and then “site-footer”.
So you’ve got each of these different boxes inside of that and you can expand and contract and see how your HTML actually lays out inside of the page. This will be very useful for you as we are working our way through this material.
New Firefox Developer Tools
There’s one other thing I want to show you and that is the new Firefox developer tools. Firefox now comes with a set of developer tools already installed. In order to invoke them all you have to do is right click on the screen and choose inspect element and once you do that, this Firefox developer tools pops up.
The Firefox developer tools are essentially divided into two sections. The first section is the toolbar which is this part right across the top and then the second section is the tool itself. So right now we’re looking at the page inspector and we’ll be spending all of our time really looking into page inspector and in the style editor.
Page Inspector – HTML and CSS Panes
Now, the page inspector has two primary panes. It has the HTML pane which again shows you the HTML tree so you can see all the HTML elements and you can expand them and contract them. We’ll look at that more. And then it shows you the CSS panes.
So this is the HTML pane and then on the right is the CSS pane. The CSS pane shows you those CSS rules that are associated with the element that you have selected over here.
Using the Page Inspector
For example, let’s just right click on the top of Learn to Build a Website Just Like This and choose inspect the element and you can see it has now highlighted h1 class=ëntry-title”. We can look over here, so that’s the HTML element that we just selected and then over here are the CSS rules that are applied to that element. We’re going to spend lots of time today looking at those things.
Breadcrumbs
One other thing that you have here is essentially the HTML Breadcrumbs. So you can see first that this is the main content and then inside of main.content there’s article.post and inside of that is the header and then inside of that is this h1.entry-title. This is the sort of the breadcrumb trail that steps you through the HTML.
CSS Rules Pane
In the CSS pane, there are really two different panes that we’ll look at mostly but what we’re primarily going to look at is the rules pane but it can be useful for you to see the computed pane too.
The rules pane shows you all of the rules that apply to this element and including those rules that have been superseded. You can see here it says, .entry-title, font-size is 3.6 em and down here is font-size 3.6 em and it’s crossed out. That means this rule has been superseded by something above it.
The most specific rule is at the top and the least specific rule is down at the bottom and so you can see the first rule, the least specific rule, font-size was 62.5% and then somewhere along here font-size went to 1.6 em and that got superseded and then it went to h1 font-size:2em that was superceded. We came up to this h1 font-size:3.6 em that was superseded until we got to this one here.
CSS Computed Pane
After it’s looked at all these rules and decided which one to apply, the computed value shows you what that application ultimately turned out to be and that’s the computed section.
Somebody asked me if I prefer this to Firebug and yes, I do prefer this to Firebug. I don’t think you need Firebug anymore with the Firefox developer tools. I don’t think it’s particularly useful any longer but really it just depends on what you feel comfortable with. If you’re still comfortable with Firebug then by all means continue to use it. Some of you have been to lots of presentations of mine and you see that I primarily use Chrome.
Firefox vs Chrome Tools
The reason I’m showing Firefox tools is because I think some of these tools are a little more user-friendly for beginners than the Chrome tools. I still prefer to use Chrome and when I’m generally doing my work I do it in Chrome. But one of the most important aspects of doing what we are doing today is being able to determine which selector you want to identify and style and this really makes it quite a bit easier than it is in Chrome.
So all of these demonstrations are going to be done in Firefox. Chrome does not have the same kinds of tools. Chrome does have Colorzilla and it does have Measureit but the Chrome developer tools isn’t quite as user-friendly as these Firefox tools are.
The Style Editor
Anyway, that was the page inspector. The other one is the style editor and the style editor also has two panes. The left hand pane shows you all of the CSS files that are being used to style the page and not just CSS files but also inline styles.
So it shows you all of these CSS files and on the left hand side and when you choose those CSS files then it shows you all of the actual content of that CSS file. So you can scroll through here and look at it and it also actually enables you to edit that code. Now, I don’t mean edit it for real but you can edit it so that it changes the view you are looking at which will give you the opportunity then to make changes to an actual CSS file.
So we’re going to end up switching back and forth between the style editor and the page inspector as we work on customizing CSS. And those are the Firefox tools.
ACE Editor – HTML Editor Function
We also have two other tools that I want to draw your attention to because we’re going to install them next. The first one is an HTML editor that will provide you with an HTML editor function inside of a post or a page. You’ll find that by coming over here to Plugins and Add New and we’ll search for ACE Editor for WP. It’s this one right here which I’ve already installed but you just install it like normal.
Using the Editor
Let’s take a look at what it does. We’ll come over to one of our pages and let’s look at our Headings and List page.
You’re probably familiar with the visual editor and the text editor. This plugint adds an ACE editor which then gives you some color coding of HTML. There’s not a lot of HTML in here but you’ll see that as we add more HTML to this page that the HTML stands out a lot better in this ACE editor. Plus it automatically creates tags for you and things and like that so this is a very useful tool when you’re writing HTML inside of your content.
BYOB Genesis Child Theme Editor
Then the final tool that we’re going to install is this plugin that I wrote. Let’s come over to Plugins for the Genesis Theme so that’s under Member Benefits, Plugins for the Genesis Theme. You do need to be a paid member of my site to download this plugin. I already have the plugin on my harddrive so I’m just going to add it here and again it’s Add New Plugin and in that case, you upload it, browse and add the Genesis BYOB Genesis Child Theme Editor.
We’ve installed it, now we activate it and if this is the first BYOB Genesis plugin you’ve installed then you’ll see this new thing down here. If you’re already using the Responsive Header Image or the Contact Form 7 styles or something like that then you’re familiar with this little menu item. If you’re not familiar with the menu item, the first page in the menu shows you those plugins that I’ve created for Genesis and for members who use Genesis and the second one is the Child Theme Editor page itself.
Why I created the Editor
There are a number of aspects to this Genesis Child Theme Editor besides what we’re going to work on today but the reason why I created this was so that you could have a good code editor to work with for editing CSS that doesn’t require you to hack your CSS file. If you look at most instructions for how to customize Genesis, they’ll tell you to come over here to Appearance and Editor and then you open up your style.css file. You’d then add to that file.
Essentially what you’re doing is you’re hacking the child theme CSS file which I think is actually very bad practice because of what happens when you want to update your child theme or update Genesis. If you’re just using Genesis, what happens is the style.css file gets replaced and any customization you did inside of style.css gets lost.
What the Plugin Does
So instead of that, what this plugin does is it does one of 3 things.
Place CSS in the Head
If you just have a couple of pieces of CSS, you can choose to place that CSS in the head of your document. That’s a good idea if you have a limited amount of CSS because that can reduce the load time of your site.
Place CSS in byob-custom.css File
But if you have say, 30 or 40 lines, I’m not really sure where the cut off point is but if you have a bunch of CSS then you can choose to place it in this custom file which is byob-custom.css. This file is shared by all of my plugins because all of my plugins write CSS and they all write it to the same file. So this will also write to that file which means that you’ll have all of your CSS in one separate file rather than having a bunch of files, one file for each plugin.
Place CSS at Bottom of style.css File
The alternative that you can choose is you can have it placed at the bottom of style.css. What we’ll do is we’ll open up that style.css file and place it there. The benefit of doing it this way is that again, it reduces the number of http request that you have and so it can make your site run a little bit faster.
All of my Genesis plugins are being ported so that they can do this same thing. They have the same 3 choices, either in the head, in the child theme style.css file or in byob-custom.css and the good news is that if you switch back and forth, what will happen is that code won’t be duplicate.
So if you had it in style.css and you switch to byob-custom.css then that code gets deleted from the style.css file and adds it to the byob-custom.css. So it manages this location for you quite nicely, that’s one thing it does.
Full featured CSS Editor
The second thing it does is it provides a fairly full featured CSS editor which you’ll see here in just a minute and then it also will create a child-theme.php file which you can use to add your PHP functions to. Again, we’re not going to talk about that at all today because it’s a more advanced thing but essentially it does for PHP what this is doing for CSS.
This has a whole bunch of keyboard shortcuts and so I’ve a pretty extensive help system up here. If you are working in the PC then here are the keyboard shortcuts for the code editor for the PC and if you’re working in the Mac, they’re different and they’re in the Mac.
I’ve divided this into two categories, the category in red are those things that I think are especially useful and the category in black, these are other keyboard shortcuts that you may or may not find useful but in particular these are the ones that I find most useful.
So indenting with the tab, fixing tabbing for areas that didn’t get tabbed, code completion hints, search and replace functions, commenting functions, that sort of thing. These are all things that are useful when using this code editor so this information is immediately available to you in the Help tab up here.
And that wraps up this presentation on Tools of the Trade for learning and using HTML and CSS in WordPress and Genesis 2.