I'm just documenting this, hopefully it will be helpful to new users.

The original discussion for this arose at #1697342: How to create sub theme of Twitter bootstrap..?

fStew provided a simple answer which the following is based on (some updates due to rename of the project).

Benefits of a subtheme
If you use a subtheme, you can make changes to your own template files separately and easily keep the bootstrap theme up to date.

Creating a subtheme
1. Create a new theme folder with the name of your theme. e.g. subtheme
2. Add an .info file (see example below) - e.g subtheme.info
3. Create a .css file for your subtheme css. - e.g. subtheme_style.css

Note that the bootstrap theme itself doesn't need to be enabled for the subtheme to work.

name = subtheme
description = Bootstrap subtheme
version = 0.1
core = 7.x
base theme = bootstrap

regions[navigation]     = 'Navigation'
regions[header]         = 'Top Bar'
regions[highlighted]    = 'Highlighted'
regions[help]           = 'Help'
regions[content]        = 'Content'
regions[sidebar_first]  = 'Primary'
regions[sidebar_second] = 'Secondary'
regions[footer]         = 'Footer'

stylesheets[all][] = subtheme_style.css

settings[toggle_name] = 0
settings[toggle_search] = 1

Overriding templates
If you want to override templates provided by bootstrap, create a templates folder and copy over the template you wish to override (e.g. page.tpl.php).

Learn more
You can learn more by reading: Creating a sub-theme

If anyone has other suggestions to add to the subtheme, we can try add to the documentation.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

frankbaele’s picture

damm natted you are good at documenting :)

frankbaele’s picture

Issue summary: View changes

Tweaked instructions

henryhu’s picture

Version: 7.x-2.x-dev » 7.x-2.0-beta2

Don't forget to update your customized templates.

I'd created my own templates, which based on page.tpl.php of 7.x-2.0-beta1. Now I'm trying to update to beta2. I realize that page.tpl.php has changed from beta1. As a result, I have to modify every templates I've built based on beta1.

ShaunDychko’s picture

According to http://drupal.org/node/171224

we should also include the hidden regions:

regions[page_top]       = 'Page top'
regions[page_bottom]    = 'Page bottom'
If you define custom regions, it is important to remember that you need to include the content, help, page_top and page_bottom regions in your set of regions. The page_top and page_bottom regions are hidden, which means they will not show up on the blocks administration interface.
scottzee’s picture

When I make a subtheme, it looks like the site becomes fixed width. Is there something I have to include to keep the site responsive?

Is anyone else having this issue?

Thanks!

ricksta’s picture

Ain't doin' it for me.

I've copied the "bootstrap" theme and renamed it "bootstrap_custom." I've created the .info file as above. I've added custom css and js files and declared in the info file. I followed other instructions in the creating subtheme page. I've done subtheming before, but this theme seems to be different.

In the subtheme I also changed all the references to "bootstrap" to "bootstrap_cusom" in the theme-setting.php and template.php. Is that the right thing to do?

Problems:
1. In the backend I had an error in the theme-settings.php file on line 3 (include_once(dirname(__FILE__) . '/includes/bootstrap.inc');)
I commented out the line and it went away. I figured this would get included by virtue of the "bootstrap" theme.

2. When I try to go to the home page of the site (not in the backend though, at least not in the appearance page) I get:
Fatal error: Cannot redeclare bootstrap_item_list() (previously declared in .../sites/all/themes/bootstrap/includes/theme.inc:3) in .../sites/all/themes/bootstrap_custom/includes/theme.inc on line 53

Questions: what do I do about this? Should I even have these files in the subtheme? Do some of these functions need to get renamed as well? Sorry, but I'm not very good with the php as a front-end themer.

Any help, greatly appreciated.

RJ

marketter’s picture

Rick,
I think the trick is not to copy the theme completely. If you follow the steps exactly you end up with the bootstrap theme folder still residing in your themes directory next to your custom_theme folder. As long as you have the "base theme = bootstrap" declaration in your custom_theme.info file your custom_theme will inherit all the css and template code from the bootstrap base theme.

