Changing the theme | OutSystems

Daan

Changing the theme

Question

Hi,

Now that I was helped so good with my last question I have a new question.
I want to use the styleguide theme (wich is standard embedded into agile) but I wanna change the header.

I have searched voor a while but I can't find the image of the header.

Can any of you tell me where I can find the header?

02 Mar 2012

Paulo Ramos

Staff

Daan wrote:

Hi Daan,

In short, the header (by default) is in the Common web flow (look for the Layout_Normal web block).

There is a specific tutorial that may help you changing the overall theme / logo. In Service Studio, click on top-right help icon, and then click How-to's. Next, select the 'Use Images and CSS to change the Style' tutorial. I believe one of the steps is actually changing the logo of the application.

02 Mar 2012

Luís Lopes

Staff

Daan wrote:

Hi, I believe that you will have that in the theme css.

In the StyleGuide5 theme, in the beggining of the css , there's a note explaining on how to costumize the theme.... something like

/*-----------------------------------------------------------------*/

/* HOW-TO CUSTOMIZE THE CSS

and I believe the portion that has the Header is this one:

/************** Header & Footer **************/

.Header {
background: white url(/RichWidgets/img/Header_Background_Blue.jpg) right top no-repeat;

...
Hope this helps..

02 Mar 2012

1 reply

06 Mar 2012

Show thread

Hide thread

Daan

Hi,

Both of you thanks for the reply!
When I open the stylesheet of the "StyleGuide5" I see the green lines.

When I search for the background image I find:

	/RichWidgets/img/Header_Background_Blue.jpg

But when I try to change the image I noticed that I'm not able to change anything in this theme.
Now I want to make a new theme, with the basic info of this theme only with a different background.

How can I make a new theme?

06 Mar 2012

Paulo Ramos

Staff

Hi Daan,

The suggested way is using the 'StyleGuide5' CSS, and then overriding just the stuff you want to customize.

So:

Ensure you have a local theme in your eSpace (it's created by default - ex: ApplicationTheme). In the eSpace properties, select this theme in 'Default Theme' (or select it in the Web Flows).
Click on your local theme, then locate the 'Base Theme' property. Select 'StyleGuide5'.
Now edit the Style Sheet for your local theme. Just copy+paste the selector from 'StyleGuide5' you need to change, and edit it.
If you want to use a local image in the CSS, import it and then use format: '/eSpaceName/img/image.jpg'.
At runtime, 'StyleGuide5' will be loaded, and then your local theme, overriding selectors with the same name.

Paulo

06 Mar 2012

1 reply

07 Mar 2012

Show thread

Hide thread

Daan

Paulo Ramos wrote:

Hi Daan,

The suggested way is using the 'StyleGuide5' CSS, and then overriding just the stuff you want to customize.

So:

Ensure you have a local theme in your eSpace (it's created by default - ex: ApplicationTheme). In the eSpace properties, select this theme in 'Default Theme' (or select it in the Web Flows).
Click on your local theme, then locate the 'Base Theme' property. Select 'StyleGuide5'.
Now edit the Style Sheet for your local theme. Just copy+paste the selector from 'StyleGuide5' you need to change, and edit it.
If you want to use a local image in the CSS, import it and then use format: '/eSpaceName/img/image.jpg'.
At runtime, 'StyleGuide5' will be loaded, and then your local theme, overriding selectors with the same name.

Hi Paulo,

Thank you very much, it works correctly now :)

07 Mar 2012

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines