Themes

Recommended setup for empty Bootstrap3 theme?

Permalink December 12, 2015 at 2:20 AM

I just started to get familiar with Concrete5 development and have been really impressed so far. I have experience with other CMS systems like Joomla and PHP frameworks like Laravel. Concrete5 seem to bring together modern frontend for content editors and clean & flexible backend for developers. Good job!

What looks a bit confusing though is how Bootstrap3 is handled and documented. What I have understood, some elements of Bootstrap javascript are part of the core. But not all. So, if I override core Bootstrap3 with the latest version in my theme the admin area gets messed up. And if I use core's Bootstrap in my frontend, CSS seem to lack elements and my page is rendered without styling.

What is the proper way to setup Bootstrap3 so that both frontend and admin area works correctly? And if you need to use bootstrap elements which are not part of the 5.7 core, what is the correct Bootstrap3 version that I should use, or does it matter?

Now I'm using Bootstrap 3.0.1 CSS and have this line in page_theme.php -> registerAssets to prevent overlapping with core:
$this->providesAsset('css', 'bootstrap/*');

For Bootstrap Javascript I'm planning to use core assets if available.

Things seem to be working ok so far. Is this the right approach?

Wanhaonki replied on Dec 12, 2015 at 5:49 am Permalink Reply

Im also having difficulties with my themes jQuery/Bootstrap files being in conflict with Core files. I noticed that for example trying to edit Switch Language-block -> Design & Custom Template nothing happens when clicking on the Gear icon. It's /concrete/js/bootstrap/dropdown.js which causes this so by deleting it makes Gear icon to work but i dont know what it makes "not to work". Also dropdown menu by Bootstrap im using wont work unless i disable dropdown.js. Fortunately it's only in edit mode when it wont work so my end-users wont be having any difficulties browsing the page. What would be the best way to make everything work?

ramonleenders replied on Dec 12, 2015 at 5:59 am Permalink Reply

There are some assets required by default from Bootstrap, in case you are not using Bootstrap already. I suggest providing these assets in the page_theme file:

$this->providesAsset('javascript', 'bootstrap/dropdown');
        $this->providesAsset('javascript', 'bootstrap/tooltip');
        $this->providesAsset('javascript', 'bootstrap/popover');
        $this->providesAsset('javascript', 'bootstrap/alert');
        $this->providesAsset('javascript', 'bootstrap/button');
        $this->providesAsset('javascript', 'bootstrap/transition');

If you are not using Bootstrap(.js), you shouldn't provide these of course.

Wanhaonki replied on Dec 12, 2015 at 6:17 am Permalink Reply

You mean page_theme.php in my theme-folder? I copied page_theme.php from Concrete-theme and it looks like this:

<?php
namespace Concrete\Theme\Concrete;
class PageTheme extends \Concrete\Core\Page\Theme\Theme {
   public function registerAssets() {
      $this->providesAsset('css', 'core/frontend/*');
      $this->requireAsset('javascript-conditional', 'html5-shiv');
      $this->requireAsset('javascript-conditional', 'respond');
   }
}

How shoul i edit it? Thanks. :)

ramonleenders replied on Dec 12, 2015 at 6:23 am Permalink Reply

The namespace depends on where it is located. If you have it under application, it will look like this:

namespace Application\Theme\YourThemeNamespace;

Replace "YourThemeNamespace" with the correct namespace. The folder will read your_theme_namespace in this example.

Paste the providesAsset rules under the "registerAssets" function, like this:

public function registerAssets()
    {
        $this->providesAsset('javascript', 'bootstrap/dropdown');
        $this->providesAsset('javascript', 'bootstrap/tooltip');
        $this->providesAsset('javascript', 'bootstrap/popover');
        $this->providesAsset('javascript', 'bootstrap/alert');
        $this->providesAsset('javascript', 'bootstrap/button');
        $this->providesAsset('javascript', 'bootstrap/transition');
    }

You can keep your other lines in there as well, just copy/paste the ones somewhere in the function.

MoreK replied on Dec 12, 2015 at 6:41 am Permalink Reply

