Customize layout with CSS

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
  • 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.

Visform comes with its own CSS file

Visform comes with its own CSS file. In order for Visforms to fit as well as possible into the design of the respective template, Visform 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.

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 Firefox

Using the developer tools in Google Chrome

Using the developer tools in Google Chrome