Tip on CSS and Views:
FFP has more than one possible place to add CCS styling. The first most obvious would be under the Forms > Sties > Custom CSS tab. This extends the styles.css file to include additional CSS styles for use by FFP. It is one template agnostic method for your custom styles and using with FFP.
While creating and developing Views, it may be tempting to add inline styles to the “Before” box or inside the text area. In the course of development and testing, this might even make sense if you are making and reviewing lots of changes, but there are some issues and limitations on doing this.
Leaving your styles inline in this fashion may cause problems later on when viewing the site. There can be layout and even functional behavior issues.
Problems may arise when WP starts to use your view if you use inline styles in certain formats. WP has a filter called “wpauto”. This core WP filter is part of the mechanism to prevent some formatting issues while using the built-in text editor of WP.
Description of the issue from the third party plugin “Toggle WPAUTO”:
Before WordPress displays a post’s content, the content gets passed through multiple filters to ensure that it safely appears how you enter it within the editor.
One of these filters is wpautop, which replaces double line breaks with <p> tags, and single line breaks with <br /> tags. However, this filter sometimes causes issues when you are inputting a lot of HTML markup in the post editor.
There are a few methods to prevent this WP filter from causing layout and functionality issues:
- Don’t add your custom styles as inline styles.
- Put your custom styles in the Custom Styles location provided by FFP.
- Put your styles in the styles.css files for your template.
- Use a plugin to turn off wpauto. One such third party plugin that is very popular is “Toggle WPAUTO”
- Format your inline styles with certain restrictions.
Double and single line feeds are the greatest cause of WP changing the formatting and behavior of styles entered as inline styles. You can prevent this usually by just being very careful about how you format your styles.
While editing css styles in a regular stylesheet, the following may never cause any issues at all but this is the wrong way for this use case:
<style>
.mystyle1{
my-stlye-parameter: my-setting;
}
.mystyle1{
my-stlye-parameter: my-setting;
}
</style>
Lots of spaces, line feeds etc.
This way should work:
<style>
.mystyle1{my-stlye-parameter: my-setting;}
.mystyle1{my-stlye-parameter: my-setting;}
</style>
In a final version of a view and any other places you want to create custom css styles for use by FFP, it’s best practice to place them either in the Custom Styles box or in your style.css file for your template. If you have a set of css styles you use all the time and you want to use them in various templates, placing them in their own css style sheet and importing them is another method available. This works for FFP and of course other CSS styling requirements.
This works with most modern browsers just fine:
<style>
@import url("/styles/default.css"); // path to your stylesheet
</style>