Styling Your Site With Global Styles


After you’ve selected a theme, you’ll want to create your own unique look to your site. In Block Themes, you can customize the Styles to reflect your preferred typography, colors, and more for your entire site, or to override just a few blocks.

Learning outcomes

  1. You will be able to design your site with typography, colors, layout, as well as set styles for specific blocks by using global Styles.
  2. You will be able to change the default settings to reflect your own brand using Global Styles.
  3. You will be able to change the styles of the quote block so that it matches your branding across your entire website.

Comprehension questions

  1. Have you ever found a WordPress theme that you really like, but wanted to change the theme colors or fonts?
  2. Are you ready to customize specific blocks, such as the quote block, throughout your site?

Transcript

After you’ve selected a theme, you’ll want to create your own unique look to your site. In block themes, you can customize the styles to reflect your preferred typography, colors and more for your entire site, or to just override a few blocks.

To use this feature, you’ll need to be using a block theme and WordPress 5.9 or higher.

You could find this by viewing the themes directory and feature filter set to Full Site Editing. Install your theme by going to Appearance, Themes, add new, and search for a theme such as 2022. Then go to Appearance Editor and view your site in the editor. In the upper navigation area, near the right hand side, we see this circle that has half of the circle filled in. This is the styles panel.

And when we select it, we will get a preview of what our current style looks like. Beneath it, you could find a way to access typography, colors, layout, and additionally, individual blocks.

Let’s select the typography that we would like to use. For our text, I’m going to switch it to a serif font. And under the size, you’ll notice that I can expand the size. Or I can use more specific controls, such as pixels, ems and rems, I could change the line height and select my font weight here as well. I’ll save and you’ll notice that it’s asking me several options of what I would like to save that looks great. I’m saving my custom styles. I’ll go back.

And now select the links. And with the links, I may want to change the appearance slightly, maybe I could make those bold and I could allow the font to be system font instead of saref. And change the line height if you’d like. I’ll go back again, and back out of typography.

And now in the colors area. You’ll see that our theme comes with default colors in the palette. When I select it, it shows me here are the colors that come with the theme. Here are default colors that WordPress has identified. And then I can additionally create custom colors. So I would not encourage people to just click and drag wherever to find a pretty color. There are a number of color palette generator tools. If you would like one for free to use, I suggest just heading to your nearest search engine and looking for a color palette generator. There you’ll get the hexadecimal values most likely. And you can select the little detailed inputs area on the side and change the specific hexadecimal value that you would like to use. This then allows you to specify the colors and you’ll want to rename those. So if I, for the sake of demonstration, select this color. And then I might wish to name that color such as Maroon. Great.

Now I can go over to the gradients area and see the different gradients that are provided. Here you’ll see the ones that come with the theme as well as default ones that come with WordPress below, you can create some custom gradients. And also you can control your duotone filters here. Let’s go back out of palette and select our text and background elements. For the background. Maybe I’m ready to take my theme a little bit dark. And then I want to jump back to text and obviously need to lighten that text up. And then for our links I might want to go with like this peach color. And so you’ll start seeing the changes apply readily right while you’re editing these things that looks great and are back out of colors as well.

Finally, under layout, you can additionally change things like your padding. And here again, you can set it to pixels, M’s rams as well as percentage viewport width and viewport height if you’d like to set those things. And finally blocks in the blocks area you can choose to modify how a specific block appears. So right now you’re taking a preview of the query Loop block. Maybe I want to modify how that query loop blocks colors appear in the background, perhaps I want to go with something more like let’s go with this and then in that area, lighten it up just a bit to be a little bit different than before.

And for the sake of changing a few other things, the text in there, we’ll just make bright orange. And so you can see that you can start styling things. Depending upon which block you select, you will have different options available.

So the quote block gives you access to the typography. If you were looking at a cover block, there would be some different settings there such as the layout, each block will have its own unique styles available to it. So you’ll want to take note that this is where to go to change all blocks that contain that particular item.

So if I change the cover block here, it’s going to change it across my entire site. If I change the ListView here, it will change it everywhere. So keep that in mind before you start making your changes anywhere inside of the styles editor.

And then I’ll hit Save, and my styles have been saved. But let’s pretend I want to undo something I can go up to the top and say reset to defaults or walkthrough the welcome guide again, within that kebab men menu. That’s how you can get started with styles. I hope this helps you

Workshop Details


Presenters

Courtney Robertson
@courane01

Courtney Robertson, an accomplished Open Source Developer Advocate at GoDaddy, a dedicated WordPress Training Team Faculty Member, and a co-founding board member of The WP Community Collective, effortlessly engages audiences with her relatable insights on getting involved and supporting contributors in the open source community. Staying true to her roots as a professional educator, Courtney seamlessly merges her teaching expertise with her passion for technology.

Serving developers, website creators, and open source enthusiasts, Courtney delivers immense value by drawing from her rich background as a computer science educator and full-stack developer. She is driven by a strong commitment to onboarding the next generation of contributors and advocating for sustainable funding solutions for open source developers.