by Adam Preiser updated December 17, 2017

The Easiest Way To Make CSS Changes To WordPress Websites


Share on facebook
Share on twitter
Share on linkedin

One of the biggest challenges with WordPress is making CSS changes.

This is why I am so excited to share CanvasFlip with you. It is a new Chrome browser extension to that makes CSS changes EASY.

Video Transcript

In this video to show you what I think is
the easiest way to make minor CSS edits on

your website and I ministry how to do it in
a very non-technical manner it’s like to cost

you anything in this tool actually has a lot
of power that I’m going to share with you

in this video hi my name is Adam from
were I make WordPress videos for non-techies

if you’re new here consider clicking on the
subscribe button and if you don’t want to

miss a thing click on the little bell off
to the right and there might be couplings

in this video two different things and I’ll
put them in the video description boxes to

make it easier for you so if you had a WordPress
website or many website much everyone here’s

got a WordPress website for any length of
time invariably there’s very little style

things that you want to change and what those
are is called CSS essence for cascading style

sheets in fact I’ve made several videos on
it if you come to my website just do a little

search you can do a search for the phrase
CSS in it will pull up those tutorial videos

but I came across a new tool yesterday and
I tested it out and I was extremely impressed

with it and I immediately knew that this would
help a lot of people that just want to make

a minor change and they don’t want to have
to learn a whole new thing or install something

on their website

so will deftly when it hit the discussion
in the comments section down below to talk

about this tool and little tricks that we
discover along the way okay so right now for

WordPress we do have two tools available one
is called yellow pencil and it’s 25 bucks

per website and this is a WordPress plug-in
that you install on your website picked up

a little overkill the next option and probably
the most widely known is called CSS hero and

this is the same thing as a WordPress plug-in
you install it on your website you use it

to make these changes I can say both of these
tools there are a little technical and little

overwhelming and a little complicated when
you actually try to use them so they do have

a bit of a learning curve so yesterday I was
on Facebook a lot of you guys that are on

Facebook you’re probably in about Ben-Ami
somewhere because I’m all over the place on

Facebook and then a Facebook group someone
is showed shared this product right here and

it is called canvas flip and it’s right now
is on product on time gonna put a link to

it on their this page right of this product
page right here on product hunk I’m in a put

in the video description because I like to
encourage you to click on the link and if

you have an a product can’t account go ahead
and do an up vote I certainly didn’t upload

for this yesterday because it is pretty amazing
what it does and you can read the discussions

going on about it essentially it’s an extension
for the chrome web browser so essentially

you this is only to work on chrome however
if you’re building websites for yourself or

for other people you really need to have every
web browser on your computer this will work

only with chrome and it’s not something you
install on WordPress it’s a Chrome extension

and that’s actually one of things I really
like about it because you’re able to use it

to quickly make changes to see how you like
it and it writes the CSS for you in a very

clean way and I will win when you see me in
this tutorial you’re to say wow that is very

clean CSS wear yellow pencil and CS and CSS
hero and that’s a very long CSS that they

put out there very complicated stuff so the
extension is free now they do have a paid

option for collaboration that is actually
very interesting most people won’t need it

but I think if it fits into your workflow
it could be very nice so here is the canvas

of flip website showing you this visual inspector
so when you’re using it it’s good to have

this little pop over and your to be able to
make some of these basic changes font sizes

colors spacing all kinds of stuff like that
number to make some changes to a page I’m

building in Elementor in the sack but you
should deftly take a look at the different

paid options it’s actually very neat so you
would have a paid account and it allows you

to sync your changes to the cloud and allows
you to have different project files on their

hosted service that allows you to generate
a wave for safe you wanted to show these preliminary

changes the someone that they can see those
changes and they can even comment back and

forth where is this a commenting right here
this is what the commenting looks like it

looks a lot like project huddle another tool
that I talked about a lot but that’s just

for getting feedback that’s not real-time
feedback on a temporary link it’s pretty interesting

what this does right here so you can collaborate
this is actually very neat I think this would

be really good if so your web agency and you
have web developers working for you and you

want to collaborate on changes you’ll be able
to do that with this tool so here’s the prices

and things and be five dollars per user per
month everything I want to show you in this

video those get to be free forever on this
free plan in fact you don’t even need to set

up an account for them with them in order
to do everything organa do in this video I

will say though that this is new and they
have offer right here if you scrolled up to

the top of the page if you click here or they’ll
give you an account for 49 bucks and it’s

a lifetime account for it now there are couple
weaknesses in this tool that the developer

is addressing number one you don’t get the
mobile responsive options you can click a

button have your website going to tablet view
and make some changes and then have a go to

mobile view and make some changes that’s not
here yet there going to be adding that I don’t

know when but that’s what they’re going to
be adding another thing is an ominous show

you when you make your changes and you go
to save the CSS it’s actually like a download

file and what I would like to see instead
is the actual CSS I can just copy and paste

it into WordPress but Michelle you all that
right now I think these are all very minor

