Removing features such as the date, in-page links, and the back to top link, can all be removed from your template by use of a layout override. If you use the extended layout override that is included in the template installation package's layout folder, removing features is easily accomplished by deleting their corresponding code. The following code blocks illustrate the feature they correspond to, and the code that you need to remove to remove that feature.

Date

<div class="date-container">
	<span class="date-weekday"><?php	$now = &JFactory::getDate(); echo $now->toFormat('%A').','; ?></span>
	<span class="date-month"><?php 		$now = &JFactory::getDate(); echo $now->toFormat('%B'); ?></span>
	<span class="date-day"><?php 		$now = &JFactory::getDate(); echo $now->toFormat('%d').','; ?></span>
	<span class="date-year"><?php 		$now = &JFactory::getDate(); echo $now->toFormat('%Y'); ?></span>
</div>

In-page Links

<ul id="access">
  <li>Jump to:</li>
  <li><a href="/<?php $url->setFragment('content'); echo $url->toString();?>" class="to-content">Content</a></li>					
  <?php if ($this->countModules('nav')) : ?>
	<li><a href="/<?php $url->setFragment('nav'); echo $url->toString();?>" class="to-nav">Navigation</a></li>
  <?php endif; ?>					
  <?php if ($contentBelowCount) : ?>
	<li><a href="/<?php $url->setFragment('additional'); echo $url->toString();?>" class="to-additional">Additional Information</a></li>
  <?php endif; ?>
</ul>

Back To Top

<a id="to-page-top" href="/<?php $url->setFragment('page-top'); echo $url->toString();?>" class="to-additional">Back to Top</a>

To customize the column widths of your template, add the following CSS declarations to your custom style sheet and adjust them as needed. These will override the core column widths, which are found in screen.css.

.main-only #content-main{float:left;width:100%;}
.main-only #load-first{width:100%;}

.alpha-1-main #load-first{width:100%;}
.alpha-1-main #content-main{float:right;width:81%;}
.alpha-1-main #column-group-alpha{float:left;width:19%;}

.alpha-2-main #load-first{width:100%;}
.alpha-2-main #content-main{float:right;width:62%;}
.alpha-2-main #column-group-alpha{float:left;width:38%;}

.main-beta-1 #content-main{float:left;width:100%;}
.main-beta-1 #load-first{width:81%;}
.main-beta-1 #column-group-beta{float:right;width:19%;}

.main-beta-2 #content-main{float:left;width:100%;}
.main-beta-2 #load-first{width:62%;}
.main-beta-2 #column-group-beta{float:right;width:38%;}

.alpha-1-main-beta-1 #load-first{width:81%;} 
.alpha-1-main-beta-1 #content-main{float:right;width:74.2%;}
.alpha-1-main-beta-1 #column-group-alpha{float:left;width:25.8%;}
.alpha-1-main-beta-1 #column-group-beta{float:right;width:19%;}

.alpha-2-main-beta-1 #load-first{width:81%;} 
.alpha-2-main-beta-1 #content-main{float:right;width:62%;} 
.alpha-2-main-beta-1 #column-group-alpha{float:left;width:38%;}
.alpha-2-main-beta-1 #column-group-beta{float:right;width:19%;}

.alpha-1-main-beta-2 #load-first{width:62%;} 
.alpha-1-main-beta-2 #content-main{float:right;width:65.5%;}
.alpha-1-main-beta-2 #column-group-alpha{float:left;width:34.5%;}
.alpha-1-main-beta-2 #column-group-beta{float:right;width:38%;}

.alpha-2-main-beta-2 #load-first{width:62%;} 
.alpha-2-main-beta-2 #content-main{float:right;width:38%;} 
.alpha-2-main-beta-2 #column-group-alpha{float:left;width:62%;}
.alpha-2-main-beta-2 #column-group-beta{float:right;width:38%;}

Construct dynamically changes the body class, and column width, based on the above rules. These classes change based on whether or not content is published in the corresponding content areas.

We use a few nested divisions to source order our content and to control the overall layout and widths.

#load-first is the division which contains #content-main and #column-group-alpha. #content-main contains the component area and the #content-above and content-below modules. #column-group-alpha contains #column-1 and #column-2.#column-group-beta contains #column-3 and #column-4.

The #load-first and #column-group-beta divisions are on the same level and #load-first will always be 100% as long as nothing is published in #column-3 and #column-4. If something is published in #column-3 and/or #column-4, the width of #load-first and #column-group-beta need to add up to 100%. In other words:

#load-first = 100% - #column-group-beta.

#load-first + #column-group-beta = 100%

#content-main + #column-group-alpha = #load-first

Construct supports adding a single custom style sheet, selectable via the Template Manager, to allow you to create one or many variations of your template. Simply add one or many style sheets to the /templates/construct/css directory and then select the desired style sheet by using the Custom style sheet option on the Template Edit screen.

Style sheets, and other assets like JavaScript, can also be added with the use of a layout override (i.e. templates/construct5/layouts/index.php). This technique does not limit the quantity, or even order, of assets that you can add. We highly recommend using Joomla's JDocument PHP class to do this. Style sheets can be linked with JDocument/addStyleSheet, style declarations added with JDocument/addStyleDeclaration, JavaScript linked with JDocument/addScript, and internal JavaScript added with JDocument/addScriptDeclaration. You can also use JDocumentHTML to add custom tags, favicons, and link to the head of the document.

For example, you could add a number of style sheets by placing the following code in the initial PHP block of your extended layout override.

<?php defined('_JEXEC') or die;
/**
* @package		Template Framework for Joomla!
* @author		Matt Thomas http://construct-framework.com | http://betweenbrain.com
* @copyright	Copyright (C) 2009 - 2012 Matt Thomas . All rights reserved.
* @license		GNU/GPL v2 or later http://www.gnu.org/licenses/gpl-2.0.html
*/
// Link to local stylesheet
$doc->addStyleSheet($template.'/css/custom-menu.css','text/css','screen');
// Add a custom tag
$doc->addCustomTag('<meta name="author" content="Matt Thomas" />');
// Add a png favicon
$doc->addFavicon('templates/' . $this->template . '/favicon.png','image/png','shortcut icon');
// Link a local JavaScript
$doc->addScript($template.'/js/styleswitch.js');
// Link a remote JavaScript
$doc->addScript('https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
// Link a remote stylesheet
$doc->addStyleSheet('http://fonts.googleapis.com/css?family=ubuntu');
// Make a style declaration that gets added to the document head
$doc->addStyleDeclaration(' body {font-family: "Ubuntu", serif;}');
?>

NOTE: The $template variable is already defined in logic.php file as templates/'.$this->template, which can be used for local files.

Construct load jQuery by use of the addCustomTag method to ensure that jQuery is loaded last. If adding JavaScript that is dependent on the version of jQuery that Construct is loading, add your script like

$doc->addCustomTag('<script type="text/javascript">foo.bar</script>');

Construct Pro and Construct Unified support customized error pages that can match your template. The error page is based on the standard Construct layout, contains a number of independently set parameter, and can be overridden using a layout override.

Customizing

The error pages are generated by error.php. Within the top portion of this file are a number of variables allowing the configuration of your error pages. These variables begin after the note // Manually set and define template parameters. Each variable coincides with a back-end parameter available within Construct and do need to be set manually regardless of what you set in the template manager. By default, these variables are pre-configured to the default settings used by Construct and will be suitable for most cases. The exception to this is $customStyleSheet which is the name of your custom style sheet. It will need to be set to the name of your custom style sheet.

error.php can also be overridden by creating a layout override in the layouts folder, named error.php. There is a starter error override file located in the installation package.