1

I have developed a custom DNN Module. In doing so I have followed DotNetNuke 6 patterns for consistent user experience (For more information have a look at the following guide)

http://uxguide.dotnetnuke.com/UIPatterns/SimpleFormDemo.aspx

How ever I do not like the way DNN default skin shows the required fields. How can I change the mandatory indication to traditional Label: * Textfield

What changes to the skin (css class) should I make to achieve this?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Devashish Bajpai
  • 23
  • 6

2 Answers2

0

This will require more than just a change to the CSS, as the overall design pattern does not involve putting any "*" in the content. So you will need to not only modify the classes, but content as well. (Unless you go with a JS or other type solution which I don't recommend.)

Mitchel Sellers
  • 62,228
  • 14
  • 110
  • 173
0

In your css do something like this to get rid of the red indicator input.dnnFormRequired{border-left: 0px;}

Then I guess you could do some Javascript to add the * after any dnnFormRequired

<script type="text/javascript"> 
$(document).ready(function(){ 
   $("input.dnnFormRequired").after('*'); 
}); 
</script>

Hopefully get you a little further along with what you are trying to achieve. Even if it does break the UI guidelines ;)

Ryan Doom
  • 2,407
  • 1
  • 16
  • 13
  • Many thanks for replying. Is there a way to do using css only. It will be great if I can just make changes to css file (portal skin.css) and it will change the required field look and on all the pages of the portal. – Devashish Bajpai Nov 27 '12 at 06:45
  • Not really. You might be able to use CSS to target that element and do a background of an asterisk and pad it with margins and stuff. This is the simplest / easiest 'hack' of a solution that will work on the most browsers. – Ryan Doom Nov 27 '12 at 21:24
  • Many Thanks for your answer. This is defiantly one of the solution. – Devashish Bajpai Dec 13 '12 at 06:58