things this is a really cool tool so it is
right here I got my stuff okay it is when

you if you had an account you logged in this
is what it would look like like right here

you have different projects and stuff like
that so to get the chrome extension just go

to Google and do a search for canvas flip
or if you’re already on the websites there

is these links right here get the chrome extension
just like any chrome extension you click on

this in a prop you to install it let’s see
what happens when I do that there is it just

popped right up in the new would click on
add extension which I have actually all ready

done alright so you you can just go to Google
and do the search so here is the page that

I’m working on it right now on my website
and if you notice it’s built in Elementor

it’s not live it’s a template I’m building
in the Elementor library on my website and

so I’m just testing it on out there’s a lot
of things I like now with Elementor you get

a lot of controls to make the different elements
styled the way that you want but they Put

every control and every element and that’s
reasonable so one of the most my favorite

features with Elementor Pro is this a blog
grid in this is the what they call cards the

cards template for it and it’s beautiful however
there isn’t a control for the amount of shadow

under each of these cards there is in a control
for that and so when I’m in a dues and then

uses Newell new tool to write the CSS to make
this shadow be what I want and amended to

show you some other things but it’s a perfectly
reasonable that Elementor doesn’t have that

as an option in their so let’s just go for
it here now I’m not missing I can really show

you every aspect of this tool but it is very
easy to use so since I’m in the video right

now I’m in a get out of the video because
I’m gonna start blocking things so once you’ve

installed the extension and you can see I
got a bunch of these extensions here I even

have a video about it this is color Zillah
right here firebug which I’m not can probably

use anymore what font the for no for finding
out what fonts are this is spy bar I need

to make a video on that I made a video yesterday
on this full-page screen capture grandma legs

I’m a poor speller but this is it right here
visual inspected by canvas flip so when I

click on this it just gonna pop up like this
and there are here’s the inspect tab in the

collaborate tab I’m not doing any collaboration
that’s okay and so here’s a foreign specs

I want to click on here like this and now
I can start moving my mouse cursor over things

that I might want to start changing so I think
if I wanted to change this green to a different

color if I just move it like that it looks
like it’s fully selected now when I click

it’s going to start showing the properties
here now I can start adjusting property so

if I want to add some padding in here on the
top or at the bottom I could just change this

so I wanted to put 10 of padding Mariner 10
of padding there I just did that that easy

now obviously using Elementor you can just
use Elementor to do that but keep in mind

a lot of times when you have a free WordPress
theme or even a paid WordPress theme you might

want to edit the spacing of save the header
and there isn’t an option in the theme you

can use this to do that and is same thing
with the colors of links you can use this

to do that so I can scroll down this is a
real neat feature I can actually export the

images of what I selected as a PNG that’s
pretty neat I can modify position size I can

even rotated obviously I’m not gonna want
to rotate or flip this here is my typeface

options I can change that I can change all
of this stuff right here it’s really powerful

and check this out under Phil’s here is the
color so if I actually wanted to maybe play

around trying different colors I can do it
right here now obviously I would be doing

this in Elementor but I’m just giving you
this as an example but what I was really wanting

to do with these cards is not an option in
Elementor someone I move my cursor right here

in it looks like I’ve have a card selected
you can see by the blue on the outside so

now I’m going to click and you see it is selected
and right here is all of the various properties

for it so I’m going to scroll down obviously
if I wanted my font larger I can do it here

but I can do that in Elementor but what I
can’t do an Elementor is when I scroll down

here’s this shadow option I don’t have the
option to adjust this in Elementor which is

fine so I’m going to go with much less of
a blur so right now it’s at the 30 and I’ll

go ahead and make this five so I’ll just enter
five and then went ahead and changed it so

now when I go here you can see it’s a much
much less a predominant because I just lowered

it and that’s pretty much all you have to
do to make your change in then that changes

actually saved in the little tool here and
we can export that change okay so now if I

wanted to take this CSS change and make it
live on my website this is what I would do

a go ahead and click on the info tab and it
says I made eight changes now obviously it

also has this change and I’m I’m not gonna
want to do that on my side I just want this

change so one of the do is I’m to go ahead
and click on export changes and then essentially

downloads a zip file to my computer so now
when I go ahead and open that zip file okay

it is now opened in here are the two files
that are in it we want what is style_changes.CSS

now when I open it this is what it looks like
right here and here is that setting for the

postcard what I said was the name of this
style now here is I am not keeping this right

here because this is that padding that I added
this is actually all I want someone to go

ahead and copy this and now I’m in a go into
the customizer of my website so the customizer

is one of many places you can store CSS so
here is what it looks like now and I’m in

the customize him to go to additional CSS
and I have a lot of custom CSS and here I’m

just going to scroll to the bottom here and
I’m in a go ahead and drop this oops I meant

to drop this into the bottom here to just
paste that in and then a minute click on publish

so that I can publish that change it right
there so I do have heavy caching on my site

so when I’m in a dues on a close here on the
closes editor like that and then to go ahead

and do a hard refresh and see if that change
is applied and I’m pretty sure it will be

