This is how to use Additional CSS Box in WordPress — Joseph J Ramirez

7 min readDec 13, 2020

WHAT IS ADDITIONAL CSS BOX?

One of the features that make WordPress such an awesome framework is the Additional CSS Box located in the Customize menu. When using themes, there are some elements that cannot be changed and it can get frustrating because we all love to add a personal touch to our WordPress website.

This blog, We will give you a brief lesson on

What do I need to Know
How to add CSS to the box
Guide through Dev Tools
What is !important

WHAT DO I NEED TO KNOW?

First off, If you know some CSS than congratulations! You can skip this part (link to section)

But if you do not know any CSS, then do not worry, this lesson will cover on only what you need to know.

CSS is a language used to design the frontend of the website, HTML is the bones and CSS is the physical features. And CSS uses a specific way to structure its code. for example:

.thisIsAClass { color: blue; }

Up above is the basic structure of the CSS code. Down below show that CSS is created using three components. There is the selector, property, and value.

.thisIsAClass (selector) { color (property): blue(value); }

Not very intimidating right!

Thankfully, this concludes this part of the lesson. Straight forward and simple.

NOW LET’S MOVE ON TOO WORDPRESS

We are assuming that you practically know your way around WordPress.

So for this lesson, we will be using WordPress theme Twenty Nineteen as our sandbox. So first, let’s make our way to the Dashboard and select Appearance > Themes.

This will take you to the Themes page of WordPress and as you see we have the Theme Twenty Nineteen selected and activated

Now here is a shortcut to the Homepage;

Hover over the Site Title, in this case. After you hover a drop-down menu will show “ Visit Site”. Click on it and it will take you to the current or default Home Page.

Here you see the homepage. It is very basic but it will do.

We are going to first focus on the Hello World! heading of our WordPress website.

On the top of the page, you will see the Customize option. Click on the option to access the Customization Menu for the Website.

INTRODUCING THE CUSTOMIZATION MENU

This menu varies with different WordPress themes you will pick but all of them should have the Additional CSS tab. After clicking on the CSS tab, the Additional CSS Box will appear at the bottom.

Going back to the brief yet important example of how CSS works.

I bet your thinking “How do I know what selector to target?”

This is Google Dev Tools is the get to know tool for designers and developers because it can aid us in many situations. However, I’m going to use the Element inspect feature.

To access Dev Tools you must:

Mac: Command + Option + I

Windows:

Once Dev Tools is activated, be sure the Inspect Element icon is highlighted blue. While activated, you will be able to see all the elements that make the webpage look the way it does, from padding to margins, h1 to h6, and the div tags created. It’s pretty amazing to see.

This lesson we are going to change the color of the front black to blue.

So we dragged the pointer to the “ Hello World “ heading, after selecting the element, on the bottom of the page there is a line of selectors to choose from.

Once again don’t be intimidated, its best to start from the two or three selector groups from the right-hand side.

For example, there is:

header.entry-header h2.entry-title a

It is not shown but we first selected the group “h2.entry-title a” and there was no response. Afterward, we choose “header.entry-header” and the page title turned blue.

So in the Additional CSS Box, we entered the following code:

header.entry-header { color: blue; }

When finding the right selector to target. Enter the first selector you wish to try and if you get no response than keep the property and value entered and just change the selector.

We first entered:

h2.entry-title a { (no response)

Afterward, we tried:

header.entry-header { (color responded)

just changing the selector will save you time from entering and reentering the code in its entirety.

LET’S TRY ANOTHER

Now, we want to change the background of the website.

Repeating the steps from the previous section, we select the Inspect Element feature and select the header section (highlighted blue).

Now we try to find the selector to target the background which in this case is the following code:

main { background-color: black; }

Then we change the font color from the previous code from black to white and we select the paragraph text of the section “div.entry-content” and change the font from black to white.

Which ultimately looks like this:

Understanding how the Additional CSS Box is very valuable to know. But you must also keep in mind that this is a simple page. When customizing your theme, you will run into some crazy looking selectors. Just keep in mind to be patient when learning how to customize.

Now there is one last thing to show.

THIS IS !IMPORTANT

The way WordPress CSS works is by a hierarchy. There are different ways to modify the CSS in WordPress, either through FTP, the Theme Editor, and the Additional CSS Box. The way we are showing you is the most recommended way to customize because it will prevent you from getting into a horrible situation. This will be explained late on a different blog.

but the reason I bring it up is that when you choose a theme and then introduce a page builder into the mixture, sometimes the hierarchy becomes scrambled so-to-speak.

Let’s say you want to trigger a selector but it is not changing. The !important statement gives that code priority over the hierarchy. but its always good practice to use it when needed because adding the statement can possibly through off other elements.

To use the !important statement, you simply add it to the right of the value and before the semicolon.

example:

div.entry-content { color: white !important; }

Adding the !important to the value in the code will say this element is important and needs to be a top priority.

QUICK NOTE:

Its good practice to add comment statements above the css code that you create so that you can know what that code is for. It also helps for anyone who wants to change it later what css code does what in the website.

This what it should look like:

TL;DR

If you want to customize specific elements in your webpage that your theme will not offer, You can change it through the Additional CSS Box.

To get to the Additional CSS Box, go to the page that has an element that you want to change (e.g font, font size, color, background color, etc.) and activate the Customize option on the top of your page to the left.

The Customize menu will appear and at the bottom will be the Additional CSS tab.

After selecting the Additional CSS tab, there will be an input area at the bottom.

Now, activate your Dev Tools and find the selector of the element. Input the selector {property: value; } of the element.

if you are not sure you picked the right selector or if there is a hierarchy issue with the element add the !important statement to the right of the value but before the semicolon.

selector { property: value !important; }

Once the element has changed, hit submit to save.

You dont have to go at it alone!

WordPress allows your website to come to life with a few CSS customization. If you want a website that is custom tailored to meet your business identity. fill out the contact form below. Your business deserves to make a great first impression to a world waiting to build a relationship with you.

Originally published at https://jjramirez.io on December 13, 2020.