On today’s episode, we are gonna talk about how to target style changes on our WordPress website right here on Your Website Engineer Podcast Episode No. 327.

Hello everybody. Welcome to another episode of Your Website Engineer Podcast. My name is Dustin Hartzler, and today we will be talking about making some CSS custom cascading style sheet changes on our WordPress website. Man, that’s a mouthful.

But first I do have some announcements this week. There have been a lot of things going on in the WordPress community. The first thing you may have seen is on March 6th, 2017 WordPress 4.7.3 security maintenance release has been released, I guess.

They have fixed six security issues. One was a cross-scripting error that was happening. There was a control characters that can trick redirection in a URL. There were some unintended files that could be deleted by administrators using a plugin deletion functionality. There was some cross-site scripting things that were fixed as well.

So, most websites have been updated if you have that auto enabled. And/or some hosts like Pressable have already updated a bunch of accounts, and just as soon as it rolled out they got theirs updated and fixed. So, if you haven’t run or updated your site to WordPress 4.7.3, I highly recommend you do that today.

The other piece of news comes from wordpress.com, and you can now import your medium posts into WordPress.com. And so, over the last few weeks they’ve made some announcements over at Medium about their change of business model. And there have been a lot of requests to actually import the content from Medium into WordPress.com.

And so, this is something that’s built into WordPress.com, and I don’t know that – or I haven’t seen an actual like plugin that you could install on the WordPress.org site or the self-hosted site, but if you wanted to do this, you could always create a WordPress.com account, import from Medium into WordPress.com, and then you could export it from WordPress.com and put it into a self-hosted WordPress site.

So, that’s something that if you’re interested you’re probably not listening to this podcast if you are using Medium, but you want to come to WordPress. But if that’s the case, definitely check that out.

The next piece of news – there’s just a couple more things that I want to share today – is that there is now a jetpack affiliate program. And you can earn income by referring WordPress products to professionals. So, this is something that you can sign up for.

You get 20 percent on all revenue, and there’s a jetpack affiliate dashboard that you can go and you can manage campaign and track your traffic, things along those lines. You get unlimited referrals, and you get direct support from WordPress.com happiness engineers. And so, I’ve got a link in the show on how you can sign up and how you can get that all set up and ready to go.

This is probably especially really good for people building websites and then you can refer your clients to sign up for a jetpack premium plan. And then you can get the referral income from that. So that is the jetpack affiliate.

And then the last thing was written – it’s a short blog post written by Andrew Spittle, who is the lead of all happiness engineers at Automattic. And the post just basically says that we are looking for coverage in the Australia – Asia-Pacific time zones are those regions for happiness engineers.

So, we’ve got a couple of our hiring team that are heading that way towards New Zealand and Australia this week. And if you’re interested in applying or looking for specifically that time zone to cover some of those weak points that we have as part of the United States – just really hard to cover those time zones when a large population of our happiness engineers live in the U.S. And so, if you’re interested at all and you live in that region of the world, head on over to Automattic.com/work-with-us, or just look for the work with us page there on Automattic.com where you can find out more details on how to apply right there.

All right, in the Is there a plugin for that? Section – with more than 48,000 plugins, I would like to just share one each week – just one that I find interesting, or one that I find that may be helpful. And this one today is called – it’s got a mouthful of a title. It’s called Smush Image Compression and Optimization, but the URL is wp-smushit, and so this may have been renamed. It was just called Smush it before.

But basically this is a plugin that will allow you to resize optimize, and compress all of your images into 100 percent free WordPress image smusher. And it’s brought to you by the team over at wpmu.dev and it allows you to resize images and it strips out information from images that’s not necessary. It doesn’t make them blurry or anything, but it allows you to click a button and it can compress those images and take out unuseful information. Just make those images smaller so they load faster on your website.

So this is a very highly used plugin. It’s got more than 700,000 active installs, and more than 2,200 five-star reviews. So, a lot of people are using this plugin. And so if you are looking for a way to optimize your images without losing any image quality, this will definitely be a plugin to check out. They do have a pro version, and you’ve got a little more functionality that you can get with the pro version. So, if this is something that’s interesting, definitely check that out. There’s a link in the show, and it’s for episode number 327 on how to get to this, or you can just search for probably Smush it in the WordPress repository to find it.