I created a test subtheme just now and everything worked like a charm. I hope that works for you!

~Mark

ricksta’s picture

Thanks, I'll give it a try.

ricksta’s picture

Issue summary: View changes

Added navigation region.

cbrasfield’s picture

Attempts to create an incredibly simple subtheme (just the info file and a single css file) under Drupal 2.0 and the latest Bootstrap theme cause the head and content sections to go missing. Bartik works fine, but Bootstrap does not. Any ideas?

Update: I had to move Bootstrap from /sites/all/themes to /themes. No idea why.

orang_soul’s picture

Apologies for the probably dim question, but I am just starting to learn drupal and the bootstrap theme.

I've got everything working so far, and have set the bootstrap theme up.
However I don't know how to create the .info file.
I understand what to do with everything above, the only part I'm stuck with at the moment is what software actually creates .info files?

Again, sorry if this is a very brainless question.

Many Thanks for any help.

orang_soul’s picture

... never mind. I've worked out my own question.

I shall probably ask more complicated questions further down my learning experience :).

Thank you.

nothinghere’s picture

Need more documentation and informations to personalize bootstrap :

  1. How to use responsive theme ? Which ".tpl.php" file should I edit to load "bootstrap-responsive.css" ?
  2. Can we use Bootstrap Customizer with this drupal project ?
  3. Why I have user menu and main menu in top bar by default ? They are disabled in block !
  4. How to change the menu / top bar height ?
  5. Any guide/tips to set up Font Awesome with this drupal / bootstrap / module ?

Any help (for me and other beginners) is welcome !
Thanks,

psychobyte’s picture

2. You should be able to install the customized bootstrap just like the stock bootstrap download.

3. you might have to remove them from the drupal bootstrap template files (home, node tempaltes)
5. Install FA like normal, you can use drupal_add_css() to in hook_init() to add css to page. or perhaps drupal_add_html_head().

nothinghere’s picture

@psychobyte : thank you !

2 => "should" ? anyone have tested it ?
3 => ok, why it's hard coded ? We can use /admin/block !
5 => I'm a beginner. If anyone have an example, please share it. Thanks :)
FA look greats, I think it should be added to this drupal module (or in documentation). Anyone use it ?
I think can't be the first to use FA with bootstrap ! It's a great addon.

Anyone have tips for questions 1 and 4 ?
Thank you!

geocalleo’s picture

I'm looking for more in depth documentation with no luck finding any. This theme is unusable without documentation. Don't get me wrong, I was able to install it and create a subtheme using this post. But a subtheme is something a developer who has worked with drupal for a while knows to do. What I would like to know is in depth info on the themes API to Bootstrap. I'm having a hard time finding the info.

