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 begins a short series focused on CSS setup and customizations aimed at getting developers up to speed on CSS basics. Part 1 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 working our way through our project we're converting over one of the things we're going to do and we're going to focus on this episode and maybe a couple more after this is modernizing the look a little bit if you look around our site as we're bounce on a couple of links it's me it's one of those it's okay it it's not it doesn't like pop and some stuff like that it doesn't look super modern so what we're going to do is we are going to tweak the CSS and talk a little bit about stylesheets and such in general as we do that so if we look at this site one of the things we can do is I'm going to just take a CSS file from somewhere else that's uh off of one of my sites and I'm just going to swap out the code for the CSS and I'm going to show you that when you think of like skinning a site and stuff like that although it's not set up exactly the same what we will see is now you see something that looks a little different uh you've got like the and we've got the still some of the headers and stuff like that we're seeing this a little different we're seeing that our Legend looks a little different than it did the pages the color the footer the menu up here all of these things have sort of changed up a little bit so now we've got something um that looks if we see it's got a it has a little different look and feel so what we want to do with this is let's do some additions to this so first thing I want to do is I'm going to go to these These are legends within a field set if you look and we can look at it for example on the uh we can look at at the dashboard basically you see right here it's a field set is that entire box and then the legend is within that and if we go look for the legend let's do some tweaking so one of the things we want to do is let's take that Legend and let's see now the field set itself note so if you go up here uh this container actually if we look here I think that's the we look at the it's probably the legend if we look at the field set it I wonder if it has lines so if you can here it's got some padding it's got a margin and we've got some padding [Music] after margin let's see border box there we go so somewhere after that I think we've got little border box that changes it up a little bit and if you're looking at this this is one of the things you can do when you're playing around depending on what your browser is you can do things where you you can like pull some you can actually just quickly shut off some of the features and see what that looks like so for example if I go to my Legend itself I have uh a background color that's that gray that you see I've got a color for the text otherwise look it goes to a default uh the Border I can change that border a little bit the padding you can see now that sort of spaces it out a little bit the font size is actually so that's where it would be if I didn't have that special font size and text the line is left is going to be default but let's tweak that so I don't like the font size so let's improve our font size a little bit and let's uh let's tweak that color let's make that let's change those colors a little bit so we're going to go to our Legend in our so if we go find Legend here this is what it looks like so one thing things we didn't want to do is we don't want to bother with the font size we're going to leave it just normal Tex toine let's make that Center so now we're going to push it to the center that background color let's see what do we want to do with this let's take let's swap essentially the um we're going to clean this up a little bit so we're going to do we're going to keep the Border color the same which is this let's we could thicken a little bit H let's thicken a little bit and we're going to take the color let's just swap these two so we're going to take the background color and the color is going to be that uh e and background color is going to be that you may note that you can sometimes do it in three if it's just the same thing over and over again then it's going to be it'll allow you to do a three a length of three so like this 3 669 I can do 369 and it look it's the exact same color as the 33 6699 so there's like a little bit of a short hand you can do if that's the case for you uh sometimes you're not going to have you know exactly the same if you got very simple colors then you can do that so let's just let's start with just that let's go take a look at that let's see what our field sets look like at our Legends so now if we come in here if it'll run now look we see these already as we see all of the Legends are changing and so we've got something that it sort of Pops a little bit now you've got something that pops now one of the things we can do here is we can actually change that Legend a little bit more and let's see I'm going to steal this and let's go back to our Legend and we're going to add we're going to round this out a little bit so if we go here we can add a thing and let's do a border radius we'll just start with four pixels that's um that's probably not bad it'll be enough to see the different oh let's make it like 10 we're going to make it a little more distinct so border radius we can add to any box it's going to change the corners on it so if you see these little you know it's very square right now we come back notice now we've got these things that got a little rounding to them so that's probably I'm going to say that's a little too much so I'm going to cut that in half and so now I've got something that's going to look a little bit better now one other things I want to do is I want to change up the colors here so right now I think the the container that I'm in or the field set itself if we go over here field set does not have any kind of color to it uh it's got it now and you can see here there something else probably to note is we've got a couple CSS files we're using so here at the reboot docss which is basic compiled CSS we've got some information around a field set but then we actually overwrite it so the one at the top here or at least not override these are the things that this is where it gets all of its values so it gets padding margin and border but that Min width I think gets right here gets overset so if I do this and then you can see we now that men width gets picked up from the one below there and we're just going to touch on some stuff because you can get pretty crazy pretty quick now let's take a look at while we're here if we look at our buttons we're going to see uh that this is using a bootstrap button primary it's got a color and a background color and that's really where it's picking those up and it's coming from the button scss so it's got a border color that we could change it's really hard to see that thinness but we also have a uh because it's that we have a a color and a background color and this is our button primary and so we could change this let's pick let's change well I sort of like uh let's tweak those a little bit so let's go to our button primary and this is uh this goes back to some of the buttons we talked about so if I do secondary I don't even know if I have that defined in the CSS so now you can see where it's gray if I go to secondary uh I do not have it in the core so I don't have to worry about that if I do button uh I believe it's Error I always forget uh button error is is nope uh if I do button uh warning I think or let's do button info so button info we've got a blue but again oh uh no we still don't have that overwritten so we can we can pick a different couple different ways we want to do it let's go back to our button primary and let's tweak a little bit so we've got uh we got something looks okay so if we go to button primary let's change the background color actually let's change the text we're going to go to this like red that we've got in a couple places oh it's button default let's see what that one looks like uh if we do so we come in here we can do button default oh that's sort of good so we may want to just change those over to and we get notice you get a a mouse over it changes it up a little bit so if we go look for button default uh let's see if we've got that yeah here we have if it's active or not so we change the background color a little bit so let's change the background color if that's red let's change it to let's go with like a gray so we'll go with like uh DDD maybe uh notice that sometimes depend on what you're in sometimes you can be able to see the color right away you can also find color wheels and stuff like that that you can easily uh let's go to let's try it like down at like 888 ah that probably looks like it's not quite there so let's change it let's go back to what we say well we'll do like a CCC so we'll do that and we're going to make the color that red so we're going to go back and find our button default and and now the background color is going to become the text we're basically going to swap the two oh there you go that's not two that's almost exactly what I did so we're going to come back here swap the two so we've got that for now our default button now our primary is a little different so what we probably want to do here is let's make these primary that's easy enough to do this is in our homepage login so if we go up here uh we're going to go hit our template wherever I put my templates there we go and I think it's just called home and I'm going go button default or no button is that primary that's what I had yeah here we go so submit forgot password those are all primary instead those are going to become default oops if I write it if I spell it correctly and if we come here oh do we have sign up uh sign up somewhere else oh this might be different submit register oops that's a different one uh let's leave that so it's not that it is oh it's login instead of home here we go login form email password there we go so those are going to be default and not the when we do this we could go through and we could do sweeping changes to our site by changing just a little bit of our CSS so one of the things we want to do is let's change it let's do that right now let's make our field sets we're going to go change the background color of that a little bit we're going to go to so we go back to our core CSS we find our field set and if you don't find it that means you haven't described you haven't defined it outside of whatever the norm or the defaults are so you can always tweak that a little bit as you need to so now I'm going to go to background color and I'm going to make it just a little bit darker so if I look here uh let's see let me just pick background uh let me go actually up to body if I go to body then I probably have a yeah so I've got a background color of this guy F4 let's just copy him and so his background color if I go to the field set he's going to have a background wh background color and what I'm going to do is I'm going to take that but I want to darken it one of the things I can do is by darking I'm just going to take every single number and I'm going to add a plus one basically subtract one so that F4 becomes E3 the F6 becomes E5 and and the F9 becomes E8 and let's see what that color looks like so that's a little darker so let's just go with that for right now so we're going to take that with our field set and what else do we want to do want anything let's just do that for now uh what we do have that yeah we're going to leave it like that uh because what we could do that's border color that's a style okay so let's do that and let's just see what we get just by tweaking a few things tweaked it we changed some button Styles let's see what we do what we get just out of our field sets now you see now we got something that pops a little bit more or is a little more different at least in how it looks now you know we can play around with that which we will um if I go log in we're also going to see that across the board but notice now before I had like my odds and evens and I bet those have not been defined if I go here uh row did he have a uh wait I need to go to my row yeah so row even even doesn't exist anymore so what I need to do is I want to take an even and an odd so if that's like my normal color let's tweak this a little bit so if it's even we're just going to make these this is going to be nice easy to do because what we're going to do is we're going to do an even and we're going to do an odd and let's do uh let's start with we're going to sort of start with these we'll play with these colors first um here we go so if it's even let's see if it's uh yeah we'll start with even so with even we're going to go with like a heavier background and if it's odd we're going to go with something a little different so right now these are sort of reversed basic basically so which means we can just take this um that's going to be hash e that's going to be the whop color is going to be this color and then instead let's do the same thing but we're going to tweak these a little bit so if it's odd if it's odd what we want to do is let's make it not quite so let's go so uh we're going to add three to this so instead of so it's going to be 6699 and then it's a b c right one two three yep C oh no I'm sorry zero just going to be BB so then it's a little bit lighter color there and we want this to be a darker color so let's go three down so just going BBB let's see how that looks and this is how we can start making some changes es to our stuff again sweeping with a few minor changes so now if we look I notice we've already like made did I hit the right password I did uh but it's not picking up even oh it's not picking up even an odd so let's go back oh because I need to probably do doeven and odd because they are classes those are class names so I need if it's a default if it's a tag I can do it without uh it's just the name but if it is a class which I forgot to mention is it's going to have to prefix with a DOT so now if we take a look at it we run this through and we come in now see now we're seeing our um we're going to see all of our little bit of our uh table are odd and evens now one of the things we had before is we had some way to you know we had it on a mouse over so that's what we're going to do next is we're going to talk about our you know actually hovering whatever selected row we have but that's I think a good start so couple things think about as you're putting your your site together is to make sure that you're using Styles that's one of the things that we're supposed to do Google likes it better if you've got Styles and classes as opposed to just like all of these and not in online but actually using a style sheet so you don't have uh styling code all over the place and your one of the big benefits is now as I'm doing it I'm going to see all of these things start show up because they're all based on a CSS so we're going to play around with it some more next time around uh but as always shoot an EMA uh shoot an email to info@ developer.com if you have any questions uh go out there and have yourself a great day a great week and we will talk to you next time [Music] 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-tos 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. dvelop andur we just have it in a little more of a uh educational format and a way for you to track your progress as you move forward becoming a better developer
Transcript Segments
[Music]
well hello and welcome back we are
continuing working our way through our
project we're converting over one of the
things we're going to do and we're going
to focus on this episode and maybe a
couple more after this
is modernizing the look a little bit
if you look around our site as we're
bounce on a couple of links it's me it's
one of those it's okay it it's not it
doesn't like pop and some stuff like
that it doesn't look super modern so
what we're going to do is we are going
to tweak the CSS and talk a little bit
about stylesheets and such in general as
we do that so if we look at this site
one of the things we can do is I'm going
to just take a CSS file from somewhere
else that's uh off of one of my sites
and I'm just going to swap out the code
for the CSS and I'm going to show you
that when you think of like skinning a
site and stuff like that although it's
not set up exactly the same what we will
see is now you see something that looks
a little different uh you've got like
the and we've got the still some of the
headers and stuff like that we're seeing
this a little different we're seeing
that our Legend looks a little different
than it
did the pages the color the footer
the menu up here all of these things
have sort of changed up a little bit so
now we've got something um that looks if
we see it's got a it has a little
different look and feel so what we want
to do with this is let's do some
additions to this so first thing I want
to do is I'm going to go to these These
are legends within a field set if you
look and we can look at it for example
on the uh we can look at at the
dashboard basically you see right here
it's a field set is that entire box and
then the legend is within that and if we
go look for the legend let's do some
tweaking so one of the things we want to
do is let's take that Legend and let's
see now the field set itself note so if
you go up
here uh
this
container actually if we look here I
think that's
the we look at the it's probably the
legend if we look at the field set it I
wonder if it has lines so if you can
here it's got some padding it's got a
margin and we've got some padding
[Music]
after margin let's see border box there
we go so somewhere after that I think
we've got little border box that changes
it up a little bit and if you're looking
at this this is one of the things you
can do when you're playing around
depending on what your browser is you
can do things where you you can like
pull some you can actually just quickly
shut off some of the features and see
what that looks like so for example if I
go
to my Legend
itself I have uh a background color
that's that gray that you see I've got a
color for the text otherwise look it
goes to a default uh the Border I can
change that border a little
bit the padding you can see now that
sort of spaces it out a little bit the
font size is actually so that's where it
would be if I didn't have that special
font size and text the line is left is
going to be default but let's tweak that
so I don't like the font size so let's
improve our font size a little
bit
and let's uh let's tweak that color
let's make that let's change those
colors a little bit so we're going to go
to our Legend in our so if we go find
Legend
here this is what it looks like so one
thing things we didn't want to do is we
don't want to bother with the font size
we're going to leave it just normal Tex
toine let's make that Center so now
we're going to push it to the
center that background
color let's see what do we want to do
with this let's
take let's swap essentially the um we're
going to clean this up a little bit so
we're going to do we're going to keep
the Border color the same which is this
let's we could thicken a little bit H
let's thicken a little
bit and we're going to take the color
let's just swap these two so we're going
to take
the background
color and the color is going to be that
uh
e and background color is going to be
that you may
note that you can sometimes do it in
three if it's just the same thing over
and over again then it's going to be
it'll allow you to do a three a length
of three so like this 3 669 I can do
369 and it look it's the exact same
color as the 33 6699 so there's like a
little bit of a short hand you can do if
that's the case for you uh sometimes
you're not going to have you know
exactly the same if you got very simple
colors then you can do that so let's
just let's start with just that let's go
take a look at that let's see what our
field sets look like at our Legends
so now if we come in here if it'll
run now look we see these already as we
see all of the Legends are
changing and so we've got something that
it sort of Pops a little bit now you've
got something that pops now one of the
things we can do
here is we can actually change that
Legend a little bit
more and let's
see I'm going to steal this
and let's go back to our Legend and
we're going to add we're going to round
this out a little
bit so if we go here we can add a thing
and let's do a border radius we'll just
start with four pixels that's um that's
probably not bad it'll be enough to see
the different oh let's make it like 10
we're going to make it a little more
distinct so border radius we can add to
any box it's going to change the corners
on it so if you see these little you
know it's very square right now we come
back notice now we've got these things
that got a little rounding to them so
that's probably I'm going to say that's
a little too much so I'm going to cut
that in
half and so now I've got something
that's going to look a little bit better
now one other things I want to do is I
want to change up the colors here so
right now I think the the container that
I'm in or the field set
itself if we go over here field set does
not have any kind of color to it uh it's
got it now and you can see here there
something else probably to note is we've
got a couple CSS files we're using so
here at the reboot
docss which is basic compiled CSS we've
got some information around a field set
but then we actually overwrite it so the
one at the top here or at least not
override these are the things that this
is where it gets all of its values so it
gets padding margin and border but that
Min width I think gets right here gets
overset so if I do this and then you can
see we now that men width gets picked up
from the one
below there and we're just going to
touch on some stuff because you can get
pretty crazy pretty quick now let's take
a look at while we're here if we look at
our buttons we're going to see uh that
this is using a bootstrap button primary
it's got a color and a background color
and that's really where it's picking
those up and it's coming from the button
scss so it's got a border color that we
could change it's really hard to see
that thinness but we also have a uh
because it's
that we have a a color and a background
color and this is our button primary and
so we could change this let's
pick let's change well I sort of like uh
let's tweak those a little bit so let's
go to our button primary and this
is uh this goes back to some of the
buttons we talked about so if I do
secondary I don't even know if I have
that defined in the CSS so now you can
see where it's gray if I go to
secondary uh I do not have it in the
core so I don't have to worry about that
if I do button uh I believe it's Error I
always
forget uh button error is
is nope uh if I do
button uh warning I think or let's do
button
info so button info we've got a blue but
again oh uh no we still don't have that
overwritten so we can we can pick a
different couple different ways we want
to do it let's go back to our button
primary and let's tweak a little bit so
we've got uh we got something looks okay
so if we go to button
primary
let's
change the background color actually
let's change the text we're going to go
to this like red that we've got in a
couple places oh it's button default
let's see what that one looks like uh if
we
do so we come in here we can do button
default oh that's sort of good so we may
want to just change those over to and we
get notice you get a a mouse over it
changes it up a little bit so if we go
look for button default
uh let's see if we've got
that yeah here we have if it's active or
not so we change the background color a
little bit so let's change the
background
color if that's red let's change it
to let's go with like a
gray so we'll go with like uh DDD
maybe uh notice that sometimes depend on
what you're in sometimes you can be able
to see the color right away you can also
find color wheels and stuff like that
that you can easily uh let's go to let's
try it like down at like
888 ah that probably looks like it's not
quite there so let's change it let's go
back to what we say well we'll do like a
CCC so we'll do that and we're going to
make the color that red so we're going
to go back and find our button
default and and now the background color
is going to become the text we're
basically going to swap the two oh there
you go that's not two that's almost
exactly what I did so we're going to
come back here swap the
two so we've got that for now our
default
button now our
primary is a little different so what we
probably want to do here is let's make
these primary that's easy enough to do
this is in our homepage login so if we
go up here uh we're going to go hit our
template wherever I put my templates
there we
go and I think it's just called
home and I'm going go button default or
no button is that primary that's what I
had yeah here we go so submit forgot
password those are all primary instead
those are going to become
default oops if I write it if I spell it
correctly and if we come
here
oh do we have sign up uh sign up
somewhere
else oh this might be different submit
register oops that's a different one uh
let's leave
that so it's not that it is oh it's
login instead of
home here we go login form email
password there we
go so those are going to be
default and not the when we do this we
could go through and we could do
sweeping changes to our site by changing
just a little bit of our CSS so one of
the things we want to do is let's change
it let's do that right
now let's make our field sets we're
going to go change the background color
of that a little bit we're going to go
to so we go back to our core CSS we find
our field set and if you don't find it
that means you haven't described you
haven't defined it outside of whatever
the norm or the defaults are so you can
always tweak that a little bit as you
need to so now I'm going to go to
background
color and I'm going to make it just a
little bit darker so if I look
here uh let's see let me just pick
background uh let me go actually up to
body if I go
to body then I probably have a yeah so
I've got a background color of this
guy F4 let's just copy him and so his
background color if I go to the field
set
he's going to have
a background
wh background
color and what I'm going to do is I'm
going to take that but I want to darken
it one of the things I can do is by
darking I'm just going to take every
single number and I'm going to add a
plus one basically subtract one so that
F4 becomes
E3 the F6 becomes E5 and and the F9
becomes
E8 and let's see what that color looks
like so that's a little darker so let's
just go with that for right now so we're
going to take that with our field set
and what else do we want to do want
anything let's just do that for now uh
what we do have that yeah we're going to
leave it like that uh because what we
could do that's border color that's a
style okay so let's do that and let's
just see what we get just by tweaking a
few things tweaked it we changed some
button Styles let's see what we do what
we get just out of our field sets now
you see now we got something that pops a
little bit more or is a little more
different at least in how it looks now
you know we can play around with that
which we
will um if I go log in we're also going
to see that across the board but notice
now before I had like my odds and evens
and I bet those have not been defined if
I go
here uh row did he have a uh wait I need
to go to my row yeah so row even even
doesn't exist anymore so what I need to
do is I want to take an even and an odd
so if that's like my normal
color let's tweak this a little bit so
if it's even we're just going to make
these this is going to be nice easy to
do because what we're going to do is
we're going to do an
even and we're going to do an
odd and let's
do uh let's start with we're going to
sort of start with these we'll play with
these colors first um here we
go so if it's
even let's see if it's uh yeah we'll
start with even so with even we're going
to go with like a heavier background and
if it's odd we're going to go with
something a little
different so right now these are sort of
reversed basic basically so which means
we can just take this
um that's going to be hash
e that's going to be the whop color is
going to be this
color and then
instead let's do the same thing but
we're going to tweak these a little bit
so if it's
odd if it's odd what we want to do is
let's make it not quite so let's go so
uh we're going to add three to this so
instead of so it's going to be
6699 and then it's a b c right one two
three yep C oh no I'm sorry zero just
going to be
BB so then it's a little bit lighter
color there and we want this to be a
darker color so let's go three down so
just going
BBB let's see how that looks and this is
how we can start making some changes es
to our stuff again sweeping with a few
minor changes so now if we
look I notice we've already like
made did I hit the right password I did
uh but it's not picking up even oh it's
not picking up even an
odd so let's go back oh because I need
to probably do
doeven and odd because they are classes
those are class names
so I need if it's a default if it's a
tag I can do it without uh it's just the
name but if it is a class which I forgot
to mention is it's going to have to
prefix with a DOT so now if we take a
look at
it we run this
through and we come
in now see now we're seeing our um we're
going to see all of our little bit of
our
uh table are odd and evens now one of
the things we had before is we had some
way to you know we had it on a mouse
over so that's what we're going to do
next is we're going to talk about our
you know actually hovering whatever
selected row we have but that's I think
a good start so couple things think
about as you're putting your your site
together is to make sure that you're
using Styles that's one of the things
that we're supposed to do Google likes
it better if you've got Styles and
classes as opposed to just like all of
these and not in online but actually
using a style
sheet so you don't have uh styling code
all over the place and your one of the
big benefits is now as I'm doing it I'm
going to see all of these things start
show up because they're all based on a
CSS so we're going to play around with
it some more next time around uh but as
always shoot an EMA uh shoot an email to
info@ developer.com if you have any
questions uh go out there and have
yourself a great day a great week and we
will talk to you next time
[Music]
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-tos 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.
dvelop andur we just have it in a little
more of a uh educational format and a
way for you to track your progress as
you move forward becoming a better
developer