|
|
| [back to Teach Domino new Web tricks with DHTML]
Linking style sheets sidebar
Embedding a style sheet directly into a form is fine when the style sheet needs to modify only the form in question, but what about instances where a single style sheet is applicable to multiple forms? In such cases, it would be handy to maintain the style sheet separately and have each form that must apply its rules simply reference it. Linking to the rescue!
The Linked CSS Tabbed Table form in the sample database in the Iris Sandbox (DHTML.nsf) is exactly the same as the Tabbed Table form detailed in the article with one important exception: instead of containing the style rules, the form's HTML Head Content object contains the following code:
db := @ReplaceSubstring (@Subset (@DbName; -1); "\\" : " "; "/" : "+");
"<LINK REL=stylesheet TYPE=\"text/css\" HREF=\"/" + db +
"/tabbed+table+style+sheet/$FILE/tabbedtable.css\">"
The first line is the standard method for deriving the path of the current database; it's the remaining code doing the real work. The LINK tag specifies that a style sheet can be found at the URL provided in the tag's HREF. In this case, it's pointing to a page element in the database called "Tabbed Table Style Sheet." If you examine the page in Designer, you'll notice that all it contains is an attached text file, "tabbedtable.css," which is where the style rules for this example are stored. The page itself is never actually displayed; it exists as a repository for the attachment. To access "tabbedtable.css," we simply use Domino's $FILE convention, which gives us access to a document or page's attachments, and we also provide the name of the attachment we want to access.
Finally, what does the "tabbedtable.css" file actually look like? It's identical to the embedded style sheet except for the absence of the STYLE tag, which is not needed because it is effectively being provided by the LINK tag in the form's HTML Head Content. So, using any standard text editor, the following lines need to be saved with the name "tabbedtable.css" and then attached to a page or document in the database:
A.tabs { text-decoration: none}
#tab1{position:absolute;top:40;left:10}
#tab2{position:absolute;top:40;left:10; visibility:hidden}
#tab3{position:absolute;top:40;left:10; visibility:hidden}
That's it! The file is now stored in the database and is now available to be referenced from multiple forms. From the standpoint of reuse and maintainability, linking style sheets makes perfect sense and is simple to implement.
|
 | |
|