3

I understand the Joomla 3.x version is shipped with Bootstrap 2.x and many of the core components like contacts, login etc... are using the Bootstrap 2.x framework. Even some of the templates like prostar, beez are using the same frame work.

We are developing a component and we plan to use Bootstrap 3.x framework for the component views. I don't want to hack any of the core framework or any file...

All I need to know whether is there a way (safe) to use Bootstrap 3.x framework only on the component views without any conflicts.

Not sure my question makes any sense but ultimately I want to take advantage of responsive features of Bootstrap 3.x for my component views.

2

This is what I use to replace bootstrap2 with bootstrap3 :

$doc = JFactory::getDocument();
$assets = "templates/".$this->template;

// load jquery
JHtml::_('jquery.framework');

// remove default bootstrap js
foreach ($doc->_scripts as $url => $pars) {
    if ((strpos($url, "bootstrap.js") !== false) || (strpos($url, "bootstrap.min.js") !== false)) {
    unset($doc->_scripts[$url]); // remove from head
    JHtml::stylesheet($assets.'/css/bootstrapjserror.css'); // Generate error message at bottom of browserscreen
}
}

// add bootstrap 3 js
JHtml::script($assets.'/js/bootstrap.min.js');

// remove default bootstrap css
foreach ($doc->_styleSheets as $url => $pars) {
if ((strpos($url, "bootstrap.css") !== false) || (strpos($url, "bootstrap.min.css") !== false)) {
    unset($doc->_styleSheets[$url]); // remove from head
    JHtml::stylesheet($assets.'/css/bootstrapcsserror.css'); //Generate error message at bottom of browserscreen
}
}
// add bootstrap 3 css
JHtml::stylesheet($assets.'/css/bootstrap.min.css'); 

// add template css
JHtml::stylesheet($assets.'/css/template.css');

Hope this helps!

You can ofcourse use some parts only in your custom views...

  • Thanks for this. What is the use of 'Generate error message at bottom of browserscreen'? – Malaiselvan Mar 20 '15 at 3:11
  • It notifies you when a components view does load default bootstrap 2. For example JHtml::_('bootstrap.framework'); or JHtml::_('behavior.caption'); is called in some component. If so, I comment them out in the template override of this component. – COBIZ webdevelopment Mar 20 '15 at 6:15
1

You could namespace all BS3 syntax so that there will not be any conflict with the BS2 already being loaded, that is probably the simplest option but it will require extra work. It should be relatively straightforward using the SCSS version of Bootstrap to prefix all output css.

0

You can unset scripts from head declaration by building a plugin:

class PlgSystemDelbootstrap extends JPlugin {

public function onBeforeCompileHead() {
    $app = JFactory::getApplication();

    //return noting to do if its admin
    if ($app->isAdmin()) {
        return;
    }

    $doc = JFactory::getDocument();
    // uncomment unwanted script
    //unset($doc->_scripts['/media/jui/js/jquery.min.js']);
    //unset($doc->_scripts['/media/jui/js/jquery-noconflict.js']);
    //unset($doc->_scripts['/media/jui/js/jquery-migrate.min.js']);
    unset($doc->_scripts['/media/jui/js/bootstrap.min.js']);
    //unset($doc->_scripts['/media/jui/js/jquery.autocomplete.min.js']);
    //unset($doc->_scripts['/media/system/js/caption.js']);
}
}
  • I could be wrong but can you not simply use getApplication('site') rather than using $app->isAdmin()? – Lodder Mar 10 '15 at 11:06
  • In the description of the method is "Returns the global {@link JApplicationCms} object, only creating it if it doesn't already exist.", which will create the object application 'site' and it will return. Then you need to check whether we are subject to the administrative section. if you do not use any parameters, it should work the same way. Or you can use this: if( JFactory::getApplication() instanceof JApplicationSite ) – Dawid Świtoń Mar 11 '15 at 13:56
0

It can be done. But, there is no easy way to load Bootstrap 3.x on top of Bootstrap 2.x.

You have to potentially have to deal with CSS and Javascript conflicts. For example, with .table definition, where both frameworks try to load styles. Inside the main

<section id="content">
    <div class="row-fluid">
        <div class="span12">

you can define your own BS3:

<div class="mycomponent container">
    <div class="row">
        <div class="col-md-9" role="main">

From my experience with Joomla v2.5, loading Bootstrap 2.x on top of J25 Styles, even if you add new level (.mycomponent table), you have to check if all declarations are applied correctly and fixing issues adding more levels or !important.

On the JavaScript side, it is even more complex, where there is no way to simply deactivate all loaded scripts (right now, you have to also check for BS2 and mootools conflicts, e.g. modals).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.