Quality skins for your DNN website

DNNSkins Forum

PrevPrev Go to previous topic
NextNext Go to next topic
Last Post 11/09/2008 3:02 PM by kxdhost
Skin CSS vs Portal CSS
1 Replies
Printer Friendly
You are not authorized to post a reply.
Author Messages
AlchemyUnited New Member New Member Posts:1
10/09/2008 12:48 AM

    I'm pretty new to DNN so please speak slowly :) Thanks.

    I installed the XDFlower skin, no problem. (Looks great! Thanks so much!!) I soon decided I wanted to make some modifications. I am also new to being hands on with CSS (though I have done minor modifications in the past and certainly understand CSS' role in the large picture of site design.) I'm hoping someone can share some insights on the following:

    - What is the relationship between the skin's CSS and the portal's CSS? I ask because there seemed to be elements in the skin that were "hardcoded" (e.g., the header jpg in each seperate .aspx) that I thought would be CSS driven (i.e., a single .aspx with multiple CSS's - or maybe this is a DNN issue).

    - If I copy selector / declarations from the skin CSS to the portal CSS, will the portal's CSS override the skin's? Is there anything I need to be concenred about? What capabilities of CSS do I need to be aware of that's going to help me?

    - Basically, I'm just tryinng to get a handle on the mindset I need to have if I wish to customize a portal without making permanent modifications to skin that mother's it. So any insights on such efforts would be greatly appreciated. Or maybe, in the example of XDFlower, I could in fact modify each .aspx's html / layout  a slight bit and then once I apply it I can finish the make-over with the portal's CSS.

    Yes, I know there are loads of resources on the web :) What I'm trying to do is get some expert input in pointing me in the right direction(s) so I don't waste time deciding a crap resource is just that, crap :)

    Thanks in advance

    kxdhost I'm the boss! Basic Member Basic Member Posts:227
    11/09/2008 3:02 PM

    skin.css is related to the skins that are in the skin package...

    Portal.css - DNN allows you to have child portals and multiple websites under each database.

    When you first install dnn - there is Portals/0/portal.css - and that's the core DNN coding for all the 'business look and feel' - I call it that because it controls the fonts that hold the structure together. Thngs like the control panel, fonts that make up the command links, the admin settings, things that really don't need to have 'design management' if you get what I mean.

    And, you can put in classes using the Admin/Settings... scroll down the bottom the CSS editor - that's actually writing to the Portal.css file sitting in that portal.

    If you had other websites attached to you DNN build, each one would have a Portal.css file - becuase as administrators, we can go in and modify CSS elements of each portal, indpendently.

    Some people like to control the lot and I say - good luck to them- If you need to do something that is a once off customised and streamlined site that required precision from A > Z - then you modify the Portal.CSS file.

    Skin.css - that's required in each skin to customise it further..

    I'll explain in a little more detail here -

    Cascading Style Sheets - they have a hierarchy of order -

    The outermost has the least control, the innermost or closest CSS coding to the actual html reference - has the most control, and that should help you understand how the DNN hierarchy works too.

    The skin.css file controlsl all the global elements pertaining to that skin set.. DNN skins automatically pick that up - it's part of the skinning engine infrastructure.

    However, you can customise the skins more by putting in a skinname.css file - eg... homepageskin.ascx would have a homepageskin.css file with some customisation - things like... menu colours, background colours - whatever, so anything you want that is specific to that skin only, it will be picked up BEFORE skin.css, and what is not found in skin.css will be picked up in Portal.css.. and what is not found there is picked up in Default.css   and you might wonder why so many files  - some people dont' like this and think we should have just one css file for everything...  but from my experience, I've found that very few people want to get involved in the skinning of the whole application.

    What I suggest you do is copy the skin and rename it, then copy the skin.css file and rename to the skinfile.css name and make all your changes there - don't touch the portal.css file unless you want do something to affect the whole site.

    Does this help you at all?



    Life is too short to be unhappy!
    You are not authorized to post a reply.