there is this shadow has gone down significantly
to what I wanted it’s hard when you’re not

comparing them side-by-side going from tab
to tab but there’s an obvious difference there

it’s the amount of shadow that I wanted and
I can further verify that if you’re having

a tough time by eye by going right here and
then re-inspecting it like this so let me

select it one more time in them to scroll
down and you can see for the shadow it kept

it right there which is that five on the blur
which is exactly what I wanted so let me come

up with another example to go to courses I
am using LifterLMS and LifterLMS is notoriously

painful to style so let me go into a course
that I’m not enrolled in right now and let’s

see one of these I’m sure I am not enrolled
in an ominous show you how to edit these the

style of a LifterLMS course page okay so here
we are this is a course that I’m not enrolled

in and there’s some things you know you might
want to change you might want to change the

way the shadow is here the size of this button
the color of this button in the background

there this is not done in a page builder so
it’s all custom CSS from here let’s go ahead

and do that tool again I’m gonna go ahead
and click on it are going to inspect and let’s

first inspect these buttons so my click on
it right there and so maybe I don’t want this

button to be as tall you can see right here
at set to a padding of 12 on the top and the

bottom so when I change that to five on the
top and then five on the bottom you can see

it’s already gone ahead and change that I
can increase the padding on the site if I

wanted I can make this whatever I want and
then perhaps what if I wanted to change the

color and this is actually very common thing
you’re going to maybe want to do it LifterLMS

you can go right here and you can see here’s
the colors I can change it from the color

it is to any color I want I can drop my hex
code and right there and you saw how easy

that was if I wanted to remove the border
I can do this if I wanted to add a shadow

I can go ahead and I can do this there it
is let’s see I might want to make it a little

more transfer I’m just actually yeah I want
to make this a little more transparent I like

something more subtle like that and so I now
have a draw a very subtle drop shadow behind

these buttons and say we don’t like the size
of this font here we want this font to be

larger so I can just click on it I can see
the font that it is now you can just use any

Google font to just can offer you the fonts
that you’re already loading on the page so

but you can change things like though the
thickness of the font you can change the alignment

the spacing you can change the the capitalization
of its over here settings I can go text transform

and go all uppercase like that if I wanted
to but I actually don’t want to you can that

change the size say I wanted this to be 25
for the size I could do it just like that

so you have all of these options I can change
the color everything can be changed and say

the background here-I don’t want it to be
black like that I wanted it to be a different

color I can go ahead and do the same thing
just like that and you saw how easy this was

to change in all I’d have to do is export
the CSS and then do that copy and paste so

this is a very awesome tool if you ask me
it is very very awesome at making these style

changes very very fast it is much easier than
using firebug or something like that to make

these changes and then you just drop it into
your customizer now there are lots of different

places where you can put CSS on your website
stored I think the best place typically is

going to be storing it in the customizer like
you saw me do a moment ago that’s usually

to be the best place to store it however if
you’re using Beaver Builder or Elementor there

are specific places where you can store CSS
changes that you only want applied to specific

pages you can do that in there so anyways
this is canvas flip I’m actually very excited

about this this is one of those tools that
I personally see myself using allots me I

didn’t show you there’s a lot of things I
didn’t get a chance to show you and show you

how to add a gradient is a very easy to add
a gradient shadows all that kind of stuff

you saw how easy it was I think this is a
tool that is is just ideal for the folks on

this channel even if you’re an expert web
developer sometimes a tool that might be more

convenient is worth having and so and that
the nice thing is as if you were interested

in the paid plan then you can generate a link
you can send to a customer or someone you’re

collaborating with and there’s things I didn’t
show you like you can actually edit text if

I wanted to to put some different text in
here you could do that now that would be just

for visual on WordPress if you’d have to go
and then do it in whatever you’re using to

generate that text in WordPress but it’s good
for quickly seeing what can go there and how

it would look without having to make big commitments
to changing things over and over again this

is one of those little power tools once again
it is canvas flip I will go ahead and put

a link to this page in the video description
please if you have a product hunt account

go here and upload it and then if you wanted
to see what the different paid features bring

that definitely go here and click through
all these different options to read about

everything that you can do with this tool
doesn’t slow down your website one bit outputs

very clean CSS exactly how you would hand
coded I think this tool is definitely a winner

and I can’t wait to see where it goes adding
mobile editing options live CSS editing options

hover link options all of that kind of stuff
I’m pretty excited about this tool so let

me know what you think about the tool in the
video description box down below if you have

any other quick CSS hacks go ahead and put
those down in the video description box as

well they give her watches video see in the
next one they just might want to change the

color of fonts and spacing all of these various
things without you know some of these overkill

overloaded plug-ins that are available okay
there is my introduction to do my best they

had everything as accurately as possible this
is a new tool it doesn’t cost anything it’s

a new tool and things are probably likely
to change and improve on it

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

Join The Conversation

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

Stay Up To Date

Enter your name and email for the lates news, updates, and tutorials.