So – all right – today I guess – let’s go into the Your Website Engineer Updates. I honestly haven’t been doing a lot of work lately. It’s been really crazy around there the last couple weeks. We are just two weeks away from having our second child, and so there’s been a lot of like household things I’m trying to get done. And I’m trying to finish up some work things.

I do get – as one of the benefits from working at Automattic I do get a three month paternity leave. And so, once the baby comes I can be off work for three solid months. And so I’m just trying to wrap up all the projects and everything that I’m working on there so that I can really relax and enjoy this transition time to a family of four.

So, I haven’t really done a whole lot of anything on my own sites, and I really wanted to get to that font exercise that we talked about last week. I was looking at the fonts, and how many fonts am I using on my site, and where are they coming from, and what do they look like, and am I accenting with the right kinds of fonts, and stuff like that. So, that still is an idea that’s on my list to do in the next couple weeks, but this may have to come when I am not quote unquote working, and this is when I am hanging out with the baby or whatnot. So, that’s kind of just an update for me – what’s going on here in my world.

Okay, now, let’s move on to the main segment of the show. And I’ve talked about like custom CSS before, and there’s just a lot of different ways, and a lot of things to kind of tackle. But in this month of March we are gonna talk about like these small changes and these things that we can do to just overall tweak the appearance of our website without having to spend a lot of money or spend a lot of time and effort just to make things just a little bit nicer.

So, today I want to talk about how to how to target these changes for a WordPress website. And I don’t know if you’ve ever been on your website before, and you’re like, oh, I really would like this particular area. I’d really like this to be different, or I’d like this to be nicer, or I’d like this to be a different color, or the spacing’s not quite right, or maybe I want a little bit more margin around it or whatnot.

And so, in the past it’s been – if you didn’t write the theme, it’s really hard to try to figure out okay, how is this being styled? And so today we’re gonna talk about two different ways that we can go ahead and we can figure out where the styling is coming from. And then we can tweak it, and then where to put that code once we’ve tweaked it, okay? So, hopefully that makes sense.

Now, in the past we’ve had to mention okay, but you’re gonna need this special plugin. You need to either use the jetpack plugin or a really simple CSS, or add some sort of third party plugin to your WordPress install to be able to add custom CSS changes.

Well, in WordPress 4.7 – one of my favorite features in that is custom CSS is built in right into the customizer. And so as we are writing the CSS or we’re copying the CSS from one place to another, all we have to do is paste it into the – in the customizer, and then we get a live preview of what it looks like and if it’s actually working. And the implementation is awesome.

It works so much better than trying to use jetpack or a really simple CSS, or simple CSS, or any of those plugins out there, because they were always on one screen and you’d have to save it and then you’d have to go over to your website in another browser or another tab and then open that up and refresh and see if those changes took place or they actually worked.

And so now with it built right into the customizer, it’s just that seamless experience. Add some CSS and you’ll see it dynamically just update if the CSS is right.

So, let’s go ahead and talk about how we can look and we can – can we target elements on our WordPress site. There’s two different ways that we’re gonna talk about today. There’s gonna be a free way, and a free way.

The first free way you don’t have to install anything as long as you’re using Chrome. You can probably also do this in Firefox. Safari has the ability to do it, but it’s just – I just don’t like the appearance, and I just can’t find the information that I need in Safari very well. So, I always use Chrome.

And then the other one is to add a Chrome extension called Stylebot. And we’ll talk about this, and we’ll talk about how powerful this is, and how awesome, and all of the features that come with Stylebot.

But first, let’s go ahead and dive into Chrome Developer Tools because it’s free. It’s built right into the Chrome developer – I mean built right into Chrome itself. And so, let’s go ahead and talk about – I’m just briefly gonna share about custom CSS.

So, what is this? Custom CSS is – it sounds complicated. It sounds like, oh, we’re gonna write all this code, and these different things. But the basics of CSS is a core language for applying styles, like font styles, or colors or layout to HTML. So, HTML is the code. It’s the markup that we can write text and we can wrap things in like anchor tags, which will make things a link, or we can wrap things in heading tags, which will make them appear larger than regular text.

