Laying Out the Joomla Contact Page: How to Center the Content

Laying Out the Joomla Contact Page: How to Center the Content
Page content


Using the facts the you are interested in manipulating the Joomla contact page, how to center its contents and other similar actions, I am going to make a few assumptions. I am going to assume that you have already downloaded, installed and configured your copy of the Joomla Content Management System.

The next thing I am going to assume is that you want to center the Joomla content page using a theme that has not broken the conventions used in the default themes that come pre-loaded on every Joomla download. Otherwise, you will need to download Joomla here.

Changing The Layout

To make changes to the Joomla contact page so as to center the content, you need to go to the Joomla Administrator module usual found in the root path of the installation in a folder named administrator. Once there using your web browser, log in with your user name and password as you had configured them during the installation process. Inside the Administrator control panel, in the menu select Extensions > Template Manager.

(Click any image for a larger view.)

If all has gone well so far, you should see a list of templates that are relevant to your installation. In my case for purposes of this tutorial, I am using one of the default templates called rhuk_milkyway. Click on the link then on the Next page look for the icon on the upper right end of the page but below the menu. Click on the Edit CSS icon to get access to the CSS files for this template.

joomla contact after

On the list of available CSS files for this Joomla template, select the radio button beside the template called template.css then go to the top of the page and click the Edit icon. You should now have access to the template css source code. Look for the following entry in the template by using the web browser search feature or simply scroll to the end of the template where it should be.

#component-contact table td { padding: 2px 0;}

change the code above to read

#component-contact table td { padding: 2px 0; text-align: center;}

When that is done, click on the Apply icon above.

That is all there is to It. Your text should now be centered as shown in the illustration above.


The details I have changed in the CSS file above are related to a HTML Div container that wraps the content of the Joomla contact page. The contact page does not appear by default and has to be set up just as you set up other pages, only this page has more specialized fields to deal with.

To actually set up the Joomla contact page, through the Administrator menu, you can go to Components > Contacts > Contacts and make further content based changes from there. Also depending on the template you may find a few differences from the default template. So with this I am sure you will not have trouble with Joomla contact page and how to center the content within it.

You can follow this article on adding Google Maps to your Joomla contact page to get more Joomla contact page ideas.