How To Customize CSS On A WordPress Website – Beginners Guide

90
5


If you own a website in this video is definitely
for you my name is Adam from WPCrafter.com where I make WordPress videos for non-techies
and in this video it’s going to be my guide for you on how to use CSS and custom CSS on
your website in order to cover a lot of topics in this video first were to talk about what
CSS is there were to talk about what CSS looks like there were going to talk about where
you’re going to put CSS on your website and then working to talk about how to find these
things called CSS classes that were going to talk about the properties in these classes
and then some easier ways to get this all done now if you are just someone who built
your own website and everything that you see on your website is essentially these styles
are created with this thing called CSS and you might’ve heard that before so if you have
a website and say you bought a WordPress theme and you want maybe a font to be a little larger
in there isn’t an option for it and then you go to the theme developer and asked them how
to do that they probably gave you something called CSS and it would be a little snippet
of code and this little snippet of code when you put it in the right place in your WordPress
website it’s going to change how that element or whatever you want to change it’s gonna
change it for you and so that is what CSS does the controls all these various styles
on your website now let me get off of my website really quick in working to be looking at this
website I designed and were to be doing some CSS on it now you are typically going to use
CSS for lots of different things your colors are going to be set with CSS your font sizes
and weights and colors and spacing that’s going to be done with CSS you’re just in general
spacing of elements you know how how close lines of text are together or maybe the width
of a button or if it has rounded coat corners all these things are done in CSS and if you
can know just a little tiny bit of CSS I am going to tell you that you can get by you
can make these changes on your own some things a little tougher than others but I’m in a
teach you how to do some of these things on your own right now now no matter what WordPress
theme that you purchase if it has options to control fonts and colors and things like
that invariably there’s going to be something that you want change that there isn’t an option
for I know for me the WordPress theme that I’m using on my website it has controls for
fonts like a whole bunch of colors and a bunch of different things but I still see things
that I want to be different in that’s where this CSS comes in word if you know little
bit about this CSS you’re to be empowered to make these changes all on your own in your
knocking to be dependent upon a designer or developer to help you make those changes you’ll
be able to do it right on your own and so that is a CSS in a nutshell you don’t need
to be a master of and I’m not saying you’re in a learn that in this video nothing you
even need to be a master in it and I’ll be the first to raise my hand and say I am no
master at CSS add all but I know enough to make changes that I want to make on my website
and that’s what I want for you to know just enough to make these little changes that you
want to make on your website so right now I want to show you what some of these NCSS
entries actually look like and you might’ve seen them before so actually before I get
started this what you’re seeing right now is of website we made in a video series I
recently release that teaches anyone how to make a website that you’re gonna deliver an
online course with and throughout the whole video series I walk you through every single
aspect of building get but there is a part in it where I put together a whole bunch of
custom CSS and I say just copy and paste it in there and you do that and it changes the
styles of everything sorted actually be using this website for this video so let me show
you what some of those CSS entries looked like so for an example all your CSS entries
there to start with a CSS class and it usually is gonna look something like this can have
a.and then it’s going to have the class there’s no spaces in it and then sometimes are going
to see two classes side-by-side this is when you’re zeroing in and targeting something
a little closer and then what you have is one of these brackets right here and then
you have the properties listed one by one so I have the font size so this particular
little bit of CSS is gonna modify the title of an area of this website so right here is
going to change the font size to 18 pixels it’s gonna make it a little thicker right
here font weight of 600 it tweaks the margin and also it makes it so that the text bit
is aligned in the center of where it is to see each of these properties they have this;
right here at the end and then this whole statement is closed off with a bracket so
this right here is what a typical CSS change or tweak or modification is going to look
like let me just show you another one right here in this is a little bit more complicated
this is for an actual button and so there’s different properties on this one so were getting
more of a deeper target on this button right here and right here I’m choosing a background
color of the button and this is just a typical color code and then I’ve got a border on this
button and then I have what’s called a border radius this kind of rounds out the corners
of the button a little bit and then were specifying right here the font family that the type of
font that is being used in this button the thickness of that font and also the padding
around the text on that button so there’s a little bit of spacing around the text for
this button and that’s what this is configuring right here and so this is just another typical
CSS entry know where this looks complicated you’re not going to be writing this stuff
but I’m in a show you how were going to tweak some of these things and it looks like I have
another one right here this is actually one that I use a lot so if there something on
your page that you don’t want to show so for for example right here this is a CSS class
targeting a featured image on a particular page and right here is the property display
none and what that says is don’t show this don’t display this element even though it’s
in the the code is hardcoded to show it this is saying for the style let’s just leave that
out I actually use this type of a property a lot so for instance on my website if you
go to any my blog post there’s all these entries for author in posted date and publish Dayton
comments and all this kind of suck I just hide a lot of that because I don’t really
think that they need to be there so I use this CSS property display none in order to
hide some of those things and so this is another thing that you use a lot so this is typically
what you want to do with your CSS you want to put it in your theme and there’s a couple
places to do this there’s more than one way to skin a cat when it comes to WordPress so
a lot of times your theme might have in its settings panel a location to put your CSS
that’s one option there is also plug-ins that you can add to your WordPress website where
you can paste it in there there is also a place where you can kind of put it in a theme
file called your style.CSS file and you can paste it in there if you like but there’s
actually a newer way to do it in WordPress they just release this I think in WordPress
4.7 there is a backend area in the customizer to do that so if you are in your WordPress
websites you can click on customize right here but if you’re in the Bakken of WordPress
in the WordPress dashboard if you go to appearance and then customize as well so I’m in a do
that from the front and right here to click on customize this is probably where I would
recommend you putting your custom CSS and so there’s can be an option right here that’s
his additional CSS now the nice thing about this this is a WordPress thing and what’s
also nice about this is when you paste in this little bit of CSS if you’re on the page
were that would affect that page on your site you will see it applied in real time so you
can see if you like it before you commit to it so for example let me go to most of the
custom CSS I put in here affects these courses in the course layout so let me just jump into
this one right here and working to see a poll of intimacy I use custom CSS that actually
customize the look of a lot of these things so this is how it looks with my custom CSS
in their summoner click on additional CSS this is this custom CSS I’ve added him and
actually remove all of this and it goes to hear and actually I can just highlight it
all and remove it and now you can see how it looks without my custom CSS you can see
the colors changed a little bit there and some of these fonts change this is an as wide
as it was this color changed all these things change the stuff right here in the sidebar
words listing out all these lessons you can see the font became a lot larger I like the
smaller font because it just overpowers it and so this is what it looks like without
my custom CSS, to go ahead and save it and publish that and what I want to do now is
show you how you can begin and this is beginner friendly changing some of these CSS properties
and you can have more control over your website so what I need you to do is download a tool
for your web browser now if you want a website you really should have multiple web browsers
on your computer personally I have Safari which I use for most things I also have chrome
and I also use Firefox now the nice thing about chrome and Firefox are they allow you
to add these things called web browser extensions what these do is they add new features to
your web browser and you should really get in the habit of using an taken advantage of
some of these extensions so the one I need you to install if you’re using chrome which
I many use for this tutorial and I would prefer you use that if you’re following along you
can go to Google and do a Google search for firebug for Chrome and actually firebug is
also available for Firefox so you can go ahead and Firefox and do a similar search and search
for firebug for Firefox and then you can download and install this extension so here I am on
chrome I would downloaded on this link right here where it says the chrome.google that’s
the chrome extension store you don’t have to buy anything there is no checkout process
is literally just the official place to get the extensions for your web browser so just
go ahead and click on this link right here and then you’re gonna see this pop-up happen
in for meats is added to chrome but for you you’ll just click on the button right there
in the right top right-ish area and you’ll go ahead and install firebug in your web browser
and then you’re getting get a new option in the menu area or the control panel whatever
you want to call it of your your web browser and it’s right here there’s like a little
blunt bug here now I actually use several different extensions in my Firefox browser
and you should too I use this one right here to find colors and it’s called color Zillah
so you can just do a search for color Zillah for chrome and you can find this extension
herein allows me to find the exact color code of any color on any webpage I use that a lot
because I’m a collector of colors and then there’s this other one right here called what
font I used to actually call this the wrong name I would say what the font but is not
called what the font is called what font you can do a search on Google for what font chrome
and then you can add that to your web browser what this does is it actually allows you to
see the exact font that anyone’s using on any website so this is how you can kind of
get an idea of what fonts that you like and how they they work together but in this video
work and only use firebug’s you have this little bug right here so go ahead and add
firebug to your web browser and essentially skin allows to inspect things on your website
and that’s how organa can to get to this information on these CSS classes so I’m in a go now that
I have that installed on the new XML leave this in the customizer right here here’s the
thing firebug stuck in a work if you’re in the customizers is not to work right you need
to not be in the customizer so right here’s what I’m a do I want to go to the front end
of my websites and I’m going to go to that same course page that see right here you can
see some of this was customizes well actually when we started on here so you can change
all kinds of things with CSS so one of the things I did was I change this I had a different
font I had it centered I had it more bold I was hiding some of this information here
that I didn’t want to add there because I just didn’t like the way it visually looked
so much as jump in there and see what we can do with CSS so what you need to do is click
on the little bug right there in his can reveal this panel right here okay so here is our
panel and let me go right here and move that that’s is high is my page will go that’s fine
and then you want to click on this and inspect button soma click on inspect and let’s see
so here is that font right there you can see how when I have the inspect button pushed
and I start moving my mouse cursor there’s this blue box that kind of wraps around different
elements are right here it’s wrapping around this image and right right here if I move
it off to the side a little bit it doesn’t just do the images does the image and all
the stuff beneath it so this is how you can target exactly what you want to change so
for instance right here is that font that is the title right here so if I click on it
right there I’m now kind of locked into this element now right here you see two panels
right here on the left you see this panel that’s showing you a bunch of code and this
is the different code that gives the web browser the instructions to I want to show on your
website but right after the right here is that custom CSS that I was talking about in
so you can see the looks familiar from what we were just looking at right here with these
different CSS queries the IDs and all the properties and so right here we see that same
thing now what’s nice is it’s showing us these CSS properties for what we clicked on this
element we clicked on and so what I like to do usually is just test my changes here and
then copy and paste it into the customizer and this is pretty much how you identify your
CSS classes and make changes so for instance here’s a property that says a border top five
pixels and that’s the space above this element right here so if I wanted to increase that
I can increase the number so instead of 15 I can put I’m sorry instead of five I could
put 15 and you could see it or immediately pushed it down now it’s not that dramatic
but if I put a bigger number like 45 you can see it’s a lot more dramatic and this is how
you start to change CSS so you can put these other properties in there as well so if I
double-click right here in there’s a new entry that I can enter in here for a CSS property
I might want to add to this maybe to align it to the center or something along those
lines and here’s the thing you have to find the CSS properties if it isn’t already listed
here and what you do is you go to Google right here and you just do a simple search so I
can do see a simple search for CSS center alignment text so there it is I just did a
real simple search first center in line text and I put CSS not to believe you’re going
to see the first result be this W3 schools you can get so used to seeing this website
here and so I just click around in there and I’m looking right here so says I can put text
align and then center and maybe that might do it so let’s let’s give it a shot some going
here and I’m gonna put what was it text align center Solomon enter that now okay. As I entered
text align a center and did you see what happens now my course title or this element that I
just targeted is now centered and I did that by just going to Google searching CSS alignment
text center and then it pulled up this page and it teaches you some other things we want
to line it left you want to line it right this is essentially all you need to do this
is the property that you need to put in there and so now if I wanted to keep this change
it’s not live because I’m just doing it in this firebug what I would do is I would highlighted
here in firebug and then I would put it in my clipboard so for me it’s command to see
or if you’re on a PC it’s control C and that puts it in the clipboard or you can right-click
and do a copy memo to go to the customizer here and actually here let me get to that
same page the course index page so this is what it looks like before my CSS and then
when I pasted in here that’s what it looks like after you see I just changed it and then
to make this alive on the front end of the website I click save and publish and now my
text has been centered so that is some basics of how were going to do this kind of stuff
so now why don’t I get into one of these courses let me click on this right here and let’s
see what else we can do here so this title is enormous actually my theme probably has
an option there to lower that and we just looked it well let’s see maybe I will show
you swimming do and inspect on its and their I’m grabbing it now I will tell you that with
CSS and using firebug it’s really easy to change your text and things like that sometimes
you might come across an element that’s a little harder to find so anyways I’ve highlighted
that it’s his entry title and this is actually it right here it’s this entry title H1 property
so it’s showing is itself 40 pixels so I might want to lower that to say 30 so I can change
it from 40 to 30 in there it is you saw the font when in the lower right away sometimes
when you change something in CSS it might affect other areas of your website that’s
why it’s always good when you copy it into the customizer to take a look at your website
and see how it might be affecting other things here’s the fontweight in it says bold so it
is kind of bold and if you don’t know all of the options of what you can put in when
it says fontweight you would just go to Google and search CSS font to wait and then you’ll
find that same W3 schools or whatever or whatever website pulls up but it’s going to usually
be that website you just go there and you can see all the various properties that you
can enter in actually one which has do that in this video so let me go back and it says
CSS I’m going to enter in a fontweight okay so I entered and fontweight out and here is
Google actually giving me some information so there’s a bold and it’s equivalent to 700
I can put normal border lighter whatever so let’s see what normal looks like, so it’s
as bold eminent type normal like that you can see it went to a more normal fontweight
so this is how you’re going to find these classes then you’re gonna go to Google and
find out what you can put in these properties to make these changes you’re gonna make it
in firebug then you’re going to copy the change you’re gonna put it in the customizer see
how it looks and then save it it’s all really simple okay so that’s fonts but let’s look
at some colors right here so we have these is blue here I don’t necessarily know if I
like it so let’s let’s see what we can do here some click on inspect and okay there
it is CM in a go right there and I’m in a click on my mouse and now I have it identified
so here it is it says LMS axis plan title by the way these pages are all generated by
plug-in called LifterLMS which is what I use personally and I used in that video series
to add the ability to facilitate online courses enroll students in all these kinds of cool
things now with this plugged in they don’t give you any options really to to fine tune
control these colors and some of these things so you have to tune all in custom CSS really
but you can see how easy it is so one of the things I like about using firebug is when
you see a color so it’s his background right there when you have your mouse over it it
actually shows you the color color code obviously but it actually shows you the colors you can
know you have the right thing so the background is the blue and works is color that is actually
the font color that’s inside this little area here so I wanted to change both of those I
could change it right here for me to show you by putting in a different color code now
in the video series I did go over color codes finding these color codes and finding a color
palette and all that but I’ll just give you a quick snapshot every color is represented
by a six digit six character color code and so that color code is can have letters and
numbers in it and so this blue is this a six digit color code right there so let me change
it to six threes which is black so there it is I just changed it to black and it was that
easy to do guys so if I wanted to keep that as black and if I wanted to tweak some of
the other things we’ve got padding now padding is a spacing property padding is the space
inside what you’re looking at margin is the space outside so if I wanted to push these
two columns away that’s margin it’s gonna push him away but in this box if I wanted
there to be more space in it that’s gonna be my padding let me to show you so it says
that the padding of 10 to know let’s just see what happens when I change that to 30
you can see how it became a lot bigger I believe this is the padding on the top and the bottom
in the left and the right but since it’s already centered you don’t see it left and right changes
just the top and the bottom so if I wanted I could make this five minutes it’s it’s thinner
than how was by default I actually like that a little more so here some custom CSS we just
came up with so I can highlight copy at my clipboard or you can right-click and copy
and I want to put it in here some neck and put it on the same line I’m in a go down to
lines like that and paste it in so were knocking to see anything happen on the front end here
it’s because it doesn’t this query doesn’t affect this page it’s when we were actually
looking at one of these courses so we just take up take a look in there and I scroll
down and there it is it’s that different color and I kinda thinned it out a little bit like
that so let’s go back and see what else we can do so we are and he knows how to change
these fonts and things like that let’s go ahead and see what we can find with this particular
button right here buttons or something you might want to change from time to time so
I’m going to highlight the button you can see it’s easy to grab the blue box around
the button and him to go ahead and click on that and let’s see right here is the position
this first bit here is the position of the button and then beneath it is just your general
button properties so now that that’s done let’s let me show you how to hide something
with CSS and so right here some information that automatically gets pulled and I actually
don’t like this information being here as well and I probably gonna want to hide it
some and to try to inspect that so here’s an entire block I probably don’t want shown
oh wait there it actually looks like we just highlighted the entire box I probably would
want to hide this entire box to let me go ahead and click on the mouse right here we
see the class for this entire box there so I want to use that display none that I showed
you earlier some of the double-click here and I’m then enter that in and there it is
display none and you can see what it did that whole box that I highlighted in the inspector
and put the box around it just hit the whole thing by using this property display none
some to go ahead and copy and paste this one in II like that a lot let me go ahead and
put that down right here and you can see just went away just that quick so this is kind
of the basics of changing some basic things now changing basic things is easy it’s actually
very easy but some things are going to find her actually a lot harder to target with a
firebug or something like that and they really take more experience with CSS and coding so
some things are going to just be really hard to find so if I was on the front end here
I know it like this background area here’s a little bit hard to find some these things
are going to be a lot harder to find and to target so princes if I wanted to change this
background color right here you can see I’m I’m looking for something says background
and and has this color code but I’m really just not seeing it in then when I highlight
the whole box here let’s see if I can get the whole box like that not seeing grandma
to be able to change that background color but actually looks like I just found it right
here like so let’s see what happens when I change this color I’m a just change it to
let’s change it to all white even though I probably wouldn’t want this all why it’s so
all-white is success actually looks like I did find that there but you know it takes
a little getting used to trying to ID and find these targets and stuff like that and
you’ll be able to play around with it and just try to figure some of these basics out
and go to Google but I wanted to show you another way a tool that you could use in order
to make some of this stuff a bit easier now they have these tools there plug-ins that
you can add to your WordPress-based website that are going to make it easier to kind of
target these different CSS classes now one of them is right here is called a CSS hero
and what this is is the plug and that’s can add this option here that instead of having
to keep going to Google and finding the different properties that you can add to any CSS elements
or class you can do it all within this tool and what’s needed is it also has a bunch of
premade or ready-made styles and I’ve actually been using this on my website to hit those
areas that I’m having a really hard time finding because I really don’t want to spend all day
to change the font or to change the color of a button or something like that now this
tool right here is actually not that expensive it’s only thing is $29 or something like that
and I I look to see if there was a free plug-in that allowed you to do this and gave you this
power but I really couldn’t find any there were all kind of basic they really don’t do
much other than give you place to put the CSS which you don’t even need anymore anyway
there is another one that’s a couple dollars less that is on code Canyon but I’ve been
using this one and it’s pretty amazing I think says on their website they sold about 10,000
copies of this so it’s a very widely used plug-in and I want to just show you that this
plug-in right now so I want to go ahead and install it so let me just actually save this
stuff that I did already let me get out of here and go into the back end and then I’m
in a go ahead and go to plug-ins add new and I’m going to upload and install this plug-in
GOING to drag and drop it over here now I haven’t tested this plug-in on this site I’ve
only use this plug-in on my website it to change in buttons around and things like that
actually actually show you that on my website so let me pull up a page really quick let’s
see I know right here I changed out some buttons to let me click on that okay so here I am
on my website and I change this button style was more basic button and I used this CSS
hero to target this button and put this really neat animation and there in this neat style
so we actually see if I can do that on the the website that I’m just showing you right
now that’s one example also on my website I have a hard time changing this the white
for some reason my theme did not have an option to changes it was in a hat inheriting up the
black color and so you could barely see it and so I was I just couldn’t figured out but
then with this this one a CSS earplug and I was able to do it and you can see I was
able to do some other fun things as well so let’s go ahead and see what we can do with
that it’s already uploaded let’s activated now I do need to click on this button right
here in order to authorize it so this thing essentially slips in the license code someone
do that now okay when I do that it takes me to this page which is really cool it shows
me I only have a five site license and this will be my third installation so I’m a in
go ahead and click on get a license and then it’s going to boot me back to this really
cool screen right here that kinda tells me how I can use it and then I’m a click on this
and got it let’s go so now it’s actually installed on my website so I have this new option right
here that says CSS hero so I am on this page still so let me do a refresh and so there
it is CSS hero and also gives me this little lightning bolt to activate it so I mean I’m
just shooting off the hip let’s just go ahead and click on CSS hero and see what happens
so it’s going to do this little bit here where it turns it on and what it’s gonna do is analyze
my page actually took me to the homepage I don’t I don’t want to change anything on this
home pay someone to go back to that course page and I’m able to do that, to go here as
well okay this is where I want to be so let’s see if it allows us let’s just see how easy
it is that maybe change this blue what you do with the CSS hero and I’ve been using it
a while it just takes a little bit of getting used to so what you want to do is click on
this little blue icon here in the what you do is it does something similar to firebug
where when you move over elements like that it tries to identify this a CSS class and
I can click on it and start editing its properties if I wanted to what you start here let me
go right there let me click on it and show you what it does so that when you first click
on it it gives you all of these various options here of what you are trying to target in your
typically it’s going to be the first one right here it’s the content title here so then when
you click on that now gives you all of these options right here so for the text I can click
on text and now it’s what I’m comfortable with right I can look here and I can see that
the text color is white and I can change it right here if I wanted to change the font
family I can going to drop down right here and I click on save this font and you can
see the font changed okay so you see how easy it is a fire it’s 18 if I wanted the size
to be 20 I can easily do that right there if I wanted it to be thicker or thinner I
could just go up to Boulder something like that or go down you can see I got my font
styles here I can make it YOU can basically have full control over the style and even
end in a more easier way to target these various styles with CSS hero I can change my alignment
to be left or centered I can change all these properties now once you go through these properties
you can go up this little arrow right there and now I can start changing some other things
if I wanted to so right here was the backgrounds let me click on that and you can see there’s
the black color I can change it or if I wanted to I can put one of these different background
images in their or a pattern or something like that and Lemme go back and you’ve got
all these things for spacing positioned there so many different things that you now in a
more easier way have control over using a tool like this to let me go ahead and click
on save and now it’s actually saved and it’s going to be live on the front end of the website
so now we can start editing some of the properties of this so if I wanted to say change some
properties of this font right here I can go to text and if I wanted to say make it a little
smaller I can do that are larger it’s whatever I want now let me go back and I can also buy
wanted to put a border I can go ahead and input a border taken off there’s all these
various styles that I can do if I wanted to say round out my corners a little bit I think
I could do it like this yeah you see how it rounded it out a little bit leave that it
the sleeve that it 10 you can easily do that while that actually looked kind and I said
I think I like that others all these different options that you can do so for background
we can let’s see there’s a color picker here if I click on it I can do whatever I wanted
with the background color if I wanted it to be white I can do that but it has is nice
easy to use color picker right here or if I wanted to use a background image I can do
that or there’s a gradient tool right here actually this is kind of dangerous to do because
I don’t have any of the color codes I would want in there to do a gradient let’s even
had some here sums preset settings here actually don’t like some of them but let’s go through
them black-and-white so you get the point right there’s all these different options
and it’s a little easier then targeting get with firebug and then searching for the property
and that you can put in there and doing all these various things it’s just a little bit
easier so there’s all these different things that you can tweak and though you could do
other things as well so for instance on my menu navigation here let’s see if we can change
something there let me click on save and then I’m in a go ahead and target my menu it’s
just reloading the page when it targets these menu items right here so let’s see them in
a target this right there on this one I think I want to click here and let’s see if we can
make the font a little larger if that works and you can see I actually got that one wrong
let me just go back and let me close this let me read target that like this I clicked
on the wrong link let’s see if I got the text now see up there we are were making our text
larger or smaller whatever you want but what’s really nice is being able to change the font
to whatever you want right here so anyways you can see how with a tool like CSS hero
it makes some things a bit easier but you can to get started use everything manually
I like I showed you are ready that’s how I edited CSS for probably the last four years
I’ve only recently started this month using CSS hero even though I’ve known that it’s
been around I’ve only recently begun using it and if you want to learn more about how
to use this maybe I can do some more videos on how to use a CSS hero get the most out
of it now I do have a link down below in the video description and in the pin comment to
these CSS your website I think I might put together like a bonus package if you do end
up buying it through my link a lot of times I put together a bonus package where I might
give you one of my paid training courses I think I might add this to that so when you
do click on that link to send you straight over to their website I’ll send you to my
website where I’ll tell you about the bonus package that I’m in a put together if you
do purchase it maybe it can help lighten this thing of having to purchase something but
for me I really want to control the styles of my website and have an easier way to do
that and I really find that CSS hero makes it easy to do that actually didn’t make this
video to tell you about CSS euros more just to try to empower you on how to make these
style changes all on your own on your website and I hope that I’ve accomplished that in
this video now if you have specific CSS related questions let’s go ahead and get the discussion
going down below in the comment section I’d love to hear what questions you have about
CSS I’m sure I left something out and that would’ve been on purpose go ahead and leave
the question down below I’d love to start this dialogue with you guys about CSS and
get everybody helping each other to customize our websites and really make them look the
way that we want them to look

