Take Control of Typography in DNN Themes

The problem with DNN when it comes to typography is that there is a bit of CSS in the default.css files that really messes things up out-of-the-box. I'm talking specifically about the .Normal class. This .Normal class is used in the DNN HTML module to differentiate content styles from control styles in DNN. When I first started DNN skinning in 2006, I used to modify the default.css to remove that to make life easier. But nowadays instead of trying to change core files, I leverage that .Normal class to my advantage by targeting elements inside of it and then using that class everywhere there is content. I do this by redefining .Normal inside my DNN skin's CSS file and then using the .Normal class in my skins and my 2SXC templates and EasyDNNNews templates. This is really useful when you want to apply global styles without breaking other elements outside of your content.

Here's some relatively simple CSS you can put in your DNN theme's skin.css to restore some order to your typography. I'm not going to explain everything in this but you can use this and modify it to make it suit your own themes.

My solution in CSS

body#Body {
  font-size: 17px; /* change this to your body font (for paragraphs and lists, basically */
  color: #333333; /* colour for most elements */
  line-height: 1.7em; /* standardized line height for most elements - adjust depending on the font you you choose */
  -webkit-font-smoothing: auto; /* fixes issues with some fonts in Chrome */
}

.Normal {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
}

.Normal blockquote {
    margin-left: 30px;
    padding: 15px;
}
.Normal blockquote p:last-of-type {
    margin: 0;
}
.Normal li p {
    line-height: inherit;
}
.Normal ul {
    margin: 0 0 30px 0;
    padding: 0;
    list-style: none;
}
.Normal ul>li:last-child {
    margin-bottom: 0
}
.Normal ul>li {
    position: relative;
    padding: 0 0 0 37px;
    margin: 0 0 5px 0;
}
.Normal ul>li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    background: #0053a3;
}
.Normal ul>li ul, .Normal ul>li ol {
    padding-top: 15px;
}
.Normal ol {
    margin: 0 0 30px 0;
    padding: 0;
    list-style: none;
    counter-reset: my-awesome-counter;
}
.Normal ol>li:last-child {
    margin-bottom: 0;
}
.Normal ol>li {
    position: relative;
    padding: 0 0 0 37px;
    margin: 0 0 15px 0;
    counter-increment: my-awesome-counter;
}
.Normal ol>li::before {
    content: counter(my-awesome-counter);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
    border: 1px solid #0053a3;
    color: #0053a3;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}
.Normal ol>li ul, .Normal ol>li ol {
    padding-top: 15px;
}

Get creative

That's the baseline where I would start and then I build on it. From there, I add the .Normal class to my divs inside of 2SXC razor templates and EasyDNNNews list and details templates. You can get creative and expand on that by adding other typographical element like headings and more complicated lists. This is super useful in the cases where I want to make really special styles for bullet lists and numbered lists for all content but then avoid breaking navigations and other elements.