Applying CSS Conditionally

It may happen that you have an exception on one or more of your pages where your styling deviates from standard. In addition to that, you may want to apply your style conditionally. You have several choices in order to solve that problem:

1. make changes to your css file
2. create a css file within your workspace and reference it in your page template
3. create an additional template for your new style

However, this reqiures severals steps and could be a problem in some cases:

- you are not managing your HTTP Server and your dba's need months in order to accept such a small change

- you need to make changes to your page templates

- you need to create an additional template (region template, report template, ...)

Sometimes you need to go that way but there are also situations where you could solve that as in this example in my Demo Application. Using Firefox and Web Developer Toolbar you can easily find out the classes and their properties referenced in your template. You can adjust those properties to whatever you need and put that code into the header text of your page:

<style>
.t10ReportsRegion .t10RegionBody {background-color:#E2E5EA;}
.t10ReportsRegion .t10ButtonHolder {background-color:#E2E5EA;}
</style>

and the style will be applied only on that particular page. This will overwrite the style applied through the class with the same name in your css file.

If you need to apply your style conditionally, you can do the following:

1. create a region with the highest sequence and do not apply any template to it,

2. put your code in the region source of that region

3. change the region to render conditionally