Customize the Look using CSS
Overview of Themes
This lesson is part of the Developer Online Class for OutSystems 9 course.

in this lesson we will finally connect the dots between the concepts we've been
working on
like header and menu web blocks and CSS
and how these are applied to each new page you create in your application
what we'll be focusing on are actually
themes in your application so let me go ahead and select here
the customer support theme and you'll notice that
a theme has a bunch of properties
here on this properties pane I will not go
and drill-down on each one of these properties
but there are a couple of them that I want to focus now
the first one is actually
the base theme so a theme is
a central place where you define the look and feel of your application
ensuring consistency in every screen you create
and the base theme the base theme allows you to
inherit some of these properties that
provide you this look and feel and this consistentency in your application in this
our base theme is the Chicago theme
and we've seen this before when we discussed the
the style sheet editing in your application let me go ahead and
and show you here on the style sheet editor that
remember that we have the theme
tab here the second one this is the customer support this is where we put
our most generic style
definitions for our application that are going to be used
throughout our application and we also said that
these are an add-on
to the ones that come from this third tab in this case this is the
Chicago theme so this is the base theme ok so
this is one of the properties that we inherit when we select the base
another property that we inherit and I want to talk about now
is this layout web block the layout web block
is a web block that is automatically added
every time you create a new screen
so for instance let me go here into the widget tree you'll notice and we've
seen this before as well that
the basic element that defines your screen
is actually a web block look here layout Chicago this is the value that was on
that property
and this web block has a bunch of placeholders
basically they define the structure of the application
and if you'll notice we have here the header
the menu and the footer placeholders and
look now if I expand these placeholders
you'll notice that inside these placeholders
we have the common header web block
the menu web block and the footer web block
and these well blocks are
actually also present
on the theme properties let me close the widget tree and show you that
those three web blocks are set
here look header, menu and footer
and actually these web blocks
come from the common the common web flow so if we go here
and expand the web flow there you have footer
header and menu so these web blocks are
added to those placeholders every time
you create a new screen so when you create a new screen
the theme will tell you which layout
is going to be used to create that screen
and what placeholders sorry and what
web blocks will be placed inside
the header, the menu and the footer placeholder