Advanced Theme Concepts

Theme Caching & Configuration Simplified

When editing a theme’s template, CSS, or LESS files, disable all caches at Dashboard > System and Settings > Optimization > Cache and Speed Settings. Remember to re-enable them after editing.

Theme CSS Cache

Controls LESS file values caching by the LESS CSS Parser.
Turn off when customizing, usually safe to keep on otherwise.

Compress LESS Output

Minifies .less files into .css, making them smaller but harder to read.
Turn off for debugging CSS issues; otherwise, keep on.

CSS and JavaScript Cache

Used by the Asset Caching System, not for customization.
Best turned off during theme development; turn on in production.

Responsive Images in Concrete CMS Themes Simplified

Concrete CMS allows creating multiple thumbnails for different screen sizes, optimizing image display and bandwidth usage.

Creating Thumbnail Types

Elemental Theme creates three thumbnail types: Small, Medium, and Large.
Accessible via Dashboard > System & Settings > Files > Thumbnails.
Add custom thumbnail types during the theme installation process.
Use provided code to check and create thumbnail types like 'small'.

Utilizing Thumbnail Types

Small, Medium, and Large thumbnails cater to different maximum widths.
Apply these thumbnails based on browser widths:
- Use 'Large' for browsers over 900 pixels wide.
- 'Medium' for widths between 768 and 900 pixels.
- 'Small' for under 768 pixels.

Mapping Screen Widths to Thumbnails

Implement a method in the PageTheme class to map screen widths to thumbnail types.
The array keys are thumbnail types, and values are CSS minimum pixel widths.
Responsive images will be used in core image blocks and Rich Text Editor-inserted images.

Implementing Responsive Images

Use the \Concrete\Core\Html\Image class to build responsive <picture> elements.
This class automatically creates the appropriate image tag, considering the theme's responsive image map.
Include the picturefill JavaScript asset for browser compatibility.

In summary, Concrete CMS's thumbnailing system, combined with custom code and the \Concrete\Core\Html\Image class, facilitates the creation of responsive websites with efficiently displayed images.

Setting Theme for Specific Pages

To apply your theme to system pages like /login or /register in Concrete CMS:

Open or create application/config/app.php.
The file should contain a PHP array, initially empty:
```
<?php
return array();
```
In concrete/config/app.php, find the 'theme_paths' array mapping system paths to theme handles:
```
'theme_paths' => array(
    '/dashboard' => 'dashboard',
    // other paths...
),
```

To override a path like /login with your theme, add to application/config/app.php:

<?php
return array(
    'theme_paths' => array(
        '/login' => 'elemental',
    ),
);

This setup overrides the theme for specified paths.

Area Functions in Concrete CMS

Count Blocks in Areas

Count blocks in regular and global areas:

Regular Area

$a = new Area("Main");
print $a->getTotalBlocksInArea($c);

Global Area

$a = new GlobalArea("Header Nav");
print $a->getTotalBlocksInArea();

Use case: Show content based on block count or edit mode:

$as = new GlobalArea('Header Search');
$blocks = $as->getTotalBlocksInArea();
$displayThirdColumn = $blocks > 0 || $c->isEditMode();

if ($displayThirdColumn) { ?>
    <div class="search-column">
        <h3>Search</h3>
        <? $as->display()?>
    </div>
<? } ?>

Auto Custom Templates for Block Types

Automatically set custom templates for specific block types:

$a = new Area('Main');
$a->setCustomTemplate('image', 'theme_pic.php');
$a->setCustomTemplate('content', 'paragraphs.php');
$a->display($c);

Note

Single file custom template: Include .php.
Custom template bundle: Omit .php extension.

Get Block Objects in Area

Retrieve blocks in an area without displaying:

$a = new Area('Main');
$blocks = $a->getAreaBlocksArray($c);

Area API Reference

API Reference

Custom Layout Presets in Concrete CMS

Concrete allows complex layout presets in themes beyond UI capabilities. Define these in page_theme.php for advanced layouts. Example: Bootstrap Grid for varied column arrangements across devices.

Defining Custom Presets

Edit your theme's page_theme.php:
- Located at either application/themes/your_theme/page_theme.php or packages/your_package/themes/your_theme/page_theme.php.

Import and implement ThemeProviderInterface:

For Application:

namespace Application\Theme\YourTheme;
use Concrete\Core\Area\Layout\Preset\Provider\ThemeProviderInterface;
class PageTheme extends \Concrete\Core\Page\Theme\Theme implements ThemeProviderInterface { }

For Package:

namespace Concrete\Package\YourPackage\Theme\YourTheme;
use Concrete\Core\Area\Layout\Preset\Provider\ThemeProviderInterface;
class PageTheme extends \Concrete\Core\Page\Theme\Theme implements ThemeProviderInterface { }

Add getThemeAreaLayoutPresets() method to define custom presets with HTML for containers and columns.

Example Preset for Bootstrap Grid:

public function getThemeAreaLayoutPresets() {
   $presets = array(
       array(
           'handle' => 'medium_two_large_four',
           'name' => 'Medium Two Large Four',
           'container' => '<div class="row"></div>',
           'columns' => array(
               '<div class="col-md-6 col-lg-3"></div>',
               '<div class="col-md-6 col-lg-3"></div>',
               '<div class="col-md-6 col-lg-3"></div>',
               '<div class="col-md-6 col-lg-3"></div>'
           ),
       )
   );
   return $presets;
}

Custom Presets for Non-Bootstrap Grids: Even with unconventional classes like "one-third" and "two-thirds", define them as custom presets.

Example Left Sidebar Preset:

public function getThemeAreaLayoutPresets() {
   $presets = array(
       array(
           'handle' => 'left_sidebar',
           'name' => 'Left Sidebar',
           'container' => '<div></div>',
           'columns' => array(
               '<div class="one-third"></div>',
               '<div class="two-thirds"></div>'
           ),
       )
   );
   return $presets;
}

These presets will appear in the Layout dropdown, offering advanced layout options beyond the default UI.