Monday 1 June 2009

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


6 comments:

Unknown said...

I've a applications containing almost 200 pages and in every pages have some field which is not updatable. now I'm trying to apply a one css class for all of my non updatable item but i'm stuck. Could you please help me?

Unknown said...

this is really too useful and have more ideas from yours. keep sharing many techniques. eagerly waiting for your new blog and useful information. keep doing more.

School Signs UK

Unknown said...

lot of things learnt from your blog. got more ideas for us. wonderful tips makes from yours. Executing and testing our status very helpful one.
IELTS coaching in chennai

99 Digital Academy said...

Nice to read this Article, Thanks for the nice information. Here I have a suggestion that if your looking for the Best Digital Marketing Institute in Pitampura Then Join the 99 Digital Academy. 99 Digital Academy offers an affordable Digital Marketing Course in Pitampura. Enroll Today.

MindQ said...

Software Development Engineer Training SDET is an emerging role in the present scenario, this role needs an IT professional that can handle development as well as testing effectively. The entire software development process is handled from developing to the testing phase. So this role has high priority in the industries.

Unknown said...

This is really very nice post you shared, i like the post, thanks for sharing.. data scientist course in surat