@nothinghere - I added Font Awesome by adding the line below to my subtheme.info (where subtheme is the name of the theme you're currently working on building)

stylesheets[all][] = assets/css/font-awesome/font-awesome.css

Worked well. Hope that helps.

psychobyte’s picture

I've moved on to adaptivetheme and quite satisfied with it.

os_pilgrim’s picture

Version: 7.x-2.0-beta2 » 7.x-2.0-beta3

I installed the bootstrap theme, but the responsive menu doesn't expand. I'm not sure where to even begin with this. Has anyone else had and resolved this issue?

andregriffin’s picture

os_pilgrim,

It's likely that you don't have jQuery_update installed and set to ver 1.7+

os_pilgrim’s picture

os_pilgrim,
It's likely that you don't have jQuery_update installed and set to ver 1.7+

Thanks Andre -- that's the ticket.

nothinghere’s picture

@geocalleo , thank you but I don't undestand how you get this path : "assets/css/font-awesome/".

1/ I download from https://github.com/FortAwesome/Font-Awesome/zipball/master, rename "master" to "file.zip" and execute : "unzip file.zip".
2/ This folder is unzipped to : "FortAwesome-Font-Awesome-13d5dd3"
3/ I rename "FortAwesome-Font-Awesome-13d5dd3" to "font-awesome"
4/ I have this directory : sites/all/themes/mysubtheme/font-awesome/css/font-awesome.css
5/ Should I use stylesheets[all][] = font-awesome/css/font-awesome.css ??

geocalleo’s picture

Hi nothinghere, that should do it. Just add what you wrote for #5

nothinghere’s picture

@geocalleo : Thanks, I'm gonna try soon.

Have you tested http://drupal.org/project/fontawesome ?

markhalliwell’s picture

All, I have created a starter-kit type sub-theme for Bootstrap at: https://github.com/markcarver/drupal_bootstrap_subtheme.

There is a rather extensive README included with it. Generally speaking, I've simply been using the Bootstrap base theme as a good way to do a lot of the preprocessing necessary to make Drupal compatible with Bootstrap. Then using the Bootstrap framework locally inside the sub-theme. This allows for the sub-theme to take full advantage of the Bootstrap mixins and LESS compiling capabilities. It provides for a much more seamless approach. If you don't have a local LESS preprocessor, you can use the http://drupal.org/project/less module (7.x-3.0-beta1 or higher) to do this for you.

I've been creating Boostrap sub-themes for a while now, figured I'd finally get back to you with a method I think is pretty solid. Perhaps we can work on getting this merged in and finalized a bit?

@nothinghere: I'd strongly recommend using http://drupal.org/project/fontello instead of http://drupal.org/project/fontawesome, per #1929394: Merge Font Awesome into Icon API.

nothinghere’s picture

@Mark Carver : Your subtheme look great !
I've just tested it, and now I use it to create my own subtheme. thank you a lot !

Menu / top bar height is fixed by default in bootstrap.
Your theme adapt it's height with my logo size. My content is not sticked/hidden under my logo/main menu bar. Thank you, your subtheme fix a bug I have since a long time.

Now I'm using fontello, thank you (again) for this tips :-)

Note to other users : default colors in this subtheme are blue and grey (I'm gonna try to change it soon for my website). Bootstrap base theme (this project) need to be enabled.

+1 to merge Mark Carver subtheme to this project !

markomat’s picture

@Mark Carver:
Thank you for sharing your method. Just tested it and it seems to work nice and straightforward.
Great stuff, +1

markhalliwell’s picture

@nothinghere, @markomat: Glad this is working for you.

Another thing to keep in mind is that this method is under the assumption of working around how the base theme requires that the bootstrap framework be placed inside it (like how the JS is remove and added for the sub-theme in the template.php file). If this were to get merged in the base theme wouldn't need to try and add the CSS and JS of the Bootstrap framework. This should be handled by the sub-theme.

markhalliwell’s picture

Title: How to create a subtheme with bootstrap » Add sub-theme starter kit
Version: 7.x-2.0-beta3 » 7.x-2.x-dev
Component: Documentation » Code
Assigned: Unassigned » markhalliwell
Category: support » feature
Status: Active » Needs review
FileSize
112.19 KB

Attaching patch that adds the starter kit sub-theme to this project. I also reworded and updated some of the README files to reflect the new method.

I removed the base theme's implementation of the CSS and JS (with it's assumption that the framework was located in the base theme folder). I also removed the Bootstrap CDN and the boostrap_ui (which is really twitter_bootstrap_ui) implementations as they confused more than helped people (plus they really wouldn't work with this method).

PS. I'd be interested in helping co-maintain if that's ok? I have pretty extensive knowledge of Bootstrap as I have used it for several clients now.

nothinghere’s picture

@Mark Carver : I need support about your subtheme. Sorry to speak about it here.
When i use "bootstrap_subtheme" directory and "bootstrap_subtheme.info" file, I have no problem.

But when I do :
cp -R bootstrap_subtheme/ mytheme
mv mytheme/bootstrap_subtheme.info mytheme/mytheme.info
Edit "mytheme.info" and change to "mytheme = This is my theme"
Problem : scroll-down menu when I clic on main menu or other menu doesn't appear ... What should I do ? :(

markhalliwell’s picture

Make sure you're keeping the keys on the left the same and not changing them. Also, make sure you're enabling the theme after copying it.

name = My Theme
description = This is my theme
nothinghere’s picture

Yes, I do that. Very strange, it's not the first time I create a subtheme... I don't understand why I have this problem...
Stupid question : have you tried to rename "bootstrap_subtheme" to any other name ? Which files and directory are you changing ?

After that, are you enabling some special blocks or using some module to adapt this subtheme ?
You are doing a lot of boostrap subtheme, have you any other tips to share for beginners ? :-)

enrish’s picture

@Mark Carver

I used your subtheme... and it looks great! very nice!
BTW when I resize the screen to Tablet or mobile size I get the same problem: the scroll down icon of the menu is there but when you click on it the menu items do not appear.
What should I do?
Thanks for reply

markhalliwell’s picture

Oh... that's what he's talking about. You have to expand the menu items. Nifty module that helps with this: http://drupal.org/project/menu_expanded

markhalliwell’s picture

Or, look at your console... it could be that your JS halted because of an error. More than likely you are getting the following error: Uncaught TypeError: Object #<Object> has no method 'on' which means you need to install http://dgo.to/jquery_update and set the minimum jQuery version to 1.7.

enrish’s picture

@Mark Carver

No worries... problem fixed by myself! :)
wrong path in function bootstrap_subtheme_js_alter for the drupal_get_path of template.php file

