Discovered contact us form in Joomla 2.5 was broken badly. Time to replace plugin or use Joomla’sbuilt-inn form. Decided to use Joomla’s form to keep site light. I set up a form for the client using Joomla 2.5’s contact form. She liked how it looked and worked. But – it breaks when viewed in smart phones.
- Studied overrides (link) wanted to edit CSS only.
- Like child theme concept in WordPress (link) found Yootheme theme has custom.css file for this.
- Discovered theme is responsive just not the form.
- Problem: how to test CSS in. iPhone using Firebug or Developer tools?
- Firebug Lite doesn’t work in ios7 iPhone – at least I couldn’t get it to work.
- Chrome Canary Developer tools has ability to emulate mobile devices.
+++
Done: In Chrome Canary, in Web Developer with Emulation = Apple iPhone 5. Note: the client is no longer using the discussed site.
Using these settings the Joomla contact form is responsive:
#system form.submission fieldset > div > input[type=’text’][code] #system form.submission fieldset > div > input[type=’password’] { padding: 5px; width: 92%; }
&
#system form.submission fieldset > div > textarea { width: 95%; ; }
+++
In Chrome Canary, in Web Developer with Emulation =Apple iPhone 5. Using these settings the Joomla contact form is responsive: #system form.submission fieldset > div > input[type=’text’], #system form.submission fieldset > div > input[type=’password’] { padding: 5px; width: 92%; } #system form.submission fieldset > div > textarea { width: 95%; ; }
++
“The templates overrides are used when you have some HTML or PHP changes to make.
If it is just tweaking layout details, custom.css is fine.
“Don’t forget you can use media queries to have rules depending on the device used to browse the site, so your adjustments for mobiles don’t change the way it looks on the desktop version.
“Also good to remember for contact forms is that there are benefits to using form extensions to replace the default Joomla contact form (personally I always use Fabrik), like keeping records of the mails received and easier tracking in analytics programs.
“I wrote an article on this (but it is in French): http://betterliving.be/Fabrik/remplacer-le-formulaire-de-contact-de-joomla.html
++
Thank you, Jean-Francois, for the link to that article. It provides serious points why using an extension is better (it translated well and is worth the read.). If I had seen that before I started I would have gone with an extension. I am trying to keep the site light and so was weighing using yet another plugin vs. the ease of set up. Now I see there are serious security, analytic, CRM, and other marketing considerations.
++
Also, thanks for comparing the uses of custom.css vs. template overrides. Missed that in the details of what I was doing with css.
I tried using media queries at one point. I could not tell where I would place them. That’s when I realized site was already responsive and stopped working with media queries here. Where would I put media queries if the site were not responsive?
Once I saw it was only the form that was not responsive then it was a matter of figuring out how to use Firebug or Developer Tools to find out where to add css.
Could not get Firebug Lite to work in my iPhone 5c. Discovered Developer Tools in Chrome Canary Browser has the ability to emulate many various mobile devices. After that, it was just getting the settings I wanted in D.Tools and adding those to custom.css.