Customize the form layout with CSS
It is usually the template’s job to provide the CSS that defines how the content of the website is to be rendered. As a developer of a Joomla extension, we want the extension to fit as seamlessly as possible into the overall picture of the website. The best way to do this is to use the template’s CSS styles as much as possible. However, every template is different. Some templates specify almost nothing, while others specify the appearance of each element in minute detail. Therefore, it is quite possible that small adjustments to the CSS are necessary.
Store CSS adjustments update-safe in a file
You can save update-safe CSS adjustments in a separate CSS file. This file is then automatically included in the form. You can create and edit this file directly in the administration of your Joomla website. You can also upload a file there that you have created on your local computer. To do this, simply go to the Components » Visforms menu in the administration and then click the “Edit CSS” button on the Visforms dashboard. You get to a view that you may already know from the Joomla Templates component. There you can edit existing CSS files and create, upload and rename new CSS files. To do this, first click on the “Create new file” button. New files are automatically created in the correct directory. This is the directory media/com_visforms/css where all Visforms CSS files are located.
The integration of additional own CSS files takes place via a simple naming convention.
Note: Your own CSS files must have the character string "custom" in the file name so that they are automatically included.
Otherwise, the letters a-z, A-Z and the special characters - (minus) and _ (underscore) are permitted in the file name.
Visforms uses weak CSS selectors
Visforms uses weak CSS selectors to fit as well as possible into the template design. Unfortunately, that doesn’t always fit perfectly. CSS (Cascading Style Sheets) is based, as the name suggests, on a system of cascading:
- For different CSS selectors (such as div or .blue or div.blue)
- and for an HTML element and a property (such as the font color)
- completely different CSS rules can be defined (e.g. color: #fff; or color: blue;).
The strength of the selectors decides
Which rule is ultimately applied to a specific element depends on the strength of the selector in which the rule was defined. The strongest selector wins. However, if 2 selectors are equally strong, then the rule that comes last in the code is used.
Visforms comes with its own CSS file
Visforms comes with its own CSS file. In order for Visforms to fit as well as possible into the design of the respective template, Visforms essentially uses very weak CSS selectors. Depending on the CSS of the template, it often happens that some rules don’t really match.
Suppose the template does not specify a background color for form elements, but a light font color overall. If Visforms now sets a light background color for form elements using its very weak selector, then a light font is displayed on a light background in the form. Of course, that’s not a good read.
Interaction between template and visforms
In the forum, this regularly leads to questions about how a CSS property can be changed. However, since this is always the result of the interaction between an individual template and visforms, as explained above, this question cannot be answered in general. Rather, the affected website must always be examined in order to find an individual solution.
Use the developer tools
Developer tools are easy to use and help to understand and analyze CSS. With modern browsers it is easy to find out which CSS rule is actually applied in which CSS file on a specific element. You use the “developer tools” that are built into every modern browser.
Note: Although the tools are called "Developer Tools", using them is not really complicated.
Just a few basic steps
Only a few basic steps are necessary to find out which CSS rule applies specifically to an element in the source code of a website. In this way, everyone can find out for themselves which adjustments they need to make in the CSS in order to achieve the desired display.
Any browser of your choice
In your browser of choice, go to the webpage whose CSS you want to examine. Open the developer tools:
- In Firefox, you can find this in the menu under Extras » Web Developer » Show/Hide Tool.
- In Google Chrome, you can find this in the menu under more tools » developer tools.
- In Internet Explorer, you can find this in the menu under Developer tools (F12 key).
Other browsers also have developer tools, which can be found under similar names via the menu. The developer tools open in a separate window, which is often displayed at the bottom of the browser.
How to open the developer console
Firefox
Opening the Web Console:
- Sandwich symbol (≡) » More tools » Web developer tools » Inspector
- Ctrl + Shift + i
- Ctrl + Shift + k ####Chrome Opening the Developer Tools:
- Extension Points (⫶) » More Tools » Developer Tools » Elements
- Ctrl + Shift + i = Developer Tools, Elements tab
- Ctrl + Shift + j = Developer Tools, Console tab
- Press F12,
Microsoft Edge
Opening the Developer Tools:
- Extension points (⋯) » More tools » Development tools » “Elements”
- Ctrl + Shift + i = Developer Tools, last active tab
- Ctrl + Shift + j = Developer Tools, last active tab
Safari
Opening the Web Inspector:
- Ctrl + Shift + i = Developer Tools, last active tab
Opera:
Opening Dragonfly:
- Ctrl + Shift + i = Developer Tools
Firefox and Google Chrome
The images show how you can analyze the CSS of your website for Firefox and Google Chrome. The developer tools of other browsers are very similar.
Using the developer tools in Firefox
Using the developer tools in Google Chrome
