So my question was how to automate the stylesheet loading and in particular how to load a stylesheet that is not known about until after the header section of the page has already been written. This post could also be called ‘How to load stylesheets in the body of a page via PHP and Javascript’.

To test this copy the compromise template directory as compromise-sl or similar. In an earlier post I described some changes to copy and modify configure_bts.php to address the handling of core file modification. I am working from that base in this.

Most of the code is contained in two files loadstylesheets.php and its partner loadstylesheets.js. The link to a download is at the bottom of this post. Read through first and then try it.

Copy the includes directory from the zip to your template directory so that the files appear under an includes and includes/javascript directories respectively. This copies the core structure. Included is a modified configure_bts.php to simplify things.

In the template directory you should have a main_page.code.php file and it will have something like this at the top in the {stylesheet} section.

[php]
//begin{stylesheet}
?>
<link rel="stylesheet" type="text/css" href="<?php echo (bts_select(‘stylesheet’,’stylesheet.css’)); // BTSv1.5 ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo (bts_select(‘stylesheet’,’print.css’)); // BTSv1.5 ?>" media="print" />
<?php
//end{stylesheet}
[/php]

The example above is from the Compromise template in osCmax.
[php]
//begin{stylesheet}
require_once(DIR_WS_TEMPLATES.’includes/loadstylesheets.php’);
$stylesheetArray = getAllStylesheets();
$loadStylesheetArray = array();
$loadStylesheetArray = includeStylesheet(‘stylesheets.css’);
$loadStylesheetArray = includeStylesheet(‘print.css’);
$loadStylesheetArray = includeStylesheet(basename($PHP_SELF,’.php’). ‘.css’);
$loadStylesheetString = implode(":#:",$loadStylesheetArray);
$loadStylesheetArray = array(); // ready for re-use
?>

<script type="text/javascript">
var stylesheetArray = "<? print $loadStylesheetString; ?>";
</script>
<script type="text/javascript" src="<?php echo DIR_WS_TEMPLATES_JAVASCRIPT . ‘loadstylesheets.js’;?>"></script>

<?php
//end{stylesheet}
[/php]

It starts by including the php file and then building the array that finds all the stylesheets that exist in the template directory structure. This is so that you don’t need to declare a path just the unique stylesheet file name. Obviously this implies that you only have unique filenames. store.css in the root and store.css in a sub-directory will clash and one will be ignored.

Next using the includeStylesheet() function to add the required stylesheets that are going to be used for the page. This is still within the header stylesheet section so that these styles are displayed as the page is being rendered in the browser.

Finally the php code is done and the control swaps to the javascript. It is run when the page loads and it adds all the requested stylesheets from the array into the page.

So what next?

The bonus here is that this can be used again at the end of the body of the page to apply any stylesheets that were not ‘known’ about until later in the page.

Somewhere near the bottom of the main_page.code.php file will be the footer entry.

[php]
//end{footer}

//begin{banner}
[/php]

Updated: In the {footer} section place the additional StyleSheetLoader code. This was updated for a fix to the footer section post the release of v2.5 of osCmax.

[php]
//begin{footer}
// BOF Added: Down for Maintenance Hide footer.php if not to show
if (DOWN_FOR_MAINTENANCE == ‘false’ or DOWN_FOR_MAINTENANCE_FOOTER_OFF ==’false’) {
echo ‘<!– footer //–>’;
echo FOOTER_TEXT_BODY;
echo ‘<!– footer_eof //–>’;
// box and other stylesheets loaded after the header info need to be included
$loadStylesheetString = implode(":#:",$loadStylesheetArray);
$loadStylesheetArray = array();
?>
<script type="text/javascript">
var stylesheetArray = "<? print $loadStylesheetString; ?>";
</script>
<script type="text/javascript" src="<?php echo DIR_WS_TEMPLATES_JAVASCRIPT . ‘loadstylesheets.js’;?>"></script>
<?php
}
//end{footer}
[/php]

This code will run just the same as the one in the header and will include the any other stylesheets that have been loaded.

The final piece of the puzzle is to add the following into the box scripts or any other file that is loading as a part of your page or template. In this case I added it into the column_left.php file which is a core file in /includes but only after I copied it to the /templates/compromise-sl/includes/ directory to retain the core files for normal templates.

In column_left.php
[php]
if ( file_exists(DIR_WS_BOXES . $column[‘cfgtitle’] . ‘.php’) ) {
require(DIR_WS_BOXES . $column[‘cfgtitle’] . ‘.php’);
}
[/php]

Change to:

[php]
if ( file_exists(DIR_WS_BOXES . $column[‘cfgtitle’] . ‘.php’) ) {
$loadStylesheetArray = includeStylesheet($column[‘cfgtitle’] . ‘.css’);
require(DIR_WS_BOXES . $column[‘cfgtitle’] . ‘.php’);
}
[/php]

This means that if a box has a specific stylesheet it will be included in the load that is done at the end of the main_page.code.php execution.

Download the StylesheetLoader zip file and install into a template in osCmax or download the Blueprint template with the StylesheetLoader embedded as examples.

Having two stylesheets with the same name will load both files possibly creating a mess in the layout.

When it came to using this with the Blueprint framework there was a clash of file names with blueprint/print.css clashing with the default print.css and screen.css appearing in the plug-in directories. I have renamed the blueprint framework files to prevent the clash of file names.

blueprint/print.css -> blueprint/bp-print.css
blueprint/plugins/fancy-type/screen.css -> blueprint/plugins/fancy-type/fancy-type.css
etc.