Individual CSS adjustments
Visforms creates clear HTML structure and CSS structure. In almost all cases, these structures support and simplify precise individual CSS adjustments. It is advisable to formulate the necessary CSS selectors as simply and accurately as possible.
This section lists all the necessary information in clear tables to support you in formulating the CSS selectors. You can use the CSS classes listed in the tables to address the area to be adjusted simply and directly with CSS selectors.
Individual JavaScript adjustments
This documentation of the HTML structure and CSS structure is also useful in the case of JavaScript adjustments. Because for JavaScript adjustments, it is also of great benefit to be able to address the necessary HTML areas directly and specifically.
Insertion of CSS customizations and JavaScript customizations with Visforms
There are numerous possibilities, in more or less simple ways, to add custom CSS and JavaScript to Visforms.
This section provides an overview:
Add JavaScript and CSS.
It is particularly easy to add individual CSS and JavaScript with the
Visforms Frontend Web Assets.
The 3 main areas of HTML
Outer HTML area
Visforms always creates an outermost div element: <div class="visforms …"></div>.
CSS classes that appear in this outermost div element form the
outermost HTML area.
Inner HTML area
Depending on whether the form or the saved transmissions (form data) are displayed, Visforms then creates different HTML elements.
CSS classes that appear in these inner HTML elements form the
inner HTML Area:
- form element
- table element
- dl element
Field-near HTML area
All HTML elements generated around a single form field make up the field-near HTML area.
Visform’s unique passive integration strategy
When it comes to layout issues, Visforms follows a special strategy of passive integration into the selected Joomla site template.
Visforms tries to match the look and feel of your website as much as possible by bringing only the minimum of its own CSS that is absolutely necessary.
Most of the formatting rules therefore come from your template’s CSS.
Introduction to layout configuration and layout issues
We recommend the following sections in the documentation as an introduction to layout configuration and layout issues.
Basic layout questions and settings
The basic layout questions and settings are:
- which UI framework the selected template uses,
- which UI framework is set in Visforms (Form configuration, tab ‘Advanced’, group ‘Layout’),
- which sublayout is set in Visforms, if any (Form configuration, tab ‘Advanced’, group ‘Layout’).
The tasks of the template
It is the task of the template to control the display and also to react responsively.
Another decisive factor is whether and to what extent the template actually implements the requirements of the UI framework.