Custom CSS in the Editor

Learning outcomes

1. Finding a style using the inspector in Chrome.
2. Understanding blocks have CSS.
3. Using the advanced CSS input field.
4. Basics of CSS: inheritance, flow, breaking flow, colors.
5. Showing how to add custom CSS to your theme in Customizer and theme edit

Comprehension questions

1. What ways are there to add custom CSS to the editor?
2. How can you find what class a block uses?
3. What does CSS mean?

Transcript

Thinking that someone can just add CSS, it’s actually assuming they’re able to climb a pretty steep mountain. Being able to adjust, create that design you visualize the ID you have and make it fit you just right. This should be achievable by as many people as possible, as easily as possible. You can do that using a few simple steps. And that’s what we’re going to cover today. But first, let’s start with what CSS is, and a little bit about itself.

Now, this isn’t intended as a deep dive into CSS concepts. This covers a few simple basics, that are going to help us before we dive into the editor. Now it stands for “cascading style sheet”. This means the styles cascade or read in a flow. This is key to think about as you create. And as you work within CSS, for example, what is the flow of the style and how does it interact with other styles, you can override or go above the cascade using the exclamation mark or “important” statement. However, there’s a catch doing this. Think of it a little bit like shouting in a room. If you have too many shouts, the room gets really noisy, confusing, and rapidly, you end up being able to hear nothing and unable to hear what is really going on, it’s generally not a good idea to use and should be considered a last resort.

There are two types of styles. An ID is a single use and a class is multiple use, this is kind of a simplistic view so let’s start there. Find a bit of insight or information is a little bit of a tip on how to read, when you have multiple kind of classes join together, like there’s some space and kind of concatenated together with no space and just the dots like this. If you think about it in terms of breadcrumbs, maybe, and you kind of read it as a container, and read it kind of following that cascade that we spoke about. It gets a little bit easier to think about. You might have a shared volume, I have different things here. But really think about it in terms of the wrapper that you have other container that you have. And you don’t have to worry too much. But right now be aware that it’s a common thing you’re going to see.

So let’s now look at how we can start exploring these styles and really inspecting to then kind of interact with them. For this part, we’re going to use Chrome, in particular, the inspection Chrome. This is super useful if you want to find the style. And here we have the demo page for the editor. And I said to this view with panels decide you can configure different views if you want. The inspector has a lot of different features. And entire workshops can be written just on how to set up and use features within and they have the inspector themselves.

For now though, I’m just going to show you how to find a particular class. So let’s go to the front of the site. Here is 2020. I want to find what class this blockquote has. So I’m going to click this inspect. And I can hover over and you see how these checkboxes and you can click on and off these checkboxes. And here, you can in real time, see them highlighted. And you can also see them change so you can get kind of an insight into what is well within the cascade. And what changes as well. Now one thing you can do is you can actually do changes here, they won’t impact the site as in save, but you can actually see them here. So you could add a style. And we’re going to do that. Now.

If you want to add a brand new style, you would go right into the top, see what you see element style, and this applies it to the style that you have. So if we wanted to do border left, we’re going to do a border left here.

Border left means a border on the left hand side of this quote here. And then what we’re going to do is we’re gonna do four pixels, we’re going to do solid, that means that solid border and that’s the color. Now we’re going to do padding, they’re going to padding all the way around, we just have it here, but we want to do padding just on one side. So what we can actually do is we can actually specifically say padding left, that’s what we’re going to do now and then we can see it in real time.

What we’re going to do is we’re going to save that style and we’re going to consider using that a little bit later. One thing you can do that’s really handy to notice about the inspector is viewing in different screen sizes. Here you can see the size changing. This is really helpful way to get a quick check on what you are creating It’s great to check in on a real device. But sometimes a quick check is also useful. Or maybe you just don’t have that device. So we’re seeing how you can find a class. But where can you put Custom CSS in WordPress? Well, the answer is quite a few places. The first has been the Customizer using the option “Additional CSS”. Here, you can see, you basically go to the Customizer, and then “Additional CSS” and you have some helpful information, you can just type it here. This is a great way to add a specific site into your site without adjusting any files. And if you’re able to edit files, then the step on from additional CSS is to edit the theme files. You can do this through the theme editor itself.