And what CSS is, is it actually is the code that can control every element with those same pieces of markup. So, if you wanted to make your h1 tag so every very large heading on your website, you could make that script text if you wanted to by adding one line of custom CSS. So, the body of your text and the body of the formatting of your website – or I guess all the content is displayed in HTML. So, that’s what makes your website actually display the text, display your sidebars, things like that.

But the CSS – that’s what actually makes it work on your website to have a sidebar on the left or on the right or to have like a background color or to – anything that requires any styling whatsoever, that’s all done with CSS.

So, there’s ways that – like all themes already have CSS built in. You actually need a file called style that’s CSS in order for a theme to load. And so if you didn’t have any styles on your website, you may have seen this before if your style sheet has been broken or just didn’t load right, but basically your website would be white. It would have black text, and most of the text would be all the same size except for anything that has a heading. So, maybe like an h1 tag or h2 tag– like those would be bigger text. But it would just be all listed down the left side of the page. And it does really not look good at all.

And so theme developers and people that build either custom themes or build those premium themes that you can purchase like spend a lot of time just making sure the CSS – the visuals of your website – work and feel and look really, really nice. And so there’s hundreds and hundreds of lines of CSS code in every website. And today we’re gonna talk about how we can just change and tweak and modify these little things to make things work or look just a little bit nicer.

Maybe you want your font size on your main text to be just a little bit bigger. We talked about that one week when we wanted to make sure that our text is readable. So we can change that. And we can change this. What’s really cool with CSS, too, is you can style elements based on the size of the screen. And so normally there’s three different breakpoints that we typically look at.

And so there’s one for mobile devices. There’s one for tablet size devices, and there’s one for desktop version devices. So, if you wanted to like you could turn all of your text on your desktop version of your site, you could turn it all to comic sans if you wanted to, comic sans and blue. You could absolutely do that, and then it wouldn’t affect your desktop view – or it wouldn’t affect your mobile view or your iPad view at all.

Let’s talk about the Chrome Developer Tools. What we can do is we can turn it on. It’s basically there. All we have to do is just enable it. So, if you’re using a Mac, it is Command Option I, or if you’re using windows, it’s Control+shift+I. And it’s basically gonna pull up this panel that’s at the very bottom of the Chrome browser.

And then it looks super overwhelming. There’s all kinds of information there, but there is – at the very bottom there is a little magnifying glass. And this is one of the coolest things. Like you click on the magnifying glass and then you click on something that’s on your website, whether it be your menu, whether it be your logo, whether it be your sidebar – maybe you want to change the background on your sidebar or whatever.

And then what you do is you just click on the magnifying glass, and then you click on the area that you want to modify. And it’s going to automatically pull up and it’s going to like highlight the HTML text on the left side of this panel. So, the panel at the bottom has got two sides. It’s got a left and a right. The left has the HTML codes so you can see what type of code is being rendered on that page. And then on the right hand side it shows exactly the CSS that’s being applied to that particular class – or that particular piece of code, which is pretty cool.

So, then it’s gonna pull up – it may say like for this example let’s look at navigation. And it may say that you’ve got a margin of 30 pixels to the top. Maybe you have a border on the top and the bottom, and it’s one pixel solid. Like you could find all this information, but maybe you want to change the color.

So, within Chrome Web Developer Tools you can actually add CSS. You can just hit enter from the last item, and then you could say color, and then you could put colon and then you could put the color that you want to turn it –maybe blue, green, orange, yellow, whatever.

And doing that, you’re gonna see that change live right on your website. You’re gonna see it. Like you’re gonna be the only person that sees it. No one in the world can see it except for you. And then you can tweak and style, and you can figure out exactly the CSS that you want. And then you can copy and paste that right from the Chrome Developer Tools and paste it into that custom area inside the customizer for CSS.

And so it’s pretty slick, like I do this probably – I don’t know – maybe a half dozen to a dozen times a day with customers that come in and they’ve purchased a WooCommerce theme and they want to make these small tweaks and adjustments. And so I don’t really know where the code is, and so – plus it’s really a pain. Like, oh, you set up a child theme. You do this, this, and this. And that’s a lot of work for small little changes like this.

