Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...I have a CSS Headache, Please help!I have a CSS Headache, Please help!
Previous
 
Next
New Post
1/20/2006 8:15 PM
 

Just when I think I have CSS down, something comes along and confuses the crap out of me.  I have been developing a couple of sites as child portals but am now moving them to a new site via the template tool.  The new site is a brand spanking new install of DNN 3.2.  The problem I am having is that the classes don't seem to control the skin in the new site the way they did in the old site.  Example, My login text is now black where before it was white.  I went to the OtherTabs (default) and changed it and nothing happend.  I then changed the a:link class and it changed my text.  According to the documentation, that isn't right!

Also, my container headers are now showing up a different color and I played around and got them changed back but I had to change a different class element to do it.  What gives?

Basically my questions are:

1.  What trumps what?  Default.css, Portal.css, skin.css, container.css?

2. If I am going to have several child portals, should I just delete the default.css and portal.css and style everything with the skin.css.

3.  What is the best resource for me to wrap my head around CSS and DNN.  Just when I think I figure out what CSSClass controls an object, something gets screwed up and it takes me a couple of hours and a couple of beers to figure out.

I admit, I am a complete newbie and have learned a ton in the last month or so but I am ready to actually understand what the heck I am doing.  Thanks in advanced for the advice!

 
New Post
1/20/2006 8:42 PM
 

CSS stands for Cascading Style Sheets and the "Cascading" part is what causes confusion most of the time. The key thing to remember is that the final style that is applied to elements on a page is an *aggregation* of all the attributes defined for that style in each stylesheet and "style" attribute defined on the page, with the "nearest" defined attribute taking precedence. For example:

A.css has class .MyStyle { color: red; font-size: 10pt }
B.css has class .MyStyle { font-weight: bold }
C.css has class .MyStyle { font-size: 8pt }

and an element is defined like this: <div class="MyStyle" style="font-size: 9pt"> blah </div>

In this example, the final style that will be applied to the div element is { color: red; font-weight: bold; font-size: 9pt }   PLUS any other style attributes defined in elements that are parents of the div.

The easiest way to determine the order of stylesheets in DNN is to View Source for the rendered page and look at the <LINK> tags in the head. The order in which the stylesheets appear is the order of precedence.

As a personal preference, I make every .css file other than skin.css blank. Other people use different approaches, but this works for me.

Without a doubt, the most useful resource I could recommend is the O'Reilly CSS Pocket Reference. This mini-book is concise, accurate and way faster than even Googling when you need to look up a CSS attribute. My computer has my mouse on the right, and a well-thumbed O'Reilly reference on the left. http://www.amazon.com/gp/product/0596007779/104-2374996-3424721?v=glance&n=283155 ... best $10 you will ever spend.

Nik

 


Nik Kalyani
Co-founder
DotNetNuke Corporation
Blog | Twitter | FaceBook
 
New Post
1/20/2006 9:22 PM
 
Thanks for the advice.  I will defenitely be buying that book. 

One of my biggest problems right now is identifying what cssclass controls certain elements in DNN.  One example is the Login (default is othertabs) but I had to change the a.link for any change to take place.

Is the documentation wrong or is there a way I am changing the cssclass without knowing it?
 
New Post
1/21/2006 4:11 AM
 

Nik's right - a good CSS book really goes a long way - I've got quite a few and am still learning all the time. There are some online references, but nothing beats printed matter some of the time.

If you are after a little information on how to understand the hierachy of the CSS files - then I've explained in a little more detail on this post -

http://forums.asp.net/1160138/ShowPost.aspx

You an also assign your own classes to overcome things not looking quite like you want.

This is a little more food for thought on the post.

Nina Meiers


Nina Meiers My Little Website
If it's on DNN, I fix, build, deploy, support,skin, host, design, consult, implement, integrate and done since 2003.
Who am I? Just a city chic, having a crack at organic berry farming.. and creating awesome websites.
 
New Post
1/21/2006 11:58 AM
 
Thanks.  I picked up a couple of books this morning, printed out your post and think I am well on my way to doing the right steps of understanding CSS.

I tend to get ahead of myself and skip the basics sometimes so it will be good to step back and start from the beginning.  Thanks for the advice!

John
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...I have a CSS Headache, Please help!I have a CSS Headache, Please help!


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out