Adding grid to my own theme

hi there
i am building my own theme and tried to add a grid framework to the theme.
i followed these instructions and added the lines which were described:

but i still get the error:

No grid framework found. Grid area methods require a valid grid framework defined in a PageTheme class.

can anyone help? my page_theme.php has really only these lines in it:

<?php
namespace Application\Theme\MyTheme;

use Concrete\Core\Page\Theme\Theme;

class PageTheme extends Theme
{

}

The tutorial you followed says, under section “Add Grid Support to the Class File”, that you have to add this line to your file:

protected $pThemeGridFrameworkHandle = 'bootstrap3';

And replace bootstrap3 wit the handle you gave your own framework

hi mnakaly
thank you very much for your feedback!
i added this line in the page_theme.php but nothing happened – same error.

Could you share your whole code here? not just page_theme.php, the whole thing.

basically i have a theme made bymyself which works fine.
i just wanted to have the possibility to add containers and custom styles in the wysiwyg editor.

this is my page_theme.php

<?php
namespace Application\Theme\Snf2024;
class PageTheme extends \Concrete\Core\Page\Theme\Theme

class PageTheme extends Theme
{
    protected $pThemeGridFrameworkHandle = 'bootstrap5';
}

public function getThemeEditorClasses()
{
    return [
        ['title' => t('Title Thin'), 'menuClass' => 'title-thin', 'spanClass' => 'title-thin', 'forceBlock' => 1],
        ['title' => t('Title Caps Bold'), 'menuClass' => 'title-caps-bold', 'spanClass' => 'title-caps-bold', 'forceBlock' => 1],
        ['title' => t('Title Caps'), 'menuClass' => 'title-caps', 'spanClass' => 'title-caps', 'forceBlock' => 1],
        ['title' => t('Image Caption'), 'menuClass' => 'image-caption', 'spanClass' => 'image-caption', 'forceBlock' => '-1'],
        ['title' => t('Standard Button'), 'menuClass' => '', 'spanClass' => 'btn btn-default', 'forceBlock' => '-1'],
        ['title' => t('Success Button'), 'menuClass' => '', 'spanClass' => 'btn btn-success', 'forceBlock' => '-1'],
        ['title' => t('Primary Button'), 'menuClass' => '', 'spanClass' => 'btn btn-primary', 'forceBlock' => '-1'],
    ];
}

and this is my default.php:

<?php
defined('C5_EXECUTE') or die("Access Denied.");

$this->inc('elements/header.php');
?>

<main>
    <?php
    $a = new Area('Main');
    $a->enableGridContainer();
    $a->display($c);

    $a = new Area('Page Footer');
    $a->enableGridContainer();
    $a->display($c);
    ?>
</main>

<?php
$this->inc('elements/footer.php');

There’s an error in your code.
The closing bracket } you have after $pThemeGridFrameworkHandle shouldn’t be there. Remove it and put it at the end after the last closing bracket.

thank you very much for your feeback!

I still get this error… :sleepy:


No grid framework found. Grid area methods require a valid grid framework defined in a PageTheme class.

<?php
namespace Application\Theme\Snf2024;
class PageTheme extends \Concrete\Core\Page\Theme\Theme

class PageTheme extends Theme
{
    protected $pThemeGridFrameworkHandle = 'bootstrap5';

    public function getThemeName()
    {
        return t('SNF 2024');
    }

    public function getThemeDescription()
    {
        return t('Theme description comes here');
    }


public function getThemeEditorClasses()
{
    return [
        ['title' => t('Title Thin'), 'menuClass' => 'title-thin', 'spanClass' => 'title-thin', 'forceBlock' => 1],
        ['title' => t('Title Caps Bold'), 'menuClass' => 'title-caps-bold', 'spanClass' => 'title-caps-bold', 'forceBlock' => 1],
        ['title' => t('Title Caps'), 'menuClass' => 'title-caps', 'spanClass' => 'title-caps', 'forceBlock' => 1],
        ['title' => t('Image Caption'), 'menuClass' => 'image-caption', 'spanClass' => 'image-caption', 'forceBlock' => '-1'],
        ['title' => t('Standard Button'), 'menuClass' => '', 'spanClass' => 'btn btn-default', 'forceBlock' => '-1'],
        ['title' => t('Success Button'), 'menuClass' => '', 'spanClass' => 'btn btn-success', 'forceBlock' => '-1'],
        ['title' => t('Primary Button'), 'menuClass' => '', 'spanClass' => 'btn btn-primary', 'forceBlock' => '-1'],
    ];
}
}

You still have errors in your code. Here it is corrected:

<?php
namespace Application\Theme\Snf2024;

