Trading Website Community Project - 43 - How to Make Awesome Colored Tabs

Facebook - https://www.facebook.com/TheNewBoston-464114846956315/
GitHub - https://github.com/buckyroberts
Google+ - https://plus.google.com/+BuckyRoberts
LinkedIn - https://www.linkedin.com/in/buckyroberts
reddit - https://www.reddit.com/r/thenewboston/
Support - https://www.patreon.com/thenewboston
thenewboston - https://thenewboston.com/
Twitter - https://twitter.com/bucky_roberts

---

Closed Caption:

are a casual can tear 43rd video in in
this video I'm gonna teach you guys had
added cool
feature to the website the Sea Ray here
you see how
we're on the add in item page well on
the links on the left hand side
all on the backgrounds of these links
are white except for
that pager on on at item page
or Adam link the background his orange
now this is the same no matter what you
go to you can go to your inbox
now check it out all these links are
white except
are active page for current page is
orange if you go to pending
then this one is origin go ahead and do
your stuff on the page
and this is kinda cool feature because
it said I'm just having static plane
links
all of them having white background it
kinda gives the user
more interactive feeling kind more Hwy
or graphical user interface
feeling more than just a plain old
website so
there's a feature that I thought was
awesome in I'm gonna teach you guys had
to do that right now
so before show you guys the code I want
to give you guys the concept
by default every single page
has a white background or every single
one of these little planks
has a white background now what I'm
going to do
is in my PHP code I'm gonna determine
what page
Iran into depending on which page there
on
I'm gonna say okay overwrite the CSS for
the white background
and make it orange instead now not only
do we change background to orange
Bali also change the color of the Aero
to white and
color the text to why is well
so now that I showed you guys what this
feature is
let's go ahead in codice baby now if you
guys were wondering why the heck I
passed in that number 0
it's because the number
represents which page were on for
example
every single page its designated a
number
the add items page of course has 0 arm
shipping info is three offers the client
is six
so we're going to do on every single
page we're going to include these links
except we're gonna change this number to
either 9 12
0 so on and so forth that is how r
what's a nose
watch pager on AKA which link two colors
so now I'm sure you guys had to do that
encode
what you do is go ahead and add a switch
statement
and the first thing that I want to do is
pass and variable
X now what X where represents is
basically
watch page or which link
do you want color well in the case up
zero
two straight k0 this means that we want
to color de add
items link so make a variable called
add well or not ADD caps lock add
items and set the sequel to this now
the court thing is I'm gonna type some
CSS
one line of CSS and its can be kinda
confusing
by after this I'm can use the same
lineup CSS like
16 times so after you get done
sporting CSS then you can just copy and
paste so what we want to do
is we want overrate the current style
like
which is of course the plain white
background so great style
set this equal to color white
which changes the text color to white
text
shadow in for the tech shadow just go
ahead but one pixel
1 pixel 3 pixels
and black which I don't know I just
think that shadow looks cool
now the last now we need to do is we
need to change
the background now the background is
actually
colored orange it's actually in image
and the reason I chose to use
image is because then I get white a row
as well
so instead of having at a row in then
color orange
I did all in one nice white so
background is actually a link to the
file
in and whenever you're working with the
50 in CSS but URL
and put dot Da
images account
now not paying
and by default the white
image with the gray Aero is 00
this image look at the image in your
understand what I'm talking about
is that location 0 -26 which means
don't go any pixels overbook 0 20 six
pixels down
and that's going to give you your orange
image if you were 00 ill give you your
white image
this is called image mapping or um tie
all
people call a different things but you
know cult whatever on college tuna bacon
ham for all I care
now after this we just want to break
now sensor can be working with a lot of
different cases
what I did is I made this a whole lot
easier for you
in order to easily edit this what I do
is I actually at this all on one mine
so the break
in cases are like this now just so you
guys can
easily see that story I don't have word
a wrap on but whenever I'm coding I turn
word wrap off so it looks like that
see that so to one big long string of
text but what I did already
is a coded to rest at this switch
statement
why because I don't know hold on let me
go ahead and not paste this first
accorded and another file accorded the
rest the switch statement
because like are a lot of the things I'm
teaching us
I don't wanna waste your time and show
you guys the exact same code
over and over and over again so the only
thing that changes is the number
what pager on and the variable name
so you guys are gonna see you later on
when we utilize is variable names
whenever we're
a creating the did boxes in we need
include that CSS
but guys I just one arm remind you guys
that
the style up every single one of these
is the same
so aside from that the last thing I want
to mention is
make sure you put case 99 break
at the very end and there's a reasoning
behind this
and of course I know I say this a lot
but
you guys are going to understand in the
upcoming tutorials so for now
just go ahead and save this if you guys
don't wanna you know pause the video in
type all of this
and where you guys can do is just got my
form and download the file
and everything will be set up for you
many ways that is why we past
a number into this function basically to
where our website know which tab needs
coloring
so for now think ash watchin in the next
hour we're going to be doing
is making the rest up those links on the
left hand side
so like I said he has a frigate
subscribe to see as the next video