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

Using Concrete / Help
1

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!

2

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

3

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

4

Hello.
Instead of

protected $pThemeGridFrameworkHandle = 'bootstrap5';

try

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

From the core I think the protected variable was retired.

5

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.

6

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.

7

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

8

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

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

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.

10

Maybe try adding $a->enableGridContainer();

11

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!

12

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?

13

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

Also, yeah, cache cleared, still no joy.

14

Something about the theme installation or cms install sounds wrong.

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

15

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!

16

Everyday is a school day

For the namespace

namespace Application\Theme\Portfolio2024

portfolio2024 = Portfolio2024
port_folio2024 = PortFolio2024

It uses camel case

2 Likes
17

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