use Concrete\Core\Page\Theme\Theme;
use Concrete\Core\Area\Layout\Preset\Provider\ThemeProviderInterface;

class PageTheme extends Theme implements ThemeProviderInterface
{
    protected $pThemeGridFrameworkHandle = 'bootstrap5';

    public function getThemeName()
    {
        return t('SNF 2024');
    }

    public function getThemeDescription()
    {
        return t('Theme description comes here');
    }

    public function getThemeEditorClasses()
    {
        return [
            ['title' => t('Title Thin'), 'menuClass' => 'title-thin', 'spanClass' => 'title-thin', 'forceBlock' => 1],
            ['title' => t('Title Caps Bold'), 'menuClass' => 'title-caps-bold', 'spanClass' => 'title-caps-bold', 'forceBlock' => 1],
            ['title' => t('Title Caps'), 'menuClass' => 'title-caps', 'spanClass' => 'title-caps', 'forceBlock' => 1],
            ['title' => t('Image Caption'), 'menuClass' => 'image-caption', 'spanClass' => 'image-caption', 'forceBlock' => '-1'],
            ['title' => t('Standard Button'), 'menuClass' => '', 'spanClass' => 'btn btn-default', 'forceBlock' => '-1'],
            ['title' => t('Success Button'), 'menuClass' => '', 'spanClass' => 'btn btn-success', 'forceBlock' => '-1'],
            ['title' => t('Primary Button'), 'menuClass' => '', 'spanClass' => 'btn btn-primary', 'forceBlock' => '-1'],
        ];
    }
}

at least another error :grinning:

Class Application\Theme\Snf2024\PageTheme contains 1 abstract method and must therefore be declared abstract or implement the remaining methods (Concrete\Core\Area\Layout\Preset\Provider\ThemeProviderInterface::getThemeAreaLayoutPresets)

There is one more function that is required even if you’re not going to use it. I didn’t include it hence the error.

It the last one I added, named getThemeAreaLayoutPresets.

I left stuff in it so you can see what it does and how it works.

<?php
namespace Application\Theme\Snf2024;

use Concrete\Core\Page\Theme\Theme;
use Concrete\Core\Area\Layout\Preset\Provider\ThemeProviderInterface;

class PageTheme extends Theme implements ThemeProviderInterface
{
    protected $pThemeGridFrameworkHandle = 'bootstrap5';

    public function getThemeName()
    {
        return t('SNF 2024');
    }

    public function getThemeDescription()
    {
        return t('Theme description comes here');
    }

    public function getThemeEditorClasses()
    {
        return [
            ['title' => t('Title Thin'), 'menuClass' => 'title-thin', 'spanClass' => 'title-thin', 'forceBlock' => 1],
            ['title' => t('Title Caps Bold'), 'menuClass' => 'title-caps-bold', 'spanClass' => 'title-caps-bold', 'forceBlock' => 1],
            ['title' => t('Title Caps'), 'menuClass' => 'title-caps', 'spanClass' => 'title-caps', 'forceBlock' => 1],
            ['title' => t('Image Caption'), 'menuClass' => 'image-caption', 'spanClass' => 'image-caption', 'forceBlock' => '-1'],
            ['title' => t('Standard Button'), 'menuClass' => '', 'spanClass' => 'btn btn-default', 'forceBlock' => '-1'],
            ['title' => t('Success Button'), 'menuClass' => '', 'spanClass' => 'btn btn-success', 'forceBlock' => '-1'],
            ['title' => t('Primary Button'), 'menuClass' => '', 'spanClass' => 'btn btn-primary', 'forceBlock' => '-1'],
        ];
    }

    /**
     * @return array
     */
    public function getThemeAreaLayoutPresets()
    {
        $presets = [
            [
                'handle' => 'left_sidebar',
                'name' => 'Left Sidebar',
                'container' => '<div class="row"></div>',
                'columns' => [
                    '<div class="col-sm-4"></div>',
                    '<div class="col-sm-8"></div>',
                ],
            ],
            [
                'handle' => 'right_sidebar',
                'name' => 'Right Sidebar',
                'container' => '<div class="row"></div>',
                'columns' => [
                    '<div class="col-sm-8"></div>',
                    '<div class="col-sm-4"></div>',
                ],
            ],
        ];

        return $presets;
    }
}

i thank you so much!
it works! :slight_smile:

much appreciated!

Good luck with your project :slight_smile:

thanks very much! :slight_smile:
I am not sure if this is ironic :wink:

No not ironic. I’m not a native English speaker so I know I give the wrong impression sometimes.

It’s a curse :sweat_smile:

1 Like