Example of styled inputs in a form

Experimental project

This is a sandbox project, which contains experimental code for developer use only.

The Style fields module adds field widgets for selecting color or spacing
options.

It also includes field formatters to add the field as a css class or inline
style to the entity.

CONFIGURATION

  1. Add a list (text) field - Note: The key will be used as the class.
  2. Configure the form display to use Spacing or Color widgets.
  3. [Optional] Configure the manage display to use class of style formatters.

---

EXAMPLES

BG color lists:

List (text) field with:

--c-primary|#cbd7a6
--c-red|#e66363
--c-blue|#bdc7e1

Or:

primary|#cbd7a6
red|#e66363
blue|#bdc7e1

Set widget display as "Color options" and define the colors.
There's an option in the formatter display to set a prefix for the class option eg. .bg--.
---

Spacing fields:

Separate margin-top, margin-bottom, padding-top, padding-bottom list (text)
fields with:

mb--s|S
mb--m|M
mb--l|L

But also as mt, pb, pt.

Set widget display as "Spacing options" and select the correct type.

Supporting organizations: 
Development support

Project information

  • caution Minimally maintained
    Maintainers monitor issues, but fast responses are not guaranteed.
  • Project categories: Content editing experience
  • Created by kirst25 on , updated