Ever wanted to render breadcrumbs just below the article title when only viewing a single article? Well, I did! So, I added the following code to /templates/construct5/html/com_content/article/default.php to just after <php endif;> on line 74:

<?php
    $doc      = JFactory::getDocument();
    $renderer = $doc->loadRenderer('modules');    
    $xhtml    = array('style' => 'xhtml');
    echo $renderer->render('breadcrumbs', $xhtml, null) ?>

and viola!

The following CSS, based on the work of Gwen Ames of 4Web, can be added to your custom style sheet as the basis of your very own mega-menu.

Thanks Gwen!

Read more: Building a CSS Mega Menu

Creating Responsive Web Design can be achieved by adding CSS3 media queries to your template. The following example implements three different layouts, based on the visitor's browser view port, that can be customized and added it to your custom style sheet. Take note that we accounted for the various column layouts as well as included an example of resizing the module widths in the narrow view.

This example uses the proportional, relative measurement of ems, set relative to Construct's default body{font-size:76%;}. This font size is 12px in most modern browsers, and is used as the basis of Construct's default fluid layout and typography.

Read more: CSS3 Media Queries

By default, sub-menus in Construct are 16em wide. You can easily change them to be another width, by declaring it in your custom style sheet, or you can override this declaration so that each sub-menu is automatically sized based on it's widest item.

To do this add the following CSS to your custom style sheet.

ul.menu ul {
    width: auto;
}
ul.menu ul li a{
    white-space:nowrap;
}

It is possible to center the content (i.e. logo, modules, etc.) contained within full width elements such as the header and footer. To do so, you will need to create an layout override and add an extra centering division to contain the content that you wish to center.

Read more: Centering Content Within Full Width Elements

Construct can be renamed by making a few changes. These changes are made to templateDetails.xml and the language files. This is generally best done before installing Construct.

1. Extract the contents of the installation package into a work directory on your computer.
2. Open templateDetails.xml in your favorite code editor.
3. Change the contents of the <name>tag to the template's new name, as well as every occurrence of what was in it.

   Be mindful of the text case (upper vs lower) as the standard convention is to use ALL CAPS for language strings (i.e. TPL_CONSTRUCT5_ENABLE_SWITCHER_LABEL), and lower case for directory paths (i.e./templates/construct5/elements/) and the name of the template.

4. Rename the language files appropriately to reflect the new name. For example, if you are changing the name to "Lucid", en-GB.tpl_construct5.ini becomes en-GB.tpl_lucid.ini
5. Open the language files and change the language strings within them. For example, TPL_CONSTRUCT5_ENABLE_SWITCHER_LABEL becomes TPL_LUCID_ENABLE_SWITCHER_LABEL.
6. Archive the contents, of what you extracted in step 1, back into an installation package (ZIP files).

Template names should not contain any spaces in them (hyphens and underscores are okay) and may need to be all lowercase.

If you rename your template, you will not be able to upgrade it without first renaming the latest Construct installation package to reflect this name. You can do this by following the above procedure.

Creating your own custom style sheet switcher can be accomplished through the use of an extended layout override. This will allow you to upgrade Construct without fear of loosing your customizations. 

To create your custom style sheet switcher, you will need three main ingredients:

1. The styleswitch.js JavaScript, which is already included with Construct.
2. The alternate style sheets that you wish to switch between.
3. The hyperlinks that will trigger the style sheet switching.

Read more: Creating a Custom Style Sheet Switcher

Construct Pro and Construct Unified automatically support the ability to group extended template overrides through a simple naming convention. This allows you the capability to create selectable themes and an infinite number of unique templates, each loaded from the Construct template administrative screen.

To create a group of extended template overrides, that only load when a certain custom style sheet is selected, pre-pend the file name of each extended template override with the name of the corresponding custom style sheet. For example, to create a theme named hardwood, that has a unique extended layout override, you would create a custom style sheet named hardwood.css and the main extended layout override, located in templates/je-construct-xxx/layouts/ would be named hardwood-index.php. You can follow this same naming convention for other extended template overrides, such as article specific CSS and layouts.

Migrating your look between different versions shouldn't require that much work as they use the same template structure, similar core CSS, and logic.

1. Start by backing up your entire website.
2. Install the new version that you are migrating to.
3. Manually copy /layouts/index.php, any custom CSS, images, fonts...etc from the source template directory to the target template directory.
4. Set the new template as your default template.
5. View your site and take note of any CSS adjustments that may be required.

As of version 1.x.519, Construct automatically supports the ability to group extended template overrides through a simple naming convention. This allows you the capability to create selectable themes and an infinite number of unique templates, each loaded from the Construct template administrative screen.

To create a group of extended template overrides, that only load when a certain custom style sheet is selected, pre-pend the file name of each extended template override with the name of the corresponding custom style sheet. For example, to create a theme named hardwood, that has a unique extended layout override, you would create a custom style sheet named hardwood.css and the main extended layout override, located in templates/je-construct-xxx/layouts/ would be named hardwood-index.php. You can follow this same naming convention for other extended template overrides, such as article specific CSS and layouts.