Thanks anyway!

markhalliwell’s picture

Ah, yes, that part of the documentation I forgot. You will need to do a find and replace inside all the sub-theme's files to replace bootstrap_subtheme with the machine name of your subtheme. So that function should also be renamed to MY_SUBTHEME_js_alter.

I also replaced that line to use the global theme name instead of a static name:
$theme_js_path = drupal_get_path('theme', $GLOBALS['theme_key']) . '/bootstrap/js/bootstrap-';

nothinghere’s picture

@enrish & @Mark Carver : You save my day ! That was the bug I have. Thank you :)

enrish’s picture

@Mark Carver

Hello Mark,
sorry to write you again but I'm kind of stuck with your subtheme.
I charged your subtheme on my website and it works perfectly, also adding different JS I get no probs. What is not working yet is the THEME.LESS. I downloaded the LESS module, the less libraries and I wrote stylesheets[all][] = less/theme.less in the .info file; but instead of getting a page where I can manipulate objects via .less files I get a page without theme. The page doesn't load the .less files! only .css!
How can I do to make it work??

Thanks in advance for your support
enrish

markhalliwell’s picture

Are you using the 7.x-3.0-beta1 version of LESS? Did you download the accompanying library as mentioned on their project page?

enrish’s picture

I'm using Drupal 7.21
Less 7.x-2.6

And I downloaded the lessphp library as suggested on the project page. I put it on the right path all/libraries/lessphp/...

Should I use the 7.x-3.0-beta1 version of LESS??

enrish’s picture

yo man!
it's working with the latest version of LESS ... just 1 suggestion: write it on your READ ME file :)

thanks a lot!!

markhalliwell’s picture

In theory, the 2.x branch should work. But, I would give the 3.0-beta1 a shot, yes. Even though it's a beta, it's relatively stable and contains quite a number of improvements. You're probably encountering something similar to #1626652: Drush integration, cache file management, unstyled pages and code comments, which is fixed in the 3.x branch.

markhalliwell’s picture

I did include it in the readme.... both in the github repo and the patch :-/

Either a local LESS preprocessor or install and enable the LESS module - 7.x-3.0-beta1 or higher (see bootstrap_subtheme.info).

enrish’s picture

