[Concrete CMS v9.3.3] Bootstrap 5.3 grid in custom theme

Hi all,

I’m using a custom theme for my website, and when I go to Add Layout to an area, I’m only seeing the Free-Form Grid in the dropdown options.

Worth noting is that I’m using a modified BS5.3 file in my templates that’s been renamed:

<link rel="stylesheet" href="<?= $view->getThemePath() ?>/css/deniger.css">

So, what I did was create a page_theme.php file, and a grid_framework_presets file, both in my theme’s folder.

Here’s the page_theme.php file:

<?php

namespace Application\Theme\Portfolio2024;

use Concrete\Core\Page\Theme\Theme;

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

	public function registerAssets()
	{
		// Register Bootstrap 5.3
		$this->requireAsset('javascript', 'bootstrap5');
		$this->requireAsset('css', 'bootstrap5');
		$this->requireAsset('css', 'deniger');
	}

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

	public function getThemeDescription()
	{
		return t('Philippe Deniger // Creative Director');
	}
}

And here’s the grid_framework_presets.php file:

<?php

return [
	'grid_framework_presets' => [
		'bootstrap5' => [
			'name' => 'Bootstrap 5.3',
			'container' => '<div class="container">',
			'container-fluid' => '<div class="container-fluid">',
			'row' => '<div class="row">',
			'columns' => [
				'<div class="col-sm-%s">' => 'grid-column-width-sm',
				'<div class="col-md-%s">' => 'grid-column-width-md',
				'<div class="col-lg-%s">' => 'grid-column-width-lg',
				'<div class="col-xl-%s">' => 'grid-column-width-xl',
				'<div class="col-xxl-%s">' => 'grid-column-width-xxl',
				'<div class="offset-sm-%s">' => 'grid-column-offset-sm',
				'<div class="offset-md-%s">' => 'grid-column-offset-md',
				'<div class="offset-lg-%s">' => 'grid-column-offset-lg',
				'<div class="offset-xl-%s">' => 'grid-column-offset-xl',
				'<div class="offset-xxl-%s">' => 'grid-column-offset-xxl',
			],
			'columns_end' => '</div>',
			'additional_classes' => '',
		],
	],
];

And with these files, I still don’t get the BS grid when I go to Add Layout, just the Free-Form Grid.

I’m not quite sure what I’m doing wrong, here.

So, how can I make sure I get the BS grid in my area layouts?

Many thanks!

Take a look here
/concrete/src/Page/Theme/GridFramework/Type

I’ve seen that, but I’m not entirely sure what you’re getting at with regards to what I’ve posted above.

Hello.
Instead of

protected $pThemeGridFrameworkHandle = 'bootstrap5';

try

    public function getThemeGridFrameworkHandle(): string
    {
        return 'bootstrap5';
    }

From the core I think the protected variable was retired.

Thanks for that! Unfortunately, that didn’t work either, it’s not turning up in my Add Layout grid options.

I’m at a total loss to figure this out.

So, a bit of an update:

Here is my page_theme.php file in my theme’s folder:

<?php
namespace Application\Theme\Portfolio2024;

use Concrete\Core\Page\Theme\Theme;

class PageTheme extends Theme

{
	public function getThemeGridFrameworkHandle()
	{
		return 'bootstrap5';
	}

	public function setupTheme()
	{
		$this->requireAsset('css', 'bootstrap');
		$this->requireAsset('javascript', 'bootstrap');
	}

}

For funsies, I decided to try uninstalling and re-installing my theme via the CMS. When I clicked Install, I got this major error thrown at me:

 Illuminate \ Contracts \ Container \ BindingResolutionException
Target class [\Application\Theme\Portfolio2024\PageTheme] does not exist.
Previous exceptions

    Class \Application\Theme\Portfolio2024\PageTheme does not exist (-1)

Which is bullshit, really, because I’m looking at that very folder on the server right now, via my coding app (Panic Nova), and my FTP client (FileZilla).

Now, I’m at a total loss.

I have my own css framework (Not BS) and put it in my theme/src/boxx.php and reference to it by adding:

protected $pThemeGridFrameworkHandle = ‘boxx’; to my ‘page_theme.php’ file. Then when adding a layout I have two options ‘boxx’ or ‘Free-Form Layout’. Not sure if that’ll help.

Layout

In your page types do you enable the grid container on each area?

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

I actually use:

<?php
				$a = new Area('Container for additional layout for project assets');
				$a->setAreaGridMaximumColumns(12);
				$a->display($c);
			?>

Because I already have a container hard-coded in the template, in which I want to add rows and columns.

Maybe try adding $a->enableGridContainer();

Okay, so after some substantial figurative hair-pulling, I decided to try using custom containers. Have an elements > containers structure set up in my custom theme’s folder, the php file is populated:

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

use Concrete\Core\Area\ContainerArea;

?>
<div class="container-fluid">
	<div class="row">
		<div class="col-12">
			<?php
			$area = new ContainerArea($container, 'Asset type');
			$area->display($c);
			?>
		</div>
		<div class="col-12">
			<?php
			$area = new ContainerArea($container, 'Asset');
			$area->display($c);
			?>
		</div>
	</div>
</div>

I’ve added the container in Pages & Themes > Containers. No errors.

However, the container template down’t show up in the Blocks list when I go to add it on an area.

FYI, here’s the area markup in the HTML for the page template:


<?php
			$a = new Area('Container for additional layout for project assets');
			$a->display($c);
		?>

How do I get this to work? I really need those custom templates, because of the flexibility it will give me for individual project pages in my portfolio.

Many thanks!

That should work.

If you call the container 2_col_layout.php

The add it in the container gui with a handle 2_col_layout does it show?

Have you cleared cache and/or database entities?

If you mean the container list under Pages & Themes > Containers, yeah it shows in the list.

Also, yeah, cache cleared, still no joy.

Something about the theme installation or cms install sounds wrong.

If you email me i can take a look
hello@tm-designs.co.uk

Thanks, but a last — at long last — I finally got everything to work. How?

… by using lower case in the first letter of my theme folder, instead of a capital letter.

Hours.
Wasted.
Ugh!

Everyday is a school day

For the namespace

namespace Application\Theme\Portfolio2024

portfolio2024 = Portfolio2024
port_folio2024 = PortFolio2024

It uses camel case

2 Likes

I added a link to the coding standards page from the Packaging a Theme documentation. Hopefully that will make those naming conventions clearer.

1 Like