WORDPRESS CUSTOM CSS TUTORIAL - CHANGE STUFF! #Best Education Page #Online Earning

in this video I'm gonna be showing you

how to use custom CSS with WordPress

custom CSS is particularly useful if you

want to change an element on your theme

could be a font size could be a color

and there isn't actually an option to do

that within the theme settings so with

custom CSS you can override all that and

you can basically do your own thing now

this is a question that I get asked a

lot within the live streams and in the

comments so I thought it's about time I

did a video on it so let's go

hello it's Alex here from WP eagle hope

you're all well thank you very much for

watching now if you're new here hello

welcome good to see you why not click on

the subscribe button I would love to

have you as a subscriber

just click on that button down there and

be sure to click the bell to be notified

when I upload new videos tend to do it

every single week they're all around

WordPress and affiliate marketing and

all that kind of good stuff so I think

you're gonna like them do it now one

other thing before we get into the

custom CSS stuff go check out WP

e-commerce my website it's full of

WordPress stuff I'm talking about

articles videos infographics tutorials

and some WP eagle merchandise which at

the moment is just t-shirts but there's

gonna be some other real cool stuff soon

so yeah go check it out so custom CSS

well that sounds techy and complicated

doesn't it well it's not actually that

bad I've learned how to use custom CSS

all by myself I never been on a course

or anything like that and I've just

generally kind of hacked my way around

WordPress websites for a good few years

now and I'm able to get by with a bit of

custom CSS so I'm gonna share with you

what I do and how I do it I mean it may

not be the the right way of doing it all

the you know whatever correct way that a

proper developer would do it but you

know it works for me I'm sure it's gonna

work for you it's not that hard and yeah

I'm gonna share with you a few CSS

attributes properties I don't know if I

don't know what they're called useful

things that I use like font size colors

hiding stuff adding margin adding

padding that kind of thing so I'm just

going to share with you the ones that I

use a lot of the time if there's

something you're looking to do and I

haven't mentioned it then leave a

comment below and I'll do my best to

reply

hey I might even make a video about it

so yeah do that and I'll I will read

them all honestly I do read all the

comments that I get on channel whether I

reply or not depends how much time I got

but hey what I'm gonna do now is I'm

gonna get on the computer and I'm gonna

hack around with a few websites show you

some custom CSS I think you're gonna

like it let's go we're gonna add some

custom CSS to this website regulars on

the channel will recognize it it's bow

well tech

and find out about our tech code UK is

one of my Amazon affiliate websites that

I created in a previous video tutorial

you find a link to a tutorial in the

description of this video if you want to

go and build one yourself

so anyway let's scroll down let's find

an element that we could play around

with all the heading here looks pretty

good seventh week with this maybe we can

make it Center we could remove this

dotted line I sound like a good place to

start so in order to play around with

the CSS and create some custom CSS the

best way to do it is with the inspect

function we can get by right clicking

choosing inspect within Google Chrome so

you are gonna need Google Chrome in

order to follow this tutorial so if you

haven't got that pause this video now

and go and find Google Chrome I'm sure

you'll find that if you go to google and

type in chrome download it and install

it when you fire up the inspect tool you

get this panel down the bottom the left

hand side we've got the code of the page

right hand side we've got the CSS that's

being applied to that code so basically

when it comes to web design you've got

the HTML code which does all like the

layout and all the content all that kind

of stuff layout to a certain degree how

much I should say and all the styling

the colors the fonts what kind of stuff

and layout to be fair this kind of just

puts things in order but you can't move

stuff around with CSS generally all the

look and feel is done by CSS and the

content and other miss mobs is done with

the HTML on the left here

so to select an element of the page we

want to have a play around with we need

to click on this tool here which says

select an element which is kind of handy

it's a little square with a little

pointer in it now once we've clicked on

that it allows us to select and

highlight areas on the page so let's

play around with this heading let's give

it a click and see it's highlighted it

there and left hand panel well right

hand side we've got the CSS that's being

applied to it so we can scroll down and

we can see that there's some things

going on here so this particular

attribute dot the contents space h1 is

setting the color now colors and things

you can set within the fie motions on

Kingdom so I'm not gonna worry too much

