API
@-Formulas
JavaScript
LotusScript
Reg Exp
Web Design
Notes Client
XPages
 
Use Different Style Sheets In Notes And Web
More and more we at Breaking Par are using style sheets in the Notes client. Although the CSS implementation in the Notes client isn't the greatest (at least through Notes 6.5) it is pretty good and you have lots of options. But the web certainly has more options. Instead of trying to combine all the information into one style sheet, sometimes we have a separate style sheet for the Notes client and the web browser. But how is that done?

Obviously, if you have different forms for the Notes client and web browser, no discussion is needed - just include the right style sheet on the right form. So this tip is applicable only if you are using one form for both the Notes client and the web browser. And given the Notes client's ability to now recognize JavaScript (as of R5) and pass through HTML (as of R6), more often than not we use one form for both environments. (That's drastically different than earlier releases where we would have one form for Notes and one for web because the same capabilities didn't exist in both environments).

If you want to include a different style sheet resource for the Notes client and web browser on the same form, it's pretty easy once you understand how things work. Keep in mind that items on hidden paragraphs are never sent to the web browser. So if you have a style sheet resource on a line that is hidden from the web browser, then the HTML for including the style sheet resource is not sent to the web browser. But a style sheet resource on the form, no matter if the line is hidden or not, is always brought in to the Notes client. So if you put a style sheet resource on a line that is hidden, that resource will be used in the Notes client but not the web browser.

Conversely, the HTML Head section is only used in web browsers - that section is not used on the Notes client no matter what. If you edit the HTML Head section and right-click in the formula pane, you can choose "Insert Resource" and insert a style sheet resource. It will be included as a <LINK> tag in the <HEAD> section of the web page that is generated. Since the HTML Head section is not used in the Notes client, that style sheet resource is used only in the web browser.

So, there you go. If you want to use one form but different style sheets, put the web-only style sheet resource in the HTML Head section, and the Notes-only style sheet resource on a hidden line on the form.