From the course: WordPress: Building Child Themes

Designing in the browser - WordPress Tutorial

From the course: WordPress: Building Child Themes

Start my 1-month free trial

Designing in the browser

- [Teacher] Over the past couple of years, there's been a lot of interest about designing websites in the browser and there are some really valid reasons to do so. When we design a website, it is really kind of strange that we design them in Photoshop or Illustrator or some other static environment that isn't really where the website is going to live and we can do things in Photoshop that are really hard to code and commit to a certain design without considering the implications. Designing a website in the browser literally means putting the content in the browser and then using browser tools to change the appearance of the content and then copy that content back into the files so it becomes permanent. When we work with child themes in CSS, this is exactly what we're going to do. We're going to design in the browser and it's actually quite simple. You open the site in the browser, we'll be using Google Chrome, but other browsers have very similar features. Then you select the item you want to change, let's say the title right here. I'll right-click on this, I'll click on inspect, this will open the developer tools in the browser. Here we can see the HTML, and I'll scroll up so we can see our title. Here we can see the HTML with a nice highlights, as well as the CSS. We can position this wherever we want, I might want to move this over to the right hand side or I can even pop it out, and from here we can start changing the appearance of that content live in the browser and see what those changes would do. So I'll make sure we're selecting this title right here, I'll scroll down, and I see that there is a class site title dot featured image dot entry title color that's white. Now I can start changing this on the fly, so let's change the color from white to, let's say, pure black. There it is. That obviously doesn't look really good. Let's change it to something in between or something a little lighter. With colors, you can also type in the actual color you want to see, so I can enter here just yellow. And whenever you're done, you can either press Enter or press TAB and you'll go down to the next line and now we can add brand new styles. So let's say I want this to be all capitalized. I'll select text transform and I'll select uppercase. And I can press Enter and just keep writing new styles. We can keep working like this and experiment with what we want to see in the browser. I can press Tab to go down to the next line, I'll type in font dash size, I'll say 1.8 m, and m's are a relative unit. They're useful because they're based off of the font size of the page, so things are a bit more flexible. You can also use pixels or percentages. But with this theme, it creates a bit of a problem because the CSS selector affects a ton of elements. It affects the title, it affects the meta information about the post, the menu, and the site title. So let's write a brand new selector. Right up here, we can see element dot style. Those are the styles applied directly to this element that we have selected, so let's add a brand new one here. I'll click in and I'll type in font dash size 1.8 m. Now that's applied just to the title, let's go ahead and turn this one off. So we can click the little check mark button there and now we can see this style is just applied to the title. I'm going to go back here and copy these and I'll paste them in and I'll disable them here. And we can keep working like this and experiment with what we want to see in the browser and you can see exactly what you're going to get. And then if you don't like what you get, you can say, "Wow I made a big mistake. I really should get rid of that." And let's go ahead and refresh the page and all of our changes go away. And that's something important to remember. When we design in a browser, it's all temporary and only lives in our browser. If we navigate to a different page or refresh the page, we lose our progress. So I like to work in small increments and then save my work. So the idea here is you're working with the existing content in the browser and on the fly. And this goes for both CSS and HTML. Let's scroll down and let's say we want to see exactly what this page would look like without this block quote. I'll right-click on this, click inspect element, here's the block quote, and I can just delete it. I can go down, let's say we want to see what this looks like without these ingredients. Can delete those, can delete this header. And of course, we can also modify things. So let's say we want to see what our page would look like with a really long header. I'll copy directions and I'll go ahead and add onto it. So by doing this, we can experiment with our content before making any firm decisions and that way we can start redesigning our CSS in the browser. And when we get what we want, copy it into our CSS files.

Contents