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

From JReviews Documentation
Jump to: navigation, search
Line 25: Line 25:
  
  
If you want to get rid of bullets in front of list elements, add this to the theme.css file:
+
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 {
 
.fieldValue ul {
Line 44: Line 44:
  
  
To display field values in two columns, modify css for the list elements:
+
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 {
 
.fieldValue ul li {

Revision as of 19:47, 19 December 2009

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.

You will need to modify this theme file:

  • /com_jreviews/jreviews/views/themes/default/elements/custom_fields.thtml


Find this line:

<?php echo implode(' &#8226; ',$CustomFields->display($field['name'], $entry));?>


and replace it with this:

<ul><li><?php echo implode('</li><li>',$CustomFields->display($field['name'], $entry));?></li></ul>


If you want to get rid of bullets in front of list elements, add this to the /theme_css/theme.css file:

.fieldValue ul {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}
 
.fieldValue ul li {
	list-style: none;
}


Field values now look like this:

FieldColumns2.png


To display field values in two columns, modify css for the list elements which we added before:

.fieldValue ul li {
	list-style: none;
	display: block;
	float: left;
	width: 45%;
}


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.