How To Customize CSS On Any WordPress Theme – CSSHero

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!

21 thoughts on “How To Customize CSS On Any WordPress Theme – CSSHero

  1. See how CSSHero can help you customize ANY WordPress theme with ease. Unlock that beautiful, bespoke design you have in your head that has always been hampered by the limitations of your theme!

  2. Dude, I've been working with WP for years and this is the first time I hear about CSS Hero. Hell, I only learned about Elementor last week. And here I thought I was on to something because I was using SiteOrigins stuff.

  3. Hello mate. I used to work with CSS Hero before elementor has been released. Great plugin, especially now after several updates. Intuitive and lets you customise your website as you wish from the styling here… totally recommend if someone don’t use elementor, or even if does, it’s a great addition to it. Good for users with CSS knowledge and for those without it. As always great tutorial. Great stuff 👍
    p.s. when will you finally make a tut about creating a mega menu using elementor & OWP??? 😳😀 cheers, Lukas

  4. Thanks for the tutorial. I may have missed it but can you make changes globally over the whole website or do you need to make changes to every single use. Like changing the shop button shape and colour, can you do it once and it changes all of the shop buttons or do you need to change ever button one at a time manually. Thanks

  5. I am using a Free website builder Known as "Themify Ultra". Under my blog section I do have articles.

    As per SEO rules you need to use H2, H3, H4, H5, H6 in your content. When I use H2 in my content that particular content becomes very big in size and it looks very ackward. Experts said you need to have knowledge of CSS when you want to reduce the size back to the normal and also want to put H2 in those lines.

    I don't have any type of knowledge of CSS. If I insatll CSS Herio plugin would I be able to do what I wanna do?

  6. Bro if I want to insert the same style on all single product page than what I have to do? I do not want to do one by one separately

  7. Really nice video. Just an issue that I have come with is who to customize an element if there is a text or overlay etc when hovering the element. How does this work then and / or how can I find the selector in that case? I can’t code at all. Thanks!

  8. Thanks for this video!
    I was wondering… with all these amazing features it offers, how does one edit/add/delete the actual text itself within the elements?

  9. Please excuse my novice question here. I recently just signed up for WordPress Premium, but have already hit a road block. The plugins say I need a business account to add and the themes are very limited. Have a made a mistake going this route?
    Again, I’m brand new and only looking to learn. Thanks!

  10. Hi, I have seen your slider with geometry slider, How can i add geometry animation to wordpress slider. Please help me I need it on my own website

  11. I'm currently comparing it to my favorite tool: Microthemer…

    – CSSHero is more "visual" (that's a big plus for someone who doesn't know CSS… not that important for me)

    – I like some cool features, like the possibility to have something applied just to that page or template; also the possibility to save steps…

    – CSSHero has the transform panel, which is not integrated into Microthemer yet…

    – Fotunately, 3.4 seem to have added a lot of cool new features that makes it more comparable to Microthemer (they kind of copied them on few things…)

    – Microthemer has way more options though (ex: for display, CSSHero has the more popular ones: none, block, inline, inline-block while Microthemer has them all… and many options are like that);

    – It didn't test it thoroughly, but in maybe 5-6 tests, it happened at least two times that there was something I wasn't able to select in CSSHero and it's really easy with Microthemer;

    – When we select "this element only", CSSHero puts an horror code (something like "html > body > div > div > div > p > div…", yeurk), while Microthemer will detect unique elements (like, with Elementor, a div with a unique class name) and use that instead, so you end up with, for example, two class names instead of the long strange code… It's also way better if you move things around after…

    – Microthemer now integrate with Elementor (and others are coming), which means you can go in MT and enable Elementor from there… Then, you can add and modify things with Elementor, and suddenly select an element and style it with Microthemer all on the same screen! I had stopped using CSS builders when I started using Elementor, but now I can combine the two and have a better code (i.e. style all my titles at the same time instead of having Elementor create an new entry in CSS for each of them)…

    – It's not my case, but once your site is done, you could delete Microthemer and keep the changes that you made… not sure you can do it with CSSHero…

    – One of the big advantage for a long time was that for the price of about a year of CSSHero, you could have lifetime access to Microthemer… Now, CSSHero has added lifetime as well, though MT is still cheaper;

    – Also, CSSHero wasn't working with all themes (while MT does)… Now, since version 3 I think, you still have some recommended themes, but it should still work with about any theme…

    – Bonus: Didn't have to deal with support for CSSHero yet (simply because I haven't really tested it), but Sebastian from Microthemer is amazing in it's support! Impossible to beat such a timely and personnal customer support!

    This is where I my comparison are so far… Once I've checked it more I'll probably do a video comparing both of them…

    For now, my conclusion seems to be that CSSHero could be better for those who don't know CSS, but expect that at some point you might not be able to modify what you want… The learining curve is probably a little bit steeper with Microthemer, but it's more powerful and don't have the CSSHero limits… Didn't compare the CSS produced yet, but based on my tiny experience with the above mentioned selectors… I would say they're either similar, or MT has an advantage…

  12. i thought i try this but it isn't working well with elementor for me…. for example i edit a page made with elementor in csshero…. i add a 50px top margin to a heading widget for example and save… loading that page back into elementor i can see that the 50px of margin has been added to the heading however when i edit the widget in elementor –> advanced it's not showing the 50px of margin under margin settings… i can't even reset it back to 0px… this is not good is it happening to anyone else?

  13. CSS hero is an fucking plugin i ever had. I lost a lot of days with editing with this fucking plugin. If you want to edit one part, be ready, that another, or such part will dont work correctly. If you want to edit one element, be ready, that you'll invest your time to corrections of another elements.

    On each affiliate video like this is something focking easy. Easy websites with nothing. Builded for waw effect if you see it. Yeah, i need i! 😀
    Creators wants to wonder you and earn money

    This plugin is licensed for one site for only one year. Fuck! If you want to have your web nice and running correctly, pay an coder. Yes, you will pay him. But you will save your wasted time and you dont lose all your nerves. Their support is for nothing, does not online, only fucking ticket with response time as they want. On facebook is only some boy which want to sell only. Now i regret that i found this plugin, because it costed me 10 days of work for nothing. Im so sucked

Leave a Reply

Your email address will not be published. Required fields are marked *