How To Customize CSS On Any WordPress Theme – CSSHero

So let's picture this common scenario You're using OceanWP to create a great-looking website, and you using Elementor or Elementor Pro to create really good-looking pages and have tons of control, but you want to make changes that are outside the scope of what they can do

Well, you'd normally be reliant upon hand coding the CSS to get stuck in and fine tune and tweak various different things But let's just say you don't have the time the skills or the knowledge to be able to do some of the things you want Well, in this video I'm going to show you one plug-in that really does open up a ton of possibilities We're gonna jump in and take a look at that plug-in right now So, in today's video we're going to be taking a look at CSSHero and how we can use that in conjunction with OceanWP and Elementor Pro to give us even more control and flexibility over how we create and style our websites

So, I'm Paul C and welcome to WPtuts Where I show you how to create beautiful WordPress websites without all the technical jargon If this is your first time on the channel, please consider subscribing and click on the bell icon to be notified of our weekly new content as soon as it's added to the channel Okay, so CSSHero What exactly is it

What does it do? Well, it's a plugin for WordPress that gives us a control panel that allows us to get in and fine tune and tweak the CSS on any page, any element and then we can save that, independent of the theme, the plug-ins you use on there Any sort of page creators, like Visual Composer or Elementor It's completely independent, so it opens up a ton of options Let's just jump in to WordPress and let me show you some of the benefits of working with CSSHero If we take a look at the site we're working with

This is a site that I've set up using OceanWP and Elementor Pro Nothing special I've shown you this site previously A typical kind of layout on there So, we can get in and we can fin tune and control a lot of this, but there are various different aspects you don't necessarily have an easy time controlling

For example, if we jump over to the shop section If you want to do things like control these buttons, they're not necessarily part of the theme You may want to have different things controlled and styles that are outside the scope of what you can do with that Well, with CSSHero, we can get really creative Now, to work with it, it works very much like the customizer inside WordPress

You can see if I jump over, once I've got it installed, I've now got edit with CSSHero Once I click on that it's gonna open up what looks like a typical sort of composer page, a customizer page, but it's all working with CSSHero So you should be pretty much accustomed to it We've got a simple bar across the top and it allows us to do various different things We could switch between the two different modes, where we can actually select an item on the page and then we could access the CSS for that

Alternatively, if you want to jump to different pages, we can switch over to the navigation option that disablest CSSHero's selection options and allows us to go through then and choose different pages So, if I want to jump over to the shop for example, I can click on shop, jump over to that Jump into a product for example, switch back over to the select mode and now I can start selecting elements I'm not gonna go over too much in detail because I've already covered how you use this I just want to show you how quick and easy it is to use in conjunction with these Now, I'll give you the link in the description below so you can check out the other video on this where I go in to a lot more detail and also pop it up in the top corner now, so you can click there and take a look later on

So you can see as we mouse over anything we now start to get selectors telling us what it is we can actually go through and adjust For example, let's just say I want to style this button differently You can see when I mouse over I get all the different CSS selectors which is great, but if you have no knowledge or understanding or care for this you could just ignore it Click the button and now on the left hand side we've got all the things we can do to control the way that looks You can see it's broken down pretty simple and straightforward

We've got backgrounds, typography, borders and so on If we switch between properties and snippets and underneath you can see we've also got some information about the actual CSS selector that we've got chosen Now, what I need to do is come down and say I want to do something with a border radius, I can click on that and that opens up all the options that are specific to the border radius So, let's just say that for this I want to go through and just create a more interesting looking button So, we'll grab the top left radius

I'll set at a value of 15 and the bottom right corner radius set that to a value of 15 and we've quickly and easily created a more interesting looking button All done through CSS You can also see the CSS code is now shown underneath for the alterations we've made So, we've seen the selector and the actual code If I wanted to, I could easily come in and start adding more in there

So I can manually adjust and create different CSS on top of what CSSHero can do So already pretty cool If I click on save and publish it doesn't care what theme I'm using or anything else because it's just created its own CSS coding that will override anything that's currently set up So, we just jump over back over to our test page and we come into a product You'll see now that our button is already taken on the shape and the form that we've said to have through using CSHhero

Pretty cool! As you can see that's pretty easy to do We'll just jump back into CSSHero and if I want to change anything else I could just collapse this down and go through and start doing other alterations So, let's just say for example, I wanted to change the typography for the buttons I can click and come in I can change the color values

I can change the font, the weight, all those different good things I've even got a font manager on here so I can come through and I can choose my Google fonts I can come through and choose Typekit fonts Tons of options in there Very easy to work with

So, just close that down If I want to change the background color for example, we can do that as well So, I can change that from being the green color, I can choose from any predefined color Let's just choose this blue That's now more in keeping with the style that we've got set up throughout the theme

