Customizing the layout of custom fields on listing submit page

In this tutorial we'll show you how to display certain custom fields in the same row on the listing submit form.

By default, custom fields are outputted one per row, like this:

If you have a lot of custom fields, the form can become very long.

We can make the fields display in the same row using css, but first we need to add a unique class to each field container div.

Open this file:

• \com_jreviews\jreviews\views\helpers\custom_fields.php

and replace this line (line 433):

$inputs["data[Field][$fieldLocation][$key]"]['div'] = 'jr_fieldDiv';

with this one:

$inputs["data[Field][$fieldLocation][$key]"]['div'] = 'jr_fieldDiv ' . $value['name'];

Now every field container div will have this class: "jr_fieldDiv jr_fieldname".

Next we'll align the fields by adding styles in this css file:

• \com_jreviews\jreviews\views\themes\default\theme_css\form.css