about colors today I'm going to do some

other stuff instead let's start by

removing this dotted bit of border that

we got and I can see that here you see

that border - bottom then it's got the

width which is one doctor sorry which is

1px which means one pixel you see the

style is dashed and the color is there

which is a color code and you can get

these color codes just to search for hex

color codes in Google or far out

Photoshop or something like that and you

better copy and paste them out there

we've CSS you can actually just type in

like the name of colors so I could like

just type in blue

and we can see the

changed to blue now any changes that I

make down here are only temporary soon

as i refresh the page and they'll

disappear no one else will be able to

see him in order to commit them as a

permanent change we are going to need to

copy and paste the code into the theme

settings which I'll get to in a second

so if we wanted to remove this border

bottom completely just take that out

type in a word and on it's gone if we

wanted to make it really fat we could

type in like four pics but then if you

wanted it to be a solid line we type in

the word solid and wanted it to be red

your type in a word rent there we go

look at that so to commit this to the

settings of the theme and make it a

permanent change I'm gonna do is I'm

gonna copy all of this and if I'm

hearing it customized I'll open it in a

new tab just so that we can kind of keep

this going I have to keep going back and

forth in and out and all that kind of

stuff

then if we scroll down and find

additional CSS

now in here I've already got a whole

other code because I've been doing some

custom CSS and in fact in the original

tutorial I do some custom CSS you might

not have anything in here in which case

you can just start at the top if you do

have some stuff in here then just scroll

down to the bottom just enter to start

and your liner then just paste it in

now as I only changed the border I can

probably remove all the rest because

that's just kind of duplicating there we

go

let's click publish

and that's all done let's go back let's

refresh close this for a second let's

see if that red line is still there

it is so that's there and it's standing

on every single heading on the same page

I look too bad actually

Brittany orange if I'm honest but I

so let's fire up the inspector again I

just want to show you a few more things

we can do with this heading if we want

to

see there's our new bit of CSS she's

overriding the original CSS he has got

line for it now but let's have a look at

these other attributes that it's cooked

going on so it's got letter spacing

that's an interesting one to know about

so that's the space between letters

which can be measured in either pixels

or this e/m measurement which quite got

my head around what an e/m is but I'm

sure if you google it you can find out

and find a description of it which will

be way better them than me trying to

describe it but we can press something

down on our keyboard and we can adjust

this so you know that's really spaced

out on letters and spaced amount even

more so you might want to do that you

can actually change this to a pixel

number so one px would be the pixel vani

and again we can make that go up and

down if we wanted to commit this because

I've already got this doc ad featured h1

in my custom CSS I can just take this

don't you take the whole thing

and then drop that in it needs to go

between the little brackets so about

theirs right so you were still with that

bracket at the end and polish

we've got this margin bottom so that's

the space at the bottom

so unless she seemed to

we can have negative margin numbers if

once I go negative it does stuff it's

pulling the rest of the content up you

know I want to adjust that we've got

text transform which is making the whole

thing up a case we could change it to

lowercase now this font doesn't really

look that much difference between upper

and lower case of it but there you go if

you're unsure about what you can enter

for a particular attribute if you just

take out whatever is in there I've

chrome will actually suggest the

available options and you can just

choose wrong

you can even capitalize which again is

not very obvious on this particular font

we wanted to add a new attribute I'm

just going to share a couple that are

quite useful one that I like is text

aligned so text - aligned and you can

see there as I'm typing stuff in it's

suggesting other ones that you could use

but a line is fine and we can type in

Center and there we go it's centered

looking good another one that I use now

and again let me just click here and do

a little couple of tabs great new line

is text decoration that's it there so

you know you can underline you can do a

line through like it's crossed out all

kinds of cool things with text

decorations so that one might be useful

for you there we go I think that's

that's about it for that heading and

it's just don't need to call people to

mama doing let's just copy the bits that

I changed so

text transform I did do capitalize but

hasn't made much difference but again I

said it why not so copy that into here

place that in and finally was the text

align look I'll do the line through for

now he's fine as it is

there we go there we go that's all

published you never look there we go so

let me just jump on to another site

quickly and show you a couple other

things I'm gonna go over to beer shirts

