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 2 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're continuing our journey of converting an application from pachy Tom Cat and Ja Java server pages to Spring Boot and bootstrap 5 and modernizing one of the things we did last time we were starting into a sort of a series of stuff where we are looking at how to tweak our design make our look a little better using stylesheets now one of the things we've talked about is we we've got odd and even rows uh but before we had a way to know which row we were on visually uh another thing we're going to look at this time around is this thing right here is that we've got this hopefully we've got these set up right I'm going to go look at those yes we have these labels so we're going to go in and we're going to tweak our label a little bit so the two things we're going to mess with this time is we've got odd and even and and we're also going to do a label now a label if you remember last time uh even and odd because those are style names and label is because it's an actual uh thing that you have on the it's an actual tag so we're going to take our uh we're going to go here let's just do font size uh let's do font size adjust let's see how do we want to do this let's do we could do font weight let's do bold and let's do font size and I think we can just do plus let's see I think we can do it a percentage oh that's what we can do is going to be 110% I think if we do that let's look at that for labels so for even an odd what we want to do is we're just going to take these and we're going to create uh a hover for that because this is going to be when we select a row essentially when we're mousing over a row and that's actually pretty easy to do because it's a if you have sort of an action going on it's just a uh colon and then the name of the action and then if you want to do multiple things so we're going to take our even and our odd they're going to do the same thing we can do odd hover and now this means whatever we do is it's going to be uh when we hover whether it's even or odd we're going to have this effect so what we want to do is let's take a couple of things we're going to do with this first we're going to turn it bold with the text so that makes it a little more visible hopefully not too much and let's change to make it nice and easy let's make the background color a dark uh because normally let's if you look at even and odd we've got this really dark one so let's make it even darker so let's go down to like a uh let's make it 777 so that's nice and dark and our color we're going to actually how much do we want to Let's brighten this up a ton and so we're going to add let's see CDE e we're going to add four let's add four to that so that's going to be a a uh let's see a b c d DD FF and so now that's going to be super bright probably more than we want but let's go play around with that so now we've got with our hovers we should be able to see a selection and we're going to tweak our labels and that should make a difference actually in a lot of places cuz I think we use labels all over the place so we're going to see our forms change and everything else let's see let's get out of this wh let's get this so we can actually see and if we come in here I don't think we have any labels there yet so now you see now you can once again see what you've selected and it's not super different even though it's bold it actually sort of works sort of nice um you can see here that our labels here those are labels those have changed and so we've got this black text I think what we want to do is let's change our label so let's just pick one here uh and here you can see those labels everywhere so let's tweak this a little bit more first let's take this field set let's drop that down about another notch and let's take our labels we're going to change them to like a really dark blue so let's just to get ourselves some sort of branding kind of stuff so we're going to do that for our color that font size looks pretty good so we're going to keep that but our color we're going to go back to uh let's drop that two more let's try 11 4477 let's see how that looks o that's pretty good um that's sort of dark let's see how that looks in that and then we want to go to our field Set uh that's our label there we go okay I just couldn't find it and let's take that background color and we're going to lighten it up one more so it's going to be F4 F6 F9 F4 F6 F9 and let's see what that looks like now it's going to be different so it should still be distinct from the sort of bluish color we've got in the background no we're still going to have to deal with our menu at some point but we will come back to that um so let's see and we probably want to change some of these we're have a couple these things we're going to change around so let's start with yeah we're just going to start with that let's clean this one up first let's get a couple of these things cleaned up okay like I said this is one of those things that it can take a while so let's go ahead because there's a lot of ways that we can customize our our look and feel and we're just getting we're just like scratching the Sur service in a sense so if we come in here uh now we see I think our field sets are a little different you can see that they're H not super white or did I not do it let's see now you can see yeah see the text here we Chang that up if we go to project uh we tweak that a little bit oh these label those aren't labels so we can see that we probably didn't do those right yeah see those should be labels so that's something where we made a mistake when we do our current projects let's go look at that let's fix that real quick uh projects and let's see current projects name filter okay so we want those to be a label and let's do this and we'll create all of those make those labels like they should be and then let's take a look at our table see if we just add it there table responsive and I think we want it to be a table as well seems like that's usually something it usually likes so if we go to list wh go here oh let's go look at our field set did we get field set has that back oh that oh well let's see let's go back here so this is a field set is it not it [Music] is there's a container Legend form field set so field set does have its background color if we change that it doesn't oh so it's getting overwritten somewhere probably the form um form does not have it interesting there's a row so that's a field set let's change that to just like white well there we go okay so it was it was just not thin enough so let's go to um let's change that background color so now here's where we can just play with it let's change it to white smoke there we go so now we get something that's not too bad let's do ghost white no white smoke floral white some of these actually look pretty good um let's try it with a blue let's see what we can get what sort of Blues can we get we get one that looks really nice uh Alice is not bad that's all darker and this all is going to come related to your uh your specific Taste of course and of course and also note that the background the text depending on what we're at can look you know be sort of annoying so let's just uh let's just keep it like that we're going to go with this Alice blue for now so that's in the field set I'm not sure I want that let's go back to whoop let's go back to here and our field set let's like drop him instead make him like uh probably 222 nope wrong way uh e e e so that's that's going to be somewhat grayish that should probably be okay let's go check that real quick if I go to my field set let's see if ee looks good if I go here B uh background color is EE H let's do f f f f f uh probably too much let's do f b that's not too bad and it does it's still it's enough that's distinct so let's do fbfb that will work so we keep that it gives us this we probably we can do anything that's here because these are all inputs what we could do is we can change those backgrounds so actually it's forign control so we can do it like that background color let's just make it like I don't know there so we can change our background color there and we do not have it in so it's saying form control so we can take this whole thing wh um let's take this whole piece ah crud whole piece and let's see if we can take that oh it doesn't want it okay so this just going to be form-control and let's tweak this a little bit and so this is what we've got basically did it go all the way to transition yes it did all the way to e out okay so let's change this around a little bit let's change our background color let's get it a little little bit darker so let's just go let's tweak this a little bit so we're going to do uh let me go to our border radius we're going to round these out a little bit uh let's do this does he have one no maybe he does oh he does have one okay so he's got a little bit of one if we look we can see it okay let's do let's just increase him up to 0.1 let's make our border let's use our dark blue and what you're usually going to find is you should have within any design you should have sort of a um let's see what did I miss so he should be 1 14477 there we go okay so that's going to be a you should have sort of a a theme of colors you probably only have certain colors you're going to use on a regular basis so now if that's my background let's make that my color as well that's going to be my text color and maybe we're going to go one deeper so if we go 03366 that's like a nice dark color for our text and we want our background color to be to like pop a little bit so let's make it a little bit darker I think we were doing so we were doing like an e let's do a DDD so it's like a little bit darker what we could do is we could add a little bit of a blue to it so we could probably go uh red green blue so if you go like a 004 but if you go 0 e that's like a lot of blue but now if we wash that out with like uh Let's do ffe let's do a CCE now we're starting to get something that's a little more let's do DDE and let's do EF let's see what that looks like there we go so you've got like a little bit different got a little bit something to do that we can also do um border color if you do this like 3D face so that's what we got with some of our our pieces here so we could actually do something where we can actually change our um sort of how that looks in general so we can play around with its appearance uh let's see how do we want to do this so if we do yeah see if it'll give us one that is let's see that's a style let's see if we change our border to wh um I think I can do inset yeah I think that'll work so this is where it takes a little bit of playing around and you just go find some stuff that looks good and then look at how they did it like I'm down here where you just sort of view the source so now yeah see now we're seeing like The Border's different uh when you enter into it we got a little bit of color we've got that's a little color we're starting to see some of these already so if we go in here let's see how that looks o that is not quite what we want but we can see now that our inputs have got a lot more character to them so let's go to the background color that was what EF let's do uh let's try e no that's going be too much let's try e d oh let's try this oops let's do that instead of e f let's do uh let's try uh F7 F7 7f F let's drop that to about a two cuz those were e uh let's do F0 let's do e a ay there we go let's try that one that may be wh so we go over here let's just look at that real quick so if we change that to a note once we're in it we are getting something that's a little different so we probably need to change that uh # EA E A FF is that what we had that's actually still a little bright when you look at it that way so let's go Ed Ed uh let's try e e e e no still too much let's try F3 F3 fa there we go so we're going to do fa fa FF so that gives us something that's not too bad so fa F FF so it gives us our background color and uh one of the things I'm want to look at is here so when you're in here you're going to get something that is probably going to pick up form control and we get uh why is he picking that up it's because he's a form control and he's probably active so somewhere in here we're going to get to see maybe that's down here [Music] uh well one of the things we can do I'm not going to dig into it too much is that we can get something but it is sort of nice actually this sort of work works okay because then we can get it within our form control and then we get our regular inputs which is probably what is getting picked up here uh let's see no because those are still getting put there too so uh there's a couple things we can do we can probably tweak him uh if we want to because it's going to change some stuff around but this is giving us again so now we've got form Fields uh what was the other one we want to look at so if we look at this now we've got stuff that looks a little different we definitely are getting some some level of you know oh so let's go back to this so we wanted it we Chang this to a table we change those to labels and if we look here that's a table responsive if we get rid of that table responsive then it doesn't really do anything so let's see let's go let's see what we want to play around with here is what we want to do is we want to make our table look a little bit better so uh there so we can also do that here so now we've got our containers our containers have a Max width and what else do they have let's change this uh I'm not sure what he's picking oh he's from containers. secc so if we do it to just uh 90% now we've got something that fills the screen a little bit more probably maybe too much so let's go to 85% so let's do that that's going to change if we go here now granted it's just reset it so if we come back here so let's go to our containers I don't know if we have that defined anywhere here we don't so let's change that a little bit real quick so that is a style and all we're going to do is we're going to do Max width and that's going to be let's make it 85% that is going to dramatically change the look and feel of our site with one line of coat and we may not want that but we will see how it goes yeah so see now this is out wider when we log in we're going to see everything is bigger we're actually using our screen real estate now so this is a start even if we go to our forms everything is fitting a little bit different so I think at this point we're going to wrap this one up and we're going to come back next time let's we're going to play around with this table a little bit more we're going to add some stuff to make this thing useful uh it is using the table responsive piece which is good but I think we want to do a couple things to clean this up so we have a table responsive which is here and I believe here who whoa I think this one is table responsive as well that we want to do some things here well in this one see like here we've got our border so we're going to play around with some of this to get some of our styling in maybe get it so we've got some space but that will be next time around if you have questions uh requests send an email to info@ developin word.com uh otherwise go out there enjoy your coding have a great day a great week and we will talk to you next time hello this is Rob with with develop andur also known as building better developers wanted to announce that we have school. developin 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 toos 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 just have it in 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're
continuing our journey of converting an
application from pachy Tom Cat and Ja
Java server pages to Spring Boot and
bootstrap 5 and modernizing one of the
things we did last time we were starting
into a sort of a series of stuff where
we are looking at how to tweak our
design make our look a little better
using stylesheets now one of the things
we've talked about is we we've got odd
and even rows uh but before we had a way
to know which row we were on visually uh
another thing we're going to look at
this time around is this thing right
here is that we've got this hopefully
we've got these set up right I'm going
to go look at those yes we have these
labels so we're going to go in and we're
going to tweak our label a little
bit so the two things we're going to
mess with this time is we've got odd and
even and and we're also going to do a
label now a label if you remember last
time uh even and odd because those are
style names and label is because it's an
actual uh thing that you have on the
it's an actual tag so we're going to
take our uh we're going to go here let's
just do
font
size uh let's do font size
adjust let's see how do we want to do
this let's
do we could do font
weight let's do
bold and let's do font
size and I think we can just do plus
let's see I think we can do it a
percentage oh that's what we can do is
going to be 110% I think if we do that
let's look at that for labels so for
even an odd what we want to do is we're
just going to take these and we're going
to
create uh a hover for that because this
is going to be when we select a row
essentially when we're mousing over a
row and that's actually pretty easy to
do because it's a if you have sort of an
action going on it's just
a uh colon and then the name of the
action and then if you want to do
multiple things so we're going to take
our even and our odd they're going to do
the same thing we can do odd hover and
now this means whatever we do is it's
going to
be uh when we hover whether it's even or
odd we're going to have this effect so
what we want to do is let's take a
couple of things we're going to do with
this first we're going to turn it
bold with the text so that makes it a
little more visible hopefully not too
much and let's
change to make it nice and easy let's
make the background color
a dark uh because normally let's if you
look at even and odd we've got this
really dark one so let's make it even
darker so let's go down to like a uh
let's make it
777 so that's nice and dark and our
color we're going to
actually how much do we want to Let's
brighten this up a ton and so we're
going to add let's see CDE e we're going
to add four let's add four to that so
that's going to
be a
a uh let's see a b c d
DD
FF and so now that's going to be super
bright probably more than we want but
let's go play around with that so now
we've got with our hovers we should be
able to see a selection and we're going
to tweak our
labels and that should make a difference
actually in a lot of places cuz I think
we use labels all over the place so
we're going to see our forms change and
everything else let's see let's get out
of this wh let's get this so we can
actually
see and if we come in here I don't think
we have any labels there yet so now you
see now you can once again see what
you've
selected and it's not super different
even though it's bold it actually sort
of works sort of nice um you can see
here that our labels here those are
labels those have changed and so we've
got this black text I think what we want
to
do is let's change our label so let's
just pick one here uh and here you can
see those labels
everywhere so let's tweak this a little
bit more first let's take this field set
let's drop that down about another
notch and let's take our labels we're
going to change them to like a really
dark blue so let's just to get ourselves
some sort of branding kind of stuff so
we're going to do that for our
color that font size looks pretty good
so we're going to keep that but our
color we're going to go back
to uh let's drop that two more let's try
11
4477 let's see how that
looks o that's pretty good
um that's sort of dark let's see how
that looks in that and then we want to
go to our field
Set
uh that's our
label there we go okay I just couldn't
find it and let's take that background
color and we're going to lighten it up
one more so it's going to be F4 F6
F9 F4 F6
F9 and let's see what that looks like
now it's going to be different so it
should still be distinct from the sort
of bluish color we've got in the
background no we're still going to have
to deal with our menu at some point but
we will come back to that um so let's
see and we probably want to change some
of these we're have a couple these
things we're going to change around so
let's start with yeah we're just going
to start with
that let's clean this one up first let's
get a couple of these things cleaned up
okay like I said this is one of those
things that it can take a while so let's
go ahead because there's a lot of ways
that we can customize our our look and
feel and we're just getting we're just
like scratching the Sur service in a
sense so if we come in here uh now we
see I think our field sets are a little
different you can see that they're H not
super white or did I not do
it let's
see now you can see yeah see the text
here we Chang that up if we go to
project uh we tweak that a little bit oh
these label those aren't labels so we
can see that we probably didn't do those
right yeah see those should be labels so
that's something where we made a mistake
when we do our current
projects let's go look at that let's fix
that real quick uh
projects
and let's see current projects name
filter okay so we want
those to be a
label
and let's do
this and we'll create all of those make
those labels like they should
be and
then let's take a look at our
table see if we just add
it there table responsive and I think we
want it to be a table as well seems like
that's usually something it usually
likes so if we go to list wh go here oh
let's go look at our field set did we
get field set has that back oh that oh
well let's see let's go back
here so this is a field set is it not it
[Music]
is there's a
container Legend form field set
so field set does have its background
color if we change that it doesn't oh so
it's getting overwritten somewhere
probably the
form um form does not have it
interesting there's a
row so that's a field
set let's change that to just like
white
well there we go okay so it was it was
just not thin enough so let's go
to um let's change that background
color so now here's where we can just
play with it let's change it to white
smoke there we go so now we get
something that's not too bad let's do
ghost white no white
smoke floral
white some of these actually look pretty
good
um let's try it with a blue let's see
what we can get what sort of Blues can
we get we get one that looks really nice
uh Alice is not bad that's all
darker and this all is going to come
related to your uh your specific Taste
of
course and of course and also note that
the background the text depending on
what we're at can look you know be sort
of annoying so let's
just uh let's just keep it like that
we're going to go with this Alice blue
for now so that's in the field
set I'm not sure I want that let's go
back to
whoop let's go back to here and our
field set let's like drop him instead
make him like uh probably
222 nope wrong way uh e e
e so that's that's going to be somewhat
grayish that should probably be okay
let's go check that real
quick if I go to my field set
let's see if ee looks good if I go here
B uh background color is
EE
H let's do f
f f f
f
uh probably too much let's do
f
b
that's not too bad and it does it's
still it's enough that's distinct so
let's do fbfb that will
work so we keep
that it gives us this we probably we can
do anything that's here because these
are all inputs what we could do is we
can change those
backgrounds so actually it's forign
control so we can do it like that
background color let's just make it like
I don't
know there so we can change our
background color there and we do not
have it in so it's saying form control
so we can take this whole
thing
wh um let's take this whole piece ah
crud whole piece and let's see if we can
take that oh it doesn't want it okay so
this just going to be
form-control and let's tweak this a
little
bit and so this is what we've got
basically did it go all the way to
transition yes it did all the way to e
out okay so let's change this around a
little bit let's change our background
color let's get it a little little
bit darker so let's just go let's tweak
this a little bit so we're going to do
uh let me go to our border radius we're
going to round these out a little
bit uh let's do this does he have one
no maybe he does oh he does have one
okay so he's got a little bit of one if
we look we can see it okay let's do
let's just increase him up to 0.1 let's
make our
border let's use our dark blue and what
you're usually going to find is you
should have within any design you should
have sort of a
um let's see what did I
miss so he should
be 1
14477 there we go okay so that's going
to be a you should have sort of a a
theme of colors you probably only have
certain colors you're going to use on a
regular basis so now if that's my
background let's make that my color as
well that's going to be my text color
and maybe we're going to go one deeper
so if we go
03366 that's like a nice dark color for
our text and we want our background
color to be to like pop a little bit so
let's make it a little bit darker I
think we were doing so we were doing
like an
e let's do a
DDD so it's like a little bit darker
what we could do is we could add a
little bit of a blue to it so we could
probably go uh red green blue so if you
go like a
004 but if you go 0
e that's like a lot of blue but now if
we wash that out with like uh Let's do
ffe let's do a
CCE now we're starting to get something
that's a little more let's do
DDE
and let's do EF let's see what that
looks
like there we go so you've got like a
little bit
different got a little bit something to
do that we can also do um border
color if you do this like 3D face so
that's what we got with some of our our
pieces here so we could actually do
something where we can actually change
our um sort of how that looks in
general so we can play around with its
appearance uh let's see how do we want
to do this so if we do
yeah see if it'll give us one that is
let's see that's a style let's see if we
change our border to
wh um I think I can do inset
yeah I think that'll work so this is
where it takes a little bit of playing
around and you just go find some stuff
that looks good and then look at how
they did it like I'm down here where you
just sort of view the
source so now yeah see now we're seeing
like The Border's
different
uh when you enter into it we got a
little bit of color we've got that's a
little color we're starting to see some
of these already so if we go in here
let's see how that looks o that is not
quite what we want but we can see now
that our inputs have got a lot more
character to them so let's go to the
background color that was what EF let's
do uh let's try e no that's going be too
much let's try e
d
oh let's try this oops let's do that
instead of e f let's
do uh let's
try uh F7
F7
7f
F let's drop that to about a
two cuz those were
e
uh let's do
F0 let's do e
a ay there we go let's try that one that
may be wh so we go over here let's just
look at that real
quick so if we change that
to a note once we're in it we are
getting something that's a little
different so we probably need to change
that uh # EA E A
FF is that what we
had that's actually still a little
bright when you look at it that way so
let's go
Ed
Ed uh let's try e e e e no still too
much let's try
F3
F3
fa there we go so we're going to do fa
fa
FF so that gives us something that's not
too bad
so fa F FF so it gives us our background
color and uh one of the things I'm want
to look at is here so when you're in
here you're going to get something that
is
probably going to pick up form control
and we
get uh why is he picking that up it's
because he's a form control and he's
probably active so somewhere in here
we're going to get to see maybe that's
down
here
[Music]
uh well one of the things we can do I'm
not going to dig into it too much is
that we can get something but it is sort
of nice actually this sort of work works
okay because then we can get it within
our form control and then we get our
regular inputs which is probably what is
getting picked up
here uh let's
see no because those are still getting
put there too so uh there's a couple
things we can do we can probably tweak
him uh if we want to because it's going
to change some stuff around but this is
giving us again so now we've got form
Fields uh what was the other one we want
to look at so if we look at
this now we've got stuff that looks a
little different we definitely are
getting some some level of you know oh
so let's go back to this so we wanted it
we Chang this to a table we change those
to
labels and if we look here that's a
table responsive if we get rid of that
table
responsive then it doesn't really do
anything so let's see let's
go
let's see what we want to play around
with here is what we want to do is we
want to make our table look a little bit
better so uh
there so we can also do that here so now
we've got our containers our containers
have a Max
width and what else do they
have let's change this uh I'm not sure
what he's picking oh he's from
containers. secc so if we do it to
just uh
90% now we've got something that fills
the screen a little bit more probably
maybe too much so let's go to
85% so let's do that that's going to
change if we go here now granted it's
just reset it so if we come back here so
let's go to our containers I don't know
if we have that defined anywhere here we
don't so let's change that a little bit
real quick so that is a style and all
we're going to do is we're going to do
Max width and that's going to be let's
make it
85% that is going to dramatically change
the look and feel of our site with one
line of
coat and we may not want that but we
will see how it
goes yeah so see now this is out wider
when we log in we're going to see
everything is bigger we're actually
using our screen real estate now so this
is a start even if we go to our forms
everything is fitting a little bit
different so I think at this point we're
going to wrap this one up and we're
going to come back next time let's we're
going to play around with this table a
little bit more we're going to add some
stuff to make this thing useful uh it is
using the table responsive piece which
is good but I think we want to do a
couple things to clean this up so we
have a table responsive which is here
and I believe here who whoa I think this
one is table responsive as
well that we want to do some things here
well in this one see like here we've got
our border so we're going to play around
with some of this to get some of our
styling in maybe get it so we've got
some space but that will be next time
around if you have questions uh requests
send an email to info@ developin
word.com uh otherwise go out there enjoy
your coding have a great day a great
week and we will talk to you next time
hello this is Rob with with develop
andur also known as building better
developers wanted to announce that we
have school. developin 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 toos 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 just have it in 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