Learn More





DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

Designing and Styling the View Control

By now we’ve taken all the steps needed to have the beginnings of a module created and installed locally on our machines. Now it’s time to start work on the view control. If you remember from a previous blog our envisioned View control looks something like this:

In order to get started open Visual Studio, open your “MyFirstModule” project, and double-click on the View.ascx file. Coming from a front-end background one of the first things I always wanted to do was/is to get the module looking like I want it to look before trying to add in functionality. Yes, this is backwards from the way many would do it, but then again being from South Carolina I’m used to being backwards so to each his own :-) So with that in mind let’s lay out the HTML & CSS needed to make our module look the way we want.

One thing to make note of here is that with this view control we will not be using any .NET server controls, but rather all standard HTML elements for our form inputs. I will discuss this more in depth about 2 blogs from now, but am mentioning it here simply as a mental note.

In order to get the elements in the view we will just drop standard HTML and CSS into our module. Remember that each module has a “module.css” file which holds module specific styles so we will place our CSS in the module.css file.

Into the view .ascx file copy and paste the following:

<div class="AddTaskDiv">
    <h2>Add Task</h2>
    <hr />
    <div class="lblTaskName">Task Name</div>
    <input id="TaskName" type="text" />
     <div class="lblTaskDescription">Task Description</div>
     <input id="TaskDescription" type="text" />
     <div class="isCompleteGroup">
         <input id="cbxIsComplete" type="checkbox" />
         <div class="lblTaskIsComplete">Is Complete</div>
     <input class="dnnClear dnnRight dnnPrimaryAction" id="btnAddTask" type="button" value="Add Task" />
<div class="TaskListDiv">
      <div class="Headings">
            <h2>Task Name</h2>
            <h2>Task Description</h2>
     <div class="ListItems">
          <input class="cbxListIsComplete" id="cbxListIsComplete" type="checkbox" />
          <div class="ListTaskName">Task Name PlaceHolder</div>
          <div class="ListTaskDescription">Task Description PlaceHolder</div>

Again this is just standard HTML with a few HTML Input elements included.

In the module.css file place the following code:

.AddTaskDiv {   float: left; width: 25%; margin-right: 1%; margin-bottom: 50px; background: #ccc; padding: 10px; }
.lblTaskIsComplete {  float: left; }
#cbxIsComplete { float: left; margin-top: 3px; margin-right: 10px; }
.TaskListDiv {  float: right; width: 70%; min-height: 263px; margin-bottom: 50px; background: #ccc; padding: 10px; }
.Headings h2 { margin-right: 50px; float: left; }
.cbxListIsComplete { float: left; width: 15%;}
.ListTaskName { float: left; width: 20%; }
.ListTaskDescription {  float: left; width: 65%; }

After adding that code in then save both files and toggle back to the browser and click refresh. Since this is just HTML code and not any server-side code, nothing needs to be compiled or built so we can instantly see these changes on the page. After inserting the HTML and applying the styles you should see something on the page like this:

The Blue Add-Task Button
After you saved and refreshed your screen did you wonder how the Add Task button showed up already styled and blue? This is actually by design. If you notice in the HTML of the input button we added a class in called "dnnPrimaryAction" to the element. This dnnPrimaryAction class is a style provided by DNN that we can update if we want. Using it helps us create a consistent user interface and experience across our entire site. We can easily update the color or styles associated with the dnnPrimaryAction buttons in one locations (a CSS stylesheet) and it will update all buttons using this class across the entire site. You can specify a .dnnSecondaryAction as well.

This video walks through the concepts in this blog entry 

We are indeed making progress. Though, as you can note on the right hand side of the module we have a list of tasks that currently only has the “Task Name Placeholder” and “Task Description Placeholder” in it. The module doesn’t have any functionality yet, but we have a visual start and will begin adding in the functionality in the following blog entries to get data returned and listed in this list. 

If you want more helpful resources on HTML & CSS check out the following links:

Go to the Next Blog Entry: Creating the Tasks Table


mohammad azarbara
mohammad azarbara Monday, November 03, 2014 5:36 AM (link)
James Brown
Link to the series introducton

Link to the previous Blog Entry:
James Brown Monday, June 15, 2015 11:37 AM (link)

Comment Form

Only registered users may post comments.


2sic Daniel Mettler (124)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (21)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (269)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (163)
William Severance (5)
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?