Prior to EPiServer Forms 4.5, we were forced to inject in our own styling by editing the less files. This often resulted in breaking functionality where javascript were dependant upon these base CSS classes. EPiServer last year changed this by binding javascript to data attributes freeing us from styling shackles.
This article is for those that are struggling to put the pieces of styling EPiServer Forms together and want a straight forward example.
- Implement a class inheriting from IViewModeExternalResources
- Create your custom style sheet
- Add in Styles to match EPiServer Forms Markup
- Build, Run & Test
1. Implement a class inheriting from IViewModeExternalResources
Create the follow class anywhere in your solution:
[ServiceConfiguration(ServiceType = typeof(IViewModeExternalResources))]
public class EPiServerFormsViewModeExternalResources : IViewModeExternalResources
{
public IEnumerable Resources
{
get
{
var rcList = new List();
rcList.Add(new Tuple("css", "/YourCssPath/CustomEPiServerForms.css"));
return rcList;
}
}
}
2. Create your custom style sheet
Create a css class anywhere in your solution and update the path in step where the text is bold in the previous step.
3. Add in Styles to match EPiServer Forms Markup
So here is where your front end designer comes in. You’ll need to provide the markup that will allow them to identify which classes style check section of the form.
Here’s an example for the textbox element
/* Textbox Element */
.FormTextbox .Form__Element__Caption {
color: orange;
}
.FormTextbox .FormTextbox__Input {
color: red;
}
The TextBox element will appear as follows on the episerver form:
Examples of other elements with their css classes:
Form Element |
HTML Tag |
class name |
Textbox |
label |
.FormTextbox .Form__Element__Captio |
Textbox |
input |
.FormTextbox .FormTextbox__Input |
Number |
label |
.FormTextbox–Number .Form__Element__Captio |
Number |
input |
.FormTextbox–Number.Form .Textbox__Input |
Submit |
button |
.Form__Element .FormSubmitButton |
You can investigate the remaining elements by looking at the ascx files located in EPiServerForms module folder in the ElementBlocks section:
4. Build, Run & Test
Run the solution and navigate to the page where you’ve setup your EPiServer Forms example.
You will find that your css should be getting loaded in along with the page.
If a style isn’t getting applied but you know it’s being attached to the html tag then try applying the css keyword !important. Sometimes you may be using bootstrap classes and that is overriding your styles.