►
From YouTube: Backdrop CMS Modules: Configurable Block Style
Description
A demonstration of how the Configurable Block Style module works.
https://backdropcms.org/project/configurable_block_style
A
Hi,
my
name
is
Tim
Eriksson
I
am
st.
Paul
Tim
on
the
Internet
places
like
Twitter
bankruptcy,
mascot
org
in
drupal.org
and
I'm
here
today
to
talk
about
the
module,
configurable
block
style.
This
is
a
module
for
bankruptcy.
Amass
backdrop:
CMS
is
what
we
use.
It's
implode
to
help
people
get
started.
We
provide
hosting
tutorial
and
supports
particularly
folks
who
want
to
kind
of
build
a
complicated
site,
but
need
a
little
bit
of
help
and
what
started
out
here
with
our
demonstration
I'm
a
configurable
block
style,
module
page
a
backdrop:
CMS
gotta
work.
A
This
is
where
you
can
download
the
module
if
you're
working
on
your
own
outside
of
simple
o
or
you
can
also
download
and
install
modules.
Through
the
backdrop
you
Y,
depending
upon
your
server
configuration
and
how
it's
set
up
I'll
show
you
that
in
a
second.
So
if
you
are
a
simple
o
user,
your
site
might
start
out
looking
something
like
this.
A
If
you
click
on
the
the
this,
you
can
search
for
configure
there
we
go
so
we
did
a
search
for
configure
poll,
and
here
we
can
find
the
module
and
you
could
install
it
this
way
we
have
actually
already
installed
the
module
and
I
believe
we've
enabled
it
let's
go
to
list
modules,
so
functionality
is
where
you
find
your
modules
and
this
kind
of
auto
complete
sure
enough.
So
we
we've
already
enabled
this
module.
It's
the
only
non
core
module
that
we've
enabled
at
this
stage.
A
I
guess
I
didn't
need
to
save
that
we're
gonna
go
back
to
the
home
page
and
for
the
purpose
of
this
demo.
What
we
want
to
do
a
lot
of
websites
now
sort
of
have
these
blocks
the
front
page,
and
the
idea
is
like
what,
if
we
wanted
to
create
another
block
sort
of
like
this
underneath
here,
but
we
wanted
a
background.
Color,
a
different
text:
color
we
wanted
to
do
some
things
without
having
to
write
CSS
or
to
you
know,
customize
the
theme.
A
We
need
to
go
to
the
bottom
and
save
save
our
layout
and
in
this
case
we're
going
to
need
to
go
back
home
to
the
home
page.
Our
boring
demo
text
slid
way
over
to
the
right
here
and
that's
one
problem
that
shows
that
we
are
in
a
hero,
region,
I'm
gonna,
take
really
quickly
and
show
you
what
would
happen
if
we
move.
We
go
back
to
the
to
the
homepage
layout
and
we
were
to
take
this
block
and
drag
it
down
here
into
the
cus
content
region.
A
I'm
quite
sure,
that's
not
a
hero
region
and
when
we
save
that
didn't
go
to
the
home
page
there
you're
gonna,
see
now
our
boring
demo
text
is
does
line
up
with
the
rest
of
the
text.
We
don't
want.
We
don't
want
that,
though,
in
a
way-
and
we
do
want
that
text
to
line
up,
but
we
don't
want
it
in
this
region
and
the
reason
we
don't
want
it
in
this
region
is
because
we
can't
put
a
color
background
in
this
region.
So
I'm
gonna
go
back
to
layouts,
home
and
I'll.
A
Show
you
what
I
mean
by
that
by
coming
down
to
our
custom
block
I'm
gonna.
Leave
it
here
for
a
minute,
we'll
have
to
move
it
back
and
we're
gonna
touch
the
configurable
block
style
menu
for
the
third
menu
I,
keep
saying
menu!
It's
module!
If
you
hear
me,
say
menu
again,
ignore
that
the
under
the
style
settings
for
it
for
the
block-
and
this
will
pertain
to
all
kinds
of
blocks.
If
you
have
the
configurable
block
style
menu
enabled
module
the
configure
block
style
module.
You
will
have
this
option.
A
That's
not
normally
available
in
backdrop.
It's
this
module
makes
it
available.
So
once
we
click
on
that,
we
get
a
bunch
of
other
options
and
amongst
the
options
we
can
try
to
change
the
colors.
So
we
can
actually
click
on
this
say:
custom
colors
and
we
can
change
our
background
color
to
something
like
a
deep
Cayenne
red
and
change
our
text
color
and
you
have
to
when
you're
doing
this.
You
have
to
select
and
make
sure
the
the
color
you're
changing
is
highlighted,
and
then
you
can
click
on
the
color.
A
You
want
the
text
actually
I'll
make
this
mercury,
which
is
just
a
really
light
grey
so
that
we
can
see.
Then
it
actually
has
some
color
once
I've
got
those
selected
I
can
save
this
and
I
can
go
back
and
save
my
layout
and
go
back
to
the
home
page
boom.
So
we
have
a
background
color,
but
that
background
color
isn't
stretching
the
full
width
and
that's
because
we're
not
in
a
hero
region
that
lets
the
blocks,
but
there's
a
couple
of
other
things.
A
If
we
go
up
into
the
hero
region,
the
block
will
stretch
over
to
the
side,
but
our
text
will
as
well.
So
we're
going
to
do
something
to
prevent
that
and
I'm
going
to
show
you
a
little
shortcut.
We
can
hover
over
this
block
and
click
on
the
little
gear
icon
to
configure
block
and
that'll,
take
us
directly
to
the
block,
and
it
will
save
us
a
little
bit
of
time.
If
we
click
on
the
Style
section.
A
One
of
the
things
we
can
do
is
add
a
content
container
and
the
effect
of
the
content
container
will
be
to
keep
the
content
in
line
with
other
content
on
the
page,
even
if
you're
in
a
hero,
region
or
weren't
stretching
to
the
side
of
the
page.
Okay,
I'm
gonna
uncheck-
that
for
now
so
we
see
what
happens
and
let's
just
go
and
do
that,
but
also,
let's
take
and
move
this
custom
block
up
into
this
hero
region
and
he
had
saved
okay.
A
Now
we
see
that
happened
as
I
said,
it
would
go
back
here
to
the
custom
block
this
time.
We're
going
to
do
a
couple
of
things.
We're
gonna
go
back
into
the
style
settings
our
configurable
option,
it's
already
selected
and
we're
going
to
add
this
content
content
container.
That's
going
to
bring
the
text
in,
but
we
also
want
to
add
some
space
that
the
bottom
and
top
of
the
block
was
immediately
adjacent
to
the
text
and
we
need
some
padding
there.
A
Padding
is
a
term
we
use
when
styling
websites,
if
you're
not
familiar
with
that,
and
we
can
click
on
this
custom.
Padding
and
I'm
just
gonna
go
with
the
defaults
for
now,
which
is
40
30
40,
padding
on
the
top
30
padding
on
the
right,
30
padding
on
the
bottom
and
30
padding
on
the
left,
I
can
update
and
save
and
now
boom.
Our
block
has
a
couple
of
things.
One
thing
it
has
is
that
it
is
it
has
that
padding
around
the
text.
Also,
the
text
is
now
we're.
A
So
the
next
thing
I'm
going
to
do
is
let's
say
right
now:
the
height
of
this
block
is
being
affected
by
two
things:
one
it's
being
affected
by
the
content
by
the
default.
It's
just
that
the
block
is
as
big
as
the
content
right.
So
it
was
very
short.
Then
we
added
some
extra
padding
and
the
block
got
a
little
bit
bigger
to
accommodate
the
panning,
but
there's
another
way
we
can
make
that
block
a
bigger.
We
can
go
back,
use
the
contextual
menu.
A
One
of
the
other
settings
we
have
available
to
us
is
excuse
me
not
custom.
Colors
is
height
under
the
height,
we
have
a
couple
of
options:
fixed
height.
We
can
set
the
block
to
be
a
specific
height
and
we
can
pick
different
styling
units
if
you're
familiar
with
those
pixels
is
probably
that
simplest
for
most
people
and
I.
Think
that's
how
we're
going
to
do.
Let's
set
that
to
be
500.
Look
at
the
effect
of
that
now
boom.
A
A
Anger
under
our
height,
we
also
have
a
responsive
height.
So
we
can
click
on
that
and
now
we
have
a
couple
of
options.
We
have
a
relative
height,
and
this
is
this
uses
a
styling
term
that
BW
equals
if
you
find
a
width
and
that
basically
means
that
this
block
in
general
is
going
to
be
40%
of
the
viewfinder
width.
So
the
width
of
your
browser
window,
that's
how
high
this
is
going
to
be,
but
we
also
want
to
set
a
maximum
and
a
minimum
because
we
don't
want
it
to
get
too
small
I.
A
A
We
notice
that
block
is
a
little
bit
smaller
than
it
was
before,
because
it
was
500.
Now
it's
400.
We
also
notice
that,
as
we
get
the
page
smaller
it
stains
at
400
until
it
reaches
a
certain
point
and
now
it
actually
starts
to
get
smaller
and
tell
it
gets
to
250
and
then
that's
the
minimum
height
there.
We
go
one
of
the
things
we're
going
to
notice.
That's
kind
of
difficulty
might
run
into
this
problem
using
the
default
theme
and
backdrop.
Is
this
space
between
your
two
blocks?
A
We
don't
have
an
easy
way
for
you
to
get
rid
of
that
right
now
in
basis
the
default
theme
for
backdrop.
There
is
an
issue
to
fix
that
and
I'm
working
on
that
I
hope
to
get
that
fixed
soon.
But
in
the
meantime
we
also
have
a
contributing
called
Tatsu
and
Tatsu
is
basically
a
lot
like
basis,
but
we
have
fixed
some
problems
like
this
in
it.
So
you
might
want
to
test
out
the
Tatsu
thing.