Styling your site with global styles - Tutorial

[courtneyr-dev]

https://learn.wordpress.org/lesson-plan/how-to-style-your-site-with-global-styles/

Workshop Development Checklist

• Vetted by instructional designers for content idea
• Provide feedback of the idea
• Workshop submitted to the team for Q/A review https://blog.wordpress.tv/submission-guidelines/ & https://make.wordpress.org/training/2021/08/17/proposal-brand-guidelines-for-learn-wordpress-content/
• Workshop submitted to WPTV https://wordpress.tv/submit-video/
• Workshop published on WPTV
• Workshop is captioned https://learn.wordpress.org/handbook/handbook/workshop-captions-and-transcripts/
• Workshop created on Learn.WordPress.org
• Workshop post is reviewed for grammar, spelling, etc.
• Workshop published on Learn.WordPress.org
• Workshop announced to training team
• Workshop announced to creator
• Workshop announced to Marketing Team for promotion
• Gather feedback from workshop viewers/participants

[courtneyr-dev]

Revise to include: WordPress/gutenberg#35619

[artdecotech]

I'll take this revision! @azhiya

[courtneyr-dev]

Update to include WordPress/gutenberg#39700

[azhiya]

This update is that we're waiting on the #core team to decide about WebFonts API that may impact Theme Variations which is part of the Global Styles update.

[westnz]

Now that the Lesson Plan is finished, is this workshop moving forward? 😃

[artdecotech]

Here’s the first draft for review @westnz @courtneyr-dev thank you!
https://f.io/xVW25U3u

[westnz]

WOW! You are on the ball @artdecotech

Fantastic work! Here is some feedback:

• You cover all the important aspects and features of Styles.
• You go at a pace that is easy to follow. 🦾
• I would suggest adding a welcome/introduction message at the start. 🗣️
• You mention "This lesson will cover how to style your site with Global Styles, you can change the ...", but I was wondering if you could add a slide/text with the specific lesson outcomes/objectives at the start.
• I like the yellow circle around your cursor.
• You might consider (not necessary) using an example at the end with a before and after - showing how a functioning site has changed after changing styles from the front end.

Well done Alycia

[artdecotech]

@westnz thank you so much for the great suggestions. I also added some new bits based on some stuff we learned in the live workshop.

Here is the latest cut for your review cc @courtneyr-dev @azhiya:

https://f.io/1KUQ3wVS

Let me know your thoughts, I had to re-record the last little bit because I said "wordpress.org/learn" and that leads to a 404 page! 🙈

[azhiya]

I love this @artdecotech. I think its good to go. I don't know if @courtneyr-dev wants to review it.

[courtneyr-dev]

WordPress/gutenberg#44065

[westnz]

Remember to add info about Font Library.

[ghost]

Ready for review- Trying a new way of editing. I know the voice is off in parts.

Styling-Global-Styles.mp4

[paulluxford]

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

• Learning outcomes/objectives are clear.
• Technical concepts introduced in the content are accurate.
• The speed of demonstrations are easy to follow.
• The narration audio matches what is shown visually.
• Spelling and grammar are correct.
• Sound quality is consistent throughout the video.
• Brand Usage Guidelines and Promotional Guidelines are being followed.
• Media assets are all in the public domain (CC0).

Additional Feedback

• For any external links, as an idea and if possible, to display the link on the screen. Eg for Font Pair website, visually show the link on the screen as a popup, so it is very clear on the website link.
• You mentioned an external site for font pairing, perhaps also mention about a resource for color pairing, such as using Coolors.co for example.
• I found the section about styling header fonts, particularly at the end part when showing how to set font sizing, you explained about that the user may want to change different heading sizes, but I feel that it wasn't shown very clearly about how to do that and what effect it has. Maybe touching on using the Style Book, might help as that will show live previewing. Also about the colors section, you mentioned styling for certain components but did not visually show that process.
• I recommend to mention the Style Book. That will also help to be able to visually see all the blocks and live changes.
• The screen goes black in the last few seconds of the video

Being a WP trainer myself and creating videos, I understand the challenges of creating such content and I think you did a great job.

Overall a great start to such a much needed video. Well done @lada7042

[ghost]

