Problems with css list styling

[Joppo2]

I created a list with labels and related values below each other using a custom div template - see attachment for the webpage.

How to?:
A. customise the labels, for example have all the labels (like 'Opbrengst per energie eenheid (kWhr/GJ)' and 'Aantal donateurs') in bold text?

B. Set the column width for all labels and related datafields?

I looked at a number of fabrik resources (http://fabrikar.com/forums/index.php?wiki/custom-styling-a-list/, http://fabrikar.com/forums/index.php?wiki/css-styling-examples/ and https://github.com/Fabrik/fabrik/bl...m_fabrik/views/list/tmpl/div/template_css.php) but I could not find the answers/related examples on these two questions.

The only thing that worked for me with respect question B was to set the width for each seperate element - something like:

listform_$c .mylist___myelement {
    width: 500px;
}

But as requested I'd like to set the width by means of one css parameters for all elements.

Appreciate your help.

 

[troester]

1. the div template is only an example, don't modify the one coming with Fabrik (your modifications will be overridden with the next update) but copy/rename the div folder
2. you can edit default_row.php to set classes for label and content; in the div example the lable has a class "muted" so you could do e.g.
#listform_$c .muted
.muted {
display: block;
float: left;
font-weight: bold;
width: 50%;
}

Best is to use firebug/firefox to examine the CSS.

 

[Joppo2]

Hi troester,

Thanks for your comments.

I copied the div template folder (to mydiv folder).

Setting your suggested '#listform_$c .muted' style did not have any effect on the webppage view, e.g., i dont see bold text labels . Wirth firebug I could see the changed setting of the muted class.

The example for setting the label class for the $label variable is clear in default_row.php. But which $var default_row.php should I use to define the class for the datavalues related to the labels in order to define the row width? $heading?

Pls your help.

ps: pls see css code of template_css.php of mydiv folder:

<?php
/**
* Fabrik List Template: Div CSS
*
* @package    Joomla
* @subpackage  Fabrik
* @copyright  Copyright (C) 2005-2013 fabrikar.com - All rights reserved.
* @license    GNU/GPL http://www.gnu.org/copyleft/gpl.html
*/
 
header('Content-type: text/css');
$c = $_REQUEST['c'];
$buttonCount = (int) $_REQUEST['buttoncount'];
$buttonTotal = $buttonCount === 0 ? '100%' : 30 * $buttonCount ."px";
echo "
 
/** Hide the checkbox in each record*/
 
#listform_$c .fabrikList input[type=checkbox] {
    display: none;
}
#listform_$c .well {
    position: relative;
}
 
#listform_$c .fabrik_action {
    position: absolute;
    top: 10px;
    right: 10px;
}
 
#listform_$c table {
    width: 500px;
    background:white
}
 
#listform_$c .het_crprojects___description {
    width: 500px;
    background:white
}
 
#listform_$c .het_crprojects___projecttype {
    width: 500px;
    background:white
}
 
 
#listform_$c .het_crprojects___projectname {
    width: 500px;
    background:white;
    color:red;
    font-weight:bold
}
 
#listform_$c .het_crprojects___reward_per_energyunit {
    width: 500px;
    background:white
}
/* the attempts below did not change the column width
#listform_$c table.fabrikList table {
    width: 500px;
}
 
#listform_$c table.fabrikList td {
    width: 500px;
}
*/
 
/*suggested by Fabrik Standard Support */
#listform_$c .muted
.muted {
display: block;
float: left;
font-weight: bold;
width: 80%;
}
 
 
 
";?>

 

[troester]

#listform_$c .muted
.muted {...

Should be working with only one .muted

If you want to add a class to the content edit default_row.php and change e.g.
<?php echo $d?>
to
<?php echo '<span class="mycontent">' . $d . '</span>'?>

 

[Joppo2]

Thnx troester

I performed some suggested changes, but I still see some weird things:

template_css.php:

/*suggested by Fabrik Standard Support */
#listform_$c .muted {
display: block;
float: left;
font-weight: bold;
color: blue;
width: 100px;
}
 
#listform_$c .myformdata {
color: grey;
width: 300px;
}

default_row.php:

<?php echo '<span class="myformdata"> ' . $d . ' </span>'?>

The weird thing is that the various data values still appear at different positions (see2 screendump attachments); sometime below the (bleu) labels, sometimes next to the label(?)

The second weird thing is that setting the width of the datavalue does not seem to work (?)

 

[rob]

can you post a URL to the form in question please?

 

[Joppo2]

Hi rob,

(sorry for the late reaction - holidays...):

Unfortenately not, the site is not live yet (development on laptop); the reason why I included the screen dumps....

 

[rob]

you can always use a free service such as https://ngrok.com/ to enable access.
For CSS questions I simply have to see the actual page to be able to give advice