Accomplish design like your demo

Jan 13, 2014 at 9:46 PM
I like your simple and Tidy skin design.
But....maybe a stupid question but how do I achieve the same design as you have in your demo?
It looks like you have placed three HTML modules with image and text in Content pane.
Is this done JUST with the DNN WYSIWYG editor or.....?
I am not able the get the text alongside with an image and how do you get it correct in mobile view with the image on top of the text?
What am I doing wrong?
Jan 14, 2014 at 4:03 AM
Hi Chris,

Here's an example of the HTML I've placed in the HTML module to create:
<div class="homeHTML5 clearfix">
<img alt="HTML5, CSS3, and jQuery" style="float: right; margin: 20px 0px 20px 20px;" src="/portals/tidy/graphics/HTML5_CSS3_jQuery_Logo.png" />
<h3>HTML5 + CSS3 + jQuery = Awesome</h3>
<p>As a state-of-the-art DNN skin, I have an HTML5 doctype, some CSS3 styles, and just a couple of custom jQuery functions to make my flyout sub-menus look and behave stylish.</p>
<p>However, due to some meta tags and other code baked into the DNN source code, <a href=";charset=%28detect+automatically%29&amp;doctype=Inline&amp;group=0">I don't fully validate</a> as an HTML5 document. This doesn't affect my compliance with <a href="">WAI</a> or <a href="">WCAG</a>, but I'm all about full disclosure.</p>
<p>If 100% validation is an absolute requirement, feel free to change me back to an XHTML 1.0 Transitional doctype. It won't hurt my feelings, I promise.</p>
And here is the supporting CSS:
.homeHTML5 {
    border-top: 1px solid #EBEBEB;
    clear: both;
    padding-top: 20px;
I didn't use the WYSIWYG editor to create everything as I needed to wrap the code in a division to style it appropriately.

Let me know if you need anything else.

Jan 20, 2014 at 1:48 PM
Hi Adam,

Thank you.

I found out how to accomplish about what I wanted with the WYSIWYG editor.
The WYSIWYG capabilities in DNN is a limiting factor when you no are a programmer who knows how to make use of HTML and CSS code.
If someone could develop a really nice capability on top of DNN and its skin architecture to make it easier to write and edit text and images I think it would be very successful. Something in the direction of how it´s done on but with the DNN framework.

Kind regards,
Marked as answer by adamhumphrey on 7/13/2014 at 2:18 PM