Form template override with css?

[Delerium]

I'm trying to set up a website using both mobile joomla along with fabrik. Mobile joomla currently detects mobile devices, and serves up a customized template to display properly on those devices. This works perfectly until I hit fabrik forms, which contain their own templates that break master template formatting.

My problem is, I'd like to be able to set up different form templates depending on what mobile device is detected, without creating copies of my forms just to change the form template. I tried using form template overrides, detailed here, by copying my default form template and placing it inside my mobile templates. That gave me control over default.php, but when I tried including a custom template_css.php along with it, nothing changed. Also, inside a template override default.php file, any reference to $this->loadTemplate reverts back to loading the original template files instead of any custom files placed in my mobile template, such as 'group'. As such, without rewriting the structure of templates, you can only override default.php and not default_group.php or any other form template file.

Is there a way to include custom css to form template overrides and if not, why not? It's very hard to customize a form on a per-template basis without CSS override as well. Am I going about this all wrong?

 

[sgorney]

I've done this with fabrik 2.0. There are a couple things you can do.

There (used to be in fabrik 2.0?) a URL parameter you could pass. I believe it's "fabriklayout=templateName".

That template would be a template in the fabrik form template folder. So you could create a mobile menu that has that as a menu item:

site.com/index.php?option=com_fabrik&form_id=4&fabriklayout=templateName

This will override the form's assigned template with the one you specify.

--

Second, you should be able to do native template overrides of fabrik templates within the HTML folder of the Joomla template. That would include the default_group.php file. Are you sure you set that up correctly in terms of naming your directories and stuff?

--

Finally, CSS overrides shouldn't be too difficult to do from say, within your mobile template CSS file. It just requires a little CSS magic. The best way to do this is to chain an CSS div ID with the fabrik CSS to override.

Let's say you have a Joomla template named mobile, with a template.css file. In the index.php you could have a div:

<div id="mobile">
<jdoc:include type="component" />
</div>

Then in your CSS you should be able to do:

#mobile #form_1 div.fabrikElement {
--
}

Because the #mobile ID is more specific than Fabrik's CSS tags this will override their CSS, which is just:

#form_1 div.fabrikElement

--

I've done a lot of mobile fabrik / templating stuff, usually there's a solution using pure CSS. I wrote about mobile Joomla and Fabrik fairly extensively once upon a time:
http://www.s-go.net/Blog/s-go-takes-on-mobile-web-apps.html

Hopefully this helps you out some. Good luck!

 

[Delerium]

I've done this with fabrik 2.0. There are a couple things you can do.

There (used to be in fabrik 2.0?) a URL parameter you could pass. I believe it's "fabriklayout=templateName".

That template would be a template in the fabrik form template folder. So you could create a mobile menu that has that as a menu item:

site.com/index.php?option=com_fabrik&form_id=4&fabriklayout=templateName

This will override the form's assigned template with the one you specify.

--

Second, you should be able to do native template overrides of fabrik templates within the HTML folder of the Joomla template. That would include the default_group.php file. Are you sure you set that up correctly in terms of naming your directories and stuff?

My directory structure is as follows:

fabrik template:
.\components\com_fabrik\views\form\tmpl\tim_rounded
mobile template override:
.\templates\mobile_smartphone\com_fabrik\form\tim_rounded

I had modified default.php in the mobile template override folder and put in a <p>test</p>, and it showed up when it was supposed to, so I know that the directory structure is working.

Thing is, when the mobile override default.php calls "$this->loadTemplate('group')", it loads the default_group.php in the fabrik template directory instead of the mobile template override directory. Likewise, template_css.php is also being called from the fabrik template instead of using the one included in the mobile template override directory. I just don't understand the purpose of the template override if all you can override is one file?

Finally, CSS overrides shouldn't be too difficult to do from say, within your mobile template CSS file. It just requires a little CSS magic. The best way to do this is to chain an CSS div ID with the fabrik CSS to override.

Let's say you have a Joomla template named mobile, with a template.css file. In the index.php you could have a div:

<div id="mobile">
<jdoc:include type="component" />
</div>

Then in your CSS you should be able to do:

#mobile #form_1 div.fabrikElement {
--
}

Because the #mobile ID is more specific than Fabrik's CSS tags this will override their CSS, which is just:

#form_1 div.fabrikElement

--

I've done a lot of mobile fabrik / templating stuff, usually there's a solution using pure CSS. I wrote about mobile Joomla and Fabrik fairly extensively once upon a time:
http://www.s-go.net/Blog/s-go-takes-on-mobile-web-apps.html

Hopefully this helps you out some. Good luck!

I get you, and that's a great tip... If left with no other choice, I may just do that, but to me it seems like a hack. Personally, I'd like my Joomla master templates to be able to control the look and feel of the entire site, but it is difficult to get fabrik's template system to play nice with joomla's templates.

 

[cheesegrits]

Are you using this Mobile Joomla:

http://www.mobilejoomla.com/

If so, I'll install it and test the template overriding. The issue you described about not being able to $this->loadTemplate() and the template_css.php not loading in a template override just don't sound right. i know that stuff works in our regular template overriding, so i need to load Mobile Joomla and test it.

-- hugh

 

[Delerium]

Are you using this Mobile Joomla:

http://www.mobilejoomla.com/

If so, I'll install it and test the template overriding. The issue you described about not being able to $this->loadTemplate() and the template_css.php not loading in a template override just don't sound right. i know that stuff works in our regular template overriding, so i need to load Mobile Joomla and test it.

-- hugh

yup. that's the one. looking forward to seeing what you think.

Edit: cheese, If you want to test the template versions, you can use the parameters ?device=xhtml (loads the mobile_smartphone template) or ?device=desktop (loads the default template) to load the different templates.

Edit2: I tested it again and realized I had my <p>test</p> in the wrong default.php. After looking at it again, it seems that the entire template override isn't functioning with the mobile templates. I'm guessing it has to do with the way mobile joomla is loading their templates, but I dunno.

 

[cheesegrits]

OK.

BTW. here's a quick Jing video, prior to loading Mobile Joomla, just to show you that template overriding does work. As you can see, I've copied three files (default.php, default_group.php, and template_css.php) from the main Fabrik default form template, into the override location for the standard Beez 20.

The 'Junk' form is set to just use 'default', and there's no query string or component link settings changing the template.

http://screencast.com/t/OjuZv3rUWJ

-- hugh

 

[Delerium]

OK.

BTW. here's a quick Jing video, prior to loading Mobile Joomla, just to show you that template overriding does work. As you can see, I've copied three files (default.php, default_group.php, and template_css.php) from the main Fabrik default form template, into the override location for the standard Beez 20.

The 'Junk' form is set to just use 'default', and there's no query string or component link settings changing the template.

http://screencast.com/t/OjuZv3rUWJ

-- hugh

I got it working finally... I had my directory structure wrong from the very beginning (I was missing the very first "html" directory). I had thought my directories were correct because the test worked, but after I realized I had my test in the wrong place, I started looking back over my directory structure, and found my error. After correcting that, it loads the overrides, and also functions correctly from within the mobile profiles (css, default_group.php and all). Now I can make those mobile specific changes to my forms so that they show up on the tiny screens. I'm a happy camper.

 

[sgorney]

Glad you got it figured out. I was wondering about that directory structure which is why I asked about it. Good luck!

 

[cheesegrits]

OK, glad you got it sorted out.

I'll probably go ahead and play with Mobile Joomla anyway, although I'm a little disturbed that they seem to want direct write access to just about everything, and don't seem to be using the native J! file API (so hence not using the ftp layer).

-- hugh