Difference between revisions of "How to display field values in columns"

From JReviews Documentation
Jump to: navigation, search
m
Line 9: Line 9:
 
Instead of the values being separated by bullets, you can display them as a list in one or more columns.
 
Instead of the values being separated by bullets, you can display them as a list in one or more columns.
  
−
You will need to modify this theme file:
+
To do that, add this code to the custom_styles.css file in your theme:
−
*<span style="color: blue">/com_jreviews/jreviews/views/themes/default/elements/custom_fields.thtml</span>
+
  
−
 
+
<source lang="css">
−
Find this line:
+
ul.fieldValueList li {
−
<source lang="php">
+
    margin-right: 5px !important;  
−
<?php echo implode(' &#8226; ',$CustomFields->display($field['name'], $entry));?>
+
    float: left;
 +
    width: 90%;
 +
}
 +
ul.fieldValueList li:after{
 +
    content:'';  
 +
    padding:0;
 +
}
 
</source>
 
</source>
  
 +
Field values now look like this:
  
−
and replace it with this:
+
[[File:FieldColumns2.png]]
−
<source lang="php">
+
 
−
<ul><li><?php echo implode('</li><li>',$CustomFields->display($field['name'], $entry));?></li></ul>
+
 
−
</source>
+
If you want only certain field to display in a column, add a field name in front of the selector, for example:
  
  
−
If you want to get rid of bullets in front of list elements, add this to the <span style="color: blue">/theme_css/theme.css</span> file:
 
 
<source lang="css">
 
<source lang="css">
−
.fieldValue ul {
+
.jr_actors ul.fieldValueList li {
−
list-style: none;
+
    margin-right: 5px !important;
−
padding-left: 0;
+
    float: left;
−
margin-left: 0;
+
    width: 90%;
 
}
 
}
−
 
+
.jr_actors ul.fieldValueList li:after{
−
.fieldValue ul li {
+
    content:'';
−
list-style: none;
+
    padding:0;
 
}
 
}
 
</source>
 
</source>
  
  
−
Field values now look like this:
+
To display field values in two columns, reduce the list item width to 45%:
−
 
+
−
[[File:FieldColumns2.png]]
+
−
 
+
−
 
+
−
To display field values in two columns, modify css for the list elements which we added before:
+
 
<source lang="css">
 
<source lang="css">
−
.fieldValue ul li {
+
ul.fieldValueList li {  
−
list-style: none;
+
    margin-right: 5px !important;  
−
display: block;
+
    float: left;  
−
float: left;
+
    width: 45%;
−
width: 45%;
+
}
 +
ul.fieldValueList li:after{
 +
    content:'';
 +
    padding:0;  
 
}
 
}
 +
 
</source>
 
</source>
  
Line 62: Line 66:
 
To display field values in three columns, decrease the width to around 30%.
 
To display field values in three columns, decrease the width to around 30%.
  
−
Percentages depend on the css of your Joomla template. Use [[Tools for customizing JReviews Themes|Firebug]] to find the best value.
+
Percentages depend on the css of your Joomla template. Use Firebug to find the best value.
−
 
+
−
 
+
−
== Displaying fields in columns in JReviews 2.3 ==
+
−
 
+
−
 
+
−
Add this code to custom_styles.css in your theme:
+
−
 
+
−
<source lang="css">
+
−
ul.fieldValueList li {
+
−
    margin-right: 5px !important;
+
−
    float: left;
+
−
    width: 90%;
+
−
}
+
−
ul.fieldValueList li:after{
+
−
    content:'';
+
−
    padding:0;
+
−
}
+
−
</source>
+
  
  

Revision as of 10:32, 23 August 2011

With Multiple Select List and Checkbox custom field types, the fields can have many values. On the listing detail page those values are displayed in the same line separated by bullets.

Example:

FieldColumns1.png


Instead of the values being separated by bullets, you can display them as a list in one or more columns.

To do that, add this code to the custom_styles.css file in your theme: 

ul.fieldValueList li { 
    margin-right: 5px !important; 
    float: left; 
    width: 90%; 
} 
ul.fieldValueList li:after{ 
    content:''; 
    padding:0; 
}

Field values now look like this:

FieldColumns2.png


If you want only certain field to display in a column, add a field name in front of the selector, for example: 


.jr_actors ul.fieldValueList li {
    margin-right: 5px !important;
    float: left;
    width: 90%;
}
.jr_actors ul.fieldValueList li:after{
    content:'';
    padding:0;
}


To display field values in two columns, reduce the list item width to 45%: 

ul.fieldValueList li { 
    margin-right: 5px !important; 
    float: left; 
    width: 45%; 
} 
ul.fieldValueList li:after{ 
    content:''; 
    padding:0; 
}


Now it looks like this:

FieldColumns3.png


To display field values in three columns, decrease the width to around 30%.

Percentages depend on the css of your Joomla template. Use Firebug to find the best value.

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