20/20 DataShed incorporates two CSS files. One which effects all 20/20 DataShed pages; and another which effects only the administrative pages. These two files are named:
In rare situations, 20/20 DataShed incorporates some inline styles (which appear directly inside an HTML tag or element). We have tried to keep this to a minimum and use inline styles only where it seems essential to enforce a specific formatting or effect.
Inheritance
It is important to note the order in which 20/20 DataShed's stylesheets are imported into the HTML produced by 20/20 DataShed.
2020applications_adminstylesheet.css is imported second into 20/20 DataShed's pages (administrative pages only). Therefore, all CSS definitions in this file inherit the attributes of the first CSS file. But also note that the CSS definitions in this file may override the definitions of the previous CSS file.
Advice: We strongly recommend that if you wish to use your own external CSS file(s) within your HTML tempates that you ensure your own CSS file is imported after ours (in the flow of HTML code). This ensures that your own CSS is able to either complement or override the CSS definitions that we've created.
Our CSS Policy
We have used CSS throughout our design process and in each interface/page to achieve consistent formatting that can be altered with ease.
We have explictly defined class names, ID's, or both for most HTML elements created by 20/20 DataShed. This ensures the ability to apply CSS to each HTML element on each page individually (if we/you need to). Where HTML elements or tags do not have a class or id attribute defined explicitly we are conscious that such elements are direct descendants (or logical descendants) of an HTML element which does.
We have avoided creating CSS definitions for HTML tags; instead we have applied styles to class names or element ID's. There are very few exceptions to this rule. This means that the styles defined in our CSS files likely will not effect the HTML that you create in your templates. For example:
<div class="ourDivClassname" id="ourDivID" />
Rather than define a style for the DIV element, we have chosen to apply styles appropriately to either the class name or ID of the element. Example:
Note that our styles will not effect other DIV elements on the same page (unless they share the class and/or ID attributes).
Your CSS
Every web page designer/programmer likely has a different approach to CSS -- different knowledge and experience, different preferences, different habits. We understand that. However, we (you with us) need to come to some agreement on the most logical way(s) to incorporate your own CSS with ours.
In the previous discussion, (Our CSS), we've outlined our policy. That discussion will hopefully help you to make the necessary decisions about how best to incorporate your own CSS.
Combining Your CSS With Ours
There are a number of ways you can combine your own CSS with ours.
First: You might choose simply to modify our CSS files. This might include changing CSS definitions that we've already created; or it might include removing or adding CSS definitions as necessary to achieve your desired results.
Advantages:
The files already exist and are already imported into the HTML. Therefore, this method may seem easiest to those with less experience with CSS.
It may appear easiest to those with less experience to simply alter our CSS definitions. For example, it's easy to change the font-size, colours, or borders in CSS that is already defined.
Disadvantages:
Such customization may be lost or overwritten if/when new versions of 20/20 DataShed are released. Upon upgrading 20/20 DataShed, it's likely that the upgrade will include CSS files.
Such customization will have little or no effect on other (non 20/20 DataShed) pages of your web site. Therefore it may be more difficult to create a consistent cosmetic throughout your web site (in the worst case, the 20/20 DataShed page will be 'styled' and the other pages on your site will not).
Second (and recommended): You might choose to build your own CSS file(s) - which may then complement or override our CSS definitions.
Advantages:
This allows you to apply styles to only the HTML elements you create in your own templates (leaving 20/20 DataShed's output 'as is').
Or you may apply styles to your own HTML elements, but also create new CSS for specific elements in 20/20 DataShed (without having to alter the 20/20 DataShed .css files at all).
Or you may apply styles to your own HTML elements, and RE-define CSS for specific elements in 20/20 DataShed (without having to alter the 20/20 DataShed .css files at all).
Disadvantages:
This requires that you are comfortable with CSS and understand how multiple style definitions may cascade through the HTML output. If not careful, this could lead to undesirable and/or conflicting CSS.
Advice: We caution our customers not to use inline styles. These are inline style definitions made directly inside an HTML tag such as in: <div style="background-color:blue;">.
Advice: It is never necessary to alter the ASP (Active Server Page) source code of 20/20 DataShed to customize the styles/cosmetics/(even layout!) of a page or interface created by 20/20 DataShed. There is always a less descontructive way (either by CSS or your HTML templates). If you believe you've truly reached a road block and would like more information or advice, you may contact us before making any changes to the product's source code.
If you wish to produce a dramatically different layout and style, then it may be best to simply remove the CSS files from 20/20 DataShed and begin with a blank CSS file.
This process would require that you:
study the HTML code produced by 20/20 DataShed for each page or interface and,
apply styles as necessary to produce your desired effect.
Suggestion 2: Reverse Engineer Our HTML
Identify the HTML element(s) you wish to apply styles to (or alter).
Open both 20/20 DataShed style sheets and discover whether the existing CSS definitions already have effect upon that HTML element(s).
If so, then alter the CSS definitions (or override the CSS definition) as necessary.
If no, then create new CSS definitions specifically for that HTML element.
Suggestion 3: Reverse Engineer Our CSS
Study each CSS definition in the 20/20 DataShed style sheets to learn which HTML element(s) is effected. (This usually requires that you browse through the 20/20 DataShed interfaces until you find the HTML elements effected by the CSS in question.)
Alter (or override) the CSS definition as you see fit.
A Helpful Trick
The 20/20 DataShed style sheets can be temporarily disabled or "turned off". This may be helpful if you would like to view a page or interface without CSS. More information about this trick can be found in _globals.asp.
In the example below, both the global and admin stylesheets are applied. The next few examples will show how the appearance of this page may change when each style sheet is "turned off".
In the example below, the global stylesheet has been temporarily "turned off" by adding this querystring to the URL: ?objApplication=RemoveAll&strUseGlobalStyles=False
You will notice that the colours and font style/size/type of the green "Change Password" heading and some other text has changed. The rest of the page remains the same as the previous example. This example indicates that the majority of this interface incorporates the "admin" stylesheet but a few page elements were inheriting CSS from the "global" stylesheet.
In the example below, the admin stylesheet has been temporarily "turned off" by adding this querystring to the URL: ?objApplication=RemoveAll&strUseAdminStyles=False
This screen shot shows a more dramatic change. In this example we can see first that the green "Change Password" heading is back (because we can determine that it is inheriting its CSS from the "global" stylesheet). However, the other page elements have changed significantly. All elements, such as the menu on the left, the main heading, the block of "help" text, and the "Hide Help" link, which inherit CSS from the "admin" stylesheet are now displayed without CSS and the web browser is applying its own default to these elements. They are different colours, different fonts, even in different locations on the page!
This screen shot was produced while both the global and admin stylesheets were disabled by adding this querystring to the URL: ?objApplication=RemoveAll&strUseGlobalStyles=False&strUseAdminStyles=False
Without CSS, the web browser applies defaults to all elements. One might say this page looks like it was produced by Netscape version 2 and not MSIE version 6. Well, that's partially true...this is how the interface would appear in a web browser that does not support CSS.
Step-by-Step Example
This example image is a screen shot of the "listings.asp" page. On this page, we can see two listings with photos and some navigational links to help us get around.
As you can see, the page elements have very little "style"! Mostly white with black text, and the link colours are difficult to see.
In the steps below, we will transform this example into a more attractive and more readable page by simply altering the CSS.
Access your web site with an FTP application such as CuteFTP, FTP Explorer, or Windows "My Network Places".
Open 2020applications_stylesheet.css in a text editor such as Notepad. We recommend that you do not use a WYSIWYG editor like Frontpage or Dreamweaver for this purpose.
In that file, locate the CSS definition for .summary5ViewItemDiv. Each item on this page is written inside a <DIV> element with this class name; therefore we can alter the appearance of the items by styling those <DIVs>.
Note that there may already be some styles applied to that class name. In this example, the CSS definition looks like this:
Next in the file, locate the CSS definition the "TextModuleTextLink" class name. In our example, these definitions look like this (and note that there are separate definitions for the active, visited, hover hyperlinks):
.gif)
.gif)
.gif)
Send Feedback