Customize the Look using CSS
Enhance the Page Style using CSS
This lesson is part of the Developer Online Class for OutSystems 9 course.

in this lesson we will see how to use CSS
to make our customer support application more
appealing let me start by going into the issue description
and I will set here the issue ID
to bold and to do this I selected the expression
and now use here this option on the toolbar the bold
option there and I also want to set the
hash sign so the text here to bold as well
okay now I want to subdue here the issue description
on this web block and to do this I
actually I'm going to select here this container
that encloses the description
and I'm going to apply a style to this container to do this
again I'm going here to the toolbar and I'll select the style from this list
and the style that we're applying is the Text_Note style
now the result of this
is that on the HTML the DIV
which is this container this DIV will have an attribute class
equal Text_Note and this this style here this is
actually a style that we already have defined and that comes from our
application template
you will see further ahead how you can create your own styles
and apply them to elements on the page okay so for now let's just see how this
is looking in our issue list
I want to apply the same style here to this email
so I'll selected here this container and apply the Text_Note style
and now this is looking good and remember that we also used
the issue description in the dashboard
so let's see how this is looking in the dashboard okay
there's one thing I want to do here
when we applied in a previous lesson we applied to these containers the style
Heading1 so that be have here these titles this style
actually adds here this spacing that you see here in the top this is actually
this property here the margin-top property and you'll see here that
this was set because we applied the style Heading1
and in this case I want to override this settings so let me go here to this
and say that I don't want to have a margin-top for these elements
I'll do the same for this one okay
now let me show you how this would look in the browser I'll go into the preview
and you'll notice that we have here the list at the issues
we don't have any spacing in between these issues
I want to fix this and to fix this I will
create my first style definition to create your own style definitions
you'll need to open
the style sheet editor I'll open the style sheet editor here from the toolbar
and as you notice there are three tabs
in the style sheet editor so let me go into each one of these tabs
so that you understand what they are and what you can do here
You'll notice that the first tab is called dashboard
dashboard is actually the web screen
we are on in our application so
this first tab this is the web screen we are on
and this is where you're going to put your most specific definitions
the definition that you only want to use in the dashboard web screen
now the second tab here
it's call Customer Support this is actually
let me show you here this is actually the theme of
your application see here customer support so this is where you're going to put your
more generic definitions the definitions that you want to use
in your application in all the web screens
of your application or in several screens on your application
okay the final tab we see here the Chicago tab
this is actually let me show you here are selected customer support theme
this is actually the base theme
of your application and you'll notice let me select here
that this is where you have all the styles defined
that come from your application template you'll also notice
that these definitions are read-only
so you'll see further ahead how you can redefine
these styles here that come from from the Chicago theme
you'll see how to customize them how to redefine them
now let me go here into the dashboard
and let me be paste here
my first style definition okay
here we have it IssueContainer now that I have defined this style
I want to apply it to the page okay so let me just close this
and let me go here to the lists I will enclose these
web blocks I can't apply the style directly to the web blocks so I'll need
to enclose it
I need to enclose it in a container
there we have it and now I will apply the style
to you the container so let me go again here to the toolbar
you'll notice that now we have here the IssueContainer the style that we just
let me apply it and there we have it the margin-bottom that we defined on that style
let me do the same here for the low priority issue so again
enclose in container and set
the style okay one more thing I want to do here
I want to color these titles that we have on the dashboard
according to the priority and again
I will need to create some style definitions
so let me go here into the style sheet
editor and in this case these styles that I'm going to create
I want to apply them here to the titles but I want to reuse them
for the titles in the high priority and the low priority pages
so in this case I will put the styles here
on the theme tab okay again let me just paste it from the clipboard
don't worry too much about these style definitions you'll be able to download
from the video lesson resources okay
now let me close this and let's apply the style here to the titles
now we applied styles to containers one thing you should notice is that
you can also styles to other elements on your page
in this case we're going to select here this text and you'll notice that we
also have here
the style property in the Properties pane so
every time you have here this style property this means you can apply a
style to this
element and let me apply here in this case
the HighPriority okay let me do the same for the low priority
there one other thing that you should recall in this is actually a
a nice tip if you double click here to the style property let me just show you
this opens the style sheet editor as well
and in this case since we have here
a style applied to this element
the style sheet editor opens but it
opens focusing on that style so this means that if you have a large style
this is quite handy for you to go directly to that style definition
and tweak your on definition
to your desire okay so
let me apply these styles again back in the high priority and the low priority pages
okay so here HighPriority and now the low
select here the text
okay now the final thing I want to show you
is how you can redefine styles that come from the application template that
come from the base theme
so to do this again let's open the style sheet editor
and let me go here to the Chicago theme and let me search for the style that I
want to redefine
actually what I want to do let me just go ahead and tell you
I want to redefine this style here and I want to change the font
of my application so I need copy this
and again this will be a generic definition a global definition we want
to set it here in
the theme tab let me just paste it here
and I will only redefine
the font family here in this style definition so let me just remove the
and let me change here the font-family let me select is
I want to use Verdana okay Verdana instead of
Helvetica so there you have it you see the change
immediately reflecting here on the page and let me close this
and if we go into the dashboard for instance you'll notice that
the font is also changed here
so we're pretty much set and done let's just publish and see this
let's see this in the browser
okay so here we have our dashboard with the colors on the titles
that issue ID in bold some spacing in between these elements in the list
and also here on the high priority the colors on the title
and here as well and the font is changed to Verdana
that's it!