• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Custom list one field in left column, the rest in right column

I think the way to go is to put field1 in one group and the other fields in a second group (on the same form of course), then use the custom_css.php of the template to set the widths and positions of the two groups.
 
Usually, I like to have a cloned copy of an existing template so I can really customize it to my needs, so I would say yes, clone the div template and work on this copy.
 
Okay. I cloned the div template and put the fields in the appropriate groups, and I was able to identify the groups using firebug (e.g., cidermakers___logo fabrik_element fabrik_list_4_group_5 mti_font_element), but I do not know how to separate the two groups into their own divs for independent styling. I found some examples in the wiki for how to handle group styling in forms, but I could not figure out how to make it work in the list.

I tried this (based on the example in the wiki) just to see if I could get a red border to show up around my group 5, but it did not work:
#listform_$c #group5 > ul {
margin-top: -40px;
border: 1px solid red;
}

I am in need of beginner assistance in this area. Any specific hints (or examples) you could give me would be much appreciated.

Thanks.
 
It's clear that for this you need some knowledge of CSS.

But you can start with this :
Code:
#form_X fieldset#groupY {
    float: left;
    width: 48%;


}

#form_X fieldset#groupZ {
    margin-left: 50%;

    width: 48%;


}

Replace 'X' by the ID of your form, 'Y' by the ID of the group with field1 and 'Z' by the ID of the group with the other fields.

If you have the url of the form, it will be easier to help you out with what you can't do.
 
I am trying to edit the list view and not the form view.
There are no group CSS classes in list view, maybe it is possible to add something in the div template.
In your case you can do it with the element CSS:
in your custom_css.php add something like

.cidermakers___logo {
float: left;
height: 400px;
width: 150px;
}
.cidermakers___logo .divlabel {display:none}
 
The URL I am trying to style is: http://ciderweek.ohbusyweaver01.com/index.php/cider-makers

I plugged the code into: custom_css.php, but the changes did not take. I also plugged it into: template_css.php, but that did not work either. Here is the code I tried:

#form_4 fieldset#group5 {
float: left!important;
width: 48%!important;


}

#form_4 fieldset#group4 {
margin-left: 50%!important;

width: 48%!important;


}

I also tried this code, but it did not work either:

#listform_4 fieldset#group5 {
float: left!important;
width: 48%!important;


}

#listform_4 fieldset#group4 {
margin-left: 50%!important;

width: 48%!important;


}

Any ideas?
 
Sorry, my mistake. I thoight it was it was a form you wanted to style! So the code I gave you won't work. I'll try to come up with the solution later unless someone else help you out in the meantime.
 
The starting point is to clone the 'div' list template, which from your original post I think you have done. Remember to clone it though (make a copy of the views/list/tmpl/div folder and use that as the template), don't modify the original 'div' template, or you'll lose your changes next time you update.

Then modify default_row.php. The key here is, rather than just having it loop through the row data, is to manually place each element's row data.

You can access individual element data through $this->_row->data->table___element, where table___element is your full element name.

How you style your output is up to you. You can "cheat" and use a table layout, so you embed a table inside the main "row" div, and achieve your "three row high left element" layout that way, or you can use pure CSS and style it yourself.

Here's an example of how we did the main downloads list on the main Fabrik siite. note that this is from Fabrik 2.x, so there may be a few differences, but the basics still apply.

Here's our default_row.php:

PHP:
<div id="<?php echo $this->_row->id;?>" class="<?php echo $this->_row->class;?>">

		<div <?php echo @$this->cellClass['downloads___id']; ?>>
		<?php echo @$this->_row->data->downloads___id;?>
	</div>
	<div <?php echo @$this->cellClass['downloads___image']; ?>>
		<?php echo @$this->_row->data->downloads___image;?>
	</div>
	<div <?php echo @$this->cellClass['downloads___title']; ?>>
		<h3>
		<?php echo @$this->_row->data->downloads___title;?>
		</h3>
	</div>
	<div <?php echo @$this->cellClass['downloads___like']; ?>>
		<?php echo @$this->_row->data->downloads___like;?>
	</div>
	<div <?php echo @$this->cellClass['downloads___description']; ?>>
		<?php echo @$this->_row->data->downloads___description;?>
	</div>
	<div <?php echo @$this->cellClass['downloads___download']; ?>>
		<?php echo @$this->_row->data->downloads___download;?>
	</div>
	<div <?php echo @$this->cellClass['downloads___type']; ?>>
		<?php echo @$this->_row->data->downloads___type;?>
	</div>
<div class="downloads___type_blabel">Type:</div>
	<div <?php echo @$this->cellClass['downloads___joomla_version']; ?>>
		<?php echo @$this->_row->data->downloads___joomla_version;?>
	</div>
	<div <?php echo @$this->cellClass['downloads___create_date']; ?>>
		<?php echo @$this->_row->data->downloads___create_date;?>
	</div>
<div class="downloads___create_date_blabel">Last updated:</div>
	<div <?php echo @$this->cellClass['downloads___digg']; ?>>
		<?php echo @$this->_row->data->downloads___digg;?>
	</div>
	<div <?php echo @$this->cellClass['fabrik_delete']; ?>>
		<?php echo @$this->_row->data->fabrik_delete;?>
	</div>
	<div <?php echo @$this->cellClass['downloads___hits']; ?>>
		<?php echo @$this->_row->data->downloads___hits;?>
	</div>
<div class="downloads___hits_blabel">Downloads:</div>
	<div <?php echo @$this->cellClass['downloads___version']; ?>>
		<?php echo @$this->_row->data->downloads___version;?>
	</div>