@paulluxford thank you for the review. Great suggestions about adding the web address on the screen. As for the Style Book I am doing a separate lesson in this series. It was hard to decide which items to feature in global styles and what to feature in the Style Book. There are several things that overlap so I hope the next lesson pulls it all together.

[ironnysh]

Tutorial/Lessons Review Checklist

• Learning outcomes/objectives are clear.
• Technical concepts introduced in the content are accurate.
• The speed of demonstrations are easy to follow.
• The narration audio matches what is shown visually.
• Spelling and grammar are correct.
• Sound quality is consistent throughout the video.
• Brand Usage Guidelines and Promotional Guidelines are being followed.
• Media assets are all in the public domain (CC0).

Hi @lada7042, I enjoyed this thorough tutorial. Nice work!

As you mentioned, the sound is slightly off in a few places. While watching, I found a few more “bugs”:

1. Assuming the lesson will be posted after March 26, I think it’s better to skip the Gutenberg intro and disclaimer (~2:52-3:15).
2. At 3:39, you mention the option to install fonts from the Google Fonts—the word “library” (or “website”) is missing.
3. At 3:42, you mention that there are about 532 [fonts], but that’s pages, not font families. If there are three on every page, it’s actually close to 1,600 available fonts :-)
4. Around 5:07-5:23, the video seems to go out of sync with the audio.
5. At 6:09 (when you explain how to set body text to Open Sans), the video and audio are again out of sync.
6. At 7:53, you mention the option to change the buttons’ font, which isn’t on the list.
7. At 8:49, you explain what happens when clicking on Show details, but it’s shown only at 9:00.
8. The explanation about resetting the color palette is a little confusing (it seems like an editing/sync issue).
9. When you talk about the option to change the text and background color combo (both on the buttons and the headings), it’s worth mentioning the topic of accessibility and the requirement to pick a palette with sufficient color contrast.
10. At 12:11, you try to show what happens when changing the CONTENT to 70 pixels. It should show immediately on the left-side preview, so not sure what happened there. Might be a good idea to do another take on this part.
11. At around 13:00, the video and audio are out of sync again (until around 13:25).
12. At 13:51, the left-side preview suddenly shows a different template.
13. When you explain how to change the fonts of the Quote element, the video and audio are out of sync again.
14. As @paulluxford mentioned above, the screen turns black at 15:28, but the audio continues.

[ghost]

I put this back into draft because I need to record the whole thing over. I had to edit too much and it isn’t right.

[ghost]

Thank you @ironnysh Going to redo.

[westnz]

Hey Laura
Are you sure you shared the new recording as I see the seconds of both videos are the same?

[ghost]

Thanks @westnz

[ghost]

Here is the real re-record.

Styling-Global-Styles1.mp4

[westnz]

Review:

• Learning outcomes established
• Different Fontpair resources shared
• I think you could possibly spend less time discussing the third Fontpair option
• Color palette creator shared - nice!
• Global style options covered
• When you change the fonts of your Headings, does it not seem to change? It would've been better to see how the style of H3, etc., changes in real-time. I'm not sure why this is happening. I realize you will cover the Style Book in the next video, but it could be helpful to still show the changes in the Style and then mention we will cover this in more depth in the next video.
• The video is much longer than most lessons in the learning pathway. I wonder if there is a way to condense it.
• It might be a good idea to add an outro to the video

Well done, Laura, and thank you for all your hard work!

[ghost]

@westnz Thanks I condensed the font pair and palette sections. I removed 2 minutes. I added the outro.
I am happy to re-record the video if you want me to add a mention of the style book.

[ghost]

Tutorial Development Checklist

• Tutorial created and announced to the team for Q/A review
• Tutorial reviewed and ready to publish
• Tutorial submitted and published to WPTV
• Tutorial published on WPTV
• Tutorial captioned
• Tutorial created on Learn.WordPress.org
• Tutorial post reviewed for grammar, spelling, etc.
• Tutorial published on Learn.WordPress.org
• Tutorial announced to Marketing Team for promotion

[ghost]

wordpress.tv link - https://wordpress.tv/2024/04/10/styling-your-site-with-global-styles-2
wordpress version 6.5

[ghost]

Transcript -

