Add custom CSS and Javascript

CSS

Using LocalFiles Editor plugin

You can add custom CSS using LocalFiles Editor Plugin -> Custom CSS tab

Using the theme's built-in local CSS feature

In Administration -> Themes -> Bootstrap Darkroom -> Configuration -> Appearance tab -> Custom CSS you can add CSS directly, or upload it to local/bootstrap_darkroom/custom.css.

Using a rules.css file

You can add your custom CSS to local/css/rules.css (affects all themes), or local/css/bootstrap_darkroom-rules.css (affects only Bootstrap Darkroom).

Javascript

Inline scripts, e.g. with PersoFooter, PWGstuffs etc.

Important: by default all JS files are loaded in the footer, including jQuery and Bootstrap.js.

If you want to add inline javascript that depends on one of those, for example using PersoFooter plugin for site-wide code, you can use $conf['bootstrap_darkroom_core_js_in_header'] = true; in local/config/config.php (e.g. using LocalFiles Editor).

This is not required for pages generated with AdditionalPages plugin, for that one they get loaded in header by default. Also this is not required for pure Javascript.

The recommended way to add custom scripts is to use one of the following methods

Using local_head.tpl file

You can add custom javascript code by placing a file called local_head.tpl in themes/bootstrap_darkroom/.

This file is persistent, will not be overwritten by theme updates, and uses the standard template syntax, like so:

{footer_script require='jquery'}
$(document).ready(function() {
  console.log('Hello!');
});
{/footer_script}

This way you can also add local javascript files easily.

{combine_script id='my.js' path='local/mystuff/feature.js' require='jquery' load='footer'}

The path is relative to the Piwigo root folder.

Using Personal Plugin

Another way is to write a personal plugin.

1. Go to Administration -> Plugins -> LocalFiles Editor -> Personal Plugin
2. Paste this code somewhere between the <?php ... ?> tags:

add_event_handler('init', 'add_my_custom_js');
function add_my_custom_js() {
 global $template;

 $script_content = <<<EOT

$(document).ready(function() {
 console.log('document ready!')
})

EOT;
 $template->block_footer_script(array('require' => 'jquery'), $script_content);
}

The javascript code needs to be between the <<<EOT...EOT.

3. Enable the Personal Plugin in Administration -> Plugins -> Manage