Does this mean that the core will also use Bootstrap provided in my page header? I quickly tested, when I added the lines you mentioned in page_theme.php and these lines into the header, everything still seem to work:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

When I logged in, the html page source showed (as expected) that Bootstrap was loaded from cdnjs and core Boostrap was not loaded. With a quick test, things seemed to work ok. Should I expect everything to work now, ie. are there any modified/customized functionalities in the core Bootstrap? And is the latest Bootstrap version 3.3.6 ok?

ramonleenders replied on Dec 12, 2015 at 6:48 am Permalink Best Answer Reply

It all should work OK, with the emphasis on should. I do not know what will change in Bootstrap in upcoming versions (Bootstrap 4 is coming). They can rewrite stuff in the javascript, they could not. Just click through the frontend and backend and hit F12 and click console. If you do not see errors, just keep going with this setup. Like I told you, it should run fine. These assets are just Bootstrap assets/plugins, which you can enable/disable when customizing your Bootstrap.

http://getbootstrap.com/customize/#plugins...

MoreK replied on Dec 12, 2015 at 6:56 am Permalink Reply

Big thanks for taking your time answering my dumb questions. This seem to clarify it.

Wanhaonki replied on Dec 12, 2015 at 6:56 am Permalink Reply

It didnt change anything for me. Path for my theme is "application/themes/ilonas" so is this right:

[code<?php
namespace Application\Theme\Ilonas;
class PageTheme extends \Concrete\Core\Page\Theme\Theme {

public function registerAssets() {
$this->providesAsset('css', 'core/frontend/*');
$this->requireAsset('javascript-conditional', 'html5-shiv');
$this->requireAsset('javascript-conditional', 'respond');
$this->providesAsset('javascript', 'bootstrap/dropdown');
$this->providesAsset('javascript', 'bootstrap/tooltip');
$this->providesAsset('javascript', 'bootstrap/popover');
$this->providesAsset('javascript', 'bootstrap/alert');
$this->providesAsset('javascript', 'bootstrap/button');
$this->providesAsset('javascript', 'bootstrap/transition');
}

}][/code]

MoreK replied on Dec 12, 2015 at 7:15 am Permalink Reply

I had difficulties to make the page_theme.php working at the first place. This did the trick for me:
a) Switche to another theme
b) Remove MyTheme
c) Reinstall MyTheme
d) Activate MyTheme

Another thing (well, this may not be related to your problem), the title name in description.txt should be camel cased version of theme folder name. That's something I got wrong, so in your case title in description.txt should be Ilonas.

Here's my page_theme.php and it works great now. Note "print 'hurraa!';" is for testing purposes, you should see the text on screen if page_theme.php is working.