0:01
Styling your site with global styles. Learning Outcome, change global styles to reflect your own brand. Change typography, colors layout, using the font library feature, how to apply a color palette change to an accent color, change the global style of blocks example of quote block. A couple of resources to think about beforehand is font pairing. A good design principle is to pick a one style of font for your heading and a different font style for your text. Here's an article from Google Fonts. Another resource is the font pair website FONTPAIR. Within their pairings tab, they've paired together fonts that work well. Color Palettes is another thing to think about before designing. Here are two resources that have free access Coolors has a trending color palette, which will give you the hex code number, which is always good to jot down so that you have those colors. Canva also has a color palette that's free. We're gonna go to our dashboard now. And we'll look at our site toolbar on the left, and go down to Appearance and over to editor and click on that. We'll go in under design, and go to styles. Click on that. And within the style Styles menu, you will see an icon which is the style book and we'll talk about that in a later lesson. And the pencil icon which when I hover over says Edit style. So we'll click on that. We're going to look at browse styles now.

2:20
I opened up my right menu at the upper right hand corner is a halfmoon. And I hover over in that that says styles. So I'm going to go down to browse styles. The 2024 theme comes with eight variations. The variations include different color and font combinations. When I click on one of the variations, I can see instantly how the different blocks will look on my site. I'm going to stick with the default theme. And we'll look at maybe changing a couple of the colors to better represent my color palette. Then go back out to the Style section. Typography. So we're going to look at our typography section. This section manages the settings for font families size appearance, from text to links to buttons. A good rule of design is to have, like I said before one font family for headings and a different plug compatible font family for the text. A new feature is our presets, we can look at the different font combinations. And if we wanted to change those, even though I'm in the default theme, I can still change the fonts, how I would like. The fonts that come with the theme are listed here. And you see that I have different combinations variants. So that means I have to wear variations of this one and two variations of this one. A new feature is to manage your fonts. And if you hover over this icon, I'm going to open up the font library. So the theme fonts are listed. Like I said, I also have the option to upload or install fonts. So let's look at install fonts first, and we're going to connect to Google fonts. So we need to allow access to our to the Google fonts and we can scroll through and there are 390 pages as of this recording, so there's a lot to choose from. So I had done a little bit of research. And so I know that I like this one particular, Open Sans. So I'm gonna click on that. Now the Open Sans, I'm gonna use for my main text. So I don't need follow these. And so I'm planning ahead that I need a, at least a normal, and I like it a little bit darker than the 300 normal. So I'm going to pick the 400, I'd like to be able to make some words a little bit bold. So I'm going to pick the 700. I'm also going to pick an italic, again, the 400 and a bold with that, so I have four of those. So I'm going to hit click Install button at the bottom. And if I scroll back up, it says that it was successful. So when I go back to the library tab, I see that install fonts, I have my font there, and I have the four variants active. The other way to upload is to upload. So I'm going to click on Upload. And just to remember that upload fonts appear and can be used, it needs to be support, you need to use a supportive format of a TTF, OTF, WOFF or a WOFF two format. So in the middle is the word upload font, I'm going to click on that. And I already have a folder of a font that I like, I'm going to open that font. And again, I don't need all of them. But this is going to be the font for my headings. So I definitely want to have a regular and I don't need any light. I'm definitely would like a bold, because my headings I'd like to make bold. So I think I'm going to just stick with that because I don't want to do any italic headings and stuff like that. So, again, I'm planning ahead of time, but is that beneficial for these steps. So the font was successful, I'm going to go back to my library, and I see that that font is available now. So I can close this up. And if I look over on my right menu, I see that I have those two options available for me too. The other section down here is the elements. So I can go in and on a global level, change all of my text. So now that I've added these two new fonts, I'm going to go into text. And I want to change it to the Open Sans. Okay. And then I want to keep it regular. Okay. So we're good with that, we're going to click Save. And it's going to save that, and I'm going to click back out and go into my headings. And so now the headings have different so I could do all of my headings, the same font family, okay. But remember that we have one h one per page, and then we have to do our structural formatting, then the next one would be an h two. And then we would go into h threes, and so on. So you see that there are different sizes of the font. So I probably want to kind of go through and style each of the font, double check the sizing of that is the default sizing isn't what I would like if I would like maybe the H threes to be a little bit bigger font, I can do that here. So let's look at this. We want to change our font family to Bellota and I want to make it the bold Okay, and I'm gonna go a little bit bigger than extra large because the font family is on the smaller sites. I'm going to click on this we're using rems Rem is just an easier to when you when it goes down to mobile, that it sizes a little bit better. So let's go to a 4.5. So you can see the difference up in this little window at the top. I'm not seeing any change over here. It might be just a little bug within there, so I'm going to click on that and save it and save again. And then I can go to, like I said, the h two is okay.

