Customize the Look using CSS
Customize the Application Header
This lesson is part of the Developer Online Class for OutSystems 9 course.
LEARN MORE

Transcript
in this lesson we'll see how to change the looks of some of the applications
common parts
like the header let me let me show you
you're probably wondering about this for a while now
let me show you when we create a web screen
you noticed that we already have a structure in our application
if we look here into the widget tree let me open here the widget tree
you noticed that the content
of our page starts out with
with a web block this is the Layout_Chicago web block
and inside this web block we have
different areas these header,
menu, title and so on and these are what we call
placeholders so they are areas inside this web block
where we're going to put some content and you'll notice again that
if we expand here the header placeholder inside the header
we again have another web block
which is in this case the header web block so this is the
common part that we are going to that we are going to change in this lesson
okay and again we're going to customize this by using some CSS
and we're going to use some images here as well
let me start by changing the look of the header
using CSS and again
this is a definition that I want to spread throughout
my application so I'll put this definition here on the theme tab
and let me paste it from to clipboard okay
so basically what we're saying here is that we want to change
that header to have
a background color of gray okay
and I want to do
a little bit more to change this header
I want to have here some image on the background
so let me import the images that we want to
to have here or the image that we won't have here
so import image and
this is the image that I want to have their let me just select here
you have the preview here and I want this image to show here
on the header and again to do this
and again to do this I'm going to
to use CSS so let me open here the style sheet
editor and again this is a definition that we want to spread throughout the
application
going to the theme tab and after this one
let me just paste here we already defined here
to use this image that we just uploaded and if you notice
that image is already present there in the header of our application
now let me close the style sheet editor
I still want to do some more things here and
actually what I want to do is to change the logo of the application
and to do that I will need to drill down
into the header web block so let me double click here okay so
this is the header web block and I want to change this
image that we have here and to change this image I can go here
into the image property and
I want to import a new
image and I'll use this image again
you'll find these images in the resources of
and the CSS in the resources of this video lesson
okay open the branding image and there you have it
okay so since our image already has
the application title in it I will remove
I will remove this from here so select here
this link and remove
delete this okay
so that let's see how this is looking okay it's
looking good let's publish and see this in a browser and there we have it
so we have our gray background in the header
we have the images here and we have a new logo for
our application that's it