How to Style Wordpress using Firebug & Custom CSS #Best Education Page #Online Earning

hi everybody it's alex here for WP eagle

calm and i just wanted to do a follow up

video to my last video which was

installing a twitter feed on to your

wordpress blog and we installed a

plug-in and got the feed on there but it

didn't look too great so I'm going to go

through very quickly using Firebug to

style areas of your WordPress blog I'm

going to try and keep it as simple as

possible and we're gonna go back and

style that and plugging that I stored in

the last video I'll add a link to that

video if you haven't seen it so let's

begin the first thing you need to do is

install the extension Firebug now this

is for Firefox so if you've got firefox

web-browser you're going to need to go

and download it such as Google Firefox

it's all the browser then Google Firebug

and install that too into your browser

and once you've done that you'll get a

little button up here what this allows

you to do is inspect a website when

you're looking at it and actually look

at the code and even make changes on the

fly so you can see what effect they have

so let's get started on styling up that

widget so if I go back to the test site

which is it test WP go calm if you want

to take a look and here's the Twitter

widget here now you can see I've already

got fired by great but I'll close it

let's just close it so you cuz here i

put it to open it you just click this

button up here and you get a panel down

there which we'll look at in a second so

yeah I've got this Twitter feed which is

great which is all working in that but

it just looks like a big mess of text at

the moment and I think the main reason

for that is that there's no spacing

between each tweet that's a tweet there

and then the next tweet is here and

there's no clear spacing so what we need

to do is add a little bit of padding

padding is a CSS attribute I believe and

it kind of adds a bit of space around

the side of whatever you want to put it

around so the first thing we need to do

is fire at Firebug which we done by

clicking on the icon now if you go down

here you get this a little inspector

tool i think it's called probably a

little arrow with a thing and then you

can start highlighting areas of a

website see how it's just highlighting

different element to the site and then

down here it then brings up the actual

code and the start

was over here so if we come over and we

click on and on a tweet you see that I

think that's a whole tweet so if I click

that it's going to bring up the code for

that and there we go and there's no

actual Styles applied by look of it

because there's nothing over here with

Twitter on it so we're going to need to

create yourself going to right click

over here and click Add rule and it

creates a little bit of CSS for us there

and we can start to add our different

attributes within their so as say we

want to add some padding now probably

just adding some padding at the bottom

so the padding atras he as a start to

type it gives me some suggestions what

I'm going to do is go for padding bottom

so it's just going to add it to the

bottom of each one and then it's in

pixels so let's start with 10 PX and now

we can see straight away that there's a

little bit of space and it's already

starting to look better so then we can

obviously make it may be a little bit

more space let split up to 15 yeah

that's looking good so now we need to

actually apply it for real because this

is just a test and it's not actually

doing any real change the website is

just for us to play around with so we

need to do is copy this into your

clipboard so copy rule declaration and

then you need to log into your WordPress

dashboard now hopefully you've got a

theme that has custom CSS kind of built

into it if it doesn't then that's

probably another video to be fair

because we need to create something but

luckily the thing that I'm using and

most good premium themes do include it

so I looked into the back end here I'm

going to go into my theme settings I

that would be different depending on the

theme you're using this site is using

propulsion so under propulsion we're

going to theme options and then under

styling on this particular theme if I

scroll down there's this box here which

has quick CSS the only thing I put in

here is going to be applied to the

website so I've got what I just copied

from fire bug in my clipboard oh if I

right click and select paste there it is

so before I Save Changes I'm just going

to refresh this page in a closed Firebug

and refresh just so that we can see that

you know if it's back ties it was and

then if I go here and click Save Changes

all done and then if we come here and

refresh hopefully that padding has been

applied simple as that there we go that

looks better I'm going to conclude the

tutorial here just going to keep it

short because there is a hole or see a

whole load of different CSS attributes

you could apply and you know that would

take all day to go through there but

just to give you a you know a quick

example before I go if I select that

element again there's I think it's

really there I could add something else

so maybe you know you want to make the

font bigger let's go font size a lot of

the CSS things are quite straightforward

and if you can't think of what you need

to do then just google it and I'm sure

you'll find what you need so if we put

the font size we can maybe make it

really big and make it like 34 and there

we go all it looks a bit kind of weird

because the line spacing is out so you

could add another one which is line

height and make that bigger looks better

boxy that font way too big for that area

but you get the idea I hope you found

that useful if you got any questions

please post in the coins and I'll see

subscribe like all the rest of it if you

if you like what I'm doing and I'll see

you soon

#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