[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
18

@Myq you might want to discuss this with the rest of the team but in the days of Concrete 5.6 and older, the documentation was really designed for non-developers. What I mean is it didn’t make any assumptions and was clearly stating what a handle should look like (small caps and underscores only) and how to use them for file names and stuff like that…

If that documentation still exists somewhere, you might want to take a look and see how it made things straightforward.

The documentation now makes too many assumptions about what people know and don’t know IMHO in its structure and in what it explains or doesn’t explain.

3 Likes
19

For a blast from the past, the legacy documentation can be found here: https://legacy-documentation.concrete5.org

If you have specific recommendations, I’m happy to revise where possible. The thinking with some of the newer revisions was to try to DRY out the documentation a bit because it becomes inconsistent and unmanageable if the same thing is described in multiple places.

It’s difficult to meet the expectations of new developers with a reference format, but it’s also frustrating to experienced developers who just need a quick answer to have to read through a wall of narrative text to find one simple detail. So, there are two types of documentation for developers: a reference-type format and tutorials. The tutorials would be more like the documentation you are referring to and are more verbose and explanatory. For example, you can find more narrative details of making a package here: Create the Empty Package Code :: Concrete CMS

20

I agree, the situation needs urgent improvements. Specially for the unexperienced, the newcomers and even the developers.

The reason why ConcreteCMS is falling short beiing a true Open-Source CMS: Documentation!

The information is scattered in different points of access, versions, URL’s and time.

1 Like