so about 10 months ago i created a tutorial video explaining how to use the
inspect element feature in Google Chrome to make editing your stylesheets in Reddit
super easy. I got a lot of positive feedback from that; a lot of people liked it uh...
unfortunately it's pretty outdated now as Reddit has drastically changed
the way they handled CSS and the way the output it.
and uh... Google Chrome has changed a lot of the ways that the inspect element
um... feature works in Chrome. So I'm going to create an updated version of the
video which is what you're watching currently.
uh... So lets dive in with just the basics. If you right click anywhere on
the page
you're going to bring up the
inspect element option. so
click on that.
and if this window pops up down here undocked, there's a little button
at the bottom corner to dock it.
There is four main parts to this. At the top we have a couple different tabs different
sections
Here is the main code
for the page as its rendered on the side is specific details about the line
of code you have selected
and then at the bottom we have a path showing the item you have selected and where
that is and all of it's parent elements.
so
uh...
This can be extremely useful. This is just scratching the surface. I'm going to go over some stuff
with you.
For example if we were to
right-click on be background up here, I want to change this from the default blue to
something else
Right-Click and Inspect Element.
and it's going to take me to #header-bottom-left
and you'll see over in the sidebar, it tells you all the information about this.
You can scroll down and see everything that applies to it.
You'll see here in the line of code
it shows that it has the CSS already applied to it. and says font-size: larger;
If I uncheck this box, you'll see that
in the header of the page
the font-size is changing.
But there's nothing in here talking about the background-color
Now I can add in a background-color here and it will change this, but that's not where it's
actually set too
so it really doesn't matter if I add it here or in it's parent element
which is #header
so you can see down here at the bottom there's the parent element #header
It does have a background-color and that is
what's being changed. So, if I uncheck that one, I'll see that IS what's up there.
I can either add in a background element for #header-bottom-left,
or I can just alter the one for #header
and what's neat is that it changes in real-time. So if I wanted to change
this to a gray tone, I can type in #CCC
and it updates instantly
as i type it in. Which is very helpful
That lets you see in real-time what it looks like. How that
color
has contrast with the other elements that are on the page in the same area, so on.
Very helpful! Another thing that is
really useful about the sidebar is elements that have
a numeric value like something that's in pixels or points (px or pt).
For example; this search bar on the side, when i have it selected,
it shows me it's information in the CSS.
If i were to change, say, the padding or the border
...the font size, or in this case the width; just click on it once it becomes
selected
use your arrow keys, I'm just going to press the down arrow key,
and you'll see that the numbers going down
at the same time it's updating at the top. If I just hold it down you'll see that this
will update
and show me
in real time
how big
the numeric value it's giving is actually showing up as.
If I hold down Shift and Up, or Shift and Down
then it will go up by increments of ten.
So very, very useful to see things in real time rather than
altering the width and then saving and refreshing the page to see
if that's correct if you need to adjust if you want to farm out enough this you
can see instantly it picks
right-sizing not so
very helpful that's with on america is going to change the font size for
example
i can imprint that down one pixel of time
were up
very useful to see in real time see you get the exact size that you want for
something
uh... now
where does this code owen every type it in
jokes this is a refresh this page
that stuff i changed the background color b font size for the search for
those disappear dozer on only editing this in real time put the page similar
refresh the page
the zealots are gone
uh... so where does that story's well-mannered very easy to get area so
uh... although this is useful for really quick thinking just need to change one
value and then
uh... and it that you started this is very useful
uh... of more
are useful way of using this
is to go over to the sources panel
anglesey underrated static
the separated style sheet there should be a long random
uh... file name in here
and that will contain
all of the uh...
all the styles for this particular so great that were created by the
moderators but
so you'll notice that it's bolt compressed into one big wineries if that
isn't spelling remove all of the spaces and a national on
unnecessary uh...
cynical ins and returns
it's removing characters which makes the file size smaller uses list and with it
downloads faster have let small benefits but um...
for classes are very helpful xx it's not very readable insulin dateline like this
uh...
you can ignore the city just wanted to
control and other key gordon
add a few returns and then add in something like had header
haven't given background-color
uh... of
rather something um...
then you'd see that that doesn't update in real time you can do you think
actor totally done you can use copy that's
and then paste it into your style sheet and that's something that values quite
often when i'm just making quick edits
uh... however sometimes useful speaker to be done a lot of work to be able to
edits
the original
full version of the c_s_i_s_ without it being compressed um... so there's a
couple things you can do for that
uh... want is you get if you do if you're not logged in or are you all are
uh...
uh... looking at the style sheet for a summer if he did not mine
you're our moderator of
in go to self-styled style sheet
and it will show you this page here
which has units all of the code
for that style sheet
and this is the paid you did when you go to about style sheet and you're not a
moderator or you're not logged in
and you can copy that's been pretty effectively
steal some houses code now the
and then pay seven to your separate
or use this for for editing
uh... the problem when you run into
whatever copying from this this page or if you are logged in you would see this
page
disco same thing you can just slept all and copying
um...
the problem right into his if for example the other server like this one
where there is a lot of images venues
decode that you have to use in your style sheet
uh... to get this cargo uh... background or
of this victory in background image of your
uh... is p
is the name of the image surrounded by double percent side so you actually need
to have the image uploaded
and have a name
named here and then referenced
units navdeep
if you were to copy all this
and then paste it into
the uh... the sources window and inspect a moment
resources slept on a place with us
all those images will disappear because
chrome doesn't know what to do
with this radical doesn't understand what
phones inside of a proxy double csa scientist referencing
so you get and uh... a page with albany images
now if your bus upgraded
like this one only has one www chloe image behind the submit button and
background-image
then that doesn't matter so much that's not a big deal when you can just copy
paste at an end
and maker edits uh... to adjust the colors and the sizes and weights of
things
there easily and just
keep it the original code that you had um... with all of the
the reddit references and
you can keep all those
uh... and not have to
to worry about uh... updating those later
but if you were to you something
uh... you did have images like this gradients in the background here or this
image of the sidebar
as you want to i retain those water editing it
your other option
is to select
all of the code this one big long line of compressed tone
copy that and go to a website like
clean csf stockholm or any other
cssc optimizer clean out their and she's missus example
pace than the code is a copy of that one big long line
changes so you wanna hiring ability
and you don't want changes and you don't optimize anything your travel the
compression
he just wanna make it so it's easy to read from one big one attacks to a bunch
of stuff that's easy to read the process
dual spit it out
and then just
select all of it
and you can come back
trolex like that big long line that we just
copied in uncompressed with quincy s_s_ based in the uncompressed version and
nothing changed
on the page because it's the exact same code
just spread out
as just has a bunch of returns in space is that in to make it easier to work
with
so now uh... whatever u
inspector woman for something like save this background the spanish year that's
in the popcorn
of the uh...
the winner for this week stencil
you'll see exactly where it's located at its knees five you'll see here in the
sidebar says
uh... dot psi dot user text dash body age five last in taipei
this is exactly what is being targeted to create this this image here at the
top of the sidebar
and you'll see it shows the random at random
characters uh... dots yes that's the southern style sheet
antonline six ninety five
so if i click on this will take me to line six ninety five in the code
this is the same thing and this is what i would be editing
here in the sidebar accepted takes me to the full length political here so if i
wanted to make
changes here for for something
whatever it may be change the the distance from the top for example by
make this
different number than it would go a different direction
uh... i could see that updating in real time when you make adjustment there
and then i can to select the entire code
and uh... and copy and paste it
now the problem is this version
has
the actual file paths to the image
images so if i were to taste this back in
to december it's style sheet
and hit save rate it would yell at me because it can't
uh... linked to a full file path has to go to
their their version of the code which has the typical double percent signs so
that something you're going to have to that's that's something you have to work
around
uh... and there's no the round that that's just the way of principle
sadly um...
another thing that's value may run into is that
the inspect elements and chrome shows you the full well of lacrosse capable of
doing
so that includes things that are not supported
and read it uh... certain things with csf story for example
lexus is three animations are rotations uh... even since things related to uh...
uh...
uh... shorthand forward these rounded corners on objects
are supported so although it will show properly in chrome and inspect owning
window neither pasted in red it will give you a risk you have to fix those or
remove ako
so that something else to be aware of as well there's no way of getting around
that that's just the way this is part of its limitations
um... that's a pretty basic intro to inspect element
newell obviously need actually no csrs could you will to use this effectively
but
if you do you know it or if you're learning every one of the resources
spoke with someone subscription of places you can learn csf someone for
free
uh...
then uh... then this can be a huge time saver and give you a lot of help
so sister and family a
and comments
uh... and if this is helpful advice should make another one is in the future
if it was
anymore occasions this version is outdated
uh... let me know
thanks mike