abecedarian wrote
I haven't gotten into multiple styles- i.e. red, blue, green pages; since I'm only starting out myself.
I would assume that if you're using HTML for designing the skin and letting DNN create the ascx file(s), you should define a separate css file for each skin type:
redskin.css, blueskin.css, etc. and include it in the respective skin's html file for DNN to parse when it gets uploaded.
For instance, with the red skin:
in the HTML, and in the redskin.css file put your code for the skin.
Alternatively, to keep your CSS files' sizes to a minimum you could also do this:
(or "blueskin.css" or "greenskin.css"... etc.)
And put everything common to the skins in the "skin.css" file without any color declarations, and only the color attributes into the respective colored skin files.
The upside to this is that the client won't download the 'greenskin.css' file if you're using the 'red' skin, and vice-versa- could be a big deal for slower connections.
When it is uploaded to DNN, or you have DNN 'parse the skin package', DNN should create the necessary entries in the ASCX file for the skin to use the respective style.
Hopefully we'll get some of the skin experts to comment here too, particularly if my idea is wrong.
Abecedarian is correct about using multiple CSS files, but there is a catch with DNN that will also improve performance and readability. You have to understand how/what DNN does automatically, otherwise your going to get excess loading of information, or searching for files that don’t exist.
So, YES use multiple CSS files. What I do is, I use one file for structure type elements(font sizes, floats, img dimensions), and use another one for the colors specific to each skin in the package. And your example works great, except DNN is going to attempt to load 4 CSS files, instead of two.
Here is why.
Skin.css is automatically loaded by DNN for all the htm files in the skin package when the skin is used.
Htmlfilename.css is also loaded automatically by DNN, but only for the html file that matches it’s name.
So if you include LINK tags, your going to get DNN automatically loading them, then your htm file will also load them.
Actually, I’m not certain about skin.css, it may get stripped out by the parser, but either way, better to be consistent then rely on the parser to do something it’s not really supposed to.
In your editor it needs the link though. So what I do is this. I add the links to both CSS files in the editor, design everything, then remove the link lines before I package and upload.
They should be named like this:
Skin.css ß structure/layout/common attributes that will always be common in all .HTM files in the package. DNN will link this to ALL .htm files automatically(and ascx)
MySkin1.htm ß A skin :->
MySkin1.css ß the unique CSS for that skin file, dNN will automatically link it when it needs it since it’s the same file name!
MySkin2.htm
MySkin2.css ß only applies to myskin2.htm, and DNN will do the same thing link it automatically at run time.
**The CSS files must be in the same folder as the htm files, and even though at first it would sound nice to put them in a subfolder, DON'T. You really NEED to use this technique. Imagine what would happen if you linked your container CSS files to the container HTM file, then put 30 containers in one page....then your site will download the same CSS file 30 times...this is what I mean by consistancy, you need to follow the rules established by DNN otherwise your gunna get wierd results, super slow websites, and crashes :->
Another little tip is that you should have a file named skinname.doctype.xml for each skin, where skinname is the name of the htm file.
IE:
MySkin1.doctype.xml ß this contains the DTD so that things operate more consistently. The contents should look something like this:
<xml>
<![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">]]>
</xml>
I kinda babbled a lot, but feel free to respond for clarification or whatever.