Taming CSS Elements With Dev Tools

How often have you found yourself wanting to change the font size or the background color of the widget, increase the icon size, or move the border just one or two pixels to the left? Did you then go to the settings, only to find there is no setting for what you need to do?

In most cases, visual things can easily be adjusted with CSS and tools natively available in the browser, though you probably didn’t know they are there or how to use them. In the first part of this blog series I will try to demystify the web inspector tool, one of the most commonly used tools in frontend development today. And before you ask, no – you don’t have to be a frontend developer to understand the basics of it.

It Started With Firebug

Back in 2006, a group of developers had created a Firefox plugin called Firebug. It was a simple, single tab browser console add-on for debugging JavaScript. As years passed, it had grown into a full-fledged web inspector tool. It was discontinued in 2017 and its legacy has been moved into the modern Firefox browsers. Firebug is easily the pioneer of the web 2.0 era, as it defines how frontend developers interact with HTML and CSS and how they debug JavaScript.

All popular browsers nowadays have built-in inspector tools that are based in one way or another on the foundations that Firebug had set. Luckily for us, it is not a competition. By understanding the developer tools in Firefox, you will know how to use them in Google Chrome, Opera, Safari, or vice versa. In this blog post I will use Google Chrome as an example. It is not my go-to browser for day-to-day use, but it is the most popular and by many accounts it has developer tools which are easiest to understand.

Jumping The Cascade

Before moving to the real examples, a basic understanding of CSS is required. If you don’t know what CSS is, how it works and what is its purpose, it will be very hard to understand what the heck is going on in the inspector tool. In a nutshell, Cascading Style Sheet or CSS is the code that ultimately determines visual identity of your site, it controls the colors, paddings, element sizes and their relation to one another, but it does so many other things as well, like making the website responsive. In a standard “load order” multiple CSS files can be loaded on a single page, and they may contain exactly the same code. If this is the case, the last loaded style will be applied.

Practical example:
Files named style1.css, style2.css and style3.css are all loaded on the same page in that particular order and they all contain the same code like this:

.wife {
	right: 100%;
	margin: 0;
}

This means that the element with a class wife will be pushed 100% to the right and there is zero margin on the element. It also means the wife is always right 🙂 Now, let’s say we edit the file style1.css and change the code to:

.wife {
	right: 50%;
	margin: 0;
}

What do you think will happen?

The only correct answer is, nothing will happen. Remember: Cascading Style Sheets do just that, they cascade and only the last loaded style is applied. If we change the code in file style3.css or change the load order making style1.css to be the last loaded style sheet, then the change will be applied.

This is exactly how overrides in WordPress themes are working.

There are exceptions to this rule using !important flag, but this is a bad practice that is frowned upon and never advised.

Every frontend developer out there

WordPress Customizer is available for everyone and it is designed with this “last loaded style applies” method to allow for customizations and overrides. You can easily access it by going to WP Admin -> Appearance -> Customize -> Additional CSS

Additional CSS section in WordPress Customizer

Whatever you add here will be loaded last and hence applied to the final design.

Use Developer Tools To Find What Requires a Change

The fun part of the inspector or developer tools is that it can show the entire HTML structure and applied CSS with a simple click of the mouse button. Right click anywhere on the page and select Inspect option.

Right click on Inspect option to bring up the developer tools

The following screen will open:

First look at developer tools

You’ll notice the inspector tool appears on the right, while the site has been reduced to responsive resolution of the mobile phone. This is the default behavior of modern inspector tools because of the “mobile first” development approach, but do not worry, it can easily be changed.

In the top right-hand corner next to the X button, press on the three vertical dots icon and choose the layout you’re most comfortable with. I personally prefer the layout that puts the dock at the bottom of the page, because it allows me to play around with different width sizes and screen resolutions.

Developer tools can be moved anywhere on the screen

Now that you know how to access the inspector, let’s try to change some elements together.

PeepSo Example: Changing the PeepSo alerts text and background color

Blue is nice, but it doesn’t fit the design. Let’s change it

Desired result:

  • Background of the alert informing us that there are no posts found needs to change from light blue to bright red
  • Text color of the text within the alert has to be white

Exercise:

  • While the page is open, right click on the blue banner and select Inspect option as instructed earlier.
  • If the inspector didn’t find the proper element immediately, you can use the “Select Element” option in the Inspector toolbar to fine tune your selection and select exactly what you want to change.
Select Element option to fine tune the selection on the screen

When manually selecting the element, you’ll notice how it changes color and provides additional information about styles applied to the selected element. You can also see this information in the lower right-hand corner of the inspector.

