Problems with a Bootstrap 3 Custom Theme

Permalink 2 users found helpful
I have been a C5 developer for a couple of years now, but this is the first time I'm working the version 5.7.

I have created a custom theme with the latest version of Bootstrap 3, and it seems i have messed up. I feel like there is some kind of conflict between Bootstrap and C5. I have messed up some of basic C5 functionalities like adding/editing a block.

Is there a proper way of creating custom themes with this framework?

kenchi09
 
hutman replied on at Permalink Reply
hutman
In your page_theme.php in your theme folder do you have the lines

$this->providesAsset('css', 'bootstrap/*');
$this->providesAsset('javascript', 'bootstrap/*');


To tell C5 that you are providing bootstrap and it shouldn't include it's version?
kenchi09 replied on at Permalink Reply
kenchi09
Hi hutman,

I've seen that code snippet from another question posted here in the forums. Does it require this line too?
$this->providesAsset('javascript', 'jquery/*');

Or not? Will those two lines suffice and I will just add bootstrap.min.js somewhere in my footer?

What exactly does this page_theme.php file do?
kenchi09 replied on at Permalink Reply
kenchi09
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi kenchi09,

If you are using Bootstrap 3's jQuery plugins, you will need to supply a copy of jQuery with your theme or require that concrete5 load it for you (jQuery needs to be loaded in the head). Each option requires you to tell concrete5 about it.

Tell concrete5 that you will be providing a copy of jQuery with your theme:
- providesAsset()
$this->providesAsset('javascript', 'jquery');

Tell concrete5 that you want it to load a copy of jQuery in your theme for you:
- requireAsset()
$this->requireAsset('javascript', 'jquery');

Your bootstrap.min.js file would be added before the closing body tag.

One of the main reasons for handling assets this way is to prevent themes and blocks from loading duplicate assets and to prevent asset conflicts with the core.

Here is a list core assets:
http://documentation.concrete5.org/developers/appendix/asset-list...

A theme page_theme.php stores information about your theme - the grid framework it uses, name, description, assets provided or required, custom classes, grid presets, and more.

An example would be the page_theme.php that comes with the default Elemental theme:
https://github.com/concrete5/concrete5/blob/develop/web/concrete/the...

I recommend reading the theme documentation, including the sections on assets.
http://documentation.concrete5.org/developers/designing-for-concret...
kenchi09 replied on at Permalink Reply
kenchi09
Thank you very much hutman and MrKDilkington for shedding light on this matter!
kenchi09 replied on at Permalink Reply
kenchi09
I am now able to add blocks just fine. I just added the 2 lines above in the registerAssets() function of my page_theme.php file.

But I cannot give the block some design via Design & Custom Template because none of the buttons are working. Where could have I gone wrong again?
kenchi09 replied on at Permalink Reply
kenchi09
Hi,

I tried adding those lines above to my page_theme.php, and Concrete5 is still adding bootstrap/dropdown.js, bootstrap/tooltip.js, and bootstrap/popover.js on top of the bootstrap.min.js that i included with custom Bootstrap theme. This is driving me crazy.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@kenchi09

Please zip your theme and attach it as a reply and I can take a look at it.
kenchi09 replied on at Permalink Reply 1 Attachment
kenchi09
Here you go. Thanks a lot in advance.
kenchi09 replied on at Permalink Reply 1 Attachment
kenchi09
Here you go. Thanks a lot in advance.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@kenchi09

You have several issues.

The first issue is with assets:
In your page_theme.php registerAssets() method, you are attempting to require three assets.
$this->requireAsset('css', 'bootstrap/*');
$this->requireAsset('javascript', 'bootstrap/*');
$this->requireAsset('javascript', 'jquery');

jQuery is being successfully loaded into your theme by concrete5. The requested Bootstrap CSS and JavaScript assets are not because they need to be required individually (there is no Bootstrap asset group for CSS or JavaScript).
http://documentation.concrete5.org/developers/appendix/asset-list...

Instead you should be providing the Bootstrap CSS and JavaScript.
// tell concrete5 that the theme will provide a full copy of Bootstrap JavaScript
$this->providesAsset('javascript', 'bootstrap/*');
// tell concrete5 that the theme will provide a full copy of Bootstrap CSS
$this->providesAsset('css', 'bootstrap/*');
// tell concrete5 to load a copy of jQuery in the theme
$this->requireAsset('javascript', 'jquery');

The second issue is with Bootstrap JavaScript:

After telling concrete5 that you will be provide a copy of Bootstrap JavaScript with the theme, this will stop it from loading its own copies of dropdown.js, tooltip.js, and popover.js. concrete5 will now be expecting these assets to be part of the bootstrap.min.js that you include with your theme.The problem is that the Bootstrap JS you are providing is incomplete and is missing at least the tooltip() method. Without this method, it breaks the user interface.

The copy of Bootstrap JS in the custom folder is missing tooltip():
application\themes\mmcconline\js\custom\bootstrap.min.js

The copy of Bootstrap JS in the js folder contains tooltip():
application\themes\mmcconline\js\bootstrap.min.js

As a side note, you look to be hard coding much of the content into the page templates themselves. This will require editing the PHP files when you want to change the content and makes the theme less flexible and time consuming to use.
kenchi09 replied on at Permalink Reply
kenchi09
Thank you again. It works now. Hope I don't break it again. :)