How to change Joomla! 3's bootstrap theme preserving original?

Question

I am creating a new template for Joomla! 3.3.1. I want to use bootstrap's amazing features. In addition to this I have downloaded a theme form http://bootswatch.com/2/. I have overwritten new theme files current bootstrap.css and bootstrap.min.css.

I want to use some methods like original:

//Add JavaScript Frameworks
  JHtml::_('bootstrap.framework');
//Add Stylesheets
  JHtmlBootstrap::loadCss();
//Load optional rtl Bootstrap css and Bootstrap bugfixes
  JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction);

How can it be possible using new themes while keeping original files? I may also want to add theme options for the template in admin panel.

Answer 1

You don't overwrite core files. You never do. Just don't. Put the CSS files into your template directory and load them from there.

Have a look at how the Protostar template does it. The CSS file is located here: https://github.com/joomla/joomla-cms/tree/staging/templates/protostar/css and loaded with this call: $doc->addStyleSheet('templates/' . $this->template . '/css/template.css'); (https://github.com/joomla/joomla-cms/blob/staging/templates/protostar/index.php#L43)

Some Notes:

• JHtml::_('bootstrap.framework'); You don't have to call this unless you use some Bootstrap JavaScript features within your template. Which is usually not the case. If an extensions needs it, it will load it.
• JHtmlBootstrap::loadCss(); This will load the Bootstrap 2 CSS files shipped with Joomla. Usually you should not use this but compile your own template CSS file. Most likely, the theme you downloaded has them already included and customised.
• JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction); This may make sense to load some generic RTL adjustements. However I would test the template without those first and if everything is ok add the RTL features.

Answer 2

I think this exactly what you looking for:

To override (not overwrite) standard bootstrap css and/or js with your template just put those files to:

/templates/YOUR_TEMPLATE/css/jui/bootstrap.min.css

or

/templates/YOUR_TEMPLATE/js/jui/bootstrap.min.js

So by doing this whenever anybody(any extension) calls

//Add JavaScript Frameworks

JHtml::_('bootstrap.framework');

//Add Stylesheets

JHtmlBootstrap::loadCss();

Your custom template files will be loaded.