►
Description
In this presentation we will show how to use custom Web UI themes in Jenkins. We will take a look at the Simple Theme Plugin and available themes, and then we will configure our instance to use one of the themes. Then we will try to create a custom theme for our instance.
Presenters: Tobias Gruetzmacher, Oleg Nenashev and Tim Jacomb
Agenda:
* Introduction to the Simple Theme Plugin
* How to do a small changes to the UI?
* How to do a bigger theme or to create a new one?
* Jenkins Dark Theme project
* How to contribute to Jenkins themes? UI/UX Hackfest
Slides: https://docs.google.com/presentation/d/19N4B7BXu_Zfw8IDdUAZl_83-jXDAvwWC2KI6BvvNUCI/edit?usp=sharing
A
I
owe
welcome
to
the
Jenkins.
You
are
York's
hottest.
Today
we
have
a
knowledge
transfer
session
about
their
Jenkins
teams
and
we
will
be
talking
about
how
to
use
them
and
how
to
create
neat
things,
that
this
presentation
is
done
by
Tobias.
A
simple
thing,
plug-in
and
I
will
quickly
talk
about
themes
and
Jenkins
and
how
we
provide
support
for
them
yep.
So
this
is
my
screen.
A
A
Sometimes
people
ask
what
the
Genki
supports
themes,
because
when
you
install
jank
is
by
default,
you
just
did
a
classic
interface.
For
example,
we
can
go
to
changes
ion,
and
this
is
basically
they
all
layout.
You
see
and
the
majority
of
instances
similar
to
layout
and
what
it's
possible
to
customize
a
Jenkins
hanging
from
the
UI,
for
example,
I
write
logger
to
put
a
company
logo
there,
or
maybe
just
change
the
UI
completely
and
actually
it's
possible
in
Jenkins.
There
are
plugins
for
that
and,
for
example,
here's
an
example
of
new
to
you.
A
We
will
talk
about
these
tools
and
then
just
do
some
modifications
and
lady
Liu
also
talked
about
Jenkins
dark
theme,
which
is
one
of
the
topics
for
the
harvest,
and
they
want
to
work
on
that
giving
this
week
how
to
use
UI
other
two
main
plugins,
which
are
allowing
that
one
plug-in
is
simple
theme
plug-in,
so
this
plug-in
allows
every
writing,
CSS
and
JavaScript
or
the
additional
CSS,
and
basically
you
can
alter
almost
all
UI
with
it.
This
is
the
main
subject
of
our
presentation.
Also,
this
plug-in
offers
a
number
of
themes.
A
For
example,
you
can
find
the
number
of
links
to
things,
and
actually
there
are
many
more
themes
available
for
this.
Bringing
another
plug-in
is
logging
theme
plug-in
this
plug-in
solved
the
focuses
on
the
Jenkins
login
screen.
This
is
a
change
which
was
introduced
around
two
years
ago
and
this
changed
basic
allows,
other
encodings,
and
so
when
you
okay,
plug-in
button,
oh
yeah,
you
get
the
screen,
and
mr.
this
plug-in
you
can
change
a
tab
in
this
layout
variables.
Other
plugins,
for
example,
Tom.
A
Finally,
at
some
point
late,
if
the
theme
manager
plug-in
prototype,
but
it
has
never
been
published
on
integrated
into
the
Jenkins
mainstream
system.
So
we
mostly
talk
about
these
two
plugins
when
we
talk
about
in
management.
If
you
are
interested
to
know
more
about
these
plugins,
we
have
documentation
which
basically
describes
how
to
access
our
these
plugins,
how
to
develop
these
things
and
we'll
be
recurrent
to
this
page
a
few
times
during
this
session.
A
One
thing
which
you
need
to
keep
in
mind
when
you
use
things
a
bit
at
the
moment.
Things
are
provided
disease,
so
it
means
that
we
don't
guarantee
compatibility.
We
didn't,
apparently
that
things
will
not
break
is
jenkees
updates,
and
that
is
a
significant
reason
for
that,
because
in
the
project
we
are
working
on
a
number
of
UI
UX
improvements
for
something
like
this
headrest
and
we
have
a
number
of
stories
in
our
roadmap.
A
So
here,
for
example,
we
want
to
improve
book
and
field
also
what
won't
work
on
our
accessibility
and
then
finally,
at
what
way
user
interface
entirely,
and
there
are
many
most
which
are
deleted
to
Jenkins
UI.
We
get
a
lot
of
contributions,
improvement,
particular
companion,
sub
controls,
for
example,
there
is
major
revamp
of
plug-in
manager
and
all
these
topics
may
require
breaking
changes
in
layouts.
A
That's
why
at
the
moment,
we
do
not
declare
a
compatibility
policy
for
teams,
wait,
no
change,
but
for
now
the
main
goal
for
the
project
is
to
improve
the
UI
itself
and
things
and
I
evolve
and
we
can
put
along
with
the
project,
that's
the
fun.
So
nevertheless,
we
know
right
users
to
use
themes
and
to
contribute
things,
and
today
we
will
be
talking
about
that.
A
So
twice,
would
you
like
to
add
something
before
you
proceed?
Do
the
simple
things
now
we
can
continue:
mm-hmm,
okay,
so
yeah.
Let's
stop
sharing
the
screen,
so
Tobias
will
talk
about
a
simple
theme
plug-in
and
how
to
use
that.
And
after
that
we
talk
about
the
dark
theme
and
other
topics.
We
could
do
you
and
your
ex
harvest
and
it
will
but
other
discussion
where
you
can
discuss
anything.
B
B
B
C
B
But
we
are
probably
here
to
add
some
styles
to
our
Jenkins
main
page.
The
simplest
way
is
to
add
some
custom
CSS
rules
which
are
applied
to
every
Jenkins
page
and
very
simple.
Things
are
just
rules
to
to
change.
Maybe
the
color
of
some
fund,
maybe
change
the
font,
style
and
I
created
this
header
here
and
I
know
it's
8:1,
so
maybe
I
want
to.
B
B
I've
prepared
some
CSS
here,
basically
squashes
the
image
down
to
a
zero
width
point
and
then
pets
the
element
a
little
bit
and
then
uses
the
background
image
to
to
set
a
new
icon.
That
sounds
like
a
very
complicated
way,
but
remember
if
we
are
only
changing
CSS
rules.
We
cannot
change
the
content
of,
for
example,
images.
So
we
have
to
work
with
some
some
hackery.
B
B
C
A
Yeah,
that's
totally
correct.
I
was
browsing
themes
yesterday,
so
the
most
of
them
have
been
created
in
2016
2017.
They
were
abandoned
and
since
Jenkins
web
interface
is
moving
forward
right
now,
for
example,
a
few
motion
weekly
releases
with
new
headers
with
you
notifications,
most
likely
they
will
look
quite
bad.
B
B
B
B
B
B
B
B
B
B
Basically,
the
same
I
did
with
with
a
Jenkins
logo
earlier,
so
that's
the
original
logo
is
hidden
somewhere
and
then
the
SVG
logo
is
replaced
over
it.
But
here
it
is
using
less
so
it's
using
macros.
So
you
you,
don't
have
to
see
all
the
gritty
details
how
how
it
is
designed
and
I.
If
you
want
to
use
something
like
this
in
your
own
theme,
you
can
probably
give
him
some
examples
from
from
this
plugin
and
yeah
somewhere
around
here.
There
are
very,
very
many
rules
to
hide
and
resize
all
images
at
once.
C
B
A
So
I
wanted
to
speak
a
bit
about
the
dark
theme
and
about
what
you
like
to
do.
First,
yep
recently,
it
became
quite
popular
to
make
everything
dark.
So,
for
example,
you
may
have
dark
mode
for
your
slide
for
your
github
web
interface,
for
almost
all
the
applications
for
slug.
Some
people
find
it
useful.
Some
people
don't
but
generally
having
a
dark
theme.
A
Well,
it
was
fine
because
yeah
and
they
in
the
committed
I
said
that
it's
just
not
maintainable
it's
hard
to
manage,
and
this
is
exactly
why
you're
talking
about
it
to
be
so.
For
me,
I've
tried
a
number
of
dark
things,
one
iego
and
then
last
week.
For
me,
the
most
interesting
project
was
jenkees
dark,
stylish
team.
So
this
team
again
is
a
theme
which
was
basically
created
by
number
of
contributors
and
it
was
abundant
and
taken
over
a
few
times
over
the
history.
A
So
this
team
tries
to
provide
integrated
UI
for
dark
mode,
and
you
can
see
that
everything
is
the
regular,
the
images
etc.
And
this
theme
under
the
hood
day
it
uses
the
simple
theme
plug-in
also
the
rest-
Jenkins
plug-in
mode.
So
it
is
possible
to
publish
this
theme
as
Jenkins
plugin,
though
it
has
never
been
officially
hosted
and
the
Janus
update
center,
but
in
principle,
it's
possible
and
it's
possible
to
use
simple.
My
team
plug-in
combination,
this
Nick
Jenkins
plug-in
somehow
so
yeah.
A
It's
an
implementation,
detail
and
yeah
just
show
a
few
screenshots,
so
this
theme
actually
looked
pretty
good.
So,
for
example,
here's
a
script
console
his
agent
view.
If
you
start
and
begin
to
a
lower
level
views,
you
start
seeing
deviations,
but
it
really
looks
awesome
on
the
main
screens
on
Alta
Jenkins
versions.
The
problem
with
that
that
yet,
as
Tobias
already
said,
we
started
changing
regenexx
layouts
recently.
So,
for
example,
if
you
use
the
recent
agenda,
saltiest
version
you
and
already
seen
your
header
there
also
there
will
be
progress,
changes.
A
There
are
some
changes
and
controls
and
if
you
will
take
a
little
bit
change
load,
you
can
see
that
there
are
more
changes
coming.
So,
for
example,
in
the
recent
version
we
revamped
sidebar
tasks,
so
something
maybe
break
again,
because
if
you
want
to
evolve
UI,
so
things
will
change
and
if
you
start
going
to
the
changelog,
you
can
see
that
there
is
a
lot
of
changes
related
to
user
experience
now
and
I'm
extremely
happy
about
that.
A
But
from
the
a
few
maintenance
standpoint
it
might
be
difficult,
so
this
thing
was
basically
created
in
1913
till
2018.
So,
three
years
ago,
yeah
jinkies-
this
was
quite
stable
for
a
while,
but
right
now,
if
you
use
it
this
layout,
you
can
see
that
there
are
some
glitches
in
charge.
Button
of
example,
in
notifications
and
other
bids.
A
Yeah
another
challenges,
if
you
want
to
make
them
such
a
team,
so
first
thing
I
was
thinking
to
do
actually
just
until
this
morning.
It's
just
for
this
Gingka
stark,
stylish
team
and
to
create
a
new
theme
and
maintainer
so
basically
take
two
take
another
iteration
of
four
can
be
themed,
Oh
Mickey,
that
and
but
it's
difficult,
especially
for
dark
mode,
because
it
needs
custom
images.
You
can
adjust
a
big
CSS
Styles,
most
likely
contrast
of
five
concerts.
A
That
wouldn't
be
good
enough
and
you
don't
need
to
rework
it
significant
and
maintaining
such
theme
is
not
official
outside
geing.
This
community
is
really
difficult
because
you
would
need
to
be
in
the
corner.
Basically,
it
will
be
a
moving
target,
because
every
time
Jake
is
code
changes
you
may
have
to
change
the
team.
So
we
had
a
discussion
about
that.
Well,
you've
had
a
discussion
about
that
a
few
months
ago
and
it
basically
resulted
in
the
themes,
support
coalition.
A
Yeah,
so
this
is
what
we
came
up
to
so
basically,
we
at
least
documented
a
team
support
policy,
because
from
user
perspective,
the
current
behavior,
which
is
probably
in
poverty
disease,
may
have
been
unexpected
and
definitely
may
be
unpleasant
experience.
Sometimes,
but
it's
now,
it's
documented
saying
we
just
documented
some.
It's
full
developers.
A
We
try
to
maintain
changelogs,
but
still
it's
quite
difficult
and
we
had
a
discussion
about
what
we
could
actually
do,
and
the
very
is
instead
of
having
unofficial
themes,
is
to
provide
a
way
to
actually
host
things
as
a
part
of
the
genius
project.
We
did
a
grant
work
for
that.
Using
policies
documenting
that
and,
for
example,
mirror
to
theme
I
would
be
happy
to
just
move
it
to
join
his
share
organization.
It's
a
bit
outside
the
topic,
but
in
principle,
I
see
no
problems
with
that
and
yep
the
same
for
the
dark
theme.
A
A
Just
you
know
one
minute
or
so
and
yep.
So
what
we
want
to
do.
We
start
the
teet
as
just
a
project,
so
we
will
be
adding
more
content
there,
but
we
started
as
an
incorporated
project.
So
what
it
means
is
that
the
project
yesterday
it's
a
very
book
for
use,
but
at
the
same
time
I
gave
me
that
explicit
expectation
about
the
potential
changes.
Another
example
of
that
is,
for
example,
pipeline
as
llamó
plugin,
which
is
also
marked
as
an
incubator
and
yeah.
A
D
Yes,
we
do
okay,
so
so
this
is
something
that's
other
hacking
on
yesterday
afternoon
and
it
was
just
to
try
and
bring
a
native
dark
mode
to
Jenkins
without
having
to
make
a
theme
that
is
difficult
to
maintain.
So
so
I've
been
looking
at
using
CSS
variables,
instead
of
over
having
to
override
all
the
selectors
everywhere
and
him
to
put
lots
of
hacks
in
place.
So
you
know
just
quickly
just
go
through
what's
working,
what's
not
and
then
I'll
just
show
you
the
code
and
how
to
test
it
is
it's
all
pretty
straightforward.
D
So
this
is
the
home
page
to
Jenkins,
it's
pretty
much
yeah,
possibly
some
slight
changes
for
contrast
and
any
other
improvements,
but
sort.
That's
all
working.
Nothing
really
jumps
out
as
too
bad
search
is
all
working
and
you've
got
all
different
and
you've
got
quite
a
nice
contrast
coming
up
on
the
search
box
and
just
my
mouse
and
you've
got
different
hover
States,
which
will
contrast
reasonably
well
in
the
same
on
the
sidebar
and
I.
Can
click
one
of
them
and
it'll
be
as
an
active
bar
here?
D
There's
do
a
slight
clean-up
on
the
white
bar
there,
but
it's
quite
minor.
That's
all
working
and
the
next,
but
I
took
a
look
at
was
the
job
view
and
it's
mostly
working.
So
if
you
look
here,
the
font
color
there
probably
needs
a
bit
of
an
enhancement,
and
these
are
quite
blurry,
but
I
think
it's
quite
blurry
anyway.
It
just
looks
quite
strange.
Yes,.
D
His
decide:
okay,
yes,
quite
weird
and
build
lobs
are
working
quite
nicely
another
box.
So
you
can
read
that
quite
easily.
I've
got
a
very
complex
bill
blog,
but
it
all
seems
to
be
working.
Okay,
see,
there's
a
bit
of
hover
work.
Facts
needed
there
that
when
I
was
what
I
got
working
just
before
was
build
with
parameters
which
shows
it
a
few
different
form
inputs
says:
a
string,
the
boolean
in
a
password
parameter.
That's
all
working
okay,
possibly
some
minor
tweaks
neeta's,
but
it's
functional.
D
So
one
like
there's
a
whole
bunch
of
special
styling
on
jobs,
so
the
jobs
need
some
work
currently.
So
it's
currently
picking
up
the
default
colors.
So
that's
work
in
progress
and
none
of
the
Ming
none
of
these
stylings
on
the
manage
Dinkins
plates
work
very
well,
but
it
should
be
okay
on
the
configuration
form.
I
haven't
checked
us
in
a
while,
but
it
should
just
pick
up
the
colors
automatically
and
so
yeah
that
looks
pretty
good.
D
I
tried
to
stick
to
the
default
chickens
theme
as
much
as
possible,
so
you
see
that
I
haven't
actually
changed
the
button
colors
at
all,
based
on
the
button
rework.
That's
all
the
same.
Probably
the
secondary
button
color
needs
to
change
the
primary
button.
Colors
work
quite
well
on
the
theme
and
the
same
with
the
Help
button.
It
looks
quite
well
quite
nice
on
this
thing
without
having
to
make
any
changes.
D
So
that's
the
theme
we
just
show
the
code,
so
the
theme
is
quite
is
quite
small,
so
this
is
just
using
CSS
variables,
I'm
using
a
simple
theme
plugin
as
well
to
bring
it
on
which
I'll
show
the
configuration
for
and
their
second.
But
so
it's
just
overriding
CSS
variables
that
are
provided,
which
Incans
core
trying
to
be,
as
least
specific
as
possible
and
avoiding
the
component
level
I've
arrived.
We
are
can,
but
you
can
always
do
that.
D
So
if
you
look
there,
that's
sixty
lines
of
code
with
white
spacing
that's
probably
about
it's,
probably
variables
that
are
being
tweaked
and
most
of
them
are
some
standard
variables
in
top
which
are
for
the
theme
and
then
it's
just
reusing
them.
We
need
us
so
there's
very
few
custom
colors
in
here.
It's
just
setting
the
theme
colors
through
the
components
to
the
components
so
I
had
to
add
CSS
variables
to
Jenkins
core.
D
D
D
So
it's
a
new
Soviet
theme:
I've
had
a
CSS,
URL
and
I
pointed
it
at
the
User
Content
folder
of
the
Jenkins
war
jinger's
home
directory.
Sorry.
So
this
allows
me
to
automatically
sync
the
file
when
it's
changed
into
that
into
that
location,
because
I'm
currently
developing
on
it
I'm
running
a
so
I'm
running
a
script
which
watches
the
file
for
change
and
whenever
it's
changed,
it
copies
it
into
the
user
content
folders,
which
is
so
easy
way.
Can
we
keep
the
changes?
D
Synced
I
tried
some
linking
at
first,
but
it's
following
some
links
outside
of
user
content,
so
I
put
that
workaround
in
place
and
it
seems
to
be
working.
Fine
I'm,
not
everything,
is
pushed
to
the
remote
I'll
create
a
peer
after
the
sister
but
the
what
was
there
is
functional
and
I've
just
been
going
through
component
by
component
improving
and
that's
basically,
it
was
anyone
burning
questions.
C
D
D
Which
them
shouldn't
break
anything
and
there's
also
a
post,
CSS
processor
for
so
post
CSS
custom
properties,
which
basically
adds
compatibility
for
browsers
that
don't
support
this
and
the
only
modern,
well
modern
browser,
the
only
browser
that
we
still
support
that
does
use
it
is
ie
limp.
It
doesn't
support
it
as
I
11,
so
this
is
basically
better
than
prior
11,
but
it
will
mean
that
themes
on
ie
11
won't
work,
but
shouldn't
be
much
of
an
issue.
You
can
use
a
modern
browser
instead.
A
A
So
you
can
find
all
the
sessions
here,
for
example,
if
you
want
to
talk
about
these
topics,
we
had
a
long
discussion
today
and
you
can
join
one
of
the
next
sessions
we
can
discuss
about.
You
can
also
join
our
little
chat,
Genki
slash
hot
first
way.
We
discussed
the
this
topic
and
other
topics
now
but
yeah.
What
we
actually
do
is
not
only
about
themes,
so
there
is
a
lot
of
other.
You
are
you
accelerated
changes
and
even
for
things
we
have
a
number
of
other
topics
which
have
been
discussed.
A
So,
for
example,
we
had
created
arc
is
something
we
try
to
focus
on.
But,
for
example,
there
were
proposals
about
the
creating
a
new
ocean
theme,
well,
basically
applying
lotion
interface
to
Jenkins.
If
you
want
the
Chilean
ship
and
also
try
creating
t-mobile
ocean,
which
is
the
totally
possible,
please
do
not
Google
work
for
a
retro
ocean,
but
it's
possible
to
themed
lotion
as
well.
A
The
Freemont
also
you're
welcome
to
improve
existing
things
so,
for
example,
neo2
as
we
thought
it
would
benefit
from
some
enhancements
from
previous
versions,
but
there
are
other
things
which
are
actively
used
and
which
could
be
improved.
So
if
you
want
to
try
it
out,
it
would
be
much
appreciated.
Then
we
still
have
documentation
topics,
for
example,
documenting
how
to
manage
themes,
etc.
A
For
example,
if
you
watched
this
video
you
put
under
some
parts
of
it
to
the
tutorial
and
be
published,
and
another
I
think
we
discussed
is
to
have
a
marketplace
or
whatever
for
themes.
So,
for
example,
there
are
marketplaces
for
many
things
like
github
applications,
so
why
don't?
We
have
the
same
four
teams
so
here's,
for
example
our
marketplace
for
plugins.
You
can
go
here
and
you
can
find
all
the
communication
etc.
D
D
A
Why
not
so
these
things
could
be
doable
and
there
is
definitely
a
lot
of
enhancements
which
could
be
done
in
order
to
simplify
using
themes,
for
example,
just
referent
item
github
or
something
like
that
could
be
doable.
We
do
the
same,
for
example
for
Python
libraries.
So
if
you
interested
to
contribute
to
one
of
these
topics,
you're
welcome
to
do
so
and
basically,
as
a
part
of
hard
test.
We
work
on
a
lot
of
such
stories
and
then
welcome.
A
A
It's
like
common,
look
and
feel
updates
and
accessibility
of
this,
which
have
been
contribute
to
look
and
feel
in
Jenkins.
That
was
major
change,
for
example,
for
the
place
in
layouts.
We
stay
from
tables
to
leaves
I'm
not
sure
how
severely
it
will
input
the
matching
in
my
CSS
themes,
but
I
would
guess
that
it
will
be
someone
hot,
so
just
testing
the
bed
and
may
be
preparing
to.
Let
it
on
once
would
be
a
good
opportunity.
A
D
A
A
Here
it
goes
for
the
first
time
the
list
so
testing
you
can
follow
these
instructions
and
I
think
credit.
So
I
already
started
working
on
a
better-tasting
engine
right
for
this
repository,
so
hopefully
in
a
few
hours,
we'll
have
documentation
right
inside
the
repository,
which
simplifies
the
installation,
steps
and
probably
also
bootstraps
a
number
of
trainings
and
configurations.
So
you
can
get
a
playground.
Foot
in
development
may
be
useful
not
long
before
that
mode,
but
eventually
father
things
as
well.
A
Yeah
we
just
created
this
repository
today,
so
there's
no
template,
no
charts,
no
links
the
charts
or
whatever,
but
hopefully
we
will
improve
it
over
the
next
few
days,
so
by
the
end
of
the
Hat
fest,
they
feel
their
project
where
everybody
can
contribute
and
given
during
the
harvest
is
feel
free
to
try
it
out,
though
yeah
it's
under
development.
Right
now,.
D
D
A
Probably
they,
if
we
could
update
now
to
theme
for
the
new
version
we
could
adopt.
Okay,
folks,
told
subdivision:
why
not
but
yeah
I
know
for
sure
that
nature
is
widely
used
and
if
you
are
willing
to
contribute,
please
do
so.
It
will
be
much
appreciated
and
same
for
the
a
simple
theme
plug-in
engine.
A
A
Let
me
just
show
it
to
you,
so
if
you
go
to
the
yo,
your
York's
hottest
page
so
here
there
is
online
event
section
there.
We
have
listing
of
sections
and
I
didn't
update
it
in
time,
but
here
you
can
find
the
New
York's
hottest
calendar
with
all
the
sessions.
This
is
what
we
were
showing
at
the
kickoff
and
you
can
find
the
current
schedule.
We
will
balance
and
a
few
additional
events
to
Friday.