How to add Bootstrap 3 styles to Joomla!'s com_users form elements

10.17.2014
Web design - Dev with Mtycks

By now, I'm sure, we've all moved on to building our new sites with Bootstrap 3 even though Joomla! 3.x still has not :(.

This isn't normally a huge deal since we can use template overrides to set the styles we need—views in the Users component, however, make it a bit difficult to get Bootstrap 3-specific styles in the various forms.

Imagine your disappointment (rage?) when you finish building your beautiful Bootstrap 3 template, then navigate to your registration page and it looks like this:

Registration page before updating to Bootstrap 3 styles

Here's a snippet from the com_users' registration view.

<?php foreach ($fields as $field) :// Iterate through the fields in the set and display them.?>
	<?php if ($field->hidden):// If the field is hidden, just display the input.?>
		<?php echo $field->input;?>
	<?php else:?>
		<div class="control-group">
			<div class="control-label">
			<?php echo $field->label; ?>
			<?php if (!$field->required && $field->type != 'Spacer') : ?>
				<span class="optional"><?php echo JText::_('COM_USERS_OPTIONAL');?></span>
			<?php endif; ?>
			</div>
			<div class="controls">
				<?php echo $field->input;?>
			</div>
		</div>
	<?php endif;?>
<?php endforeach;?>

We can change the <div class="control-group"> to <div class="form-group"> and remove the <div class="control-label"> easy enough, but what about those <input>s?

To modify the <input>s, we'll need to dig into the Joomla! API documentation for JFormFields.


JFormField

There are two methods we need to use in order to modify the template: getAttribute() and __set().

getAttribute()
We'll use this method to grab the current class of the <input>. Place the following code within the foreach loop to see its classes:

$field->getAttribute('class')

__set()
After we've got the current classes for the input, we'll need to update it with the Bootstrap 3 class form-control:

$field->__set('class', $field->getAttribute('class').' form-control');

Putting it all together

Easy peasy, right? Here's the above snippet from the com_users' registration view with our added Bootstrap 3 styles:

<?php foreach ($this->form->getFieldsets() as $fieldset): // Iterate through the form fieldsets and display each one.?>
	<?php $fields = $this->form->getFieldset($fieldset->name);?>
	<?php if (count($fields)):?>
		<fieldset>
		<?php if (isset($fieldset->label)):// If the fieldset has a label set, display it as the legend.?>
			<legend><?php echo JText::_($fieldset->label);?></legend>
		<?php endif;?>
		<?php foreach ($fields as $field) :// Iterate through the fields in the set and display them.?>
			<?php if ($field->hidden):// If the field is hidden, just display the input.?>
				<?php echo $field->input;?>
			<?php else:?>
				<div class="form-group">
					<?php echo $field->label; ?>
					<?php if (!$field->required && $field->type != 'Spacer') : ?>
						<span class="optional"><?php echo JText::_('COM_USERS_OPTIONAL');?></span>
					<?php endif; ?>
					
					<?php $field->__set('class', $field->getAttribute('class').' form-control'); ?>
					<?php echo $field->input;?>
					
				</div>
			<?php endif;?>
		<?php endforeach;?>
		</fieldset>
	<?php endif;?>
<?php endforeach;?>

Which will look like this:

Registration page after updating to Bootstrap 3 styles


Download our com_users template overrides

In case you didn't want to go through all the trouble of doing this yourself, I've provided a ZIP of all the com_users views updated for Bootstrap 3.

  • Download
  • Unzip
  • Copy the com_users directory into your template ([root]/templates/[template_name]/html/)

DownloadNOTE: This is not an installer, please unzip and place into your template's 'html' directory.