in this video I'm gonna be showing you
how to do some CSS changes to your
site its look and feel CSS stands for
cascading style sheet I think it does
anyway but you don't need to know that
so if there's an element on your site
that you want to change maybe it's a
font size some margin a bit of color and
there isn't an option to do that in the
theme options you can overwrite that we
have some custom CSS so let's get
started
[Music]
hello it's Alex here from WP eagle hope
you're a well thanks for watching
so yeah in this video I'm gonna be
working on boot boutique which is a
website I set up quite a while back now
it's an Amazon affiliate website it's
running the kingdom theme and I'm gonna
change a few colors on there just to
kind of demonstrate how custom CSS works
now you don't have to be running the
kingdom theme this should work with
pretty much any WordPress theme that has
an additional CSS in the settings or a
custom CSS bit within the theme options
which most themes do anything I found a
theme that doesn't actually have that so
you should be fine regardless of whether
you've run in Kingdom or something else
excuse me got something on my eye I'll
cut this out well maybe I won't anyway
that's enough of my face I think let's
let's get on computer and I'll show you
what I'm talking about
okay so I'm over at boot boutique which
is a website that I created in a
previous tutorial if you're not seeing
that video then I'll put a card up on
the screen now and be sure to check that
out in it I take you through building
this website from start to finish it's
pretty long so you're gonna need a bit
of time to watch it but well worth it if
you if you have got the time but anyway
so what we're gonna do today is some CSS
stuff I'm using Google Chrome as my
browser here so if you want to follow
what I'm doing exactly then I suggest
you install Google Chrome onto your
computer as well if you're not already
using it so the things I want to change
I'm just going to change a couple of
colors I think they'll be the best way
to demonstrate what what would what
we're doing here or so you can change
other attributes could be size could be
font type could be font size there's a
whole host of CSS attributes that you
can add and/or change just to a google
on CSS attributes I'm sure you'll find
some good information so the first thing
I want to do is I'm going to change the
background color on this search box its
what lovely grey and lovely light gray
just for the heck of it so I'm going to
right click I'm gonna go to inspect by
the way I've logged into the website
right now you will need to be logged in
and then I it brings up this panel down
here and then I'm gonna click on this
little arrow in a square type thing make
sure that it goes blue then I may
to kind of go around the site and on
this page and you know point at the
various different elements so this is
what I want to change this input search
things I was going to click that it's
highlighted a bit of code that does that
now if I press the little plus over here
I can add a new style rule which is what
I'm gonna be doing well turn us if we
could come down here and change that but
it's often easier just to do it this way
so I'm thinking that just press the tab
key on my computer it puts an extra
little line here and I say the attribute
I want is background color so we're
gonna start typing background and then
it gives me some of the CSS attributes
available there's background of color
the one I want I'm just going to press
tab again to move past the :
but before the semicolon and you can
type in a word if you like so you could
say black which is fine or blue wow
that's a good blue isn't it Wow or you
can enter a hex color code so you have a
little hash and then f5 is it on f5 f5
oh that's a nice gray isn't it was I
thinking of f3 f3 I can't remember I
very bad at remembering color codes oh I
like that one too let's go with that so
once you've made that change at this
point it's not permanent which is kind
of playing around on the live live
screen but if we were to refresh the
page right now we would lose all these
changes so we need to make them a little
bit more permanent and to do that I'm
gonna copy all of this to my clipboard
so I'm just going to do command C on the
Mac but if you're on a PC it would be
ctrl C on the keyboard of course you can
right-click and select copy and then I'm
gonna go into actually before I do that
let me just close this and I will just
refresh just to show that it will
disappear yes but then where we've
stored it in our clipboard so let's go
to customize
I'm using the kingdom theme but as I
think I've already said I don't know I
haven't recorded the introduction yet
this does apply to any theme really most
themes when you go into the customize
area you will find this section here
additional CSS now we've already got
some in here I think I had some dream
that you draw when I make this site but
let's add our new bit so I'm just gonna
add it at the top so I know where it is
just gonna make a bit of room and then
paste it'll take out the extra space so
there it is that's that bit and you can
see that over here it's already changed
if we click Save and publish and we can
just close this let's see we're all good
we've got a lovely grey search box isn't
that nice works well so that's that's
that let me just show you one more
example so say for example we wanted to
change the the color of these headings
and I change it to this lovely purple
color that we've got going on in on this
side so to do that I'm just gonna work
out what color this is so I'm just gonna
highlight that and I can see that it's
this one here nine four one two nine
free just gonna copy that to my pick
books I'm very lazy and I'm very bad at
remembering things as well I'm gonna go
down here click on the little square
arrow thingy again select my H ones
which is that and I'm gonna add a little
plus now this is gonna apply to all the
H ones on the site so you do have to be
a little bit careful that you're not
gonna mess stuff up and change something
you don't want to change but I think
I'll be fine let's give it a go and then
we type the word color and it's again
it's suggesting in this color the
American spelling of course there should
be a u in that word but well let it go
this time and I'm just gonna paste in
that color code that and nothing's
happened now there's probably a good
reason for that
that is because these colors are set
within the theme options I'm thinking
that might be probably the best place to
do this maybe this is a bad example that
we just pretty override adding an
important yeah I can
so I just example I let the important so
if you all making a change on your theme
in it doesn't change whatever reason you
can always add that important thing
whatever it is and it kind of overrides
it so it's a little exclamation mark
then weren't important after you know
whatever you're doing so let's go with
that let me just copy and paste this but
as I said you probably if you can change
it in the theme options you know stuff
like that then it's pretty better to do
that rather than with custom CSS and
there is a conversation here not not
many options to be fair within here and
this this is Kingdom is it no mmm
strange anyway so let's just paste that
in I'll paste it underneath my other one
that's working save and publish then I
think we're all done let's close that
so there we go obvious if you want to do
anything a little bit more advanced then
just drop me a question in the comments
below this video and I'll see if I can
help you out since this was obviously
quite a big subject to learn and there's
lots of attributes but you know once
you've mastered this little thing with
the inspector and then copying and
pasting you can generally figure out
most things so that's it that's custom
CSS hopefully you got your head around
that and you're now over to make some
adjustments to your site that you might
not been able to make before that brings
us the end of this video I hope the
pitch quality is improved I know it's on
the last couple of videos that I did I
was looking kind of pinky purpley and
I've got all these settings wrong on my
camera and I'm messing around with them
all morning so I'm hoping the picture
quality is a bit better but maybe it's
not let me know let me know what it
looks like on your screen you'll see on
everyone's screens it looks different if
you're not already subscribed I would
love you to become a member of the
WordPress Eagle family to do that just
click on the little Eagle up there and
if you click on the little bell then
you'll be the first to know when I
upload a new video I talking of videos
here is another video from the channel
it's been chosen specifically for you so
I hope you enjoy it and I do check out
my other channel which is up there so
kind of a vlog channel about all sorts
of stuff until next time bye for now
#Best Education Page #Online Earning
online earning,make money online, earn money online, online earning, online earning sites,
make money online free, online money income, earn money online free, money online, best way to earn money online, online income site, money earning websites, best online earning sites, easiest way to earn money online, earn money payment bkash, online money income site
Posts
No comments:
Post a Comment