►
From YouTube: Customizing Koha 22 11's Look | S3E25
Description
Koha 22.11 is slick with it's brand new look. So slick, it has inspired folks to customize the colors to fit their organization's colors. But this is a pretty hefty ask. Fortunately, George has done a lot of the heavy lifting on this one, and has given us a way to make quick work of this monumental task. Check it out, try it out, then buy George a drink at the next conference. He's earned it.
Contents:
0:00 - Title
0:27 - Intros
1:34 - 2023 koha-US Conference
3:39 - Customizing Koha 22.11
9:34 - A11Y Color blindness empathy test for Firefox and Chrome
11:58 - What was addressed
19:12 - Venngage Accessible Color Palette Generator
24:04 - Stylus for Firefox and Chrome
29:07 - George's Notes on This Project
32:56 - Changing the Logo
38:27 - Wrap-up and Summary
Supplemental links:
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/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
B
A
A
And
there's
been
quite
a
change
to
the
staff
interface
and
a
lot
of
questions
on
how
to
customize
some
things.
George
has
done
a
lot
of
leg,
work
in
figuring
some
things
out
and
is
going
to
share
with
us
today.
Those
modifications,
particularly
in
CSS,
but
before
we
get
started,
just
a
reminder
to
everybody
to
be
registering
for
the
koha
us
conference
coming
up
in
September
September
20th
through
the
23rd
we
are
going
to
be
in
Portsmouth,
New
Hampshire,
we're
excited
to
be
there.
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
to
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.
C
If
you
are
interested
in
contributing
towards
koha
U.S
funded
developments
join
the
Kohan
U.S
membership.
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.
A
B
B
B
B
It
wasn't
too
far
off
from
what
we
were
already
doing,
but
the
new
staff
interface
is,
you
know,
very
green,
and
so
the
idea
was
you
know
there
were
a
couple
of
things
in
addition
to
the
colors
that
you
know,
I
I
wasn't
really
thrilled
with
like
well
well
yeah.
We
talked
about
this
a
little
bit
in
the
last
video,
where
I
talked
about
some
of
the
tools
that
I
used
to
do
this
redesign
of
our
of
our
staff
interface.
B
But
you
know
if
you
go
up,
and
you
know
if
you,
if
you
load
koha
2211
right
out
of
the
box,
if
you
are
focused
in
this
search
box,
how
do
you?
How
do
you
tell
there's
nothing
that
happens
to
indicate
that
you
focused
on
the
search
box
other
than
a
blinking
cursor
yeah,
if
you're
in
the,
if
you're
in
2205
and
before
when
you
go
in
there?
It
highlights
the
box
right
and.
B
B
B
B
Most
of
the
people
working
at
small
public
libraries
in
the
United
States
are
people
that
are
over
50,
they're,
often
retired
from
another
job.
The
library
director
at
one
of
our
libraries,
is
a
part-time.
You
know
most.
We
have
several
Library
directors
that
are
part-time
people
that
work
less
than
20
hours
a
week,
they're
in
their
50s
I
have
one
Library
director,
who's,
83
and
she's
dying
to
retire,
she's
begging
to
retire.
B
She
wants
to
retire
and
the
only
reason
she
doesn't
retire
is
because
she's
afraid
that
if
she
does
retire
and
they
can't,
they
won't
be
able
to
find
somebody
to
replace
her
and
they
will
just
end
up
closing
the
library
in
Corning
Kansas.
Yes,
it's
a
big
burden
to
carry
when
you're
when
you're.
You
know
she
had
retired
from
one
job
and
and
taken
another
job
and
retired
from
that
second
job
and
now
she's
working
at
the
library
and
it's
a
library,
that's
only
open
like
15
hours
a
week.
A
B
Well,
that's
why
one
of
the
things
that
I
showed
off
in
the
last
video
is
this
color
blindness
a11y
colorblindness
empathy
test
and
it
it
helps
you
you
know,
see
things
through
other
people's
eyes.
One
of
the
things
I
didn't
show
off
in
the
last
one
is
you
know
there
is
a
box
here
you
can
show
what
it
looks
like
to
somebody
with
moderate
vision,
loss
which.
D
B
B
B
Just
the
color
was,
you
know
some
of
the
accessibility
issues
and
I'm
I'm,
not
putting
anybody
down,
because
I
know
that
this
is
a
new
iteration
of
koha
and
there
are.
There
is
a
lot
of
being
work
being
done
in
bugzilla,
there's
a
lot
of
tickets,
open,
yeah
and
there's
a
lot
of
stuff
happening
to
make
to
solve
some
of
these
problems.
Now
that
it's
been
put
out
there
now,
the
whole
goal
is
to
make
it
better.
I.
A
A
B
B
I
took
Jason's
code
and
because
Jason
had
submitted
that
to
I
think
he
put
that
in
in
a
bug
and
bugzilla
saying
this
would
fix
that
problem,
and
so
I
used
that
to
to
the
color
he
used
was
a
yellow,
I.
Think
I
I
wanted
to
make
mine
match
what
the
other
things
I
was
doing,
but
I
made
it
so
that
these
buttons
all
hover
the
headers
Sharp,
the
header
buttons
under
not
don't
just
underline
they
also
change
color
on
the
hover
I.
B
You
know
put
this
into
a
pill
and
I
made
the
colors
match
this
medium
blue,
that
I'm
using
matches
the
n
and
the
E
and
the
T
in
the
next
logo
and
the
darker
colors
that
you
see
in
some
places
like
on
some
of
the
hovers
matches
the
X
in
the
next
logo,
and
so
basically,
what
I
did
is.
I
came
up
with
this
idea
that
I
wanted
to
have
a
a
light
background
with
a
match
it
with
the
text
that
had
a
good
contrast
with
it
and
I
used
that
website.
B
That
I
mentioned
last
time.
The
ven
gauge
color
accessibility,
palette,
generator
I,
use
that
to
come
up
with
some
colors
that
were
sympathetic
to
the
colors
we
were
already
using
so
I
had
a
a
light,
color
and
a
light,
hover,
color
and
then
I
have
a
medium
color
and
a
medium
hover,
color
and
then
I
have
a
dark,
color
and
a
dark
hover
color,
so
that
whenever
I'm
hovering
over
something
that's
dark,
it
gets
a
little
darker
when
I'm
hovering
over
something
medium.
B
B
B
A
That
people,
you
know
I've
done,
I've,
worked
on
displays
and
screens
and
websites
for
good
grief
almost
for
over
20
years,
and
you
know
contrast
is
huge,
but
you
know
having
White
against
a
dark
background.
You
can
kind
of
see
that,
just
even
in
your
menu,
a
white
tends
to
be
thinner
and
harder
to
read
against
a
dark
background
than
a
dark
against
a
light
background,
and
so
It's
always
important
to
you
know,
weigh
you
know
how
important
is
it
for
for
this
to
be
seen.
A
You
know-
and
you
know,
if
you're
not
if
you're,
not
using
enough
contrast,
things
just
lead
into
each
other,
and
it's
really
really
important
type.
I've
had
I've
gone
to
people
that
that
have
designed
things
that
have
had
you
know
similar
colors.
You
know
a
similar
colored
text
on
top
of
a
similar,
color
background
and
said:
hey,
you
know
what
this
is
all
one
color
you
know,
and
this
is
this
is
really
not
user
friendly.
You
might
want
to
add
more
contrast
to
it.
So
yeah
yeah.
B
B
Koha
is
not
bad.
You
know
I
for
me
the
changing
the
black
black
on
white
or
white
letters
on
black
background
that
just
made
you
know,
I,
wouldn't
I,
don't
mind
a
good
Dark
theme,
I,
actually
kind
of
prefer
that
and
if
there
was
a
way
that
I
could
deem
koha
to
be
com,
you
know
to
have
a
good
Dark
theme,
but
you
know
it
always
feels
weird
to
me
when
just
one
part
of
the
page
is
is
dark
and
and
the
other
parts
are
are
completely
different.
So
it's.
A
B
B
B
You
know,
I
started
off
with
my
medium
color
and
there's
the,
but
there's
this
command
in
CSS
you
can
use
called
root,
and
so
what
I
did
is
I
used
the
root
command
in
CSS
to
create
these
variables
CSS
variables
and
I
started
with
my
medium
color,
and
so
what
I
did
is
I
said.
You
know,
I'm
going
to
create
a
variable
and
I'm
going
to
call
it
C
medium
and
that's
going
to
be
the
color
that
I'm
going
to
call
C
medium
and.
B
B
D
B
B
B
B
B
You
know
this
is
what
it
looked
like
before
without
the
without
the
the
new
CSS,
and
so
what
I
would
do
is
I
would
come
to
a
page
like
this,
and
I
would
find
the
element
and
I
would
select
it
and
I
would
say.
Okay,
you
know
here's
this,
this
nav
menu
and
every
place
there's
an
H5
on
the
nav
menu
I
want
to
go
in
here
to
my
CSS.
B
In
Firefox
and
I
would
find
that
element
and
if
you
click
on
these
links,
you
know
this
is
the
rule
here,
and
so
you
can
just
right.
Click
on
this
and
copy
the
whole
rule
and
then
go
over
to
my
stylus
add-on,
and
you
know
I
can
find
the
things
you
know.
I
can
just
I
just
rewrote
this
rule
so
essentially
I'm
taking
everything
out
of
this
rule
except
color
and
I'm,
rewriting
the
rule
for
the
color
and
I
just
gave
it
a
variable
of
the
general
text.
B
I
picked,
not
just
the
you
know.
The
colors
I
picked
I
picked
those
basic
colors
for
dark
medium
light,
but
then
I
also
set
colors
for
the
header,
because
I
wanted
the
black
the
white
background
with
the
black
text,
but
then
on
Hover
I
wanted
a
gray
hover
pill
and
then
I
set
my
general
text
colors
as
black
for
all
text.
Unless
it's
a
link
and
a
link,
I
gave
the
dark
blue
color,
and
so
what
I
figured
out?
You
know
where
the
nav
menu,
where
that
menu
H5.
B
My
general
text,
color
and
once
I
wrote
that
it
changes
it
not
because
it's
a
class,
you
know
I'm
identifying
this
menu.
On
the
left
hand,
side
is
a
class
not
as
a
specific
element.
I
don't
even
know.
If
there
is
a
specific
ID,
that's
associated
with
this
menu
in
circulation,
there
might
be
well
I,
guess
the
the
ID
is
dab,
menu
and
nav
menu
list.
So
maybe
this
one
isn't
a
class,
but
what
I
found
is
that
you
know
this
nav
menu
has
the
same.
B
It
appears
in
a
couple
of
other
places.
Specifically,
you
know
one
of
the
ones
I
know
for
sure.
It
appears
is
on
the
system
preferences
page
once
I
changed
on
the
circulation
page.
It
changes
it
on
all
the
other
Pages
where
it
appears
so
I
didn't
it's
not
like
I
had
to
go
in
and
it's
not
like
I
had
to
go
in
and
rewrite
the
code.
The
CSS
for
each
every
individual,
single
page,
usually
I
just
had
to
identify,
usually
I
just
had
to
identify.
B
B
It
wasn't,
you
know
the
way
that
the
process
that
I
did
that
I
took
to
do
this,
is
you
know
first
I
styled
the
home
page
and
then
after
I
was
done.
Styling,
the
home
page
I
styled
the
circulation
page
and
found
the
things
that
weren't
where,
where
the
changes
on
the
home
page
hadn't
affected
the
circulation
page
and
then
after
I
was
done
with
the
circulation
page
I
did
patrons
in
an
advanced
search
and
item
search.
B
I
did
all
these
modules
and
then
after
I
was
done
with
all
of
those
I
went
back
and
to
circulation,
and
then
I
did
all
the
sub
pages.
I
did
check
out
and
check
in
and
renew
and
all
of
those.
So
it
was
a
matter
of
just
you
know,
really
by
the
time.
I
was
done
with
the
top
level
modules
that
was
about
90
percent
of
the
work
was
just
doing
these
pages
and
then
the
other
stuff
was
kind
of
like
cleanup.
B
Like
you
know,
I
went
through,
one
of
them
was
I,
think
I
went
through
all
the
tools
and
everything
was
good
until
I
got
to
all
calendar
and
then
calendar
required
a
whole
bunch
of
extra
steps
and
then
I
think
on
you
know:
cataloging
I
went
through
a
bunch
of
things
and
then
I
got
to
one
page
and
that
one
page
needed
a
whole
bunch
of
extra
steps.
So
so
it
so
it
took
a
little
bit
of
time,
but
but
I
think
it
was
worth
it
and
it
was.
B
You
know
this
sounds
some
people
are
going
to
think
I'm
crazy,
but
it
was
fun.
I
had
a
good
time
doing
it.
It's
not
like
I,
it's
not
like
I
was
cursing
myself
going
God.
Why
do
I
have
to
do
this?
It
was
like.
Oh
I
can
do
this
for
a
couple
hours
nobody's
nobody's,
calling
on
the
phone
angry
for
a
while.
I
can
work
on
this.
A
B
A
B
B
A
web
page
so
I've,
given
you
the
link,
so
we
can
put
it
in
the
video
and
it's
just
a
web
page
and
I
describe
kind
of
the
whole
process.
I've
got
links
to
all
the
tools
that
we
showed
in
the
last
video,
the
color
blindness
add-ons
the
stylus
add-on,
how
I
developed
a
color
palette
and
then
at
the
very
bottom,
is
actually
all
of
the
CSS
that
I've
done
so
far.
B
B
So
if
you
go
there
and
you
download
it,
you
know
the
file
is
right
here
and
you're
welcome
to
download
it.
I
put
it
on
an
MIT
license,
so
you
can
download
it
and
do
whatever
you
want
with
it.
I,
don't
care
it's
free
for
anybody
to
take
and
use.
The
first
thing
I
would
say:
is
you
know
what
you
know,
I
think
one
of
the
nice
things
about
it?
Is
you
know
now
that
we've
got
those
colors
laid
out
as
variables
in
this?
B
B
B
B
A
brown
theme
I,
even
you
know,
I
just
picked
some
colors
at
random,
essentially
and
thought
you
know
these
would
be
good
ones
to
show
off.
I
mean
this
is
how
simple
it
is
to
you
know.
You
can
go
in
there
and
change
the
colors
this
one's
a
fuchsia
theme.
Oh
my,
but
you
know
you
can
use
the
colors
that
go
with
your
library
to
come
up
with
with
a
set
of
colors
that
you
like
that
fits
in
with
the
whatever
it
is
you're
doing
at
your
library.
A
B
B
That's
something
that
you
can't
do
in
CSS.
That's
something!
Well,
that's
something!
I
didn't
do
in
CSS
I
think
you
could
do
a
CSS
logo,
but
I
have
this.
Is
our
test?
Server
and
I
have
some
code
that
does
a
couple
of
things
for
our
test
server
and
then
I
have
some
code
for
that
here
it
is
replace
logo,
so
this
logo
well
I,
can.
Let
me
save
this.
B
So
what
I
did
is
I
created
a
paragraph
and
I
gave
it
a
font
size
of
one
and
a
half
EMS
and
a
font
weight
of
750
and
put
a
margin
on
top
of
it
to
get
it
centered
where
I
wanted
it,
because
that
was
a
little
tricky
and
then
I
did
a
span
called
Next
logo
and
I
gave
it.
This
blue
color
that
matches
the
color
on
our
logo
on
our
graphic
logo.
B
And
then
I
created
another
span
that
made
the
X
the
darker
color
and
then
I
created
another
span
that
gave
it
a
t,
and
that
was
it.
So
really
it's
finding
that
logo
ID
and
deciding
what
you
want
to
put
there
right
and
I
could
have
done
an
image
file,
but
the
space
that's
available
in
the
new
plate
in
the
place
where
the
logo
is
now
isn't
that
big
and
I
didn't
want
to
I
didn't
want
to
push
down
the
search
bar
just
to
have
a
different
logo
there
right.
A
B
B
In
there
and
fix
it,
but
it
was
a
way
of
doing
it
really
quickly.
Just
for
the
video
that
we
recorded
earlier
today,
a
different
video
that
we
recorded
earlier
today
so
putting
the
logo,
there
was
not
that
hard
I
also,
you
know
I
also
on
our
test
server.
We
have
this
this
custom
stuff
on
our
test,
server
that
points
out
that
it's
the
test
server,
but
that's
something
that
has
actually
happened
before
we
had
this
code
on
our
test.
Server
was
a
staff.
B
Member
accidentally,
you
know,
did
a
whole
bunch
of
transactions
on
the
test,
server
at
the
circulation
desk,
one
day
and
and
Confused
the
hell
out
of
everybody
at
that
Library.
But
then
we
added
this.
You
know
I've
got
a
watermark
behind
here
that
says
test
server,
test
server,
test,
server
and
I've
got
this
up
here.
That
says
test
server
and
it's
code.
That's
on
both
of
our
servers.
It's
just
that
whenever
it
it
sees
that
the
URL
has
this
staff
dot
nichols-test.
B
It
knows
that
that's
the
test
server
and
it
puts
that
on
there,
but
then
to
make
it
easier
for
my
co-workers
to
do
screenshots
for
training
as
we
get
ready
for
this
upgrade
to
koha.
2211
I've
also
put
this
little
camera
button
up
here.
That
kills
all
of
our
test
server
stuff
so
that
they
can
take
a
screenshot
and
it
doesn't
say,
test
server
on
it.
B
A
I
think
it
looks
wonderful,
thank
you
for
sharing
everything
that
you
have
done.
You've
done
quite
a
bit
of
investigative
work,
I'm,
hoping
that
at
some
point
down
the
road,
the
developers
will
implement
those
wonderful
variables
that
you've
created,
because
I
would
love
to
see
down
in
the
future
where
they
do
assign
those
variables
and
they
can
go
in
and
actually
set
it
up.
So
you
can
go
and
just
set
the
colors
that
you
want
both
for
the
staff
and
for
the
OPEC.
That
would
be
wonderful,
yeah.
A
A
B
B
A
Things
change
all
the
time
with
CSS
and
HTML
and,
and
you
know,
jQuery
and
you
know
we're
learning
new
things
all
the
time,
and
you
know
the
the
variables
I
mean.
That's
something
I've
always
wanted
to
do,
and
and
I
didn't
even
realize
that
that
was
available,
and
so
it's
it's
nice
to
to
find
that
out.
It's
going
to
simplify
my
my
styling
in
the
future,
but
I
I
think
any
time
you
know
writers
can
take
advantage
of
those
new
Concepts
and
and
put
them
into
practice.
D
A
Hopefully
they
can
Implement
that
cool
all
right.
Well,
we
want
to
thank
everybody
for
joining
us
again
today
and
we
will
be
back
in
another
two
weeks,
but
you
would
doubt
that
if
you
were
signed
up
on
our
YouTube
page
and
we're
getting
alerts
as
to
when
we
post
our
our
next
videos,
so
make
sure
that
you
check
us
out
both
at
koha
Dash
us.org,
to
see
our
training
videos
and
all
of
our
general
meetings
are
there
as
well
and
our
special
interest
groups.