Formulus writes almost no styling: your template dresses the form. When you want to go further for one particular form, the Custom CSS tab, right after Fields, gives it its own stylesheet. It is laid out like Opus's.
The form's stylesheet
On the left, the code area, coloured by Joomla's editor. These rules go into the head of the page showing the form, and they are global: prefix them with the form's class, formulus- followed by its number, to reach this form only.
.formulus-12 .formulus-groupe-titre {
color: #a02127;
}
Never use !important: if a rule from another extension wins, remove its cause rather than adding one on top.
Under the area, A complete, commented example shows a class from start to finish: colour, background, spacing, border, corners, text size, then the same thing with Corpus's colours. The Insert into the sheet button adds it after what you have written.
Classes in use
On the right, the list of classes this form writes, and only those: add a titled row, and the group's classes appear. Each carries a coloured bar:
- green, yours: Formulus's own, safe to change, nothing else uses it;
- blue, Corpus: shared with the site's articles and modules;
- purple, Bootstrap: shipped by Joomla to the whole site.
Clicking a name copies it and shows its description. Depending on the class, a button offers:
- Copy into the sheet to change them: the rules Formulus gives that class are copied into your sheet, prefixed with the form, and you only have to change the values;
- Write the CSS for this class: an empty rule, ready to fill in.
The list also gives each field's class, formulus-champ- followed by its name: enough to target one field without setting anything.
Your own classes
To style a row or a field on its own, give it a class behind its cog (previous chapter):
| Where | What it styles |
|---|---|
| Row, Class | The whole row, title included. |
| Field, Display Class | The field block: label, input, help, error. |
| Field, Label Class | The label only. |
| Field, Field Class | The input only. |
A named class writes itself into the sheet: its empty rule, prefixed with the form, is added at the end, ready to fill in. Remember to save.
Example: a row title
- Fields tab, cog of the "Your details" row, Class:
my-details. - Custom CSS tab, in the rule that has just appeared:
.formulus-12 .my-details .formulus-groupe-titre {
color: #a02127;
font-size: 1.5rem;
padding-bottom: .5rem;
border-bottom: 2px solid #a02127;
}
Finally, save and reload the form's page. For every row title at once, remove .my-details; to follow the site's colours under Corpus, write var(--accent) instead of #a02127.
What warns you
- The tab's badge counts the rules in the sheet.
- A styled line (a row or field whose class has rules) carries a purple outline in the Fields tab.
- Rules that no longer target anything are flagged under the code area, with their list. The Remove these rules button removes only those: a rule still in use is never offered.
- Deleting the last rule of a class set on an element asks a question. Yes: the class is also removed from the element, and its badge goes down. No: the sheet goes back to how it was.
- Emptying an element's class when the sheet has rules for it asks the same question the other way round. Yes: its rules go too. No: the class stays.
- Renaming a class renames its rules, without asking: nothing is lost.
Up to date for Formulus 1.0.237.