which is running storefront theme just

to show you that it's pretty much the

same on every theme and yeah we'll just

do some other stuff hey let's go

so here's beer shirts as a set of

running storefront theme you'll find a

link in the description to a tutorial or

now you can make a site like this if

you'd like so let's do something a

little bit more complex let's remove

this search box which is not something

that I'd actually recommend that you do

because search boxes are very useful and

every so I should have one but I don't

know if whatever reason you've gone

crazy and you want to remove this search

box this is kind of how you might do it

again right click inspect choose the

little select a tool come up and find

the box let's give it a click now we can

see this is made up of a number of

elements generally you're gonna want to

head up towards the top you can see that

like this is the first one that div

class site search for then within that

we've got this and then within that

we've got the form then within the form

we've got a label and then within or

maybe not within the label but

definitely within the form we've got the

input and then we've got the button and

then some other input stuff generally a

table of CSS you gonna want to kind of

highlight the whole thing

and I think that's going to be this one

here this live class site search

so to get rid of it I could just create

a new bit of code by clicking on the

plus dot Site Search tab down from your

line type in display this is a very

useful CSS that's route because I say it

helps you remove stuff so display and

then it's given us some options and what

I want is none well there we go it's

gone perfect

so now let's copy this go to customize

again

go into additional CSS down to the

bottom create a new line paste it in

click publish

it's refreshing to see if that's worked

it has so that's gone but this is kind

of floating around in the middle isn't

it it should be over here that look much

better so let's do that with some CSS

too so I'm just gonna oh I think I

missed it let's go back to the tool

there we go now there I think I've just

highlighted that one particular link to

about us and so generally you want to

kind of go up to the top and select the

whole thing and it looks like I probably

want to go out this is this is where I

wanna be so I can see that there's some

attributes over here that we can tweak

there's the float attribute which

basically as I said it was floating

around as it's floating around to the

left we want to float it around to the

right we'll just type right in there

that's moved it over it's got a bit of

margin on the right there let's just get

rid of that because I want to be right

up against the edge but let's just put

zero in there and it's still not

actually line that way we look look you

see that just not quite lined up so we

can put some negative numbers in here

let's knock that down and pressing the

down arrow on my keyboard below let's

knock it right down to the last two

fights gonna fit and it's gonna use my

eye that looks about right it's perfect

now so let's copy all of this go back

into customize

paste it in we didn't actually adjust

the width so I'm going to take that out

click publish oh and it says there's a

problem which is kind of handy stops you

from breaking the sight actually the

problem is is there's not enough

brackets this @media thing at the top is

to do a responsive design and basically

you can set different CSS attributes for

different screen sizes so that's how

responsive design comes about and you

know you can set different shapes and

sizes and colors and stuff on mobile

screens iPad screens and big screens

whatever you like but the problem of the

CSS is that directly after doing one of

these kind of app media command type

things you need a bracket one of those

pointy brackets

and those brackets have to contain all

the stuff you want to do for that screen

size so let's end with another bracket

and that should fix it that makes sense

so we got this X root for whatever

reason is just targeting screens that

are bigger than 7 6 8 bits also it won't

work on mobiles because I think they're

small and laptop my head but I'm not

going to go too much into responsive

just hame in this video it's it's too

much talked about and this video would

yet go off on a tangent and be really

long so we're not going to do that

but yes so it's targeting just screens

that are bigger than this and that's why

we need to have these brackets that

contains I'll CSS I could publish

there we go looking good now I didn't

actually want to remove the search box I

said that'd be a crazy thing to do so if

I wanted to undo these changes just come

in here delete that out and we're all

back to as we were perfect

I sent him we're all done so that brings

us the end of this video has that helped

that made it clearer or was that just

made it even more confusing let me know

in the comments if you've been able to

use some custom CSS if you've been able

to do what you wanted to do with it

and so I'd love to hear from you and I

do read all the comments that I get if

this video was useful do click the like

button really helps me out if you're not

already subscribed then I think you

should you can do so by clicking on the

Eagle up there make sure you click the

bell if you want to watch some more

videos of me talking about stuff the

vlog channel is over there and here's a

couple more videos chosen specially for

you hope you enjoy them till 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