<div class="downloads___version_blabel">v:</div>

</div>

... and here's the template CSS, where we use absolute positioning to individually place each of the elements (note that this is appended to the the rest of the usual template CSS):

Code:
.fabrik_header{margin-top:6px;margin-left:1px;width:909px;height:98px; }
.fabrikTableHeading{position:absolute;top:32px;left:17px;width:110px;height:34px; }
.fabrik_row___downloads___id{ position:absolute;top:-110px;left:0px;width:0px;height:0px;display:none;}
.fabrik_row___downloads___image{ position:absolute;top:15px;left:17px;width:172px;height:157px;border:1px solid #000000;overflow:hidden;}
.fabrik_row___downloads___title{ position:absolute;top:15px;left:221px;width:215px;height:40px;color:#000000;}
.fabrik_row___downloads___title h3{padding:0;margin:0}
.fabrik_row___downloads___like{ position:absolute;top:11px;left:704px;width:50px;height:25px;}
.fabrik_row___downloads___description{ position:absolute;top:65px;left:401px;width:437px;height:90px;font-size:12px;text-align:left !important;}
.fabrik_row___downloads___download{ position:absolute;top:9px;left:793px;width:96px;height:28px;border:1px none #000000;overflow:hidden;}
.fabrik_row___downloads___type{ position:absolute;top:65px;left:254px;width:100px;height:23px;font-size:12px;}
.fabrik_row___downloads___joomla_version{ position:absolute;top:40px;left:217px;width:75px;height:23px;font-size:12px;}
.fabrik_row___downloads___create_date{ position:absolute;top:150px;left:812px;width:92px;height:29px;}
.fabrik_row___downloads___digg{ position:absolute;top:13px;left:626px;width:65px;height:25px;}
.fabrik_row___fabrik_delete{ position:absolute;top:150px;left:229px;width:65px;height:22px;}
.fabrik_row___downloads___hits{ font-size: 12px;
height: 27px;
left: 293px;
position: absolute;
top: 91px;
width: 79px;}
.fabrik_row___downloads___version{ position:absolute;top:40px;left:319px;width:79px;height:27px;font-size:12px;}
.oddRow0{border-radius: 15px;-moz-border-radius: 15px;border:1px solid #6fa8dc;background:rgba(159,197,248,0.25);height:187px;width:890px;}
.oddRow1{border-radius: 15px;-moz-border-radius: 15px;border:1px solid #6fa8dc;background:rgba(159,197,248,0.25);height:187px;width:890px;}
.fabrikFilterContainer{
background: none repeat scroll 0 0 rgba(159, 197, 248, 0.25);
border: 1px solid #6FA8DC;
border-radius: 15px 15px 15px 15px;
height: 43px;
margin: 41px 18px 0 0;
}
.filter_downloads___type_label{height: 25px;
left: 32px;
position: absolute;
top: 86px;
width: 69px;}
.filter_downloads___type{position:absolute;top:83px;left:67px;width:141px;height:25px;}
.filter_downloads___acl_label{position:absolute;top:83px;left:229px;width:69px;height:25px;}
.filter_downloads___acl{position:absolute;top:83px;left:292px;width:101px;height:25px;}
.filter_downloads___version_label{height: 25px;
left: 406px;
position: absolute;
top: 87px;
width: 69px;}
.filter_downloads___version{position:absolute;top:83px;left:460px;width:120px;height:25px;}
.fabrik_search_all{position:absolute;top:83px;left:655px;width:183px;height:25px;}
.fabrik_clear{position:absolute;top:83px;left:607px;width:37px;height:25px;}
.fabrik_search{position:absolute;top:82px;left:846px;width:43px;height:28px;}
.csvExportButton{position:absolute;display:block;top:19px;left:689px;width:89px;heght:25px}
.csvImportButton{position:absolute;display:block;top:18px;left:793px;width:98px;heght:25px}
.addbutton{position:absolute;display:block;top:18px;left:127px;width:28px;heght:25px}
.fabrik_delete{position:absolute;display:block;top:19px;left:485px;width:65px;heght:45px}
.downloads___type_blabel{ position:absolute;top:65px;left:219px;width:45px;height:25px;font-style:italic;font-size:12px;text-align:left !important;}
.downloads___create_date_blabel{ position:absolute;top:151px;left:715px;width:92px;height:25px;font-style:italic;font-size:12px;text-align:right !important;}
.downloads___hits_blabel{ position:absolute;top:91px;left:219px;width:92px;height:25px;font-style:italic;font-size:12px;text-align:left !important;}
.downloads___version_blabel{ position:absolute;top:40px;left:291px;width:25px;height:24px;font-size:12px;text-align:right !important;}

The above was actually generated using a plugin we had for Fabrik 2.x which generated templates from Balsamiq wireframe mockups. I don't think we'll be proting that forwards to 3.x. But with a little care yo can generate those coordinates and sizes yourself.

I'd probably recommend going for the "cheat" approach, and build a simple table structure inside a div wrapper. Yeah, I know we aren't supposed to use tables to define layout, but sometimes it's just sooo much easier! And there's plenty of tutorials out there on how to build tables like your desire doutput, using colspan and rowspan.

-- hugh
 
Thanks, Hugh. This is just the start I was looking for. I have been using Fabrik since its beta days and have always been able to rely on small style edits to the out-of-the box templates. This primer will speed me along the learning curve.
 
No problem, glad you got it working.

Out of interest, did you use the CSS absolute position method, or the "cheat" using a table?

-- hugh
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top