Difference between revisions of "Customizing the layout of custom fields on listing submit page"

From JReviews Documentation
Jump to: navigation, search
Line 1: Line 1:
−
In this tutorial we'll show you how to display certain custom fields in the same row on the listing submit form.
+
This article will 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:
 
By default, custom fields are outputted one per row, like this:
Line 6: Line 6:
  
  
−
If you have a lot of custom fields, the form can become very long.  
+
Sometimes it is a good idea to display related custom fields in one row. We can do that using css because each field container has its name as class: "jr_fieldDiv jr_fieldname".
  
−
We can make the fields display in the same row using css because each field container has its name as class: "jr_fieldDiv jr_fieldname".
+
In this example we'll make jr_country, jr_state and jr_city field to display in one row.
  
 +
Add all styles to <span style="color: blue">custom_styles.css</span> file in your theme.
  
−
We'll align the fields by adding styles in this css file:
 
−
*<span style="color: blue">\com_jreviews\jreviews\views\themes\{theme_name}\theme_css\form.css</span>
 
  
 +
The first field in the row be floated like this:
 +
<source lang="css">
 +
.jr_form .jr_fieldDiv.jr_country {
 +
    float: left;
 +
}
  
−
In this example, we'll make the '''Type''' and '''Screen Size''' fields (from the picture above) display in the same row.
+
</source>
  
−
The first field in the row must have a 'float: left;':
+
 
−
<source lang="php">
+
For the second and third field we'll use this to output them in the same row as first field:
−
.jr_form .jr_fieldDiv.jr_tvtype {
+
<source lang="css">
−
float: left;
+
.jr_form .jr_fieldDiv.jr_state,
 +
.jr_form .jr_fieldDiv.jr_citys {
 +
    float: left;
 +
    clear: none;
 +
    margin-left: 30px;
 
}
 
}
 +
 
</source>
 
</source>
  
 +
And then we should make the 4th field to start from a new row:
 +
<source lang="css">
 +
.jr_form .jr_fieldDiv.jr_address {
 +
    clear: left;
 +
}
  
−
for the second and other fields you want to display in the same row also add 'clear: none' and some margin for the space between them:
 
−
<source lang="php">
 
−
.jr_form .jr_fieldDiv.jr_screensize {
 
−
float: left;
 
−
clear: none;
 
−
margin-left: 30px;
 
−
}
 
 
</source>
 
</source>
  
  
−
You can add this code anywhere in the forms.css file. Instead of jr_tvtype and jr_screensize use the names of your custom fields.
 
  
−
 
+
Now the fields are displayed like this:
−
Now the fields will be displayed like this:
+
  
 
[[File:SubmitFields2.png]]
 
[[File:SubmitFields2.png]]
  
  
−
If we add 'float: left' and 'clear: none' to other two fields, they will also be displayed in the first row (if there is enough room):
 
−
 
−
<source lang="php">
 
−
.jr_form .jr_fieldDiv.jr_tvresolution {
 
−
float: left;
 
−
clear: none;
 
−
margin-left: 30px;
 
−
}
 
−
 
−
.jr_form .jr_fieldDiv.jr_aspectratio {
 
−
float: left;
 
−
clear: none;
 
−
margin-left: 30px;
 
−
}
 
−
</source>
 
−
 
−
 
−
[[File:SubmitFields3.png]]
 
  
  

Revision as of 15:35, 23 August 2011

This article will 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:

SubmitFields.png


Sometimes it is a good idea to display related custom fields in one row. We can do that using css because each field container has its name as class: "jr_fieldDiv jr_fieldname".

In this example we'll make jr_country, jr_state and jr_city field to display in one row.

Add all styles to custom_styles.css file in your theme.


The first field in the row be floated like this: 

.jr_form .jr_fieldDiv.jr_country {
    float: left;
}


For the second and third field we'll use this to output them in the same row as first field: 

.jr_form .jr_fieldDiv.jr_state,
.jr_form .jr_fieldDiv.jr_citys {
    float: left;
    clear: none;
    margin-left: 30px;
}

And then we should make the 4th field to start from a new row: 

.jr_form .jr_fieldDiv.jr_address {
    clear: left;
}


Now the fields are displayed like this:

SubmitFields2.png

Retrieved from "https://docs.jreviews.com/index.php?title=Customizing_the_layout_of_custom_fields_on_listing_submit_page&oldid=2050"