Custom fields in Joomla is introduced from 3.7 version. These can be added in your content items, contacts or users.
You can enable or disable custom fields from the options of the respective component. To enable creation of custom fields,
Options → Integration → Select Yes in "Enable Custom Fields" option.
Types of Custom Fields
There are 15 types of custom fields that can be added:
- Check boxes
- List (Dropdown)
- List of Images
- SQL (Dropdown)
- Text Area
- User Groups List
You can disable any of the type in Plugins (Select Type: fields)
You have many options to customize the display of these custom fields on your website.
- Show fields to specific users based on their access levels.
- Show or hide the label of the field when it is displayed.
- Where to display the field - after title, before content, after content or not to display at all.
- You can add class attributes when the field is displayed.
There are some options for specific field type. You can set default options from the respective plugins.
Bootstrap makes it easy to style different types of forms with the simple HTML markup and extended classes. Bootstrap provides three types of form layouts:
- Vertical form (default)
- In-line form
- Horizontal form
<form role = "form">
<div class = "form-group">
<label for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
<div class = "form-group">
<label for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>
<button type = "submit" class = "btn btn-default">Submit</button>
To create a basic form, you need to do the following:
- Add a role form to the parent <form> element.
- Wrap labels and controls in a <div> with class .form-group. This is needed for optimum spacing.
- Add a class of .form-control to all textual <input>, <textarea> and <select> elements.
To create a form where all of the elements are inline, left aligned and labels are alongside, add the class .form-inline to the <form> tag.
To create horizontal form, add class .form-horizontal to the <form> element. Also, add class .control-label to all <label> elements.
Bootstrap provides three classes that can be used to apply some simple styles to the images.
Adds border-radius:6px to give the image rounded corners
Makes the entire image round by adding border-radius:500px
Adds a bit of padding and a gray border
Responsive images automatically adjust to fit the size of the screen.
You can create responsive images by adding an .img-responsive class to the <img> tag. The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image.
You can add button classes on <a>, <button>, or <input> elements. You need to add class .btn to make a link or element look like a button. Bootstrap provides many options to style buttons.
Contextual Colors and Styles
Bootstrap provides five button sizes.
State (Active or Disabled)
A button can be set to an active (pressed) or a disabled (not clickable) state.