Detailed Notes
We are continuing a series of tutorials focused on Spring Boot. The crux of the project is to convert/migrate an old JSP/Tomcat application to a modern Spring Boot application and Java 7/8 to a current version. This continues a short series focused on CSS setup and customizations aimed at getting developers up to speed on CSS basics. Part 4 of 4.
You can learn more through our online classes at https://school.develpreneur.com and register for free. Registration will add you to our email list, and you will periodically receive coupons for courses and notifications of the latest releases.
Transcript Text
[Music] well hello and welcome back we are continuing our look into some design and uh just sort of getting a little bit of like crash course and design we have uh worked on our tables clean those up a little bit so it little easier to read this time we're going to look up here and work at this top now there a couple things here that we're dealing with when we we look at how this one is laid out is we do have uh we've got a banner then we have got a nav bar which is where you're normally going to see that's where we're going to see really our uh menu type stuff and then I think within that Banner somewhere we've got that image and I'm not sure where we actually threw that that image let's go right click on that real quick he is living inside oh he's inside the banner okay so we have a banner and then we have an image inside it which is sort of fun because it's actually blowing outside of the banner so that's going to be its own little thing so we have a div we have a banner Clash we don't really have anything that we've done with it uh it's it's just sort of out there uh it's got a border sizing it's a border box we're going to play with that and then we're going to go look at our navbar and I think we have already some Navar stuff in our custom wh so let's go look for that okay so we do have some what do we have besides that oh we've got a couple so we've got our colors got our text we've got our toggles we've got our floats so let's start with by default if we look here well let's go with our Banner first so let's go look do we have a banner here I don't think we did no CU our Banner is just he is got nothing so let's do a little bit with our Banner let's create a let's within a banner class let's see what we want to do let's start with let's give it this background so let's see we want to give it this background which is I believe this guy actually let's do both let's well actually let's look like this let's look at our footer so if we look at our I don't think we have two Footers let's see do we have a standard and a regular footer yeah we have a standard footer okay so let's take our standard footer and we're going to do the same thing and it's going to be let's close that out but this is going to be our Banner now now some things that we're going to work with here is you can see it's got a height it's got a width so it's going to go all the way across which is what we want no background image but it's got some colors and some other stuff bottom left so now we actually want the top to be zero and the left to be zero because we do want it to start over there and let's just start with that um want to start with that and actually while we're at it let's look here and it is do we have a na bar we do have a nav bar let me open this up a little bit so I can see it a little better let's go here so this is a navbar light right and so where do we have oh that's uh container fluid button Navar Navar support this is in the collapse which I don't know that we need we need that one probably so let's just well let's start with this first because I really want to see like if I go look at oh here if I look at my navbar nav and my nav item so I've got Navar light that's coming off of that and that gives me this gray this color because if I go change it to this yeah so that's my text color and I want my Navar light um let's leave it like that well let's see uh let's change it to a Navar where we get the light there we go background light have our light let's do background dark let's see yep oh say so now so we do have a BG dark or we have a BG light dark let's go look at so let's change him okay so we're going to do a BG dark this going to be a couple things so we're going to have a BG dark and all it has is a background color so let's change that background color to this same as a banner and then if we look at navbar light let's look at Nar dark uh there is a navbar background that Navar dark looks pretty good do we have it already though I don't think we have the Navar Dart do we let's go find out if we have nav bar na a b a r Dash do we have that anywhere we have a nvar default which is probably what we want so let's go back to our header and instead which is our uh what do we call that is that nope header so do we have Navar yeah we have Navar light so that's going to be uh naar default and we want our background dark and then let's go over here to our core let's see what this looks like uh what else do we want well we'll go find out in a minute so let's take a look at this let's go connect once it runs oh now we've got like so now we've got something very different looking and how we've got it so let's look at that standard I think that image we need to deal with now part of the problem here is we have a Navar that is floating off we don't want that we want it to be basically underneath the banner and we want it to stay there colors aren't horrible but they aren't great so let's fix that first so let's go with our navbar default we want the background uh where did our dark background go we want uh this one our default oh there it is so that we want is that the right color 1131 14d versus the banner where we put our Banner uh Banner Banner Banner [Music] Banner is there okay so Banner it's 11314 D the nav bar is oh that's not so background dark I think we had that somewhere yeah so oh that should be background color same as a banner interesting Y is so if we go look at our Banner background color oh it's probably something a little higher so probably our Navar I think we want let's change our Navar to all also was it with a dash no let's just do straight up Navar and let's see what we get here now there's couple uh let's see so Banner is going to have a height of 65 we probably want it a little higher so let's knock it out to let's go to 100 that may give us well let's go look here uh if we look at what our Banner height is if we go to our banner and change it to 100 does this get us yep that lines us up with our image so let's do that and then within this yeah that just needs to be we can probably clean that up so let's do this and let's go back to our header uh wherever I saw the header let's go back over here let's go header and let's change that that uh here let's just change him to uh let's make it an H1 that probably will make it big enough and make it look a little better uh and then we'll just make an align Center just to be safe so little changes here and there not much and then what else did we want to do okay so that gives us our all those pieces oh so now let's go to if we go to our banner and we do our positions here this is where we're going to do the same thing so navbar we're going to have to do it so its top is going to be at uh 101 and it's left there okay so let's see what that does for us I think that's going to give us so that it will sit right underneath the banner not always what we want to do but that's what we're going to do in this case CU hey that's who we are ah see now it's uh position fixed that means we're going to have to go in and make its width 100% and that'll go for now let's do that who that is not what I wanted so if I come here let's go back here let's see what we get so now but now it's oh that header's got some really so if we go to we got a couple things to fix uh one is that is it relative position is fixed Banner height position is fixed why it is if we go to well let's log in let's go look at on a different page real quick so yeah so we have this and so if we go look here when we do our navbar let's see if he cuts them to 50 let's [Music] do 75 that looks pretty good the problem is now the main content is going to be off so that means we're going to have to take uh we're going to have to actually put stuff into our content so we're going to have to split him up and make sure that he always shows you know has something that follows which we probably can see look at our [Music] Banner uh let's see nothing really special there oh let's go back to our nav bar real quick so let's get our nav bar Top's going to be 75 and let's get that we're probably going have to come into this and change a little bit so if we do that uh left is where it's supposed to be so now if we come in we do projects and notice that it's like it's always there but now we have this in the way which is a bit of a problem so what we're going to want to do is we're going to put this container down here to push this down uh let's take that and let's take that H1 let's go like that and maybe see if an H2 is got a better color if we just change uh that to an H2 uh it doesn't do any better do we have colors for an H1 we do okay so I think so let's do that real quick so we'll go find our H1 there we go color let's make our color something a little bit better than that this is on that dark one um I saw like a red I don't want that kind of red let's see do we have a good oh here we go let's try like a h it's probably too dark right let's find out if we use that color how does that look again this is one of those great things is we can come in here oh that actually looks pretty good right there what did I just do I think I just nixed the color oh yeah I just turned it off so if I go I think I did it like this oh so that doesn't look horrible so let's just do that and pull the color off of the headers which is probably okay what did I do oh I got pop up getting me there okay so if I take the uh headers I don't want that and now what I'm going to need to do is I'm going to need to have like the main content move down now what I can do is I can probably take the body itself because those others are fixed is I could take the body and do position is going to be absolute and then if I do top that's OTP if I do top and push that to like [Music] 125 then there we go so if I do that see now what I've done is I've just taken the body and I've said okay the header is always going to be there the only problem is now that's going to be I can do that but I'm going to see that always there so I can either bring those up and give those a z order or I can push the content back so that it just sort of Scrolls underneath which is probably not a bad thing so if I take the body and then I do a z index of uh I think I want it to be [Music] zero I think if I do that no because then I'm going to need these two because I would need then the banner let's see if I take my where did I put that that container here we go Banner so if I do a banner come here and do a z order or Z index of let's say 100 then now see it goes underneath so I'm just take the nav bar and that and then it'll just scroll right underneath and we're going to have something pretty interesting so we can fix that really quick which we're going to go in here what did I do oh I took the body and so we're going to take um that's going to be position is going to be fixed and uh top is going to be I think we did 125 and then we need to go to the oh we already have something interesting things there uh let's go to the Navar default and he's going going to be a z index there we go of um doesn't really matter what it is but we'll make them 100 and we're going to do the same thing for the banner now it could be that this is going to cause US problems elsewhere but let's see what it looks like if we do this now come in we've got that can't really I don't have much we can scroll here probably because there's nothing on this page I think we're going to find out so if we do that oh so now we did it so we're not able to scroll wonder how we manag that one uh fixed fixed oh body did we do something to the body too oh I don't think we want it fixed I think we want it relative is that what we did with it uh let's see body yes we want that and we want it relative there we go that's what we want um and we could probably push it up a little bit so let's do relative and let's make it 115 and let's see how these look and I think what we're going to see is we're starting to see something that has a little bit better little more modern look look we can scroll that's always good we can log in we can scroll if we go to our projects list we can scroll and notice we've always got our header and our footer we can do whatever we want with those but now we've always got something up here we can always click on it so now we've got pretty good little bit of stuff that we've added in there not a whole lot of work went into this this has mostly been playing around once you know what you're doing once you add a couple of divs or Styles then the next thing you know you've got a you know a better looking application and then of course you can do some more stuff with it so we could we could work on our navbar dark we could change that background a little bit we can probably will like if we take this that's probably not even a regular button yeah that's just an input type so if we just take that and do a class equals uh let's change that to like what is it button default and button then we yeah see we changed that so we can make that's a lot better looking button so we can do some stuff with that as well we may come back next time haven't decided yet whether we want to continue that probably won't we'll probably uh dig into like one or more thing yeah we've got one or two pages left and just s of see where we want to go from there this will sort of wrap up our one more example of like doing our Page Plus with our styling so let's see how that looks next time around uh as always if you have any questions shoot an email to info@ developer.com but as always go out there and have yourself a great day a great week and we will talk to you next time hello this is Rob with develop andur also known as building better developers wanted to announce that we have school. develop or.com feel free to check it out if you like any of this information any of the content that we've sent and you would like to see more you can come out you can enroll for free we have free courses we've got places for you to get better at just learning a technology or how to you can work on your business skills we can help you with becoming a better developer as in coding and things like that a lot of the stuff you've seen on YouTube we also have out at school. develop andur we have it a little more of a educational format and a way for you to track your progress as you move forward becoming a better [Music] developer
Transcript Segments
[Music]
well hello and welcome back we are
continuing our look into some design and
uh just sort of getting a little bit of
like crash course and design we have uh
worked on our tables clean those up a
little bit so it little easier to read
this time we're going to look up here
and work at this top now there a couple
things here that we're dealing with when
we we look at how this one is laid out
is we do have uh we've got a
banner then we have got a nav bar which
is where you're normally going to see
that's where we're going to see really
our uh menu type stuff and then I think
within that Banner somewhere we've got
that image and I'm not sure where we
actually threw that that image let's go
right click on that real
quick he is living inside oh he's inside
the banner okay so we have a banner and
then we have an image inside it which is
sort of fun because it's actually
blowing outside of the
banner so that's going to be its own
little thing so we have a div we have a
banner Clash we don't really have
anything that we've done with it uh it's
it's just sort of out
there uh it's got a border sizing it's a
border box we're going to play with that
and then we're going to go look at our
navbar and I think we have already some
Navar stuff in our
custom wh so let's go look for that okay
so we do have
some what do we have
besides that oh we've got a couple so
we've got our colors got our text we've
got our toggles we've got our floats so
let's start
with by default if we look
here well let's go with our Banner first
so let's go look do we have a banner
here I don't think we did no CU our
Banner is
just he is got nothing so let's do a
little bit with our Banner let's create
a let's within a banner
class let's see what we want to do let's
start with let's give it this background
so let's see we want to give it this
background which is I believe this guy
actually let's do both let's well
actually let's look like this let's look
at our footer so if we look at our I
don't think we have two Footers let's
see do we have a standard and a regular
footer yeah we have a standard
footer
okay so let's take our standard
footer and we're going to do the same
thing
and it's going to
be let's close that out but this is
going to be our Banner now now some
things that we're going to work with
here is you can see it's got a height
it's got a width so it's going to go all
the way across which is what we want no
background image but it's got some
colors and some other stuff bottom left
so now we actually want the top to be
zero and the left to be zero because we
do want it to start over there and let's
just start with that um want to start
with that and actually while we're at
it let's look
here and it
is do we have a na bar we do have a nav
bar let me open this up a little bit so
I can see it a little
better
let's go
here so this is a navbar light right and
so where do we
have oh
that's
uh container
fluid button
Navar Navar support this is in the
collapse which I don't know that we need
we need that one
probably
so let's just well let's start with this
first because I really want to see like
if I go look at oh
here if I look at my navbar nav and my
nav
item so I've got Navar light that's
coming off of that and that gives me
this gray this color because if I go
change it to this yeah so that's my text
color and I want my Navar
light
um let's leave it like that well let's
see uh let's change it to a
Navar where we get the light there we go
background light have our
light let's do background
dark let's see yep oh say so now so we
do have a BG dark or we have a BG light
dark
let's go look
at so let's change
him okay so we're going to do a BG dark
this going to be a couple
things so we're going to have a BG
dark and all it has is a background
color so let's change that background
color to this same as a
banner and then if we look at navbar
light
let's look at Nar
dark uh there is a
navbar background that Navar dark looks
pretty good do we have it already
though I don't think we have the Navar
Dart do we let's go find out if we have
nav bar
na a b a r Dash do we have that anywhere
we have a nvar
default which is probably what we want
so let's go back to our
header and instead which is
our uh what do we call that is that nope
header so do we have Navar yeah we have
Navar
light so that's going to be uh naar
default
and we want our background
dark and then let's go over here to our
core let's see what this looks like uh
what else do we want well we'll go find
out in a minute so let's take a look at
this let's go connect once it
runs oh now we've got like so now we've
got something very different looking
and how we've got
it so let's look at that standard I
think that image we need to deal with
now part of the problem here is we have
a
Navar that is floating off we don't want
that we want it to be basically
underneath the banner and we want it to
stay there colors aren't horrible but
they aren't great so let's fix that
first so let's go with our navbar
default we want the
background uh where did our dark
background
go we
want uh this
one our
default oh there it
is so
that we
want is that the right color 1131
14d versus the
banner where we put our
Banner uh Banner Banner Banner
[Music]
Banner
is there okay so Banner it's
11314
D the nav bar
is oh that's not so background
dark I think we had that somewhere yeah
so oh that should be background
color same as a
banner interesting Y
is so if we go look at our
Banner background
color oh it's probably something a
little higher so probably our Navar I
think we
want let's change our
Navar to all
also was it with a dash no let's just do
straight up Navar and let's see what we
get
here now there's couple uh let's see so
Banner is going to have a height of 65
we probably want it a little higher so
let's knock it out to let's go to 100
that may give us well let's go look here
uh if we look at what our Banner height
is
if we go to our banner and change it to
100 does this get
us yep that lines us up with our
image so let's do that and then within
this yeah that just needs to be we can
probably clean that up so let's do this
and let's go back to our
header uh wherever I saw the header
let's go back over here let's go header
and let's change that that uh
here let's just change him
to uh let's make it an
H1 that probably will make it big enough
and make it look a little
better uh and
then we'll just make an align Center
just to be safe so little changes here
and there not
much
and then what else did we want to do
okay so that gives us our all those
pieces oh so now let's go to if we go to
our
banner and we do our positions here this
is where we're going to do the same
thing so
navbar we're going to have to do it so
its top is going to be at uh
101 and it's left there okay so let's
see what that does for
us I think that's going to give us so
that it will sit right underneath the
banner not always what we want to do but
that's what we're going to do in this
case CU hey that's who we are ah see now
it's uh position fixed that means we're
going to have to go in and make its
width
100%
and that'll go for now let's do
that who that is not what I wanted so if
I come
here let's go back here let's see what
we get so now but now it's oh that
header's got some really so if we go
to we got a couple things to fix uh one
is that is it relative position is
fixed Banner height
position is
fixed why it is if we go to well let's
log in let's go look at on a different
page real
quick so yeah so we have
this and so if we go look
here when we do
our
navbar
let's see if he cuts them to
50 let's
[Music]
do 75 that looks pretty good the problem
is now the main content is going to be
off so that means we're going to have to
take uh we're going to have to actually
put stuff into our content
so we're going to have to split him
up and make sure that he always
shows you know has something that
follows which we probably can
see look at our
[Music]
Banner uh let's see nothing really
special there oh let's go back to our
nav bar real quick so let's get our nav
bar Top's going to be 75
and let's get that we're probably going
have to come into this and change a
little
bit so if we do that uh left is where
it's supposed to be so now if we come in
we do projects and notice that it's like
it's always there but now we have this
in the way which is a bit of a
problem so what we're going to want to
do is we're going to put this
container
down
here to push this down uh let's take
that and let's take that
H1 let's go like that and maybe see if
an H2 is got a better color if we just
change uh
that to an
H2 uh it doesn't do any better do we
have colors for an H1 we do okay so I
think so let's do that real quick so
we'll go find our H1 there we go
color let's make our color something a
little bit better than that this is on
that dark
one um I saw like a red I don't want
that kind of red let's see do we have a
good oh here we go let's try like a h
it's probably too
dark right let's find out if we use that
color how does that look again this is
one of those great things is we can come
in here
oh that actually looks pretty good right
there what did I just do I think I just
nixed the
color oh yeah I just turned it
off so if I go I think I did it like
this
oh so that doesn't look horrible so
let's just do that and pull the color
off of the headers which is probably
okay what did I do
oh I got pop up getting me there okay so
if I take the uh
headers I don't want
that and now what I'm going to need to
do is I'm going to need to have like the
main content move down
now what I can
do is I can probably
take the body itself because those
others are fixed is I could take the
body and do
position is going to be
absolute and then if I do
top that's OTP if I do top
and push that to like
[Music]
125 then there we go so if I do that see
now what I've done is I've just taken
the body and I've said okay the header
is always going to be there the only
problem is
now that's going to be I can do that but
I'm going to see that always there so I
can
either bring those up and give those a z
order or I can push the content back so
that it just sort of Scrolls underneath
which is probably not a bad thing so if
I take the
body and then I
do a
z index of uh I think I want it to be
[Music]
zero I think if I do that no because
then I'm going to need these two because
I would need then the
banner let's see if I take my where did
I put
that
that
container here we go Banner so if I do a
banner come here and do a z order or Z
index
of let's say
100 then now see it goes underneath so
I'm just take the nav bar and that and
then it'll just scroll right underneath
and we're going to have something pretty
interesting so we can fix that really
quick which we're going to go in here
what did I do oh I took the body and so
we're going to take um that's going to
be position is going to be
fixed and uh top is going to be I think
we did
125 and then we need to go to
the oh we already have something
interesting things there uh let's go to
the
Navar
default and he's going going to be a z
index there we go of um doesn't really
matter what it is but we'll make them
100 and we're going to do the same thing
for the
banner now it could be that this is
going to cause US problems elsewhere but
let's see what it looks
like if we do this now come in we've got
that can't really I don't have much we
can scroll here probably because there's
nothing on this page I think we're going
to find
out so if we do
that oh so now we did it so we're not
able to scroll wonder how we manag that
one uh fixed fixed oh
body did we do something to the body
too oh I don't think we want it fixed I
think we want it
relative is that what we did with
it uh let's see
body yes we want that and we want
it
relative there we go that's what we
want
um and we could probably push it up a
little bit so let's do relative and
let's make it
115 and let's see how these
look and I think what we're going to see
is we're starting to see something that
has a little bit better little more
modern look look we can scroll that's
always good we can log
in we can scroll if we go to our
projects list we can
scroll and notice we've always got our
header and our footer we can do whatever
we want with those but now we've always
got something up here we can always
click on it so now we've got pretty good
little bit of stuff that we've added in
there not a whole lot of work went into
this this has mostly been playing around
once you know what you're doing once you
add a couple of divs or Styles then the
next thing you know you've got a you
know a better looking application and
then of course you can do some more
stuff with it so we could we could work
on our navbar dark we could change that
background a little bit we can probably
will like if we take this that's
probably not even a regular button yeah
that's just an input
type so if we just take that and do a
class
equals uh let's change that to like what
is it button
default and
button then we yeah see we changed that
so we can make that's a lot better
looking button so we can do some stuff
with that as well we may come back next
time haven't decided yet whether we want
to continue that probably won't we'll
probably uh dig into like one or more
thing yeah we've got one or two pages
left and just s of see where we want to
go from there this will sort of wrap up
our one more example of like doing our
Page Plus with our styling so let's see
how that looks next time around uh as
always if you have any questions shoot
an email to info@ developer.com but as
always go out there and have yourself a
great day a great week and we will talk
to you next time
hello this is Rob with develop andur
also known as building better developers
wanted to announce that we have school.
develop or.com feel free to check it out
if you like any of this information any
of the content that we've sent and you
would like to see more you can come out
you can enroll for free we have free
courses we've got places for you to get
better at just learning a technology or
how to you can work on your business
skills we can help you with becoming a
better developer as in coding and things
like that a lot of the stuff you've seen
on YouTube we also have out at school.
develop andur we have it a little more
of a educational format and a way for
you to track your progress as you move
forward becoming a better
[Music]
developer