sorry, my fault!
didn't read carefully enough! :-/

thanks again...

nothinghere’s picture

Beta4 can be created with this patch ?

I want to use stable branch, with bootstrap subtheme from Mark Carver...

Thanks :-)

wundo’s picture

Status: Needs review » Needs work

About patch in #26:
I'd love to commit this, but this patch does way more things than it should, like removing the CDN feature and the bootstrap version feature.
Please submit a new patch with only the changes related with this issue.

markhalliwell’s picture

Status: Needs work » Needs review

I figured you might say this. Please see my response in #1846736-28: Remove jQuery CDN setting in favor of using jQuery Update module.

I think that using any type of CDN in this base theme is rather arbitrary at this point. It was my goal to help simplify (by documenting and removing unnecessary code) the understanding on how to create a Bootstrap sub-theme. Given how the sub-theme in patch #26 works, there is no longer a need for using the Bootstrap CDN, which is why I removed it.

I think it's also necessary to point out that I feel like there should be a shift in mentality regarding the Bootstrap base theme. The base theme should simply provide the necessary integration between Drupal and Bootstrap (via things like preprocessing). I understand that given the nature of licensing regarding Bootstrap, it's hard to provide an "out-of-box" experience, but that's the nature of this project. In my opinion, it should be the sub-theme's responsibility for adding the Bootstrap framework. We can use things like http://dgo.to/less to help compile everything if it's really necessary.

I'm rather perplexed why having the Bootstrap CDN is really necessary. If the reasoning behind it is for providing "dummy support" or performance, we have modules that handle things like this: http://dgo.to/jquery_update and http://dgo.to/cdn. Why are we duplicating unnecessary code?

markhalliwell’s picture

Also, given the nature of how this base theme currently makes the presumptive task of adding CSS and JS, it's really hard not to remove these and add the sub-theme.

markhalliwell’s picture

Now I'm not saying I'm not willing to refactor the patch, just saying that I think we really need to consider the direction this project moving forward and discuss it.

wundo’s picture

As I stated in jQuery issue, I agree with you regarding the #1846736-30: Remove jQuery CDN setting in favor of using jQuery Update module, but, either way pushing a change you believe in by using a patch to a different issue is not the way to go. Specially when your patch removes functionality that was already released and contributed by another maintainer.

Less support would be great, but shouldn't be required, this base theme should work out-of-box without any third party dependency besides jQuery Update (which is not really required, as you can use the theme without it).

We may be duplicating jQuery update's funcionality but we're not duplicating CDN's. We must have an "out-of-box" solution which works without external dependencies and given the licensing issue Bootstrap CDN is the best one.

markhalliwell’s picture

Fair enough :) I was only attempting to make a solution that worked in one patch, I'll admit that on projects I'm not maintaining I do tend to group things together (sorry). I'll break it up into the various issues and refactor this patch.

It almost sounds like we should have two different types of .info files or at least comment the two types of configuration in one. This way the user can choose which one they want to use.

Regarding LESS, it's not necessarily a requirement if you have a local preprocessor (this is how the sub-theme is initially configured). You would have to manually change the .info file to recognize the LESS file, per the README. This of course is for the raw source files, not the CDN (which wouldn't make LESS a requirement).

When I update this patch, I'll also refactor the docs to clarify the differences.

markhalliwell’s picture

Status: Needs review » Needs work
markhalliwell’s picture

markhalliwell’s picture

Status: Needs work » Needs review
FileSize
100.61 KB

Attached is a revised patch containing just the sub-theme with updated documentation for the different method implementations: CDN and Source Files.

I should mention that, while it's not dependent on these issues, you might encounter some problems until the two following patches are committed in [sequential order]:
#1846736: Remove jQuery CDN setting in favor of using jQuery Update module
#1957620: [META] Refactor code to allow for either CDN or sub-theme source files.

pasada’s picture

Would really love to see this committed. Great addition to a fantastic theme.

wundo’s picture