Now you can click this from Appearance, and you’ll see here it actually has some information here that says, Do you know that you can do this using the built in CSS editor and preview those changes. So it is actually encouraging you to do the way that we did before because it is a more permanent editing, you are directly affecting the theme itself.

A final way is of course, by adding the file to the theme itself. This is really something you need to have surprises for and be diving deeper into the code of the theme itself. For the purpose of this workshop, we’re going to focus on using additional CSS. So that’s a pretty wide overview.

So now is a good time to just dive in and start creating a starting point is going to be using the default theme 2020. This is a great spot to then create our own stuff from. But what are we going to do, the first thing we’re going to do is we’re going to create a brand new class. And then we’re going to add that to a few blogs, using the advanced field within the editor, then we are going to be creating a custom style for an existing blog class. So let’s get started adding a class to blocks. So this is going to be a really simple class that creates the highlight background, really simple, is just the different background color and a bit of padding. So we’re going to save this, that’s only half the story. Let’s go live in the editor and see this advanced field. And then this, we can add a class here, we’re gonna add this to a couple of blocks. And you might be wondering, doesn’t tend to do anything. So I’m gonna we’re gonna update and then we preview. And there we are, you can see the difference in the classes I added to the blocks. There were so many possibilities you can do here. It’s a really useful field here. But bonus points, let’s check on a smaller screen the work that we did remember from earlier in this specter, where we can check our work or let’s do that, let’s check what we just did. So it’s the same page, where we’re going to do is we’re going to check this to make sure that particularly because we had padding, we want to make sure that it worked on smaller devices. And this is a really good way, particularly when we’re playing around with padding, margins and different styles to make sure that it didn’t break anything, and it didn’t cause any problems on those different devices. So let’s go a little bit deeper into the world of CSS and the editor. Let’s create a custom style that overrides an existing style. member, there’s some earlier, when we were in the inspection, we added a border to the left hand side have a little bit of a padding to equate, let’s actually make that a style within our theme itself. So first of all, we want to find out what class this actually is. So we’re gonna go, this time we’re going through the editor itself, rather than going through the front of the site.

Now when we do this, there’s a particular wrapper that we want to not include in our custom style, because that’s a particular wrapper that’s very just for the editor. And that’s the editor styles wrapper. So we want to not have that when we’re picking up the style. I show you using the editor, particularly to pick up because it’s just a fast way to just add lots of blocks and really test out different styles. And if you remember this tip, it’s a good way to just drop that off when you’re using the inspector. So if you look is WP blockquote is style large, and that dots together is really going to be important for us to remember going forward because we’ve got the large style selected for this quote. Okay, so we’re going to take this into the additional CSS, and we’ve added it here so we’re going to add it. So we’ve got this class and then Hey guys, the custom sign out has on that blog. Pretty cool, isn’t it. As you can see in the cache, it picks out straight away. And then here we have it on the front of the site as well. That’s exactly the way it is. It’s really easy using additional CSS, and just picking it up with the inspector. So as you can see, there’s a lot of possibilities using CSS to create that perfect style you want for blocks and beyond. And it already comes down to a few things. You see inspector and find exactly what you want to style work of in that. Remember, it’s called cascading for reason. And this really helps you debug and find that thing. To play to blocks a class use that CSS field that’s built in it’s really, really powerful tool that you can use. Always preview on smaller devices and, and when you can create something, go that extra step and you can use the inspector for that. Choose additional CSS, it’s a safe option, and it’s a really powerful option for you as well. And above all, have fun and experiment, because I hope I’ve shown that with some really tiny little changes and really fast updates. You can really adapt your theme and the customizer and everything to be exactly what you want. Thank you so much. Have fun customizing