WEBVTT

00:00:07.280 --> 00:00:11.350
In this video we're going to learn how to add more customization to our Web sites.

00:00:11.580 --> 00:00:19.620
And this time using C Ss So we'd like to delete the top bar where we see sites admin logout.

00:00:20.090 --> 00:00:26.130
OK I also would like to delete this bar over here so we do this.

00:00:26.130 --> 00:00:35.820
We are going to go to our dashboard and this time we are going to go to appearance and theme options

00:00:38.880 --> 00:00:44.190
and then we can go to custom synapsis.

00:00:45.360 --> 00:00:45.750
OK

00:00:49.140 --> 00:00:58.360
so basically we are going to add some CSA styling so that we hide these ASML elements.

00:01:00.270 --> 00:01:05.280
So first of all we need to see how in the code these are identified.

00:01:05.350 --> 00:01:05.760
OK.

00:01:05.820 --> 00:01:08.890
Are they identified using an ID or a class.

00:01:08.990 --> 00:01:13.660
And they're going to use that idea or class to style this and the display.

00:01:13.670 --> 00:01:15.040
None.

00:01:15.980 --> 00:01:16.920
OK.

00:01:17.760 --> 00:01:24.080
So let's go to the Web sites and let's click right and go to inspects elements.

00:01:24.840 --> 00:01:30.900
So let's look for the ASML elements corresponding to the spot.

00:01:31.800 --> 00:01:36.200
So if we look from the top and we keep going

00:01:40.730 --> 00:01:46.680
we can see that's the div of the head at top corresponds to the top bar.

00:01:46.830 --> 00:01:47.240
OK.

00:01:47.460 --> 00:01:49.020
So let's get the ID of the Stiv

00:01:57.610 --> 00:01:58.610
Capades.

00:01:58.650 --> 00:02:00.950
Now let's go to our customers he says.

00:02:01.030 --> 00:02:02.770
So we're going to use this ID.

00:02:03.310 --> 00:02:07.920
So we need the number sign for by the ID and we are going to style this

00:02:10.500 --> 00:02:16.720
using the display property and we are going to say that to not.

00:02:17.820 --> 00:02:18.760
OK.

00:02:19.200 --> 00:02:20.620
So let's save.

00:02:21.440 --> 00:02:30.780
And now if we go back to our page and refresh then you can see that the bar disappeared.

00:02:31.550 --> 00:02:33.880
All right OK.

00:02:34.060 --> 00:02:35.940
So it is do the same thing for this bar.

00:02:35.940 --> 00:02:39.370
So if we click rights and go to inspects elements.

00:02:39.950 --> 00:02:43.780
So let's look for these S.M. elements.

00:02:45.660 --> 00:02:46.260
So

00:02:49.320 --> 00:02:50.280
if we keep going

00:02:50.310 --> 00:02:56.350
.

00:03:02.190 --> 00:03:07.400
Let's open this thing and it looks like is this one.

00:03:07.680 --> 00:03:10.360
So Page Title Rapa.

00:03:10.880 --> 00:03:11.500
OK.

00:03:11.700 --> 00:03:12.260
So let's.

00:03:12.390 --> 00:03:13.790
So it's the it's a glass.

00:03:13.800 --> 00:03:21.300
So it copy this class and let's go back to our customers here says they're going to add another line

00:03:21.310 --> 00:03:21.370
.

00:03:21.420 --> 00:03:28.260
So dot followed by the last name and we are going to it as well using the display property and are going

00:03:28.260 --> 00:03:29.440
to set it on.

00:03:29.880 --> 00:03:40.980
So if we save that and refresh the page then our bar disappeared.

00:03:41.540 --> 00:03:43.360
OK.

00:03:44.520 --> 00:03:50.740
So you can style any H.M. elements inside the page using the same way.

00:03:50.970 --> 00:03:58.830
So you just identify the elements using its Klesko ID and then s.c.s hairstyling you would like to have

00:03:59.100 --> 00:04:00.730
in the custom VSS.

00:04:01.360 --> 00:04:01.600
OK

00:04:01.630 --> 00:04:09.400
.