Applying a button and centering it in the RocketTheme Affinity template

: Category: Joomla; 15 September 2009; Hits: 16621

This took me a while to do so I thought I'd document it for future reference.

The Issue

See the restore default setting link at the bottom of this page in the footer? I wanted to put one of the styled buttons behind it but then found that there's a lot more to do than just that.

Instructions

Open the templates/rt_affinity_j15/index.php
Look at the last few lines with the original code (below)
For this website template:
1. I've added the module-dark classes.
2. Specified float:none to get rid of float:left
3. Specified width of readon-wrap1 to the width of the button
4. Specified margin:0 auto to center readon-wrap1

Original Code:

copy raw

<?php if ($show_defaultsettings == "true") : ?>
	<a href="#" id="clear-cookies"><?php echo JText::_('DEFAULT_SETTINGS'); ?></a>
<?php endif; ?>

<?php if ($show_defaultsettings == "true") : ?>
<a href="#" id="clear-cookies"><?php echo JText::_('DEFAULT_SETTINGS'); ?></a>
<?php endif; ?>

New Code:

copy raw

<?php if ($show_defaultsettings == "true") : ?>
	<div style="overflow: hidden;float:none">
		<div class="module-dark readon-wrap1" style="float:none;width:200px;margin:0 auto">
			<div class="module-dark readon1-l"></div>
			<a href="#" id="clear-cookies" class="module-dark readon-main" style="margin-top:0px"><span class="module-dark readon1-m"><span class="module-dark readon1-r"><?php echo JText::_('DEFAULT_SETTINGS'); ?></span></span></a>
		</div>
	</div>
	<div class="clr"></div>		
<?php endif; ?>

<?php if ($show_defaultsettings == "true") : ?>
<div style="overflow: hidden;float:none">
<div class="module-dark readon-wrap1" style="float:none;width:200px;margin:0 auto">
<div class="module-dark readon1-l"></div>
<a href="#" id="clear-cookies" class="module-dark readon-main" style="margin-top:0px"><span class="module-dark readon1-m"><span class="module-dark readon1-r"><?php echo JText::_('DEFAULT_SETTINGS'); ?></span></span></a>
</div>
</div>
<div class="clr"></div>
<?php endif; ?>