►
From YouTube: Helpful CSS/jQuery Tools | S3E24
Description
Tweaking your Koha CSS or jQuery can be challenging, even daunting, especially if you don't have a test server. Who wants to make an adjustment to code to their production server, only to find that it isn't readable, or even worse, broken. In today's episode, George walks through several tools that will help make your project less risky, and maybe a little more enjoyable. We love it when George is helpful!
Contents:
0:00 - Title
0:27 - Intros
0:54 - 2023 koha-US Conference
3:31 - General Modifications to CSS
5:10 - Colorblindly for Chrome
5:29 - A11Y Color blindness empathy test for Firefox and Chrome
8:17 - Greasemonkey for Firefox
9:42 - Tampermonkey for Firefox and Chrome
11:54 - Stylus for Firefox and Chrome
16:18 - Venngage Accessible Color Palette Generator
Supplemental links:
https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg
https://addons.mozilla.org/en-US/firefox/addon/a11y-color-blindness-test/
https://chrome.google.com/webstore/detail/a11y-color-blindness-empa/idphhflanmeibmjgaciaadkmjebljhcc
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/
https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en
https://addons.mozilla.org/en-US/firefox/addon/styl-us/
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
https://venngage.com/tools/accessible-color-palette-generator
Music: https://bensound.com/
Text -to-speech: https://wideo.co/text-to-speech/
Audio Effects: https://zapsplat.com/
Visual Effects: https://flexclip.com/
A
A
A
C
Video
is
sponsored
by
koha
us
your
place
to
look
for
all
things
Cohan,
whether
you're,
just
starting
out
with
koha
or
you've,
been
with
koha
for
a
while
koha
us
is
a
great
place
to
find
resources,
learn
new
tips
and
techniques
or
connect
with
other
users
and
libraries.
Koha
us
provides
excellent
information,
both
original
and
curated
from
around
the
internet,
including
the
terrific
every
other
day
training.
Videos
you'll
also
find
several
special
interest
groups
connect
with,
as
well
as
our
general
monthly
meeting
Where
We
Gather.
To
talk
about
the
latest
Kohan
news.
C
You
should
also
check
out
the
koha
U.S
annual
conference
held
at
various
locations
around
the
U.S.
This
is
a
great
opportunity
to
meet
with
other
users
face
to
face
and
build
your
Kohan
Network,
as
well
as
new
friendships
and,
of
course,
don't
forget
about
the
great
presentations
koha.
Us
is
also
actively
involved
in
the
koha
community
by
contributing
towards
new
developments.
If
you
are
interested
in
contributing
towards
koha
U.S
funded
developments
join
the
koha
U.S
memberships.
C
Your
annual
membership
builds
the
funds
to
sponsor
new
developments
in
the
community
and,
as
a
member,
you
also
help
shape
koha
us
with
your
membership
votes
and
receive
a
discount
on
the
annual
conference.
You
can
also
contribute
towards
developments
through
a
direct
donation
or
by
purchasing
some
great
koha
us
merchandise,
through
our
threadless
accounts
visit
us
at
kohaus.org
to
find
out
more.
B
B
For
the
logo,
yeah
I
have
got
a
custom
logo
up
here,
which
I'm
doing
differently
than
I
used
to
do
the
logo,
because
I
used
to
have
a
big
logo.
Now
it
fits
in
that
tiny
little
space
up
there,
but
one
of
the
things
that
I
was
concerned
about
initially
when
this
change
was
first
talked
about.
The
search
bar
was
going
to
be
up
here
in
the
middle
of
the
header
and
my
concern
about
that
and
a
lot
of
people's
concern
was.
B
It
was
going
to
be
hard
for
people
to
to
read
and
I
think
there's
still
some
issues
with
that,
so
so
I
wanted
to
make
some
changes
to
the
the
way
that
koha
looks
and
one
of
the
things
I
was
concerned
about
was
the
way
that
it
looks
to
people
that
might
have
visual
impairments
and
so
I've
been
trying
to
to
look
for.
You
know
things
that
can
help
me
see
what
it
would
look
like.
You
know.
B
Blindly,
unfortunately,
it's
not
available
on
Firefox
and
I,
mostly
work
with
Firefox
and
I,
was
able
to
find
one
though
I
I,
loaded
up,
Chrome
and
I,
downloaded
colorblindly
and
I
was
able
to
find
one,
that's
very
similar
in
the
way
that
it
looks
and
works
in
Firefox,
and
it's
called
a11y
colorblindness
empathy
test
and
I've
got
it
up
here
as
a
browser
add-on
and
if
you
click
on
it
and
then
click
on
the
different
names
here.
These
are
all
names
for
different
types
of
color
blindness.
B
I,
don't
remember
what
they
all
are,
but
it
the
type
of
color
blindness
that
people
have
generally
depends
on
a
misdistribution
of
of
cones.
In
your
eyes
you
have
more
cones
that
read
one
color,
the
three
colors
that
the
cones
in
your
eyes
read
are
red,
blue
and
green,
and
some
people
have
more
cones
that
read
blue
than
the
other
two
colors.
B
But
you
know,
if
you
select
this
first
option,
it
shows
you
what
it.
What
this
would
look
like
to
somebody
with
protonopia-
and
you
know,
one
of
the
things
that's
really
hard
to
see
are
the
when
you
hover
over
the
search
buttons,
there's
almost
no
difference
between
hovering
over
them
and
not
hovering
over
them.
Right.
A
B
Can
see
this
the
submit
button
next
to
the
input
box,
it
changes
color,
but
the
change
is
so
subtle
to
somebody
with
this
type
of
vision.
Impairment-
and
you
know
it.
These
just
give
you
a
good
way
of
looking
at
things
through
other
people's
eyes.
Yeah
and
I
use
this
a
lot
with
the
work
that
we're
going
to
be
showing
off
in
the
next
video,
because
I
wanted
to
find
ways
to
make
changes
to
the
look
of
koha
and
to
bring
in
different
colors
that
match
our
that
match
our
next
search.
B
Catalog
logo,
but
I
also
wanted
to
make
them
in
such
a
way
that
it
was
going
to
make
it
easier
for
people
that
might
have
vision
problems
to
to
see.
So
that's
a
good
one,
I
recommend
if
you're
using
Firefox
like
I,
said
it's
a11y,
color
blindness,
empathy
test
the
one
that
I've
heard
recommended
not
just
by
Jason
but
by
other
people,
is
color
blindly,
if
you're
using
Google
Chrome.
B
And
I'm
gonna
put
this
back
on
none.
So
the
other
thing,
that's
a
good
one
for
once,
you're
actually
looking
in
there
and
seeing
what
it
is.
The
changes
that
you
might
be
making
how
they're
going
to
look
to
somebody
with
visual
impairments,
they're
also
there's
another
add-on
that
I've
been
using
for
years
and
years
and
years
called
Grease,
Monkey
and
grease
monkey
I've
got
up
here
in
my
browser
and
you
know
occasionally,
I
will
want
to
add
if
I'm,
creating
some
jQuery
for
koha
or
some
JavaScript
changes.
B
I
can
create
those
in
Grease.
Monkey
I
can
start
a
new
user
script
and
create
jQuery
that
can
be
applied
not
just
to
koha
but
to
any
website
and
I.
You
often
use
it
to
to
work
on
something
so
that
I
can
work
on
it
without
having
to
go
to
a
system.
Preference
and
co-au
enter
the
jQuery,
save
it
and
then
go
back
and
reload
the
page.
B
I
can
just
do
it
in
grease
monkey
and
then
only
the
page
reload
is
required,
but
it's
a
good
way
to
kind
of
experiment.
I
still
have
the
Grease
Monkey
add-on.
Grease
Monkey
is
no
longer
supported
by
the
people
that
originally
wrote
it
and
the
new
version
is
called
tampermonkey
and
I've
just
never
upgraded,
because
there
are
a
couple
of
things
I
didn't
like,
but
one
example
of
you
know
how
I
use
grease
monkey
and
how
it
can
be
used.
Beyond
koha
is
I.
Have
this.
B
B
C
B
Anymore,
but
Grease
Monkey
can
do
a
lot
of
things
like
that.
There's
a
website,
a
political
website
I
visit,
often
where
they
always
asking
for
donations
and
I,
never
donate
and
they're
annoying
pop-up.
That
comes
up
that
says,
don't
forget
to
donate
money
to
US.
Grease
Monkey
kills
that
for
me,
so
I
never
even
have
to
think
about
donating
money
to
them
very
nice,
so
yeah
grease
monkey
and
tampermonkey.
B
B
B
So
here's
one
that
I
can
show
off
really
easily
first
I'm
going
to
disable
the
sandbox
and
stylus
I'm
going
to
turn
it
off.
So
it's
not
active
but
I'm
going
to
do
a
patron
search
for
Frosty,
because
I
know
that
Frosty
is
a
testing
only
name,
no
there's
no
actual
person
in
Kansas
named
Frosty.
As
far
as
I
know,.
B
B
And
I'm,
using
something
that
I
don't
have
turned
on
here,
so
I've
got
this
code
that
what
it's
doing
is
it's
CSS
and
each
of
these
when
you're
logged
in
at
the
library,
the
library
you're
logged
in
at
when
you
do,
is
Patron
search
and
the
patrons
have
those
Home
Library.
There's
a
class
that
surrounds
that
Home
Library
name,
and
so
what
I've
got
stylists
doing
for
me
is.
B
It's
adding
CSS
wherever
the
member
search
results
page
has
the
class
of
current
Library.
It's
changing
the
background,
color
to
Pink
it's
putting
some
padding
on
that
element.
It's
adding
a
border
radius,
it's
changing
the
font
size
and
the
font
weight
and,
if
I
kill
that,
if
I
take
that
out
of
my
stylus
box,
it's
not
there
anymore.
B
So
this
is
a
way
of
really
easily
usually
I
have
Stylus
open
in
one
window
and
koha
open
in
the
other
window,
and
this
allows
me
to
to
write
CSS
changes
without
having
again
without
having
to
go
to
the
Internet
users,
CSS
system
preference
and
put
those
in
there.
So
it's
a
way
of
letting
me
create
the
CSS
and
write
the
CSS
temporarily
and
then,
when
I
perfect
it
then
I
can
take
it
out
of
stylus
and
save
it.
In
my
internet
users,
CSS
system
preference
when
it's
ready
to
be
permanent
on
the
system.
It's.
A
B
Yeah,
so
that
has
been
really
helpful
in
the
work
that
I've
been
doing
for
the
last
couple
of
weeks,
trying
to
get
the
new
version
of
koha
branded
in
next
search.
Catalog
colors,
the
pink,
is
a
choice
that
that
I
just
put
on
here
as
an
example
pink
is
not
going
to
be
what
people
see
the
the
last
thing
I
wanted
to
show
everybody.
Is
that
there's
this
ven
gauge?
B
B
A
B
There
are
a
couple
out
there.
This
is
the
one
that
I
used,
because
it
was
the
easiest
for
me
to
work
with,
and
it
got
me
the
results
that
I
wanted.
Okay,
there
are
others,
there
are
a
couple
other.
There
are
a
couple
of
them
where
you
can
give
it
multiple,
colors
and
it'll
give
you
back
a
spectrum
of
what
works
with
that
my
biggest
concern
with
what
I
was
doing
was
accessibility,
and
so
this
this
is
the
one
that
I
felt
worked
the
best
for
what
I
was
trying
to
accomplish.
A
B
The
contrast
level,
okay,
so
the
and
it's
it's
a
ratio
of
the
difference,
I'm,
not
sure
it's
a
scientific
measurement
and
I'm
not
sure
what
the
formula
is
to
generate
it.
But
the
difference
between
the
background
and
the
the
text
is
in
this
case
is
6.85
to
1.
and
the
difference
in
this
one.
The
contrast
is
10.92
to
1.,
okay
and
the
recommendation
for
for
for
making
it
easy
on
people's
eyes.
D
C
D
D
B
B
D
B
So
those
are
some
tools.
I
gave
Christopher
all
of
the
website
information
on
where
to
find
these
tools,
if
anybody's
interested
in
going
out
and
looking
at
them
and
in
the
next
video
you
know,
I've
got
all
these
tools.
I'll
show
you
what
I
did
with
it.
I'll
show
you
how
I'm
completely
broke
Cohan
to
get
it
to
do
what
I
wanted
it
to
do.
We'll
see
you
next
time.