90 COMMENTS

  1. COMPLETE GOOF ON MY PART! Its tough when you hit the record button and you don't read off of a script. I make mistakes ALL the time, but don't judge me! So I said that #333333 is black when #000000 is black. Sorry folks!

  2. You doing a great job. A lot of useful materials. I learned a lot from your videos. Thank you for your efforts to bring us such kind of knowledge. Wish you good luck.

  3. Hello Sir, Thank very much for your  helpful teachings. Today here I would like to request how to create two sidebars (right and left) in Twenty Sixteen theme WordPress. I found some coding for it in websites, but my coding knowledge is not perfect, so it can not be success. Help me Sir please please !

  4. Hi Adam, at the point you changed the size of a menu items…my question – is there option to change the size or padding between them just for one or two items in primary menu?… i have social icons on the right side and primary menu on the left, i want not to have padding between social icons. 🙂

  5. Excellent video Adam! I've been struggling with css, and hoping you would do something like this. Keep em coming!

    I've tried a lot of other you tubers, but you make it so easy to learn. Thanks for what you do!!!

  6. Thanks for another great video Adam! I'm currently working on a new site using the WP Twenty Seventeen theme with a video header. The problem is, when you use a Youtube video in the header it doesn't allow the video to be full width. Could some css take care of that issue?

  7. Adam:

    I followed along with your tutorial. I saved my CSS and inserted in into the additional CSS. When i hit save, nothing happened. Any ideas why nothing occurred? Is there another place I should be changing the CSS using beaverbuilder for the main content, such as under CODE > CSS Code?

    Brian

  8. Wow, you are a straight beast with these videos. Amazing free training you are offering. These videos should not be free, the very least you should charge $5-$10 for your training.

  9. Good afternoon Adam, ¿the changes you make with css hero do not affect when we update, divi, woocommerce and wordpress, as with the childtheme that serves not to modify the code that we set? Great video.

  10. Hello, I tried adding firebug to firefox, but I saw a notice that the extension isn't being maintained or developed any longer and it was suggested to use firefox built-in devtools instead, so I backed away from that one. Then I installed firebug lite for chrome, but there is a message in the box that says "results may be inaccurate because some stylesheets couldn't be loaded due to access restrictions." I'm using storefront theme for woocommerce, but it doesn't have any font or size options without adding one of their extensions. I'm trying to change the logo font and size in the header.

    Thank you for the tutorials. They are helping me get over the fear of not knowing what to do or how to do it.

  11. Hi Adam, Great tutorial. Nevertheless 2 Questions :
    Question 1 :
    Does an update of a 1. theme, 2. woocommerce or 3. wordpress overwrite the "Additional CSS" or does the extra code in Additional CSS stays.
    Question 2 :
    Is a child theme still important and why ?
    Because if Additional CSS stays, why bother about a child theme (sorry i am a non-tecchie)

  12. Thanks for the great tutorial, Adam! I'm pretty good with CSS and am comfortable editing through the WordPress customizer. I definitely concur, however, that CSS Hero is a major time saver!

    When deploying with client sites, is there a way to lock it down so clients can't go it and edit?

  13. another great video from you, i appreciate it, thx.
    just was wandering what advantage fire fox has over google for inspecting the page. thx again

  14. First of all your content is amazing!!
    1) Will the custom CSS on the left side of your screen disappear if my theme is updated?
    2) I used Firebug Lite, I click on Inspect, but I don't really see any proper CSS codes on the right since there is a note below saying "The results here may be inaccurate because some stylesheets could not be loaded due to access restrictions. more…" What do I do here?

  15. Great stuff. I've been doing everything manual but CSS Hero looks great. Although, I heard it slows down the website. Is that true?

  16. firebug only shows the css style code where it says css next to HTML in firebug over other websites. Doesn't show anything under style on the right box as it does for yours. Im checking another website by the way. But what do you thing could be the reason?

  17. your tutorial are cool. luckily for me I learnt HTML, CSS, PHP and MYSQL first before coming to WordPress. good job you are doing sir

  18. Hi Adam! Thank for so useful information. CSS Hero is amazing tool for WordPress. I've bought it by your link and very greatful <3 but I have one problem which I can't resolve. I edit elements with Edit Only This option, but new setting broke previous. And I'm desparetely need to solve this problem. Can you give me some advice? So thank you <3

  19. Hi Adam, thanks for this video.
    i want to ask U if U know a solution to do a responsive flex grid in WP?
    is it possible to do this website likebelow in wordpress? http://dacdavynguyen.com/

  20. Hello adam very educative video. I am using astra free theme with elementor but i want to make my header transparent. How do i do that?

  21. Hi Adam. Another great video. Like you pointed out, I am really struggling to target a specific element – even with firebug. I'm trying to change the behavior of a link on hover. I'm using Elementor Pro and GP Premium. I used the following code in the custom css box to change the font to italic on hover: a:hover {font-style: italic;} but that changes the behavior of every link on the page. When I use firebug, there are like 50 lines off css, none of which I recognize as the right element to target. I had to use the following code to create the link: <a style="color: white;" href="http://test1.rgsci.com/contact/">Engage Us</a>. No problem there. But I had to force the color to get around GP's tendency to set all the link colors. So, how do I target just the link and change the color on hover without affecting the rest of the page? Any help would be appreciated. Thanks.

  22. That's another smashing tutorial of yours Adam. Many thanks. We really do learn a lot with you, especially WP newbies like me.
    Now is there a way to know Elementor's selectors names, I mean does Elementor have some css style sheet ?. Hope that's not a dumb question 🙂

  23. great video

    quick question

    i have a site i made with divi can everything you showed in video be applied?

    i have been trying to move some text after watching all of this video i still cannot get it to move even using css

    when i posted in ie text-align: center;

    doesnt do anything

  24. Hi Adam, that is so much for sharing! I was wondering if editing the CSS through the child theme would maintain the changes even when the child theme updates? And similar question with CSS hero, will that maintain all your changes even if the child theme updates?
    Thanks!

  25. I wanna edit css of my site but I am not able to. While inspecting I see the code
    element.style {
    max-width: 100%;
    height: auto;
    }
    i wanted ti replace it with the following-
    element.style {
    border-radius:50%;
    max-width: 25%;
    height: auto;
    }
    Please how do i do this ?

  26. dude you still rock i learn so much from your vids – i have watched many more than once – this is GOLD – keep it up Adam

  27. Hi sir,

    it is good tutorial. However, when using Crome firebug to target CSS style, some of them cannot be changed at all:

    1. i can see it is changed when changing css on crome, but when i upload that style to the server or custom style, it wont be changed
    2. lots of time i cannot see a style is changed after targeting and changing it using firebug on crome.

    Do you know what the issues are? or what the best way to get theme changed correctly?

    Cheers
    Daro

  28. Hey, I'm having an issue uploading the Additional CSS text. Because it starts with element.style { , I'm assuming I'm missing some identifying classes. How do I find these so I can specify which element I'm modifying? Any help will be greatly appreciated! (My site is with WP WooCommerce and I'm using Firebug Lite to inspect)

  29. Did they change firebug into something else?? I just looked it up and it said on their website "bye, bye firebug in 2017!" Then I went to try and download it but it said this "This add-on is not compatible with your version of Firefox."

  30. I am not able to download firebug for Chrome. It is not possible to click the buttom. Is it no longer available?

  31. thank you for this video, I have problem with my website which does have save button or publish button in customize, if I make any changes I am unable to save the changes due to this issue, Please can you help me out to get save or publish button in.
    thanks

  32. i just subscibed! but i have one question. when i click on inspect element, the navigation screen has a different layout display then yours. yours looks more simple, while mine looks more complex. how can i get that simple display layout?

  33. can you please answer this? can I just install the plug in then after Im done customizing, i disable it? also I was wondering what if there are updates of the theme? will this overwrite our css code ?

  34. Hi Adam, thank you for this awesome and easy to follow explanation. Do you have a video which explains how to make changes only to the page you are working on?

  35. Apparently there is some hidden css in my theme that i need to edit. I just need to change some text. How do I show this hidden code so I can edit it to make changes to the website? 'overflow:hidden' is what I see in the code

  36. I am currently watching this tutorial. I google for Firebug but I read it is defunct or not working properly anymore. Is there an alternative we should use now?

  37. Not sure if you will reply this 🙁
    I have big white space under my header image / pic …. I tried everything it didn't remove …so my about page looks weird just the header with all the menu and then blank white space till the bottom that's where I could add other blocks

    Plz help

  38. Thank you Adam. It was very helpful but one question. Why your video is not in 1080p?!
    I used to watch them in 1080p because some elements is not clear in 720p. Sorry for grumbling but you know I've learned so much from you.
    I'm grateful

  39. Great video, but is this the only way? To cascade over the previous classes? How do I change the CSS properties in the original documents themselves?

LEAVE A REPLY

Please enter your comment!
Please enter your name here