How does one tell what CSS' are loaded, and in what order?

If I am using FireFox, and use the webdeveloper toolbar- does the 'view CSS' option show them  in the order  that they are loaded/applied?


Thanks

Hello, yes it does, but the easier way to view the CSS is to select the 'Edit CSS' option.

- It lists each CSS file in a tab so it's easy to select the file to edit and view.

Any edits you make are made to the live website and not the actual file meaning that you can easily and quickly experiment with settings without messing up the original file. - I use this all the time, it's a real time-saver.

The second function I use a lot is Information / Display ID & Class details - this is a useful troubleshooting tool as you can view all of the classes assigned to each object on the page.

Other useful tools are view Information / view document outline for checking on your header tags for screen readers etc. (I've just finished a 40 page pdf tutorial on this for subscribers for next month ;-) ).

And of course all of the validation functions in the tools drop down list are also great.

- On another note, I've just incorporated sIFR into the Simple Red Leaf CSS skin and I'm just about to start videos on how to incorporate sIFR into DNN. (sIFR allows you to replace text headers with Flash Text, meaning you can use any font for your headers & if a user doesn't have flash installed the user views the text as normal) - very exciting stuff!

Cheers,

Thanks Lee!

That is what I thought- that they are displayed both in the 'view css' and 'edit css' in the order that they are loaded.

I've been using the 'edit css' tool, and am only partly baffled by some of the effects: for instance- I can change the color of the text, but not the font-size (or font-family)... leading me to believe that the font charcteristics are being overridden somewhere in another sheet... I am now sort of randomly trying to find WHERE.


regarding the upcoming tutorial:
yay!

New subscriber here.


Thanks!

Have you checked out this tutorial: Introduction to CSS and inheritance in DotNetNuke

It might help you out. - This was one of the things that i always found confusing when first starting out. - Remember when in the edit css function, you can always delete all of the styles from each of the tabs to see which CSS file is overriding your settings ;-)

- It's a handy tool for just deleting everything and leaving the style you are working on for troubleshooting.

Good luck,

re: inheritance...

The rules of inheritance appear to be useful only as long as all the modules are all playing by the same rules. trying to override a module's css from the skin or portal css won't work if the module's css is loaded LAST...

How is the css load order dictated?

Hello,

Yes this is true. - You may also find this tutorial useful for troubleshooting the inheritance:
Troubleshooting DotNetNuke Skins

If you look in this file at the root of your installation: Default.aspx.vb
this file sets up the page, so you maybe able to trace the procedures that are called for setting the modules css.

Your other option would be to edit the modules CSS and would probably be a better solution, ie. delete the code from the module.css file that is causing the problem.