Construct is installed like any Joomla extension. This same process is followed to upgrade an existing installation of Construct.

Before upgrading or installing any Joomla extension, we highly recommend backing up your entire Joomla web site.

1. Download the installation package of the version of Construct that you wish to install.
2. From the back-end of your Joomla site (administration), select Extensions -> Install/Uninstall.
3. Click the Browse button and select the Construct installation package on your local machine.
4. Click the Upload File & Install button.
5. If your installation is successful, you will see a success message from Joomla as well as a quick, getting started message from Construct.

At the core of using Construct is adding your unique look via a custom style sheet, which will be the basis of your custom template. Other common uses for the custom style sheet include:

• Declaring font family / font families
• Customizing the font sizes
• Change the positioning of core elements
• Changing core styles of Joomla or Construct
• Alter the template's layout

Once you have created your custom style sheet, it needs to be uploaded to the root of the /css directory within Construct (i.e. /templates/construct/css). Once uploaded:

1. From the back-end of your Joomla site (administration), select Extensions -> Template Manager.
2. In the Template Name column, click on the name of the version of Construct that you are using.
3. In the General parameters panel, click on the Custom Style Sheet select list and select the name of your custom style sheet.
4. Click the Save or Apply toolbar buttons to save this setting.

Your custom style sheet cannot use any of the following names, which are reserved for Construct.

• core-classes-ids.css
• diagnostic.css
• editor.css
• modal.css
• normal.css
• print.css
• rtl.css
• screen.css
• ie6.css
• wireframe.css
• mobile.css

Layout overrides allow you to change the layout and style of Construct. A completely different look can be achieved with a few CSS declarations and/or by the default layout of Construct. They also address a variety of needs, such as:

• The ability to have a module appear on non-menu item pages, such as the Search results page, while being able to omit that module on others.
• Creating alternate layouts for articles that appear only in Category or Section views.
• Loading a JavaScript on only one or just a few pages.
• Splash or intro pages.
• Creating a module only page.

Read more: Layout Overrides

Construct aims to provide a highly usable solution "out of the box". However, one of the core goals of Construct is to maximize your ability to customize and tailor it to fit your needs. One way to accomplish this is by overriding the core styles and layouts generated by Construct's core CSS. As Your custom style sheet will always load after Construct's core style sheets, your declarations will take precedence.

For example, you can override the default widths of the content area columns by adding a declaration like the following to your custom style sheet:

.alpha-1-main #load-first{width:100%}
.alpha-1-main #content-main{float:right;width:61% !important;width:59%}
.alpha-1-main #column-group-alpha{float:left;width:39%}

Overriding core styles are best accomplished with the aide of tools like FireBug or Webkit's Web Inspector. These tools will help your determine, preview, and even troubleshoot  your changes to core styles.

Generally speaking, there are very few files in Construct that you'll ever need to edit. The files not affected by upgrades are safe to edit without worry of loosing your customizations when upgrading.

Files not affected by upgrades

Adding your unique look via a custom style sheet or layout override is the best way to customize Construct. Any custom style sheet and extended template overrides will NOT be affected by an upgrade. Generally speaking, any file that you add to the /layouts and /css directory and sub-directories are safe.

Starting with Joomla! 1.6, custom core overrides that differ from those provided by Construct, should be created by use of Joomla's native Alternative Layout Feature.

Files affected by upgrades

Files other than the ones that you add to the /layouts, /css, and /html directory and sub-directories, will be overwritten by an upgrade.

For example, some users may wish to customize Construct's core CSS. If you do so, it will be overwritten and you will loose your customization. In this case, you should leverage the cascade and create a custom declaration that overrides Construct's core style declaration.

Any files that you change should be backed up before upgrading, if you choose to upgrade. After the upgrade is complete, your backed up files can be restored into the new version of Construct, or differences merged.

To change the graphic used for the site logo, the recommended method is to add the following style to your custom CSS, where logo.png is the name of your logo image and the width and height are set accordingly:

#logo a:link,
#logo a:visited,
#logo a:hover{background:url(../images/logo.png) 0 0 no-repeat;width:300px;height:103px;}

To change the logo to display your Site Name instead of a graphic, add the following style to your custom CSS:

#logo a:link,
#logo a:visited,
#logo a:hover{background:none;width:auto;height:auto;text-indent:0}

To completely remove or move the logo, either delete or move the following code in your template's layouts/index.php file:

<h1 id="logo"><a href="/" title=""><?php echo $app->getCfg('sitename');?></a></h1>

By default, Construct will size adjacent module and content column widths proportionality. For example, if there are two modules side by side, each will be 50% of the total space available. In same cases, you may wish to change this behavior and disproportionately size certain modules.

In this example, we want have three modules side by side,  and we would like the first to occupy 50% of the available width, and the two remaining modules to each be 25%. Since we have three modules side by side, they are 33% by default.

If we know the specific module positions that we wish to customize the widths for, we can simply add specific rules to our custom style sheet. For example

#content-above-1 {width:50%;}
#content-above-2 {width:25%;}
#content-above-3 {width:25%;}

We can also make use of other CSS techniques and create less specific rules such as:

#content-above div:nth-of-type(1){width:50%;}
#content-above div:nth-of-type(2){width:15%;}
#content-above div:nth-of-type(3){width:15%;}

The above example does not rely on using specific module positions.

The "Jump to" links in Construct are hard-coded in-page links that appear if content is published in the corresponding portion of the page. For example, the Navigation link will only be visible if a module is published in the nav position.

The code used in Contruct for this link is:

<?php if ($this->countModules('nav')) : ?>
	<li><a href="/<?php $url->setFragment&'nav'); echo $url->toString();?>" class="to-nav">Navigation</a></li>
<?php endif; ?>>
			

Add your own in-page links by duplicating and modifying this code appropriately, and by adding the corresponding anchor tag that would be in place of nav after $url->setFragment('nav');

Removing the in-page links is accomplished by deleting their corresponding code from your layout override.

When using a fluid or responsive layout, one of the biggest issues is that images tend to break out their containing elements, as they are generally coded with a width and height attribute. To handle media in a responsive manner, we have added an elegant technique pioneered by Ethan Marcotte at http://unstoppablerobotninja.com/entry/fluid-images/ . When adding your images to an article, you omit the width and height attribute and the template, when the Fluid Media parameter is set to Yes, will insert the following CSS:

 img, object {max-width:100%}

This will ensure that your images are not wider than 100% and will break out of their containing elements. Notice that we also included the object tag for media like Flash animations.