I have been working with applying custom stylesheets to a couple of Dynamic Forms (2.7 with DNN 4.9.3) and am running into some problems.

1. I have set the DynamicForms_RequiredField style to display black text on an orange background (in the custom CSS for the DF).  As I look in Firebug the default element.style is taking precedence for the color (Red in this case) over the custom style set in the DF CSS.  I thought the custom CSS took precedence.

2. I have selected the "Use custom CSS stylesheet class for invalid validation fields".  My understanding is that this maps to the DF_FieldError class (even though the hint text states DynamicRegistration_FieldError).  However, when I force an invalid response, the style is not being applied.  I even created a class for DR_FieldError just to be on the safe side.  I did look in the ModuleSettings table and found the UseErrorCSS setting.  I noticed that this was set to False so I set this to True manually.  Interestingly enough, the FieldError class is still not applied, and now when I am in Module Configuration the standard Update Settings and Exit links at the bottom of the module are no longer visible.

Any ideas regarding these issues?

Thanks!

Brian

HI Brian, I'm checking into the stylesheet issue. In regards to "update settings" and "exit" no longer showing up under Module Configuration, you could click on "Question Events" and save / exit from there for the time being. -- David

David,

I have access to DF 3.0 (via Collection purchase).  Should I upgrade the module?  Will this eliminate my styling issues?

Thanks!

Brian

Hi, yes DF 3.0 has a lot of new enhancement features. The stylesheet issue should work in DF 3.0 but be sure to turn AJAX off under Module Configuration. -- David

David,

I went ahead and upgraded to 3.0, but I'm still having CSS issues.  As noted previously, my DynamicForms_RequiredField class (nor DF_Compare or DF_RegularExpression) is not applying the font color.  This is being overridden by the element.style { color: Red; }.  I'm not really sure where this is coming from, but I would still think that the DF custom CSS would override all other setttings.  In addition, the DynamicForms_FieldError class is still not being applied to invalid validated fields even though the "Use custom CSS style sheet class for invalid validation fields" is checked (which I believe is the trigger to apply this style to the offending control - textbox in this case).  I have even added a class for DynamicRegistration_FieldError (which is what the help popup actually states as the class name for this DF attribute).

I really need some help with this as our client's site goes live next Wednesday (07/15).  I have source code, but I hate to go this route unless absolutely necessary.

Thanks!

Brian

HI Brian, can you export your form to www.betasprings.com(username: host, password: dnnhost) and tell me the URL of the page you created here so we can take a look at the issue. Thanks. -- David

David,

Here is the URL:

http://www.betasprings.com/BriansTe...fault.aspx

Also here is the CSS for the module.  Might come in handy.

/* DATA SPRINGS Inc. - DYNAMIC FORMS STYLE SHEET */

