Adding custom fields/Color Field
From Joomla! Documentation
< J4.x:Adding custom fields
Custom Fields - Creating a Color Field
Introduction[edit]
Creating the field[edit]
We will create a Color Field for use in our articles.
From the Sidebar Menu in the Backend choose Content then Fields.
Before clicking the New button, check the dropdown list below the New button is set to Article - this is the default setting for use in the Article view.
NOTE: Although this tutorial covers creating a checkboxes field for use in an article, the following steps are the same if you were creating one for use in the Contacts Component (remember to set the view before clicking new), the Users Component, or any other component which supports custom fields.
Click New.
The Field Editor will open on the General tab.
Enter a Title This should be specific to the purpose of the new field. Avoid generic titles in case you want to use other calendar fields in other places.
On the Type field choose Color.
The Name field will be filled in automatically on saving the field, but you can enter a different one. It should be lowercase and separated by hyphens.
The Label field is automatically set to be the same as the Custom Field Title but you can enter whatever you want. The value you enter is output on the Frontend if you choose to show the Label.
Add a Description if it will be useful. It is not required.
Set the Required Field to Yes or No with the toggle button. Setting to Yes will make the field a required one that cannot be skipped.
The Only Use In Subform field can be set to Yes if you only want the field available as a Subform child field.
The Default Value field can be set to have a color selected by default.
There are no special options necessary to use this field.
At this point you have entered sufficient information to create the Custom Field and make it available for use.
Save the Custom Field[edit]
Click Save & Close and the Custom Field is available to use.
Using the field in the Backend[edit]
Frontend Output of the Color Custom Field[edit]
In the Frontend, you can see the field as you see in the following image. The option in Automatic display is responsible for the position of the field and your template is responsible for the layout of the field.
Fields are only displayed in the Frontend if you have filled them with data in the article. If it is not a required field, can you forget it?
Note that the output is displayed with a bullet point - this is the default layout and may look different dependent on your template.
It is possible to change the layout and date format by creating a template custom override.