Changing the theme

Changing the theme

  
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?

Daan wrote:
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?
 
 
 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.
Daan wrote:
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?
 
 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..


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?
	
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
Paulo Ramos wrote:
Hi Daan,

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

So:
 
 Hi Paulo,

Thank  you very much, it works correctly now :)