[All Adaptavist Apps]

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Note: The IE CSS is only included for Internet Explorer version 5.5 and above.

Important Notes

In older versions of Theme Builder, the only way to define a "global" or "central" style sheet was to create a CSS file and then use the @import directive to include it in to a layout. While this works it will have performance impacts on page loading due to various caching issues.

Imported CSS Resources

If you have externally hosted CSS files (eg. if your site is super-popular you might have them hosted on a CDN, etc) you can use this tab to import them in to a layout.

Expand
What's the syntax?
What's the syntax?

When you import a CSS file the syntax is generally in the form:

Code Block

@import url(http://www.adaptavist.com/download/attachments/7286/bar.css);

You should never put quotes around the URL to the CSS file as this will cause problems with some browsers!

Some browsers will block the imported CSS file if it comes from a different domain to your wiki. For example, if your wiki was on wiki.foo.com and your CSS was on www.bar.com then depending on the browser settings it might not get imported.

To work round that issue, it's always best to store the CSS file on the same domain as your wiki, for example you can attach the .css file to a page in your wiki. For more information see Creating CSS Files.

If your wiki can be accessed from multiple domain names and the CSS file is stored in the wiki, you should use a relative URL, for example:

Code Block

@import url(/download/attachments/7286/bar.css);

Imported CSS Resources are loaded before the Custom CSS and IE CSS. For more details, please see Style Sheets 3.xIn Theme Builder 3.0 and above, use Layout Hierarchy instead as that has the advantage of intelligently caching the CSS with "Cache Expire" and also managing things like CSS merging, etc.

Options

There are several options which allow you to further customise which CSS resources are used by the layout. These options are intended for "power users" who need extreme levels of control in their quest for perfection. If you don't understand these options, leave them ticked (wink)

...