10:15
And we can go to the all? And I need to make sure that well, no, yeah, no, yeah, let's just see, you can always change your design in the middle, right? The h two, I'm going to keep in the Bellota. And then like that side, so I'm gonna say that, let me go back. Because I don't want all the font to be, can I just realize that I wouldn't want the H threes to be the fancier font. So the H threes, we're going to just make as the Open Sans. But I do want to make it a little bit bigger. Okay, so I'm gonna do that. And let's just look at our front end to see what happens there. So we've changed that to the bold that too, and that is staying. So things to play with on that. So I'm going to click back out of typography.

11:28
The next section is colors. So our color section takes care of kind of fine tuning our color palettes that we picked. Remember that I picked the default, and the default palette has 10 colors. Now if I've gotten this far, and I might want to change to one of the other ones, or just at least see how it is. I do have access to it right above. So if I click on the 10 colors of the color palette, we have the palette, we have our solid and we have our gradient, my focus just more on the solid right now. And like I said, there was one color this orange that I probably will not use, but I did want to kind of change that. So I can go into themes and the three dots over here. Click and it says Show Details. Okay. So the close up is going to show after I've changed the color. So the reset colors will appear in that, as of right now where I'm at on here, it just shows the show details. So I'm going to click on Show Details. And what's nice is that it shows the names of the different colors. And so I want to focus in on accent number three. So if I click on that, I can go ahead and change the color. I'm gonna change it to more of a bright red, a deeper red. Okay, so I found that I'm happy with that it's changed. And then I have to make sure I hit done. And then hit save. Okay, so on doing the color setting, it's nice to kind of just double check to make sure what you have changed. So don't just keep looking. Alright, so I can also add a custom color if I wanted to add more colors within here. So now that we go back out to from our palette, we go back to our colors menu.

13:49
The section down below is our colors. Okay, so we have. We can pick our basic text background heading, we could also do the H ones and stuff too. Okay. So what we want to do is the button. So I'd like to change that one up and have it as a universal color. So if I click on the button colors, I have the option for the text in the background and gradients. So let's look at the text. So right now it's white, and I know that we're going to kind of keep that so then look at our background and we're gonna change that to red. Okay, so now we're good with that. So then we make sure we hit save up here and that will change the global styles of the button and the color setting. So then whenever I add a button, it will be that those two colors right we're gonna go back out.

15:02
Our next section is layout. Alright, so we go down to layout. And the layout section styles the main content area, and gives the content and the wide in pixels. Okay, so that is from your left to all the way to your right. These are the default settings. So you see that there is some padding already part of it. And if you take a look up here in the heading, and I moved this, you can see how that changes. Okay, we also have a block spacing, default, that's already set there, too. So I click back out of layout.

15:55
Blocks is our next section. We will go down here to blocks and this menu opens up all of our blocks that are within this theme. And we can go in and we can customize the appearance of specific blocks and for the whole site. So that means that if you want all your heading blocks to have a certain background color, you could do that. Okay, you don't want to get too involved with doing each of these separately, because remember, we have our initial global styles up here that we've already changed. And if you start changing every little block, then it gets really confusing when you need to do change something, you don't know where you changed it. So it's always good to start in the global styles. And then if there's a particular block that you really want to kind of change, and you could do that. So I'm gonna just give an example of the quote block because that's kind of like a specialty block that you might want to do a different kind of font. So let's scroll down here to my example. So we have the quote block. I've added a group and the quote block has a paragraph within it. And then it has an area for citation which is the author's name. So if I want to change the font of this, okay, I can go to typography and go down to font. And remember that I have my Open Sans as my overall font. And I can either do it as regular or I can do it as italic. Things like that. And I can always change the size of it to if I just want it small, large, I can click on Save for that. So that would be an example.

18:21
I just touched on the basics of how to style your site with global styles. Go explore on your site and check out more lessons.