<?php
namespace Application\Theme\MyTheme;
use Concrete\Core\Page\Theme\Theme;
print 'hurraa!';
class PageTheme extends Theme
{
    public function registerAssets()
    {
        $this->providesAsset('javascript', 'bootstrap/dropdown');
        $this->providesAsset('javascript', 'bootstrap/tooltip');
        $this->providesAsset('javascript', 'bootstrap/popover');
        $this->providesAsset('javascript', 'bootstrap/alert');
        $this->providesAsset('javascript', 'bootstrap/button');
        $this->providesAsset('javascript', 'bootstrap/transition');
        $this->providesAsset('css', 'bootstrap/*');

Viewing 15 lines of 19 lines. View entire code block.

<?php
 
namespace Application\Theme\MyTheme;
 
use Concrete\Core\Page\Theme\Theme;
print 'hurraa!';
class PageTheme extends Theme
{
 
    public function registerAssets()
    {
        $this->providesAsset('javascript', 'bootstrap/dropdown');
        $this->providesAsset('javascript', 'bootstrap/tooltip');
        $this->providesAsset('javascript', 'bootstrap/popover');
        $this->providesAsset('javascript', 'bootstrap/alert');
        $this->providesAsset('javascript', 'bootstrap/button');
        $this->providesAsset('javascript', 'bootstrap/transition');
        $this->providesAsset('css', 'bootstrap/*');
 
        $this->requireAsset('css', 'font-awesome');
        $this->requireAsset('javascript', 'jquery');
    }
 
}

Wanhaonki replied on Dec 12, 2015 at 11:32 am Permalink Reply

Now it works, thanks! One more question: what does this script actually do? :D

ramonleenders replied on Dec 12, 2015 at 12:04 pm Permalink Reply

It says you're providing the assets yourself, and to not let Concrete5 do it. You can also use the requireAsset function, which will say to actually let Concrete5 use (require) it, if that isn't the case by default. Since this is the case by default, you can exclude assets by using the provideAsset function.

MrKDilkington replied on Dec 12, 2015 at 2:44 pm Permalink Reply

Here are a few links In addition to what ramonleenders said.

concrete5 core Bootstrap CSS
https://www.concrete5.org/community/forums/customizing_c5/boostrap/#...

concrete5 core Bootstrap JavaScript
https://www.concrete5.org/community/forums/usage/cannot-get-toolbar-...

Wanhaonki replied on Dec 18, 2015 at 10:49 am Permalink Reply

Hi again. Im still having a bit of troubles with this... Now that i managed to get my Bootstrap navigation dropdown and Design & Custom Templates- options to work with your kind help, there is at least one problem: when im logged in and open Dashboard (sidepanel) it opens normally but there is no way to close it, no button or nothing. Only way to close it is to refresh the page. Same thing with Edit this Page and Page Design, Location, Attributes and Settings- panel. I checked my code and these things are loaded by C5 and my theme:

bootstrap.min.css
html5shiv.min.js
respond.min.js
oletus.css (my own styles for theme)
font-awesome.css
jquery.js
bootstrap.min.js

And these are loaded additionally when logged in:

app.css
jquery-ui.css
events.js
underscore.js
backbone.js
jquery-ui.js
localization/jquery/ui/js
localization/core/js
app.js

How can i fix this?

MoreK replied on Dec 18, 2015 at 11:53 am Permalink Reply

I assume you knew that you should close Dashboard and edit panes by pressing the same button that opened them? There are no separate "close" buttons. Anyway, if you have a test site I'm happy to take a quick look - I've been resolving some z-index and padding issues in my site that sound similar as yours.

Wanhaonki replied on Dec 18, 2015 at 12:08 pm Permalink Reply 1 Attachment

Yes i know it should be the same button but in this case the button goes "unclickable" (see attachment). When i change to Elemental theme everything works fine so its pretty sure its because of my own Bootstrap theme? I dont have a test site but i can make one if that helps? Thanks. :)

MrKDilkington replied on Dec 19, 2015 at 2:36 am Permalink Reply

@Wanhaonki

Based on the screenshot and the buttons not working, I think you likely have a CSS and JavaScript issue.

If you zip up your theme and attach it as a reply, I can take a look at it.

Wanhaonki replied on Dec 19, 2015 at 4:52 am Permalink Reply

i made a test site with my own theme:

http://www.921682.com

I'll pm the password to you. :)

Wanhaonki replied on Dec 19, 2015 at 10:19 am Permalink Reply 1 Attachment

Here you go:

MrKDilkington replied on Dec 20, 2015 at 12:55 am Permalink Reply 1 Attachment

@Wanhaonki

I have attached the fixed theme.

Wanhaonki replied on Dec 20, 2015 at 12:02 pm Permalink Reply

Thanks a lot! What did you do?

MrKDilkington replied on Dec 20, 2015 at 5:23 pm Permalink Reply

@Wanhaonki

You were requiring Bootstrap assets instead of providing them and the footer_required was inside the getPageWrapperClass() div.

MoreK replied on Dec 21, 2015 at 10:32 pm Permalink Reply

Sorry I didn't reply, but my Concrete5 account got black listed for some reason. The support resolved it finally, so I'm back, but you seemed to get help already, so I guess everything is oukkey doukkey.

Forums

Themes

Recommended setup for empty Bootstrap3 theme?

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?