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, ...DNN font size control + CSSDNN font size control + CSS
Previous
 
Next
New Post
4/16/2006 1:37 PM
 
cniknet wrote

Laura,

The text sizing control works by having the base font-size defined for Body, .Normal, .NormalTextBox, TH, TFOOT, THEAD, TD, SPAN, DIV, A. All other classes use relative font-sizes (defined using "em" units). If text size appears abnormally large or small, it is most likely because the style that is active on the element has an incorrectly defined relative value. You can find out the exact cause by doing a bit of detective work.

First, download the IE Developer Toolbar here: http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en

Once this is installed, go to the page with the problem, then select "View DOM" from the toolbar. This will cause your browser window to be split horizontally and a new menu will appear. Next, click Find > Select element by Click... Now, you will be able to go to any element of the page and click on it to see exactly what properties and CSS attributes it has. You can diagnose the problem by seeing exactly what CSS classes are acting on the text that is sized incorrectly and fixing those. Sometimes, you have to work your way up through its parent elements to find the true culprit.

This is how I troubleshoot CSS issues and it makes the process a lot easier than guesswork.

HTH.

Nik

 

 

Hi Nik

Thanks for the advice, I found the toolbar very useful, I managed to locate the problem for my extra large text.

Originally:  body { font: small Verdana, Geneva, Arial, Helvetica, sans-serif line-height: 1.1; }

 td,th,div,span,p,a,input,textarea{font-family:Verdana, Arial, Helvetica, sans-serif; color:#303030; font-size: 9px;}

Changed to:

body, html {margin:0px; padding:0px 0px 5px 0px; background-color:#5B7C7C; background-image:url(pagebak.jpg); background-position:top left; background-repeat:no-repeat; height: 100%; text-align:center; }

/*Common*/

.Normal, .NormalTextBox, th, tfoot, thead, td, span,div, a, input, textarea{

font-family: Verdana, Arial, Helvetica, Sans Serif;  font-size: 10pt;  font-weight: normal; color:#303030;line-height: 1.1;}

I am pleased to say that this worked. My fonts are now displayed as intended.

However, I am still puzzled about the background of the container title.  No matter what I do it remains black.

Using the IE Developer toolbar. 

 I click on the module on the page and it displays the current style sheet, for the container holding the module.  

 

However, as well as the styles pertaining to the current container. An added property element is also shown which does not appear anywhere in my skin.css nor my container.css. 

 

 The element in question is: backgroundColor: black.  Where can this be coming from, I have scoured my skin.css and container.css and unable to locate it's source?

 

I looked on the default.css and deleted the whole section entitled

 /* LEGACY STYLES from DNN 1-2 */ which contained the only black background I could find.

 

.TabBg {
    background-color: black;
}

 

I have even tried using downloaded containers. But the result is the same.

 

Below is the containers. css file taken from the Red Leaf container from DnnCreative.com.

 

/* style for module title */
.Title_Sponsor {
   font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
   font-size:  110%;
   font-weight: bold;
   color: #fff;
}

 

.containerholder_sponsor
{
 border: 1px solid #006633; /*dark green */
 margin-bottom: 10px;
 background: #E8FFE8;  /*pastel green text box container */
}
.containerholder_transparentbox
{
    border: solid 1px #706633; /*very dark green */
    background-color: transparent;
    margin-bottom: 10px;
}
.actions_sponsor
{
    border-bottom: 1px solid #006633;
    padding: 2px 5px;
    background-color:#5B7C7C; /*titlebackground */
}
.container_sponsor
{   
    padding:  6px 5px 0px 5px;
   /* height: 100%; */
}
.footer_sponsor
{
}
.sponsor
{
    font-size:  1.0em;
}

        

I have changed the default red to a green to suit my skin.

 

However, when it is uploaded it too shows as black. 

 

I would be grateful if somebody could please offer me a direction where I might look next.

 

I have been trying to find a solution to this for days.

 

I have even looked at the default.css and removed  the only reference to a black background that I could find, it didn't help either.

 

Thanks

Laura

 

 
New Post
4/16/2006 7:05 PM
 

Hello

Further update,  I have since discovered (via Toolbar) that the container for some reason unknown to myself is using default colour values.

How do I make it override the default?  I have included a container.css file with my selected colours, which I thought would automatically override the default.

Thanks.

 

Laura 

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...DNN font size control + CSSDNN font size control + CSS


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