‫Hey, what's up, guys, in a welcome back.
‫So as I gave you a hint in the previous video that we're going to be doing the page nation in this video.
‫So this is going to be done, sadly, with the CFS, because elementary itself is not giving us any
‫of the information.
‫And on basically just like at elementary is basically a builder.
‫Okay.
‫And it just allows you to change everything.
‫But sadly, with the current version that we are using right now, elementary does not give us any of
‫that particular thing to basically let you edit your pagination.
‫So all you have to do is to basically click on it.
‫And then when you go down, you can see that we have got to be the nation here.
‫But here it's just not letting us do much change, like whether we want to change a number or anything.
‫Even if you go to the style and then the page, Enation, right here, we do have the colors.
‫Okay.
‫We do have this we do have the typography.
‫We do have the whole where.
‫We do have the octave, but we do not have the background color to give it a look like it's actually
‫a button.
‫So how to make it look like it is a button and also add the Hoover effects along with that.
‫That's is what we're going to be talking about in this video.
‫Now, all you have to do is to basically go to the next video copy to see, assess, scored and displaced
‫it here.
‫But if you are more into understanding what is happening behind the cord, what is happening?
‫Because right now, after this second, I'm going to explain to you what we are going to do with our
‫C assess code here and I mean, explain to each and everything.
‫So if you're not into C, assess if you this will work with any of the beads nation and you can add
‫that.
‫So if you think that you were not in to see assess, you can just copy and paste the code from the next
‫lecture and it's going to work.
‫But let's just go and let's understand what is going to happen.
‫And I would recommend you just see this.
‫So all you have to do is to basically open up the Web site.
‫Now, once you have got into the Web site, all you have to do is now go to the all properties.
‫And now you have to look for the.
‫This right here and now you have to click.
‫Right.
‫Click on it and click inspect element and it's going to just show you that what it is.
‫So all we are gonna do, we're going to just uncheck that so that we are actually on a normal Vinda.
‫And now you can see we have got this span and in the span we've got this number right here.
‫Now, what we have to do, we have to come up here and here.
‫It says it is called the nav nav.
‫Okay.
‫So inside this nav, we have got a span.
‫And when you click on it, you can see we've got another span like so what we're talking about this
‫particular span that is inside this now.
‫OK.
‫So just keep that in mind first inside.
‫Are this pretty cool?
‫A whole element.
‫OK.
‫We have you've got this whole element inside this element.
‫We've got a nav and then we've got a span.
‫So we're going to basically Stallard the wages.
‫US come up here and let's add it.
‫So first of all, in order to select this element, the elements says that you have to write here selector.
‫So what we're gonna do, we're gonna type in here selector.
‫And now we have to add the curly braces.
‫And then we have to add anything.
‫So you can add anything.
‫You can add a background color and you can say to be red.
‫And you can see it's being applied.
‫Right.
‫So I'm going to go back.
‫And now what we have to do, we have to get the now.
‫OK.
‫We have to get the nav over here.
‫So what we will do, we will just come here and we will say that inside this selector there is now.
‫So what we will do, we will just type in here now.
‫That is that inside the selector of you've got NAV.
‫And now what we will do, we will just say that we need to add some padding.
‫So you've no body padding rate in the advanced.
‫So what we will do, we will say that we need the padding and we need the padding to be from the padding
‫top.
‫Now, what we have to do, we have to type in here, ten pixels and you can see it now just shifts from
‫the top side.
‫And you've got a little bit spacing, right.
‫So seemed like this.
‫You can even change this spatting to margin as well.
‫And you can see we've got much spacing.
‫And nothing is being affected over here because we're not using any nav in this particular element.
‫Now, once you've got it, all you can do, so you can decide whether you need it to be 10 pixels or
‫you needed to be 20 pixels and you can work with it.
‫So, first of all, we're now done with the spacing from the top.
‫So I would recommend you to at least keep it to be 30.
‫That is perfect.
‫And once you're done with that, all you have to do is now get the span.
‫So inside this.
‫Now we have got span, right.
‫So now we will break this span.
‫So what do you have to do?
‫You have to say that selector inside the selector, you've got a nav.
‫And inside the nav, we have got our span.
‫So then you have to right the curly braces.
‫And now you can move with it.
‫Right.
‫So you can even apply a background color.
‫And you can say to be red.
‫And you can see now it just applies to it.
‫So we've got our color with red over here.
‫OK.
‫And now you can see that this is not being affected.
‫And the reason for that is because.
‫The first guy over here is Brown.
‫And the second guys we've got here is basically ankle tag.
‫That is basically a this is brown and this is a.
‫So what we will do, we will just come up here and we will select this.
‫And we will copy it.
‫Now we will add a comma and then we will add this again.
‫And now we will change this band to a and I you can see that it is applied to every element that we
‫have got over here.
‫So congratulations.
‫Your first part is done.
‫You have basically got the element, this band that is basically not selected along with the NAV.
‫Along with the anchor tag, which is basically a link over here.
‫And everything is selected and it's not being applied elsewhere because we're particularly getting the
‫nav and inside this.
‫Now you're talking about the span.
‫Also, the comma says that it will be applied to this and it will be applied to this as well.
‫Also, we talking about the anchor tag as well.
‫So we have got that right.
‫So now for the color, what we will do, we will select this basically color Zillo.
‫We will go above.
‫And now we have to click on it emeny to pick the color.
‫And you can just get this color.
‫So we're going to get the color right now.
‫And now, instead of that, we have to base the color.
‫And you guys in about how to paint the color, you have to baozi color just like that.
‫And it's going to be added.
‫And you can see it is now added.
‫Right.
‫Don't worry.
‫It's kind of looking a bit ugly right now, but it will be perfect.
‫So now once you've got your thing done, then after this semicolon, you have to enter.
‫Now you have to add another thing.
‫So this time we will add padding.
‫So what we will do, we will say that we need padding.
‫Ever needed to be five pixels.
‫And now you can see how it changes this time and get changes and it's get a little bigger.
‫But what we need to do, we need to see that from panning top.
‫We need it to be a little less.
‫But from padding.
‫Right.
‫We need it to be more.
‫So what you can do is that you can say that from top.
‫We will say top and bottom.
‫We will add it to be two pixels and from right and left.
‫We will add it to be 10 pixels.
‫And you can see it's right here.
‫So from top, it's going to be two pixels and bottom and from right and left.
‫It's going to be basically 10 pixels.
‫So now you can see how it gets changes.
‫And now what you can do is that you can also add the border radius.
‫So if you go to style of any of the elements, you guys to know about the border radius, like how the
‫border radius work.
‫So what you're going to do, you're going to come up here.
‫You're going to press enter over here.
‫Now you have to type in here, border Dasch radius.
‫And now you have to type in here, 20 pixels, semicolon.
‫Now you can see how it gets changes.
‫Its get curvy a bit.
‫So we need to make it a little less than that.
‫Right.
‫So we need to make it to be even 10.
‫Or just keep it to be six pixels.
‫And now it kind of looks much perfect in a button way.
‫So this is how basically it's going to look like seem like this.
‫Now, you can even go to the content over here and indeed, pagination.
‫You can change this to previous and next as well to that the previous.
‫And next as well should be coming up right here.
‫And we will say previous.
‫And next along with the numbers.
‫Right.
‫So here should be previous.
‫Here should be next.
‫And this is how it's looking.
‫So now once you are done with that.
‫Now, what do you have to do is to just go to this style over here and in the page.
‫Enation, just change the color.
‫So what we will do, we will change the color to white so that every thing we are seeing right here
‫is visible.
‫And now what we will do, we will change the hover color to be basically this blue color that we are
‫using.
‫Right.
‫So so we're going to go in and we're going to copy these blue color.
‫And once you have copied the blue color, all you have to do is to go to the advanced sorry, these
‫style.
‫And in the page anation just added in the hover and also added in the active color.
‫So this will now tell the user.
‫OK.
‫This is basically the color that is selected and this needs to be selected.
‫OK.
‫So this is basically giving a great impact right here.
‫And that's all.
‫And now you can see that this is fully done, same like this.
‫Now what you can do is that you can even go to the advanced over here and you can work with the padding
‫a bit.
‫You can increase it to be five pixels so that it is much more bigger.
‫And it kind of looks much better.
‫Five pixels from top and bottom and 10 pixels from right and left.
‫You can even increase this to 30 into that.
‫This is much more bigger.
‫So that's all.
‫And this is how it's looking.
‫Seem like this.
‫Now, what you can do is that you can even work with these hover effects of that.
‫But we're not going to be doing that.
‫If you want to do it, just see what I'm doing.
‫OK?
‫So what you have to do is to just copy this and go down and then paste it.
‫And then what you have to do, you have to say that on hover.
‫So on hover.
‫Basically we will say that hoverboard only work on the link element.
‫So what we will do, we will just get rid of this.
‫And now we will come up to the horror.
‫So what we will do, we will say that on whole.
‫Were we just need to change the background color.
‫So what we will do?
‫We will change the background color to red.
‫So you can see.
‫Oh, basically, you have to type in here, Colon, and then you have to type in here, however, and
‫now you can see it changes to red.
‫So you can change pretty good, particularly any color you want.
‫And it's going to change in that way.
‫So let's just go in and let's change.
‫Let's change herself to a darker color that is going to be of this color.
‫So we're gonna select this color and we're going to now come up here.
‫And instead of this, we're going to piece that color.
‫And I can see how it gets changed.
‫So some like this, if you need to hover, all you have to do is to just copy this from this Guama.
‫You have to copy it till now.
‫Have a and then you have to type in Eric Colon Hauber and then you have to use this particular thing.
‫But I'm not gonna be using the hole right now.
‫So I'm going I'm gonna be keeping it to be simple like that.
‫And now you can see how it is looking.
‫It's it's giving basically a button effect.
‫So that's the code.
‫That's the code.
‫Right.
‫We're just giving the now from the top margin and then we are just getting the span and the anchor tag.
‫We're applying the background color, we're applying the padding and we're also applying the border
‫radius.
‫And it's done.
‫Now, what you can do is that you can go ahead and you can now hit update.
‫So now when you were copying the code from that particular lecture, basically in the next lecture than
‫all you had to do is to just change the background color, that's all.
‫And you will be done.
‫Okay.
‫You don't have to change it all.
‫It depends what if you're looking for any other color type?
‫Then you can use that particular color.
‫So some like this.
‫Now, what you have to do is to copy this and also make change in our location and location as well,
‫because with our location, we are using different template.
‫Right.
‫So this is right now you can see it's being applied.
‫If you click next, you will be taken to next.
‫And this is how it's looking.
‫Seemed like this.
‫The previous is now also linkable.
‫And the color is getting changed.
‫Now, let's go to let's move up to the location page.
‫So I'm going to be opening up a page that has.
‫The Baoji nation.
‫So let's see which of the page has the page anation.
‫So this has a page anation right in Dubai.
‫I've got more post.
‫That is why it has got the page, Enation.
‫So I'm going to click location based archive.
‫And now here you have to select this pagination.
‫Basically the property.
‫And then you have to go to the advanced.
‫And in here you have to go to the custom, see, assess.
‫And then you have to paste that and you will see that it will be effective.
‫Seemed like this.
‫You now have to go to the stylez will go to the beach anation and said this color too.
‫Right.
‫And also for the hover and active said the color to the blue, which we have right here.
‫So we're going to come up here.
‫We're going to go to the color curve.
‫We're going to pick this color.
‫We're gonna copy the code like so.
‫And we're going to hit.
‫Okay.
‫So you can even copy, like a copy, a clipboard like that.
‫And you have to paste the color here.
‫You have to come up here and based the color here and you're done.
‫And now when you will come up here, you can see this is freaking perfectly.
‫Now, what you can do, you can go ahead and you can hit update.
‫And your website is now fully dark.
‫So stay tuned, guys.
‫And Bobbye.