geocalleo’s picture

Hi nothinghere, hope that worked for you. I haven't tried the fontawesome module yet. I'm thinking I can use it in my next web project. I'll make sure to post here how it went. Though, if I'm just using it for the theme to display the site, I probably would just include it in my .info file.

Let me know if you use it and what your experience was with it.

Thanks

busla’s picture

Component: Code » User interface
Category: feature » bug
Status: Needs review » Active

When using your theme the divs stack incorrectly when I increase the screen width. Instead of stopping at a certain width the last div drops below and floats to left. This does not happen when I use the same less files (rendered to css) with Bootstrap theme.

markhalliwell’s picture

Component: User interface » Code
Category: bug » feature
Status: Active » Needs review

@busla: This actually isn't an issue with the sub-theme. I created a new issue at #1967860: Page template uses .row class instead of .row-fluid. Please check for a patch there shortly.

Danny Englander’s picture

I am not sure if I should open a new issue for this or not but regarding #4, #11 and possibly #16 above, I too was not able to make a sub-theme be responsive. Note that I followed the best practices outlined in this issue summary for creating a sub-theme.

Once my sub-theme was set, I discovered that the bootstrap-responsive.css file was not loading last in my sub-theme and so that caused it to not be responsove.

To solve this I commented out stylesheets[all][] = bootstrap/css/bootstrap-responsive.css in the basetheme .info file and then used a template preprocess function to weight this CSS file so it loads last and boom, fully responsive sub-theme with my custom design and all.

I'd happy to submit a patch but I am guessing this issue is not the right place as the patch would need to go against the core files and not any Starter Kit stuff.

markhalliwell’s picture

@highrockmedia: Actually you don't have to submit a patch. This has already been fixed with #1957620: [META] Refactor code to allow for either CDN or sub-theme source files.. That's why I am trying to get this sub-theme committed. It lets the sub-theme rely on either the base theme's CDN implementation or the Bootstrap source code for custom implementations, plus it has a lot of documentation built in.

daveferrara1’s picture

Any chance we can get just a tarball of your subtheme?

markhalliwell’s picture

@daveferrara1: No, I'd rather get this committed. Until then, I recommend learning how to Apply Patches.

wundo’s picture

Status: Needs review » Fixed

#52 was committed ;)

markhalliwell’s picture

Status: Fixed » Needs review

@wundo: This makes me sooo excited :) Thanks!
@daveferrara1: You can now download a tarball snapshot from http://drupalcode.org/project/bootstrap.git/tree/refs/heads/7.x-2.x:/boo...

http://drupalcode.org/project/bootstrap.git/snapshot/40a1a79b42f7a2a5ac6...

markhalliwell’s picture

Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

hatuhay’s picture

Just published on sandbox fully developed subtheme for Bootstrap as Bootstrap Barrio.
It is functional but far from being fully tested.
The hole idea is based on adding parameters to handle column widths and fluid layouts, and Skinr for blocks behavior.

  • Layout is handle by Bootstrap.
  • Two columns, with configurable widths.
  • Fixed and fluid layouts.
  • Responsive features turn on and off.
  • Configurable header behavior, using Bootstrap "fixed to top".
  • Configurable main navigation behavior, using Bootstrap "collapse".
  • Full screen width slider region.
  • Skinr controlled, collapse, fixed, row, content and span over blocks.
  • Flexible blocks layout using span over row defined regions.

Comments welcome!!

JorgeArtware’s picture

Category: feature » support

I recommend you ask each question in a separate post on drupal.stackexchange.com

I'd recommend you rephrase your questions to make them relevant for everyone.
For example:
How is bootstrap subtheme's implementation different from regular themes?
So people would point point out some insights about the LESS files and lessphp module for sure.

I just spent the last couple of days understandig bootstrap subtheme and can tell for experience that the best advice is to read all the README files.

JorgeArtware’s picture

Issue summary: View changes

Added info: enabling basetheme is not needed.