---Presenter: Jesse WebbSubject: How to Apply a Custom HTML CSS Design to a CEF Skin
(Note: there is only a part 1)Duration: 00:31:05---00:00:04.980 --> 00:00:11.860
Hello, this is a training
on applying a custom CSS00:00:11.860 --> 00:00:17.364
design to a new seat
new DNS skin.00:00:17.880 --> 00:00:23.798
Scenario is you're a. You're a
front end developer for clarity00:00:23.798 --> 00:00:29.716
and it's your task to apply a
vendor created CSS dealing00:00:29.716 --> 00:00:34.558
design to our front end
template. We first you're00:00:34.558 --> 00:00:40.476
essentially going to just be
given a folder like this markup00:00:40.476 --> 00:00:46.932
finalized so we know a few
things we're going to do. First00:00:46.932 --> 00:00:51.580
will just. We have this for for
soon when we need it.00:00:52.090 --> 00:00:54.757
But we're going to create a new.00:00:55.520 --> 00:01:00.389
Copy of the clarity skin named
differently for our.00:01:01.320 --> 00:01:05.020
For our starting position.00:01:06.460 --> 00:01:09.160
We know the company is called.00:01:09.680 --> 00:01:13.400
Ida. So what we're going to00:01:13.400 --> 00:01:16.230
do is. In our.00:01:16.790 --> 00:01:22.992
It might be easiest to do it
just like this right in our file00:01:22.992 --> 00:01:28.751
browser. We're going to go to
sev away UI skins and we'll go00:01:28.751 --> 00:01:34.067
ahead and just control C Control
V. Just copy the clarity folder.00:01:34.810 --> 00:01:38.068
We will. Try not to copy
it twice.00:01:40.610 --> 00:01:46.022
Perfect, and since we know that
our company is called ID a,00:01:46.022 --> 00:01:48.277
we'll just rename to that.00:01:48.280 --> 00:01:52.276
Now, as we, as you already know,
from setting up the local.00:01:52.920 --> 00:01:59.822
CNN can't read from this folder
unless we give it a a trick. We00:01:59.822 --> 00:02:04.259
will. We will go to our
Administrator Command prompt.00:02:05.250 --> 00:02:08.160
And in our.00:02:08.300 --> 00:02:12.557
In our Administrator Command
prompt navigated to our websites00:02:12.557 --> 00:02:18.233
web 9 portals default skins
folder we will run a make or00:02:18.233 --> 00:02:22.017
make link command make link
forward Slash D.00:02:22.870 --> 00:02:27.215
Ida in quotes and the second
argument would be the link00:02:27.215 --> 00:02:32.350
itself to our new ID, a folder,
and we've made a symbolic link00:02:32.350 --> 00:02:38.642
that's perfect. Still we have
our website that is loaded from00:02:38.642 --> 00:02:43.304
our DN database that doesn't
know that we've switched00:02:43.304 --> 00:02:45.894
kidskins yet. Doesn't know we00:02:45.894 --> 00:02:52.900
want to. We can mass change
all of the pages or tabs00:02:52.900 --> 00:02:58.112
indianen. To our new skin, if we
select from our.00:02:59.400 --> 00:03:03.840
From our DNN database. If we
select our tab name and skin00:03:03.840 --> 00:03:07.170
source from the tabs table where
you can see.00:03:07.790 --> 00:03:13.510
These are all the names or the
different pages we have in DN00:03:13.510 --> 00:03:19.670
and the source of their their
skin file, so a quick way we can00:03:19.670 --> 00:03:24.070
just update that will be to
update the dodo tabs.00:03:24.950 --> 00:03:31.550
Table and set these skin source
to replace itself. Skin source00:03:31.550 --> 00:03:37.550
as the first argument. In
replace we will change forward00:03:37.550 --> 00:03:42.350
forward slash clarity slash 2
slash Ida Slash.00:03:42.860 --> 00:03:49.386
And just to make sure we've got
that correct, will will have it00:03:49.386 --> 00:03:55.912
all select again and that looks
great. So now our DN database is00:03:55.912 --> 00:04:01.916
set to. Is set essentially to
follow our newly created folder?00:04:01.916 --> 00:04:08.078
More things we need to do now
that we have our newly created00:04:08.078 --> 00:04:09.974
folder here in our.00:04:10.540 --> 00:04:14.908
In our workplace,
our workspace for.00:04:17.490 --> 00:04:23.236
Visual Studio code. We will see
we have our new folder. It's all00:04:23.236 --> 00:04:28.098
this. It's that exact duplicate
duplicate copy of clarity so we00:04:28.098 --> 00:04:33.402
know that in our includes folder
we have our header and footer.00:04:34.080 --> 00:04:40.353
In these It's give it's
pulling our exact script00:04:40.353 --> 00:04:42.420
links and and.00:04:43.550 --> 00:04:47.410
CSS links sometimes from.00:04:47.950 --> 00:04:51.346
The full real00:04:51.346 --> 00:04:56.192
direct. Directory itself, so you
will see sometimes portals,00:04:56.192 --> 00:05:00.832
default skins, clarity and will
just want to replace those00:05:00.832 --> 00:05:05.936
throughout the file with our
idea that we've just made same00:05:05.936 --> 00:05:10.576
over here in footer. Easy to
look for. Forward slash,00:05:10.576 --> 00:05:17.320
clarity. Skins that clarity and
we'll just replace these with ID00:05:17.320 --> 00:05:23.634
a perfect after making database
and skin file changes for DNN,00:05:23.634 --> 00:05:26.504
you need to restart the00:05:26.504 --> 00:05:32.290
application. Real fast way to do
that without needing to mess00:05:32.290 --> 00:05:35.074
with IIS is through the task00:05:35.074 --> 00:05:38.110
manager. You can go straight to00:05:38.110 --> 00:05:41.456
the details page. And kill the00:05:41.456 --> 00:05:45.550
application. Right from there
you will look for00:05:45.550 --> 00:05:50.470
w3wpwhichis.net and we looked
for the app pool that we set for00:05:50.470 --> 00:05:52.520
DN and just killed it.00:05:53.340 --> 00:05:59.114
Refresh here. And we should be
able to see verify that.00:05:59.970 --> 00:06:01.710
This page that we are on.00:06:02.650 --> 00:06:05.150
Is the ID a skin?00:06:06.530 --> 00:06:09.806
We'll do that by going to the
edit and then settings, then00:06:09.806 --> 00:06:12.536
advanced and appearance, and
Yep, sure enough, our page theme00:06:12.536 --> 00:06:16.631
is idea and we know it's going
to be that way for all of them00:06:16.631 --> 00:06:18.269
because we did it through the00:06:18.269 --> 00:06:20.630
database. Alright, so.00:06:21.790 --> 00:06:23.806
General housekeeping taken care00:06:23.806 --> 00:06:30.103
of. We it's time to
look at the file the.00:06:31.290 --> 00:06:33.620
Markdown files you were given.00:06:34.170 --> 00:06:39.129
Very likely again, just a folder
like called markup.00:06:39.670 --> 00:06:44.477
So we'll look inside and we've
gotten a path for our.00:06:45.560 --> 00:06:52.688
4 hour it looks like a
bunch of HTML files, CSS and00:06:52.688 --> 00:06:59.084
JavaScript. So we need to just
get a look of what this looks00:06:59.084 --> 00:07:00.380
like itself before.00:07:01.060 --> 00:07:02.100
We died into it.00:07:02.990 --> 00:07:05.258
So we're gonna open that up in00:07:05.258 --> 00:07:07.740
Visual Studio Code. Yeah.00:07:08.370 --> 00:07:10.008
Look up path.00:07:11.460 --> 00:07:15.128
And we just want to look at.00:07:15.720 --> 00:07:20.829
What we have available to us, we
noticed a good place to get00:07:20.829 --> 00:07:25.152
would be possibly index so it's
just a rather large, complicated00:07:25.152 --> 00:07:30.261
HTML file. Might be easier to
open it in browser and look that00:07:30.261 --> 00:07:35.138
way. So this is essentially what
our markup is now. This will be.00:07:35.820 --> 00:07:39.792
Real functionality, but that's
the idea is to style our app to00:07:39.792 --> 00:07:44.095
look this way. So we have this
will put it on the side.00:07:44.910 --> 00:07:50.970
A great place to start. Again,
the would be the index file.00:07:51.590 --> 00:07:56.225
Because we know that's all
JavaScript and CSS from00:07:56.225 --> 00:07:58.718
somewhere. So we can look.00:08:00.450 --> 00:08:05.230
Essentially everywhere that it's
pulling in CSS seems to be00:08:05.230 --> 00:08:10.010
rather small location. Here it's
got style CSS and then00:08:10.010 --> 00:08:12.470
bootstrap. These are.00:08:13.110 --> 00:08:16.230
We're going to have our own
implementation of bootstrap, so00:08:16.230 --> 00:08:19.974
we really just care about this.
Whole style. CSS will take a00:08:19.974 --> 00:08:23.406
look at that, and it's it's
rather large, so we'll just.00:08:23.406 --> 00:08:25.278
We're just going to copy it00:08:25.278 --> 00:08:29.234
over. Will copy that and bring
it to our new skin that we made.00:08:29.760 --> 00:08:32.735
And put it in the CSS folder.00:08:33.620 --> 00:08:36.916
I like to put it just right next00:08:36.916 --> 00:08:43.880
to. Clarity dot dot CSS and it's
good to rename this to vendor.00:08:44.470 --> 00:08:47.140
As it's a third party.00:08:47.790 --> 00:08:49.170
Purchase design.00:08:50.840 --> 00:08:54.420
So again, in our header where
we're loading our regular00:08:54.420 --> 00:08:58.716
clarity CSS in the same way,
we're going to want to load.00:08:59.760 --> 00:09:06.339
Our. Our.
Entered on CSS.00:09:08.100 --> 00:09:11.116
Everywhere that it's being
loaded, for example here.00:09:12.180 --> 00:09:17.520
We'll just go ahead and copy
that, put it right beneath and.00:09:19.270 --> 00:09:23.688
****** And we're pulling in that
are the vendor CSS.00:09:24.380 --> 00:09:30.176
Good time to take a look back at
your website and see what this00:09:30.176 --> 00:09:33.766
has. See what this is
changed potentially.00:09:35.500 --> 00:09:41.954
Not a lot will make sure in our
sources panel for the page that00:09:41.954 --> 00:09:44.259
we are indeed getting our.00:09:46.810 --> 00:09:52.120
Yes, so actually it's
interesting. It did not load00:09:52.120 --> 00:09:58.020
skins. ID a CSS vendor should
have loaded for us.00:09:58.650 --> 00:10:02.070
Where if we put it, I see that
there are another thing.00:10:02.500 --> 00:10:07.408
Ideas CSS vendor and
we put.00:10:08.510 --> 00:10:11.610
We put it in.00:10:12.010 --> 00:10:15.776
No, no vendor dot
CSS right there.00:10:17.130 --> 00:10:22.265
Is is I've edited the a
skin file an I did not and00:10:22.265 --> 00:10:27.005
it is cashed and I did not
restart the app pool sorry00:10:27.005 --> 00:10:30.560
there just do that again.
Our quick delete trick.00:10:31.800 --> 00:10:33.258
Take a look.00:10:35.760 --> 00:10:42.172
Portals default.
Skins CSS. We do have vendor00:10:42.172 --> 00:10:46.342
CSS now hasn't seen the
change very much, but that's00:10:46.342 --> 00:10:49.261
understandable because our
HTML probably doesn't look00:10:49.261 --> 00:10:50.512
anything like there's.00:10:51.760 --> 00:10:56.452
Time to check the console for it
looks like we're missing some00:10:56.452 --> 00:11:01.535
fonts. Annex it's expecting them
to be in ID, a CSS slash fonts,00:11:01.535 --> 00:11:05.445
so it's likely something our new
vendor dot CSS is.00:11:06.140 --> 00:11:10.100
Referencing. So let's see. Looks
like they have some fonts. What00:11:10.100 --> 00:11:12.927
are the ones we're missing
'cause we only copy these looks00:11:12.927 --> 00:11:14.469
like they have a whole lot.00:11:15.550 --> 00:11:21.933
We are missing just lay to
regular dot WF. Two was the only00:11:21.933 --> 00:11:23.406
ones really been.00:11:23.930 --> 00:11:26.910
Bing. So will copy that.00:11:27.480 --> 00:11:31.204
Font and bring it over to our00:11:31.204 --> 00:11:35.774
skin. It was it was asking for
slash CSS oops.00:11:36.490 --> 00:11:41.286
It was asking for slash CSS
slash fonts which doesn't exist,00:11:41.286 --> 00:11:43.466
will make a new folder.00:11:43.480 --> 00:11:48.680
And replace that in there. We
want to make sure we keep up00:11:48.680 --> 00:11:50.280
with the console errors.00:11:50.380 --> 00:11:53.278
Everything just becomes much
easier that way.00:11:53.880 --> 00:11:59.800
Now. Another thing in the markup
we very likely will have some00:11:59.800 --> 00:12:03.900
custom JavaScript is in here
somewhere, so we're under index.00:12:03.900 --> 00:12:06.360
We're going to look forward dot00:12:06.360 --> 00:12:09.747
JS. So it looks like
they're bringing in.00:12:10.930 --> 00:12:13.660
Looks like you're bringing in
jQuery, which is fine. We00:12:13.660 --> 00:12:16.663
already have that. Don't need to
worry about it. Popper and00:12:16.663 --> 00:12:19.939
bootstrap, we already have both
of those as well, but they are00:12:19.939 --> 00:12:23.215
also bringing it in a custom
when it looks like local to00:12:23.215 --> 00:12:26.491
their setup here jQuery Dot
Maine. So we're going to do the00:12:26.491 --> 00:12:28.129
same thing. We're going to copy00:12:28.129 --> 00:12:30.638
that. And bring it over
to our site.00:12:32.340 --> 00:12:36.456
We're gonna just put it with the
rest of our custom skin00:12:36.456 --> 00:12:38.171
JavaScript files and the JS00:12:38.171 --> 00:12:42.180
folder. And in the same place,
all of our other.00:12:42.760 --> 00:12:47.820
JavaScript is being loaded.
We're going to load it as well.00:12:47.820 --> 00:12:52.420
So right here, just like this
script source equals portals00:12:52.420 --> 00:12:55.640
default skins ID a JS and jQuery00:12:55.640 --> 00:12:58.190
main JS. Just like we.00:12:58.830 --> 00:13:02.300
Did before with the CSS will
kill the Apple again.00:13:03.340 --> 00:13:05.020
Make sure we have our.00:13:06.760 --> 00:13:09.370
Make sure everything is working
before we go forward,00:13:09.370 --> 00:13:11.150
essentially. Yeah, interesting.00:13:14.210 --> 00:13:16.199
That does not look like
it's working, does it?00:13:17.540 --> 00:13:22.762
Let's log in to see when you see
a screen that looks like this.00:13:22.762 --> 00:13:27.238
You're going to be giving an
error message if you just log00:13:27.238 --> 00:13:32.295
in. Sometimes it's a cash thing
too. We may not see anything.00:13:33.300 --> 00:13:38.439
Portals default skins, JS and
jQuery Domain Great, it's00:13:38.439 --> 00:13:44.720
loaded. It's ready to do
whatever it was wanting to do.00:13:45.890 --> 00:13:52.962
Now let's look at
actually applying some of00:13:52.962 --> 00:13:56.554
this CSS. It's fairly00:13:56.554 --> 00:14:03.210
close enough. Usually the best
place to start is the header as00:14:03.210 --> 00:14:08.325
well, since it generally has a
wrapper class that goes around00:14:08.325 --> 00:14:09.720
the entire app.00:14:10.390 --> 00:14:11.500
See we have.00:14:12.090 --> 00:14:15.490
We have the browser detection00:14:15.490 --> 00:14:20.385
give and. Why don't we see
what how their managing it00:14:20.385 --> 00:14:21.725
in their index file?00:14:26.230 --> 00:14:30.562
Looks to me they do indeed have
a rapper that goes around00:14:30.562 --> 00:14:33.560
everything. So a great place to.00:14:34.220 --> 00:14:38.012
Start is there. Essentially we
need to make sure we have since00:14:38.012 --> 00:14:41.488
we're trying to kind of
piggyback a lot off of their00:14:41.488 --> 00:14:45.596
style dot CSS that clearly paid
for we're going to do our best00:14:45.596 --> 00:14:49.072
to make sure our generated HTML
eventually looks pretty close to00:14:49.072 --> 00:14:50.968
this as best as we can.00:14:51.580 --> 00:14:54.847
So let's make sure we have
a rapper all around our00:14:54.847 --> 00:14:55.738
stuff as well.00:14:56.750 --> 00:15:01.227
Here in our header we just have
the dev browser detection.00:15:02.170 --> 00:15:02.970
And.00:15:04.000 --> 00:15:11.260
We're going to put our wrapper.
I suppose inside that so.00:15:12.270 --> 00:15:17.726
If I put a little device here in
the header surrounding.00:15:18.390 --> 00:15:20.318
All of the header.00:15:21.120 --> 00:15:24.186
Pardon me and then down here.00:15:24.920 --> 00:15:26.909
In the footer.00:15:27.680 --> 00:15:32.928
Very bottom. We'll end our
little gift that we made,00:15:32.928 --> 00:15:35.997
so there we have a wrapper
around everything now.00:15:37.030 --> 00:15:40.132
And do they have any special00:15:40.132 --> 00:15:45.948
classes in? Can even open
our windows side by side00:15:45.948 --> 00:15:47.952
for some quick comparison.00:15:49.110 --> 00:15:53.631
So looks like they have ID
wrapper header is class header00:15:53.631 --> 00:15:58.563
and ID header. So it looks like
here's where we're starting to00:15:58.563 --> 00:16:03.084
really diverge. We're going to
keep the D printing done class00:16:03.084 --> 00:16:07.605
because if they decide to print
page, there's no reason to00:16:07.605 --> 00:16:08.838
include the header.00:16:09.500 --> 00:16:13.779
Will keep container fluid as
well for now, and we'll see00:16:13.779 --> 00:16:18.058
how it works out, but will
add the header class since00:16:18.058 --> 00:16:19.614
that's what they have.00:16:20.640 --> 00:16:21.930
And deeper in.00:16:22.640 --> 00:16:29.584
So. Here's where it's starting
to really, really diverge and,00:16:29.584 --> 00:16:32.048
Well, you'll need to.00:16:32.630 --> 00:16:37.778
Essentially, do your very best
to make sure it eventually ends00:16:37.778 --> 00:16:44.330
up the same. So a great way to
do that, I suppose, is we'll00:16:44.330 --> 00:16:49.478
have our websites open on the
same side as our code.00:16:50.710 --> 00:16:55.240
Let's look at the structure of
this page in our.00:16:55.930 --> 00:17:01.910
In our element
inspector so.00:17:03.160 --> 00:17:05.548
It's close enough that.00:17:06.410 --> 00:17:08.100
2 hour.00:17:09.190 --> 00:17:13.930
Alright, it seems once we
dive into it, it's pretty00:17:13.930 --> 00:17:15.826
close to our standard.00:17:17.070 --> 00:17:22.036
Clarity header where we come in
and there's a a header top sort00:17:22.036 --> 00:17:27.002
of and it's this section here
and beyond that we have a header00:17:27.002 --> 00:17:30.440
bottom. They're calling it
header. Navigate for a good00:17:30.440 --> 00:17:33.496
comparison. Will just do the
same over here.00:17:34.430 --> 00:17:39.722
So in our header we have a top,
which it seems we're using mid00:17:39.722 --> 00:17:45.014
as tough, but the idea is the
same. We have a top and the00:17:45.014 --> 00:17:48.794
bottom. Now we can work with
that. They're close enough.00:17:50.300 --> 00:17:53.270
So let's see how they've
done it over here over00:17:53.270 --> 00:17:54.458
here versus hours again.00:17:56.140 --> 00:18:01.288
Looks like we want to change
our bottom class.00:18:02.110 --> 00:18:03.919
Header Bots will.00:18:04.510 --> 00:18:07.790
We won't necessarily change it.00:18:08.460 --> 00:18:12.124
But will add on these
classes as well.00:18:13.190 --> 00:18:18.327
From their head or navigate to
our editor bottom. Since that00:18:18.327 --> 00:18:23.931
correlated and will do the same
from their header top which was00:18:23.931 --> 00:18:29.535
deep inside a header wrap and
with 100 and a container fluid.00:18:29.535 --> 00:18:31.403
Then there's header top.00:18:32.060 --> 00:18:36.856
So we may just do the
same thing we may inside00:18:36.856 --> 00:18:39.036
of our header mid class.00:18:40.060 --> 00:18:43.947
We are going to shift these
all to the right and add add00:18:43.947 --> 00:18:46.040
some rapper diffs just like
they have.00:18:47.600 --> 00:18:53.600
Classes ro BG light on header
mid for now since these are00:18:53.600 --> 00:18:59.100
wrapper classes were going to
get this changed. Will call this00:18:59.100 --> 00:19:05.600
row header wrap and with 100
just as that has and now we'll00:19:05.600 --> 00:19:10.100
make ourselves a container fluid
to surround everything with.00:19:12.180 --> 00:19:17.772
It's easiest to keep up if you
close your dev tags you've00:19:17.772 --> 00:19:19.170
created right away.00:19:20.780 --> 00:19:26.201
He and after that it looks like
we finally have our dev class00:19:26.201 --> 00:19:27.452
equals header top.00:19:28.540 --> 00:19:29.050
Lovely.00:19:33.160 --> 00:19:38.253
Alright, What is header Holder?
What part of the structure of00:19:38.253 --> 00:19:42.420
their app is header Holder will
go and look?00:19:43.270 --> 00:19:46.249
Looks like header Holder is
essentially just, well, it's00:19:46.249 --> 00:19:49.890
another layer down. It's got
some padding. Is is just about00:19:49.890 --> 00:19:53.776
it. So we're going to try and
replicate the same thing with00:19:53.776 --> 00:19:57.842
ours. Header Holder is
essentially the whole thing, so00:19:57.842 --> 00:20:02.750
if we're just going to wrap it
up again, it looks like.00:20:05.500 --> 00:20:10.420
Intermed container fluid
header top and once more00:20:10.420 --> 00:20:12.265
shift everything over.00:20:15.280 --> 00:20:21.809
Letter Holder. Looks like they
have a whole lot of other00:20:21.809 --> 00:20:26.228
classes on there as well.
Standard bootstrap stuff could00:20:26.228 --> 00:20:32.120
not hurt to go as close to what
they have as possible.00:20:32.900 --> 00:20:34.790
Lowers the work for you.00:20:35.860 --> 00:20:40.216
Alright, they're calling their
logo here. Logo box will00:20:40.216 --> 00:20:46.024
probably try and avoid changing
DNS logo thing as much as we00:20:46.024 --> 00:20:52.800
can, but the rest of these there
is no harm in pending some of00:20:52.800 --> 00:20:58.608
their classes as well. Header
search D none D mid block, so00:20:58.608 --> 00:21:04.416
that implies a search bar isn't
present unless it's at least a00:21:04.416 --> 00:21:05.868
medium size screen.00:21:05.900 --> 00:21:08.200
So we'll add those on.00:21:09.050 --> 00:21:11.168
We may even.00:21:11.800 --> 00:21:15.535
Surround our search catalog
box with another dev that00:21:15.535 --> 00:21:16.780
adds those on.00:21:19.500 --> 00:21:24.210
That way we're not going to mess
with any of the form in line and00:21:24.210 --> 00:21:29.311
column stuff. We'll move
column. In fact, up above00:21:29.311 --> 00:21:30.970
to its wrapper.00:21:32.360 --> 00:21:39.016
Just like that. So we've got our
header search Dean and DMD block00:21:39.016 --> 00:21:42.600
just like them. As far as the00:21:42.600 --> 00:21:47.751
inside of. Of of of a directive.
Come back to that. Collapse it00:21:47.751 --> 00:21:52.105
over here and try and go through
the whole file before you go on00:21:52.105 --> 00:21:55.526
a tangent, 'cause essentially
what you would be needing to do00:21:55.526 --> 00:21:58.947
at this point is open up the
file for this directive.00:21:59.740 --> 00:22:01.750
And try and.00:22:02.390 --> 00:22:07.010
Make it say it's HTML match over
here that we want to at least00:22:07.010 --> 00:22:10.180
get the header. Outline first.00:22:11.180 --> 00:22:14.756
So will collapse their
interpretation of the search00:22:14.756 --> 00:22:20.120
form. And let's look at header
content. What is that on their00:22:20.120 --> 00:22:24.590
site header contents? Likely
everything after it looks to me00:22:24.590 --> 00:22:28.420
like. At the header Holder the
logo. Yep, there's your header.00:22:28.420 --> 00:22:32.398
Search and her content. So it
looks like kind of our carts and00:22:32.398 --> 00:22:36.988
the sign in button so will wrap
all of our carts in the sign in00:22:36.988 --> 00:22:39.320
button. Here in the
header again.00:22:40.620 --> 00:22:46.450
We have the language Selector
Button, but we're not seeing it00:22:46.450 --> 00:22:52.280
on our screen because it's not
enabled in the safe config.00:22:52.280 --> 00:22:54.930
Totally fine since we already00:22:54.930 --> 00:22:59.483
have a. Couple wrapper classes
here that correlate, correlate00:22:59.483 --> 00:23:04.092
pretty close. We're just going
to bring over header content for00:23:04.092 --> 00:23:07.863
now without removing any of the
bootstrap column stuff.00:23:08.420 --> 00:23:13.490
Even though they have, they're
using bootstrap flex stuff here.00:23:13.490 --> 00:23:17.039
Will try and stay with the grid00:23:17.039 --> 00:23:22.185
here. We've essentially trapped
those in there. It looks like00:23:22.185 --> 00:23:28.365
they are surrounding all of the
buttons for the quotes and carts00:23:28.365 --> 00:23:29.910
and log in.00:23:30.790 --> 00:23:35.122
In a another, in an unordered
list called button list that I00:23:35.122 --> 00:23:39.815
know we know for sure none of
these are list items, so we00:23:39.815 --> 00:23:41.620
would probably just change those00:23:41.620 --> 00:23:45.019
here. Since these are just
directives with attribute00:23:45.019 --> 00:23:48.232
directives, we can just change
these into line items.00:23:49.560 --> 00:23:55.620
Like so. And we
will change this.00:23:56.320 --> 00:23:56.900
Our.00:23:59.250 --> 00:24:05.062
Rounding class. No need for this
to be a row because it is an00:24:05.062 --> 00:24:09.214
unordered list now and will call
it BTN dash list just like.00:24:09.830 --> 00:24:15.434
Just like there's we're going to
move align items center above as00:24:15.434 --> 00:24:17.302
well, just like there's.00:24:18.580 --> 00:24:21.360
Let's see.00:24:22.460 --> 00:24:27.704
We're gonna wanna remove the
call auto here as well since we.00:24:28.210 --> 00:24:32.060
We are not a row anymore is
an unordered list.00:24:33.800 --> 00:24:37.284
Alright, looks to me00:24:37.284 --> 00:24:44.050
like we've. Had a
real quick go over of the.00:24:44.550 --> 00:24:49.230
Of the header top essentially,
so let's go back and look at00:24:49.230 --> 00:24:53.130
their header bottom there header
what they're calling it, or00:24:53.130 --> 00:24:58.900
navigate. Alright. So what
we are calling.00:24:59.640 --> 00:25:04.120
Their calling Heather Heather
Heather navigate were calling00:25:04.120 --> 00:25:06.920
header bot content, so that's00:25:07.830 --> 00:25:13.146
They try and run the same kind
of implement what they're doing00:25:13.146 --> 00:25:18.905
over on on our our header bottom
looks like they've gone with BG,00:25:18.905 --> 00:25:24.221
dark navbar, dark. Just like we
have with 100. Just like we00:25:24.221 --> 00:25:26.340
have. Um?00:25:28.280 --> 00:25:29.690
No, no, I must already copied00:25:29.690 --> 00:25:35.656
that. Yeah great, so we have a
BG dark above above us already.00:25:35.656 --> 00:25:38.164
No need to have this one.00:25:38.170 --> 00:25:45.130
There's yeah. Will
keep this down here.00:25:46.830 --> 00:25:49.950
And we've got our navbar,
toggler, this is.00:25:51.290 --> 00:25:56.110
After mobile view is what this
is looks like, yeah?00:25:58.820 --> 00:26:02.291
Great and right00:26:02.291 --> 00:26:07.150
here. Is our header
bot content?00:26:08.880 --> 00:26:11.175
They're calling it her.
Navigate, navigate. I kind of00:26:11.175 --> 00:26:12.450
think we had ought to.00:26:13.990 --> 00:26:20.200
Lil Header bot content for
us is going to be.00:26:20.730 --> 00:26:25.075
Navbar NAV for them, which is
just a generic bootstrap class,00:26:25.075 --> 00:26:30.605
so we're going to take a look
now since we've gone as deep as00:26:30.605 --> 00:26:35.740
we can go in header dot ascx,
we're going to take a look.00:26:36.270 --> 00:26:42.419
At what Dearden Menu is so it's
ID is vertical tabs now, so00:26:42.419 --> 00:26:48.095
actually what you just do is
look for the vertical tabs NAV00:26:48.095 --> 00:26:51.924
folder. 'cause that's the
menu style right there and00:26:51.924 --> 00:26:56.104
you will look at the text
file. It's a templating.00:26:57.600 --> 00:27:02.343
It's a templating language
specifically for DNN. You create00:27:02.343 --> 00:27:08.667
nodes and then repeat the nodes
above. This is the forward care.00:27:08.667 --> 00:27:14.464
It means you're describing a
node, or it can honestly be00:27:14.464 --> 00:27:18.153
called whatever you'd like.
You're describing a.00:27:18.690 --> 00:27:21.042
Component and then you repeat it00:27:21.042 --> 00:27:24.278
above. And each node is.00:27:25.210 --> 00:27:28.444
It applies to00:27:28.444 --> 00:27:32.416
each page. That has show00:27:32.416 --> 00:27:38.990
in menu. Applied DNA in which we
can take a look at the.00:27:38.990 --> 00:27:45.164
We can take a look at the
settings in a moment, but we see00:27:45.164 --> 00:27:49.574
that this is essentially this.
Their content here, navbar NAV00:27:49.574 --> 00:27:52.220
is what we're looking at over00:27:52.220 --> 00:27:57.773
here. Looks like we were giving
it the generic controller so we00:27:57.773 --> 00:28:01.477
can kind of have authenticate
authentication stuff sitewide,00:28:01.477 --> 00:28:05.663
totally fine. We have the IT
looks like a component here,00:28:05.663 --> 00:28:07.398
which is our it's our.00:28:08.000 --> 00:28:09.419
It's our categories.00:28:10.360 --> 00:28:13.492
Drop down here. It's our
products dropdown which is00:28:13.492 --> 00:28:18.016
depending on the setting or not,
either going to just be a link00:28:18.016 --> 00:28:22.192
to the catalog or a dropdown
megamenu. We know there's is a00:28:22.192 --> 00:28:25.672
mega menu so will enable that
setting before we do.00:28:26.340 --> 00:28:32.008
We want to just see that it's
pretty close to what they have.00:28:32.520 --> 00:28:36.230
So there is here the product's
Dropdown looks like they're00:28:36.230 --> 00:28:38.860
calling it. Ah.00:28:39.740 --> 00:28:45.668
NAV item but we are not. They're
calling it NAV item dropdown00:28:45.668 --> 00:28:51.102
Mega, Dropdown position, static.
All we have is NAV navbar NAV,00:28:51.102 --> 00:28:57.524
so we're going to. We're going
to change that, will call it NAV00:28:57.524 --> 00:28:59.500
item Dropdown Mega Dropdown.00:28:59.530 --> 00:29:04.634
Will leave the home mega for
now, 'cause That's a clarity00:29:04.634 --> 00:29:09.447
custom. OK and after that it
seems to repeat their00:29:09.447 --> 00:29:14.760
interpretation of the side pages
about news industry or West info00:29:14.760 --> 00:29:20.290
etc. And how does that look on
their index versus ours?00:29:20.970 --> 00:29:27.368
It looks like each one will have
a will be. Each upper level will00:29:27.368 --> 00:29:29.196
be a NAV item.00:29:29.910 --> 00:29:32.439
How are they?00:29:34.330 --> 00:29:40.180
To close off this whole choose
category thing alright?00:29:40.180 --> 00:29:44.240
So it looks like each one of
these line items is a NAV item.00:29:44.870 --> 00:29:51.542
And it's as simple as having a
dropdown class if there are.00:29:52.700 --> 00:29:56.050
Yes, there are further nodes.
That's that's what this would00:29:56.050 --> 00:30:00.740
mean inside of itself. If it can
go deeper, that's what if it can00:30:00.740 --> 00:30:05.095
go deeper and it will. This
will. This is what will be shown00:30:05.095 --> 00:30:06.435
on the deeper version.00:30:06.980 --> 00:30:13.077
So looks like this is actually
good. That will have a NAV item00:30:13.077 --> 00:30:19.174
if there's something deeper and
a drop down if it is and inside00:30:19.174 --> 00:30:22.457
of the deeper it's going to be00:30:22.457 --> 00:30:24.620
dropdown menu. Now.00:30:25.520 --> 00:30:27.770
One thing is, it looks like.00:30:30.030 --> 00:30:31.338
Ah, right here.00:30:32.320 --> 00:30:34.330
One thing is.00:30:35.800 --> 00:30:39.188
This needs to be dropdown
item. It looks like on the00:30:39.188 --> 00:30:42.268
link tag because that's what
they have dropdown item over00:30:42.268 --> 00:30:43.808
there, so will correct that.00:30:46.830 --> 00:30:52.428
That's pretty close for now. We
are going to.00:30:53.600 --> 00:30:55.628
Kill our DNN.00:30:56.390 --> 00:30:58.574
'cause we've done a lot of work00:30:58.574 --> 00:31:00.690
in. Do you and pages?00:31:01.760 --> 00:31:04.820
Will refresh and.