So, I basically – how I use it – instead of using the magnifying glass I normally scroll to the area that I want and I right click on it. And say, inspect element. And then from there I’m able to – it pulls up that same panel with the HTML on the left and the CSS on the right. And then I can add the – whatever it is. Like sometimes they want to hide information. So, I can just say, display none. And then it automatically like hides that entire section of the website.

So you take that code once you’ve written and you’ve got it right in your place. And then you paste it into the custom area inside of the CSS part of the customizer, I guess. So, that’s the first way to do it. And it’s a little bit more challenging because you have to know a few of the elements within CSS.

And you can get started really easily just by learning like how to underline text or change the color or change the font size, or there’s probably a dozen or so commands – I’m gonna call them commands – in CSS that basically say like, color is like color colon and then you put the name of the color. It’s like font dash size and then colon and then the size of your font. Like CSS is actually like really, really basic code. And once you learn some of the principles and how to make those changes, then it’s really, really easy to use.

So, it would be a skill that you’d have to learn a little bit, but very easy to use to make very significantly easy changes on your WordPress site. Lots of like small visual changes you can do with CSS. So that’s the first way. You just use Chrome Developer Tools.

But the way that I really like doing it, and this is the way that I first got started learning this – was using a tool called Stylebot. And there’s a handful of them out there that are better – not necessarily better, but there’s just different ones out there.

I like Stylebot a lot because it works really well. You install this. This is a Chrome extension. There’s a link in the show, and it’s how to actually get it. But from that extension, you can target areas. So, basically you can do kind of the same thing as the magnifying glass did in the Developer Tools, but it’s got this panel that shows up on the right hand side and it will allow you to create this CSS without writing any code.

So, for example, if you wanted to change the body text on your website, you would click on the body text. And then on the right hand side you could start customizing it by clicking buttons that just start restyling it right there on the page. So, maybe you could say that you wanted the line height differently, you wanted to have more margin, you wanted the color to be different – and you can do all of this with a visual menu on the right hand side. Then once it’s all done, it’s going to give you and spit out a whole bunch of code. And that’s just the generated CSS code that you’ve created by clicking all these buttons on the right hand side.

Then all you have to do from there is you copy it and paste that code. And you put that code right there in – again in the customizer in the CSS area. And so, it’s really pretty cool. Like this is a way that you can write, quote unquote, CSS without actually writing CSS.

Another cool part about this plugin, the Stylebot plugin, has nothing to do with really this, but with creating these customizations to your own website, but what you could do is you could actually like install scripts used by others. And so there are some people that have went out there like they’ve changed for example, Facebook, they’ve made Facebook – the visuals different or better. They’ve changed it with CSS. And you can download and you could install this. Maybe you wanted a dark version of Facebook. And so people have written a dark version of Facebook. And you can install it and you can run it.

I’ve used this on some of our internal tools that are automatic, like there have been some styling things that I didn’t really like or it’s hard to read, or you know, it was too spread out. And so I can like get rid of spacing and stuff. And it will run only on my site, and I won’t have to like – I don’t have to tell anybody else that this is the way that I would rather see the site. So, that’s another like little feature that you can use with Stylebot.

But the big thing is like you just have to try to figure out where the CSS is coming from. And targeting these – there’s a plugin that also used to be used for Firefox called Firebug. And it kind of does the same thing, but essentially it turns your mouse pointer into a – I don’t know what I want to call it. It turns it into a selector so that you can click on specific elements in your website and then from there you can see what CSS is being used. And then you can start tweaking and modifying it.

So, this is like a very basic way to kind of get going with creating customizations and creating these custom CSS things. But that’s kind of what I want to share with you today. The big thing is like you have to be able to find what it is. And then you either have to write CSS by using just – if you’re just using the Chrome Developer Tools – or if you don’t want to dive into that market, then you want to definitely check out Stylebot. And then you can click on some buttons. And then you can see what kind of CSS is being generated for you.

So, that’s the whole episode today. That’s what I want to share with you. And next week I’ve got more tips and tricks and strategies to continue to push your website forward, to continue to make it just a little bit nicer, and continue to make these custom changes to make our website continue to feel like it is built in 2017 without having to redesign the entire thing from completely scratch.

So, that’s what I want to share with you. And until next week, we’ll talk again soon. Take care. Bye-bye.