/*-------- Default Style --------*/
body,th,td,div,p,table,h3,h4,h5,h6.Normal,.NormalDisabled,.Head,.SubHead,.SubSubHead, a:link, a:visited, a:hover, input{color:#000; font-family:Verdana, Arial, Helvetica, sans-serif;}
body,th,td,div,p,table,.Normal,.NormalDisabled,.Head,.SubHead,.SubSubHead, a:link, a:visited, a:hover{font-size:12px;}
h1, h2, h3, h4, h5, h6{color:#000;}
h1, h2, h3 h1 input{font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
h4, h5, h6{font-weight:normal}
h1, h2, h1 input{font-size:14px;margin:10px 0;}
h3, h4{font-size:12px;margin:8px 0;}
h5, h6{font-size:10px;margin:6px 0;}
li {list-style-type: none;}

h1
{ 
 font: bold 23px Arial, helvetica, sans-serif;
 color: #000;
} 

a,a:link,a:visited,a:active{color:#3E81B5; text-decoration:none; font-weight:normal; }
a:hover{color:#D00; text-decoration:underline; }
.Head, .SubHead, .SubSubHead, .Normal, .NormalDisabled, .NormalDisabled, .NormalBold, .NormalRed, .NormalTextBox
{font-family:Verdana, Arial, Helvetica, sans-serif;}
.Head{color:#2E3D47;font-weight:bold;}
.SubHead {color:#4C6171;}
.SubSubHead{color:#6E8AA0;}
.NormalRed {color:#F00;}

.DynamicForms_Maintable {

      width: 100%;
      padding: 2px;
}

.DynamicForms_Label
{
    font-weight: Normal;
    font-size: 10.5pt;
    color: #000000;
    font-family: Tahoma, Arial, Helvetica;
    text-decoration: none;
}

.DynamicForms_Link
{

}

.DynamicForms_RequiredField
{
    font-weight: Normal;
    font-size: 10.5pt;
    color: #000000;
    font-family: Tahoma, Arial, Helvetica;
    text-decoration: none;
    background-color: #FFC221;
    width: 200px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.DynamicForms_RequiredFieldTag
{
   color: #FFC221;
}

.DynamicForms_BufferTag
{
   color: #EEEEEE;
}

.DynamicForms_Compare
{
    font-weight: Normal;
    font-size: 10.5pt;
    color: #000000;
    font-family: Tahoma, Arial, Helvetica;
    text-decoration: none;
    background-color: #FFC221;
    width: 200px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.DynamicForms_RegularExpression
{
    font-weight: Normal;
    font-size: 10.5pt;
    color: #000000;
    font-family: Tahoma, Arial, Helvetica;
    text-decoration: none;
    background-color: #FFC221;
    width: 200px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.DynamicForms_Textbox
{

}

.DynamicForms_NormalTextbox
{

}

.DynamicForms_ComboBox
{

}

.DynamicForms_Dropdownlist
{

}

.DynamicForms_Captcha
{

}

.DynamicForms_RadioButton
{

}

.DynamicForms_Listbox
{

}

.DynamicForms_RichText{

}

 

.DynamicForms_Checkbox
{

}

.DynamicForms_Country
{

}

 

.DynamicForms_CheckBoxList
{
  

}

.DynamicForms_DisabledCheckBoxList
{

     background-color: #efefef;

  }

.DynamicForms_DisabledTextBox
{

     background-color: #efefef;
}

.DynamicForms_DisabledListBox
{
     background-color: #efefef;

}

 

.DynamicForms_DisabledRadioButton
{

     background-color: #efefef;
}

.DynamicForms_DisabledCountry
{

     background-color: #efefef;
}

.DynamicForms_DisabledRichTextbox
{

     background-color: #efefef;
}

.DynamicForms_FieldError
{
   outline-style: solid;
   outline-color: #FFC221;
}

.DynamicRegistration_FieldError
{
   outline-style: solid;
   outline-color: #FFC221;
}

#hintbox{ /*CSS for pop up hint box */
position:absolute;
top: 0;
background-color: lightyellow;
width: 150px; /*Default width of hint.*/
padding: 3px;
border:1px solid black;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
border-right: 3px solid black;
border-bottom: 3px solid black;
visibility: hidden;
}

.hintanchor{ /*CSS for link that shows hint onmouseover*/
font-weight: bold;
color: navy;
margin: 3px 8px;
}

HI, I was able to get it to work on my localsystem and on betasprings. On your system, can you try to disable Form Ajax submission in module configuration and see if it works? -- David

David,

I have checked both the "Disable form AJAX" and "Disable AJAX within module configuration". Unfortunately, the color for the validation class (DF_RequiredField) and the DF_FieldError class are still not being applied. Are there any other settings I should be aware of?

Thanks!

Brian

HI Brian, is the form the same XML you sent me and the one on betasprings? Or is your actual form somewhat different? I'd like to know what fields you have on your form. Also, is there a way for me to have host privilege to your site to look at it? If so, you can use the "Contact Us" and provide us with login information and tabid to your page, referencing this forum as well. -- David

David,

The form on the site is exactly like the form imported to betasprings.

I will do as you recommend and provide login credentials. Please take care with this as this web site goes live next week (07/15).

Thanks!

Brian

Hi Brian, please check out this forum on the issue with ASP validation adding the default  style "Red" in the required field and overriding the class definition. In your stylesheet definition for ".DynamicForms_RequiredField", change the color to this:

color: black !important;

and you will get the black foreground text. As for the ".DynamicForms_FieldError", this cannot be done at the moment where you want to achieve the effect of having an outline around the required textbox. But our chief developer is looking into this issue. -- David