Re: CSS in DNN

Are you using a standard skin - eg dnn-blue and trying to change the background colours-

That skin and all the default skins are managed by a css file that resides in the folder where the skin is sitting. You will find it's normally the skin.css file -

I have an article on my site which explains the css hierarchy - and how dnn works but here's more perspective into to - to help you understand how dnn works with CSS

In your portal - you have the portal.css skin which is accessible by the admin/settings/ editor where you can make some changes to the information. It's blank. But how do the colours works? How come I can put my mouse over the modules when I'm logged in,
and see there is blue and icons displaying?

That's becuase in the _default folder - there is the default.css file -

(Don't touch or change this - but use as a reference) It's there as a fallback for anything that might be missing in a designers code and is important to keep the look and feel of the whole DNN application. But you can't access it even as host unless you
log in via ftp and download and look at it. It is the first point of call when a dnn site is loaded and looked at .. That's the start of the Cascading effect of the style sheets.

For example -I copied this code from the default.css file found in the _default folder.

You will see that is why the dropdown menu in the module looks like it does. And Unless absoletely requested, I never touch this - except when I'm doing specific high end complete integration of sites.. so it's best to never touch it.

Then - we move on to the Portal behaviour -

When a dnn creates a websites - it creates a portal initially called 0 and in there is a file called - portal.css - And it's blank - well not blank but it's got the same fields as the default.css file but they're not filled in.. And you can, as administrator
make some changes here if you want to, but they WILL NOT WORK if the next level of css managing comes in (that's the next element of Cascading style sheets)

However, if there is a skin.css file in the folder - then it takes priority over the portal.css

DNN looks through the style sheets and it's read the default.css, then it goes to the portal.css file (which you control through the editor when logged in as admin) and then it looks into the skin folder that's showing - and ... if there is a skin.css file
- then it will read that next.. and if something is in the default.css and portal.css and skin.css - skin.css is the boss - and that will be displayed.

So why the long explanation -
Becuase if you're using the default skin - you need to edit the skin.css and remove or comment out - the pagemaster and and skinmaster classes.

If you open the skin.css class you'll find that the pagemaster.css class manages and overrides the background colour settings of the page. and the skinmaster.css file overrides the body of the table that is sitting in the page.. that's why there is a fine
border around the default skin - it's managed by these two classes - just like this.

Then we like to complicate the matter a little more - because you know the saying you have to be cruel to be kind... well, we can tailor it even closer for designers. Let's just say you really have done a slick skin for the site - and you now are faced
with having to create some others - but the css is getting all mixed up and some looks good and some looks - um...well, crapola... *sigh*.. that's a popular word for me when I'm designing until I get the CSS right.

Well, to fix this - just start thinking along the lines of -
What will be common in every single skin on my site
(i might have a front page and sub page and admin page) - they would all go into the skin.css file.

What will be only used in the frontpage file and sub page and admin page
(if you need to define things that clearly) - they go into the filename.css file

So a little example would be - I have on front page - a black skin and I want my H1 heading to be white.
All my other sub pages are white - so I want my H1 headings to be black.

This is how I would do it -

I would create my front page skin and call it - frontpage.htm/ ascx - however you work
I would then create a css page called. frontpage.css - and in there I would have
H1 { color: #ffffff}

If you have inline css then it would read that as priority - and if you had your text commented the old way - selecting the colour -well that's also going to take priority.

I hope this hasn't been too much rambling - but the skinning engine in DNN is quite sophisticated and alot of work has been put in place to make it a great spot for designers, but the CSS always seems to give you a headache when firstly you might not understand
CSS very well and then start blaming DNN -

I think also people tend to change so many files and then it becomes a real mess - I don't want to tell the world how long I looked for problems and it drove me made until I sat back and started learning not only how css works (I had learnt that in 1999)
but .. learning how DNN displays the files..

Because you can hit refresh 1,000 times till you wear it out on your keyboard and it aint gonna change a single thing - if you have got the css written somewhere else.

Which is another reason I suggest people work with the Skin.css file or, completely remove the skin.css file (haven't treid this on myself) and put all the code in the admin/settings/ css editor file so it's managed at portal level.. which if you think about
it - might not be a too bad idea, if you have only one skin and one portal to manage.

Phew.. I"m going to have a cup of coffee.. I love DNN - but this thinking has worn me out for the moment!!

Hope this helps and hasn't scared you off - perhaps you'll get some good results now. I've got the DNN3 skinning docs converted to chm format and a skin I addes as an example that has contrasts in it, and shows in the CSS file where the changes were made
- very small, quite modest but perhaps enough to get you thinking on the right track.

Re: CSS in DNN

So i went and started playing around with the skin.css, this had immeditae effects. I was able to get the background color i needed.

When i commented out the pagemaster and skinmaster. The content of the site shifted left , instead of being in the center. Not a problem i just un commented it then , changed the color with in the pagemaster section and got the background color i needed.

I was able to adjust the skinmaster section and fix the color of the background there as well, I then logged in as admin and then went to the stylesheet editor and changed the color of the text to suit. I am starting now to understand the structure and
navigation of the DNN site,

Thanks to you NINA,

So, leads me on to another brick wall, the menu bar, if thats what its called, the bar that has your links to your other pages and the search box.

i have found out how to adjust the color of the text and the color of the background when the mouse is hovering over,

!!!But , where do i modify to change the color of the menu bar it self, from the default blue. Who knows what its identifer is. how to i identify it so i can modify it.

Re: CSS in DNN

I'm glad the explanation was helpful, sometimes I wonder if I don't go on too much but you have to sort of paint the picture to let people work out things for themselves.

Glad you got the newsletter.. lots more news coming out - now that christmas is over and enough time to implement new ideas and ways of making things easy for people to pickup some techniques.

I just read you other post.. Can you see in the html/ascx file where the menu is sitting? It's got a class associated to that - you can see in the file it's the gradient background - you can remove it and add a solid colour or you can simply shoose to open
that gradient up in photoshop and recolour it..

Does that help?

I'm really happy when people get some positive results out of the long winded answers I give.. My father used to say there's more than one way to skin a cat!