Transcript
Introduction
Welcome to Using the Style Book. Learning Outcomes. Learn best practices for using the style book, understand the difference between global styles and the Style Book, how they work together to learn how to add customization and styling before setting up your website. If you have not viewed styling your site with Global Styles, please do so to get a better understanding of Global Styles. Learn WordPress videos are found on YouTube under WordPress, the URL link is below also.
Finding the Style Book
To find the Style Book, we’re going to start in our dashboard. And we will scroll down the menu to appearance. We will go over to the editor and click on that to open that up. Under the design menu, you’ll see the styles. We’ll click on that. And we’ve opened up a kind of mini menu that shows WordPress default, it has comes with eight different style variations. So we can kind of stop here and I’m going to show you a couple of different ways to do the same thing. So this is going to be one way of choosing a different style combination for your theme. And there’s different colors and fonts. So this is the default page that comes with the theme. And this is kind of the blog home template. Okay. So there’s a bunch of kind of different blocks that they used. And what we can do is we can pick and click on the different color variations to see how they would look. And if you notice that the font will change also, as we go through the different colors. But we’re just going to stick with the default for right now because I want to show you some other things on this page. Up here at the top, there is an eye icon. And when you hover over it says the Style Book and then there’s a pencil icon that says Edit styles. So, if we click on the Style Book icon, the eye, what comes up is the headings, paragraphs, images, all the core blocks that are being used. And again, we can take and click on our different style variations, to see what looks good with the different blocks. The other feature that is good to point out is that down here is last modified so there’s actually a revisions that we can click on. And it opens up our page. And it shows the style revisions. And it shows when I did the revision, and when I click on it on the day, it’ll kind of give me a overview of what was changed and updated, which is kind of cool. Okay. And there’s other ways to get to this also. So let’s go back up here and we’ll go into the edit styles.
Changing the Styles using the Style Book
So this will be the main page that people usually go to. And you’ll notice that the Styles menu on the right opened up automatically, if it doesn’t open up automatically, just come over to the halfmoon. And click on that to open it. And if you’ve watched the Global Styles video, you already know what these things can do. Okay. So again, here is our eye icon. Here is our clock icon that shows the revision. So here’s the other way to get to it. So again, we have the blog home template as kind of our default page, or browse styles just like in that first section. And we can do the same thing, we can look at the page and we can try the different color variations out and then go to the Style Book. And what that does is it provides those, the theme core blocks, but this time in a little bit easier to manage view because it has tabs and they’ve put the different blocks into the different tabs. So that’s a little bit easier. So all the media’s together, design features buttons, groups, such as widgets are those things that you might have like a list with links a calendar again list posts list page list, your social media icons is all kind of a widget, it’s all together. And then our theme blocks will be together too. So again, I can go into my style variations, and I can see how the different colors are going to look within these areas. So it’s kind of really cool. The media doesn’t have much, the buttons is probably the bigger one, because of the fact that the button is going to have a different color in in some of them have different shapes to, to kind of find the best one that fits with you. Okay, so the other thing that you can do is when you’re going through, and this is where the global styles and styles kind of work together.
Change the Button block styles
So if we’re doing kind of our blocks, and I, I like all the other colors, but I, I want to do a little pop, you know, I like the basic, if we look at the colors of this the palette, I like the grays and blacks, but I want to pop a color for my button right in the style book under the Design tab, you can also customize your your buttons and kind of see a preview. If we click on the block, it will open up the styling tools for this. So we can go in and change the background color. And we’ll go with this light brown. And then we’ll change the text to a black. And we can also change the appearance and make it a medium text. And we can also change the font. And that doesn’t look good. So let’s go back to our original. Well, we can use that we can use the system sans one. So there’s different ways that we can add things and kind of preview them over here. So I’m going to hit save, and save again. And then when I go to my front end and refresh my page, you’ll see that I have the styles done.
Change the Quote block styles
We are going to go over to the text and look at the Quote block. Now most of our styling we want to do in the Global Styles, but sometimes there’s a special block that might need some, just a special little something. So we’re going to click on that open up the block, and we’re going to add in a background color. So we can change that. Okay, we can also change the font and we’ll do that. And then we can hit Save. And we’ll hit Save again. And now when we go in when we tick off our style block, we can see that in our template that we can preview this here and then when we go to our front end and refresh our page, and we’ll scroll down we can see how it looks there.
Conclusion
Check out more lessons at Learn.WordPress.org or our YouTube channel at WordPress. Thank you
Practical
Use WordPress Playground below to apply what you have learned.
Open the Style Book and make the following changes:
- Change the background color of the Buttons block to a different color.
- Change the radius of the Image block to 10 pixels.
- Change the line height of the List block to 2.