Construct Framework - Adding Additional Style Sheets, JavaScript, etc.

Adding Additional Style Sheets, JavaScript, etc.

Last Updated on Monday, 27 August 2012 18:56

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>');

Search