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, ...making changes to css files, some things work, some donmaking changes to css files, some things work, some don't...
Previous
 
Next
New Post
3/5/2008 11:32 AM
 

I'm starting off very basic, with basic layouts, colors, images, etc. until I get this down and can design something better.  I'm playing with things like changing colors, sizes, padding, etc. of text.  One of the first things I did was try and change the [TITLE] to a different color in my container.  I wrapped my [TITLE] in a <h1> tag and gave <h1> some properties in the container css file.  I noticed this did not work...so I took a look at another skin for reference and noticed that it had a ".Head"  after the h1 in their css file.  So I tried that and it worked.  So I looked at the Default.css and saw the .Head class in there.  ok, so I have to overwrite some classes.  i guess my question is, besides scrolling through the default.css and hoping to find a class name that might be the one I want, how do I know which classes to overwrite?

After I got the .Head class the way I wanted it, I wanted to try and modify the text in my text/html module within my container.  I managed to change the color by setting my body text color in my skin.css.  But on a contaienr level, I can't seem to add any padding to the text...here is my html code...

<body>
<div id="container_head">[ACTIONS]<h1>[TITLE]</h1></div>
<div id="container_content"><div id="ContentPane" runat="server"></div></div>
</body>

here is my css code...I aslo tried adding a padding to #container_content and that didn't work either.

#container_content {
    height: 100%;
    width: 100%;
}

#ContentPane {
    padding-left: 10px;
}

 

Is there a class I should be overwriting to modify that text? Thanks for any help

 

 
New Post
3/5/2008 12:22 PM
 

i just got this working, turns out refreshing a dnn page can be very flaky, sometimes it works, sometimes it doesn't, sometimes it completely screws the page. :)

 

I was stil lwondering about this though...

So I looked at the Default.css and saw the .Head class in there.  ok, so I have to overwrite some classes.  i guess my question is, besides scrolling through the default.css and hoping to find a class name that might be the one I want, how do I know which classes to overwrite?

 
New Post
3/5/2008 4:36 PM
 

All of the default classes are listed and commented in default.css. Just scroll through it and have a look.

The handy tip I can give is to copy the entire stylesheet into your skin.css and start altering or removing things there. Anything you want to leave the same can be deleted, anything you want to change can be changed.

The goofy bit is yet to come.. it's when you find out that DNN does things like inserts a span inside a label and you spend ages wondering why your SubHead styles won't take. You often have to style using things like ".SubHead span {font:...}"

I've said it a hundred times in the forums - Don't go a single step further until you have downloaded and installed the Web Developer and Firebug add-ons in Firefox. There is no other productive way to work on your styling in DNN.

When you have them, simply right click any item, e.g. your container title, and select inspect element. This shows you the complete css cascade in Firebug and the sheet and line that is affecting it. It then allows you to disable or change items in real time. It also shows you the code around the item and you will often see that there is another class or tag present  that was created by the system. The Web Developer add-on has a menu item called Edit CSS. This opens all style sheets for the current page and lets to make changes in real time to most items. It is dead easy to trouble shoot a style by selecting and deleting parts or even entire style sheets to see what is causing a style change.

You shoulnd't have any trouble refreshing so long as you Control-F5 refresh. The only things that don't respond to that are js and flash files. You have to manually clear your cache for these. The skinning and styling will always be refreshed and it if won't then there may be a connection or delivery problem with the server.

Rob

 
New Post
3/5/2008 4:58 PM
 

Thanks ROBAX, you've been a big help!  I'm a web designer, so the more I learn about DNN and how it works, the more I can ignore it and get to styling and building the site how I want :)  And I do use both firebug and the web developers toolbar, they are very handy! 

I figured out my refresh issue, turns out it was refreshing, but for some reason evey time I copy a new css or html file to my local server folder, I have to give security permissions to it again.  Those times when i thought it wasn't refreshing correctly were when I had not given permissions to the new files and the css wasn't loading.

thanks again, and I'm sure I'll have more questions down the line, so bear with me!

 

 
New Post
3/5/2008 11:47 PM
 

You're welcome Mike,

I didn't think of that issue with uploading new files, but yes you're correct, and I've had that happen if I use remote desktop to work on the files directly.

My normal procedure however is to use Expression Web to work on files remotely and that conveniently retains the file permissions.

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...making changes to css files, some things work, some donmaking changes to css files, some things work, some don't...


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