Welcome to Using the style book.Learning Outcomes. Learn best practices
for using the style book, understand thedifference between global styles and the
style book, how they work together tolearn 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 geta better understanding of global styles.
Learn WordPress videos are found onYouTube under WordPress, the URL link is
below also.
To find the style book, we're going tostart in our dashboard. And we will
scroll down the menu to appearance. Wewill go over to the editor and click on
that to open that up. Under the designmenu, you'll see the styles. We'll click
on that. And we've opened up a kind ofmini menu that shows WordPress default,
it has comes with eight different stylevariations. So we can kind of stop here
and I'm going to show you a couple ofdifferent ways to do the same thing. So
this is going to be one way of choosinga different style combination for your
theme. And there's different colors andfonts. So this is the default page that
comes with the theme. And this is kindof the blog home template. Okay. So
there's a bunch of kind of differentblocks that they used. And what we can
do is we can pick and click on thedifferent color variations to see how
they would look. And if you notice thatthe font will change also, as we go
through the different colors. But we'rejust going to stick with the default for
right now because I want to show yousome other things on this page. Up here
at the top, there is an eye icon. Andwhen you hover over it says the style
book and then there's a pencil icon thatsays Edit styles. So, if we click on the
style book icon, the eye, what comes upis the headings, paragraphs, images, all
the core blocks that are being used. Andagain, we can take and click on our
different style variations, to see whatlooks good with the different blocks.
The other feature that is good to pointout is that down here is last modified
so there's actually a revisions that wecan click on. And it opens up our page.
And it shows the style revisions. And itshows when I did the revision, and when
I click on it on the day, it'll kind ofgive 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 andwe'll go into the edit styles.
So this will be the main page thatpeople usually go to. And you'll notice
that the Styles menu on the right openedup automatically, if it doesn't open up
automatically, just come over to thehalfmoon. And click on that to open it.
And if you've watched the global stylesvideo, you already know what these
things can do. Okay. So again, here isour eye icon. Here is our clock icon
that shows the revision. So here's theother way to get to it. So again, we
have the blog, home template as kind ofour default page, or browse styles just
like in that first section. And we cando the same thing, we can look at the
page and we can try the different colorvariations out and then go to the style
book. And what that does is it providesthose, the theme core blocks, but this
time in a little bit easier to manageview because it has tabs and they've put
the different blocks into the differenttabs. So that's a little bit easier. So
all the media's together, designfeatures buttons, groups, such as
widgets are those things that you mighthave like a list with links a calendar
again list posts list page list, yoursocial media icons is all kind of a
widget, it's all together. And then ourtheme blocks will be together too. So
again, I can go into my stylevariations, and I can see how the
different colors are going to lookwithin these areas. So it's kind of
really cool. The media doesn't havemuch, the buttons is probably the bigger
one, because of the fact that the buttonis 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 thatyou can do is when you're going through,
and this is where the global styles andstyles kind of work together.
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 thegrays and blacks, but I want to pop a
color for my button right in the stylebook under the Design tab, you can also
customize your your buttons and kind ofsee a preview. If we click on the block,
it will open up the styling tools forthis. So we can go in and change the
background color. And we'll go with thislight brown. And then we'll change the
text to a black. And we can also changethe 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 usethat we can use the system sans one. So
there's different ways that we can addthings and kind of preview them over
here. So I'm going to hit save, and saveagain. And then when I go to my front
end and refresh my page, you'll see thatI have the styles done.
We are going to go over to the text andlook at the quote block. Now most of our
styling we want to do in the globalstyles, but sometimes there's a special
block that might need some, just aspecial little something. So we're going
to click on that open up the block, andwe're going to add in a background
color. So we can change that. Okay, wecan also change the font and we'll do
that. And then we can hit Save. Andwe'll hit Save again. And now when we go
in when we tick off our style block, wecan see that in our template that we can
preview this here and then when we go toour front end and refresh our page, and
we'll scroll down we can see how itlooks there.
Check out morelessons@learn.wordpress.org or our
YouTube channel at WordPress. Thank you