Wolf X Machina

You're reading the professional blog of Aaron Lopez. For DNN Services, check out Wolf X Machina

DNN

Take Control of Typography in DNN Themes

Dec 21, 2018

Back to blog

Typography is so important.

A design can go from looking terrible to looking really beautiful if you get the typography right from the start. Your users probably spend a lot of time reading on your website so getting the font right is both important for branding and usability.

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.

I hope that helps you improve your designs! If you're looking for ways to improve your DNN theme in ways more than typography, check out UI Design and Development for Programmers and let me know if there are any ways I can help.

Happy skinning!

Aaron Lopez

Aaron Lopez

Founder & Developer of Wolf X Machina

Wolf X Machina

Next Level Interface Development for the DNN CMS

DNN themes, module design, and more from Wolf X Machina.

See what we can do for you