Manually selecting the element will show exactly what styles are applied.

The style we are looking to change is applied through

.ps-alert {
    display: block;
    width: 100%;
    padding: 8.5px 14px;
    margin-bottom: 14px;
    background-color: #b3e5fc;
    color: #2196f3;
    font-size: 12px;
    line-height: 18px;
}

Because we only need to change the colors, we can shorten that and apply new values like this:

.ps-alert {
    background-color: #ff0000; 
    color: #ffffff;
}

There is no need to use the properties that are not overridden. Remember, CSS files cascade, and the last loaded value will apply to all selectors, so in this case only values for background-color and color will change, while everything else will remain the same.

Adding this code to the WP Admin -> Appearance -> Customizer -> Additional CSS will apply our change:

Override added to the Additional CSS in Customizer – Change is applied

Final Word

This method is exactly what we do when you ask us how to change the color, how to increase font size, how to increase padding etc. It looks daunting when you open it for the first time or misclick on it while using the browser, and I’m sure many of you were wondering what the heck is going on there. I hope I managed to shed some light on the subject matter and helped you make your site pixel-perfect.

In the following updates to this blog series, I will touch on subjects such as using the Inspector tool for site debugging, advanced customization and finding JavaScript/CSS conflicts and clashes.
Meanwhile, these are additional resources you might want to take a look at:

Don’t have the Bundle but you would like to have access to all current and future plugins hassle-free?

Check our offer!

 

Basic Bundle

Normally $129

$99

/year

Choose license option
Buy now

Get instant access to 5 premium PeepSo plugins & Gecko Theme.

  • No signup fees
  • 1 year of free updates
  • 30 days of Monday-Friday Technical Support
  • Our ❤
Ultimate Bundle

Normally $299

$199

/year

Choose license option
Buy now

Our most popular option. All access pass, including all 18 plugins & Gecko Theme and future plugins.

  • No signup fees
  • 1 year of free updates
  • 1 year of 24/7 * Technical Support
  • 1 year access to future plugins (if any)
  • Early Access Program
  • Our ❤❤❤
Ultimate – 5 Years

Normally: $899

$599

/5 years

Choose license option
Buy now

Everything Ultimate Bundle has to offer and more. Pay for 3 years, get 2 years for free.

  • No signup fees
  • 5 years of free updates
  • 5 years of 24/7 * Technical Support
  • 5 years access to future plugins (if any)
  • Early Access Program
  • Our ❤❤❤❤
Ultimate – Monthly

Normally $59

$29

/month

Choose license option
Buy now

Not ready to handle a whole year in advance? Not a problem! We got your back.

  • $50 signup fee
  • Free updates with active license
  • Monday-Friday Technical Support with active license
  • Access to future plugins with active license
  • Early Access Program
  • Our ❤❤

Brought to you by PeepSo Team Siniša Krišan
I am experienced in various social networks and platforms. Among other things, I’m the guy you turn to for figuring out the feature’s details and resolving issues. I hail from Novi Sad, Serbia. My journey with Open Source had taken me across the globe to Bali, Indonesia, where I had spent several years working & evolving with the base PeepSo Team. I was involved with planning and development of very early versions of PeepSo and helped pushing the product forward. Although I tend to engage full workaholic mode, I am essentially a laid back person. I’m also a hardcore gamer and I enjoy playing video games with my girlfriend whenever I catch precious little spare time. I enjoy traveling and learning about new cultures and surroundings.

Reactions & comments

Join Our Community!
Join us to discuss PeepSo's features, connect with the development team and give suggestions.

Comments

@peepso_user_22085(Sbongile Chabani)
Wow great content!! I'm glad to have the flexibility to style by myself. One question @peepso_user_13(Siniša Krišan) , whenever I update the gecko theme, would my custom CSS code be overridden?
May 25, 2020 12:53 pm
@peepso_user_13(Siniša Krišan)
@peepso_user_22085(Sbongile Chabani) If you don't touch the actual CSS file of the theme, it won't.
Adding the CSS override to Customizer as suggested in the article will keep them there forever, no matter if you update the theme or even change it for whatever reason.
May 27, 2020 5:33 am
@peepso_user_22085(Sbongile Chabani)
@peepso_user_13(Siniša Krišan) Alright thanks!
June 1, 2020 2:05 pm
@peepso_user_45211(Alfred Smith)
Thank you for this post. That item you mentioned changing the color I was just looking at that and wanted to do the same thing. I didnt realize you had already written a how to on it.
February 17, 2022 9:14 am