And I'm not having to go and dig around inside my themes control panel to go and find where the different values are for these different items Which, when you've got a well-organized theme like OceanWP, it's not too bad But you can still find there are certain buttons, certain elements that if you're not sure where to find them, and as the theme grows, can kind of get a little bit daunting how to find those make those changes and just update things So, something like this is pretty easy to work with and a lot easier than going through and digging through those things So, all the elements, anything that's on the page, I can simply come over and mouse over it and you can see I've got the option to come in and control it

I can click on the text It now comes in and shows me the options for the text If I want to change the typography in their Spacing, all those kinds of good things This now gives us a ton more options on top of what our theme and what our page builder does

Now while that's cool, it's also not that difficult to do if you know a little bit of CSS code But that's reliant upon things like OceanWP or your theme or Elementor, Elementor Pro allowing you to actually physically select and make changes to the various different parts of your page With something like CSSHero you're not reliant upon those You can come in and you can just select something and do what you want with it For example, let's just say where we've got this block over on the right hand side, we wanted to select that and put something around it

Put some margins in it for example or just sort of change a few things about it Well, as long as we can come in and select it we can now go ahead and make changes to it Let's just say you want to put a border around that Not that you'd want to, but you could do So, you can see we immediately put a border in there

So that's pretty cool We've also got the ability there to come down Obviously the borders sitting a little bit close to that, so we can come into the padding for example, and we can say well let's put some padding in there now So, we can come in and add some padding to the top Put 10 pixels in there

10 pixels in all of these Just to come in and fine tune Okay, so all very easy Once we're happy we can click on save and publish, jump back onto our test page Refresh that and there's our changes already in place

So, you can see that we're now not reliant upon only having to deal with the theme and the options that are available in there We can visually come in and adjust the layout of almost everything throughout the entire site Pages, posts, comment sections; all those good things We can really come in and fine tune and get something just a little bit more bespoke to the normal theme And that really is just scratching the surface of the power of what CSSHero can do for you

Now, I know that there are a number of options out there that are very similar to CSSHero and they do the same types of things But, I've got to be honest I've used CSSHero a few times now and I found it to just be really easy to work with Really intuitive and if you are used to working with the customizer in WordPress, this is gonna feel very natural Now, if that sounds good to you you may be thinking well that's all well and good but what about if I'm using a mobile phone What if I want to develop it and the CSS that I doing here kind of just makes things look a little bit rubbish when you move over to a different kind of device

Different screen layout Well CSS Hero has you covered on that as well If you take a look up in the top right-hand corner you'll see we've got the editing mode option, and if you click in there you can see we've got a range of different options for tablet, landscape, mobile landscape, portrait and so on You've also got the media query manager, so you can come into here and you can see we can set up things like, where do we want those breakpoints to be We have control over all those aspects as well

So again, that's pretty cool We can control how the CSS that we apply to this is going to filter down through those different screen resolutions Screen sizes and media devices So that's pretty cool I quite like that

What about if you're a bit of a power user? You like this sort of ability to select things but you kind of want to get your hands stuck in there You don't want to have to rely on this sort of left hand panel to physically go in and find these different options Well, you can do that as well You can see that at the moment we're just working in the code editor alongside the properties inspector Well, you can go past that if you want to

You can jump in the inspector and you can see there's all the code that's being used If we want to come in there we can simply come in and start adding our own CSS in there So, we might want to put in margins for example and you can see it's a typical fully fledged code editor Let's just say we'll put a 20 pixel margin in there We can physically come in type in what we want

Save that out and we don't have to rely upon this inspector We don't have to manually go through and adjust those, one selector at a time We can do it either or both ways So we can really speed up the process of working with any kind of style sheets that you want to create, edit, adjust visually or manually So, tons of options available in CSSHero to give you a much more fine-tuned, streamlined process for customizing your site's

Above and beyond what you can do with your theme or your page builder and that's kind of what I wanted to show you in this video It's not a sponsored video, this was supplied free to me but probably the best part of a year ago and I'm really kind of going back and started testing it out in a lot more detail to see how easy it is to work alongside my new work process of using OceanWP or Astra alongside Elementor Pro and I find it's something that just gives me an infinite level of possibilities and control over those different things that the theme doesn't necessarily give me access to quite so easily Well, the link for this is in the description below alongside all the links to do with all the different products and things that we use on this channel If you'd like to help support the channel, please consider using those links if you're thinking of purchasing any of the themes or plugins that we use These are affiliate links and they give a small percentage back to the channel

It doesn't cost you any more money Well, what do you think of CSSHero? Do you think this is something you could put into your workflow? Do you have an alternative or are you already using CSS Hero? Well, give us your feedback in the comments section below I'd love to see in here what you're using, how you using it and how you feel it benefits or degrades your process of creating websites with WordPress As always, if you've got a comment or feedback on this video or anything you'd like to see covered on the channel, please pop this in the comment section below and don't forget to hit that like button, hit the subscribe button, smash that Bell icon to be notified as soon as we add new content to the channel And as always; until next time, take care!

Free Email Updates
We respect your privacy.

wordpress plugins for analytics

affiliate marketing