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.
Comment | File | Size | Author |
---|---|---|---|
#52 | 1844448-bootstrap-subtheme-52.patch | 100.61 KB | markhalliwell |
#26 | 1844448-bootstrap-subtheme-26.patch | 112.19 KB | markhalliwell |
Comments
Comment #1
frankbaele CreditAttribution: frankbaele commenteddamm natted you are good at documenting :)
Comment #1.0
frankbaele CreditAttribution: frankbaele commentedTweaked instructions
Comment #2
henryhu CreditAttribution: henryhu commentedDon'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.
Comment #3
ShaunDychko CreditAttribution: ShaunDychko commentedAccording to http://drupal.org/node/171224
we should also include the hidden regions:
Comment #4
scottzee CreditAttribution: scottzee commentedWhen 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!
Comment #5
ricksta CreditAttribution: ricksta commentedAin'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
Comment #6
marketter CreditAttribution: marketter commentedRick,
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
Comment #7
ricksta CreditAttribution: ricksta commentedThanks, I'll give it a try.
Comment #7.0
ricksta CreditAttribution: ricksta commentedAdded navigation region.
Comment #8
cbrasfield CreditAttribution: cbrasfield commentedAttempts 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.
Comment #9
orang_soul CreditAttribution: orang_soul commentedApologies 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.
Comment #10
orang_soul CreditAttribution: orang_soul commented... never mind. I've worked out my own question.
I shall probably ask more complicated questions further down my learning experience :).
Thank you.
Comment #11
nothinghere CreditAttribution: nothinghere commentedNeed more documentation and informations to personalize bootstrap :
Any help (for me and other beginners) is welcome !
Thanks,
Comment #12
psychobyte CreditAttribution: psychobyte commented2. 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().
Comment #13
nothinghere CreditAttribution: nothinghere commented@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!
Comment #14
geocalleo CreditAttribution: geocalleo commentedI'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.
Comment #15
psychobyte CreditAttribution: psychobyte commentedI've moved on to adaptivetheme and quite satisfied with it.
Comment #16
os_pilgrim CreditAttribution: os_pilgrim commentedI 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?
Comment #17
andregriffin CreditAttribution: andregriffin commentedos_pilgrim,
It's likely that you don't have jQuery_update installed and set to ver 1.7+
Comment #18
os_pilgrim CreditAttribution: os_pilgrim commentedThanks Andre -- that's the ticket.
Comment #19
nothinghere CreditAttribution: nothinghere commented@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 ??
Comment #20
geocalleo CreditAttribution: geocalleo commentedHi nothinghere, that should do it. Just add what you wrote for #5
Comment #21
nothinghere CreditAttribution: nothinghere commented@geocalleo : Thanks, I'm gonna try soon.
Have you tested http://drupal.org/project/fontawesome ?
Comment #22
markhalliwellAll, 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.
Comment #23
nothinghere CreditAttribution: nothinghere commented@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 !
Comment #24
markomat CreditAttribution: markomat commented@Mark Carver:
Thank you for sharing your method. Just tested it and it seems to work nice and straightforward.
Great stuff, +1
Comment #25
markhalliwell@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.
Comment #26
markhalliwellAttaching 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.
Comment #27
nothinghere CreditAttribution: nothinghere commented@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 ? :(
Comment #28
markhalliwellMake 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.
Comment #29
nothinghere CreditAttribution: nothinghere commentedYes, 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 ? :-)
Comment #30
enrish CreditAttribution: enrish commented@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
Comment #31
markhalliwellOh... 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
Comment #32
markhalliwellOr, 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.Comment #33
enrish CreditAttribution: enrish commented@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!
Comment #34
markhalliwellAh, 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 toMY_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-';
Comment #35
nothinghere CreditAttribution: nothinghere commented@enrish & @Mark Carver : You save my day ! That was the bug I have. Thank you :)
Comment #36
enrish CreditAttribution: enrish commented@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
Comment #37
markhalliwellAre you using the 7.x-3.0-beta1 version of LESS? Did you download the accompanying library as mentioned on their project page?
Comment #38
enrish CreditAttribution: enrish commentedI'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??
Comment #39
enrish CreditAttribution: enrish commentedyo man!
it's working with the latest version of LESS ... just 1 suggestion: write it on your READ ME file :)
thanks a lot!!
Comment #40
markhalliwellIn 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.
Comment #41
markhalliwellI did include it in the readme.... both in the github repo and the patch :-/
Comment #42
enrish CreditAttribution: enrish commentedsorry, my fault!
didn't read carefully enough! :-/
thanks again...
Comment #43
nothinghere CreditAttribution: nothinghere commentedBeta4 can be created with this patch ?
I want to use stable branch, with bootstrap subtheme from Mark Carver...
Thanks :-)
Comment #44
wundo CreditAttribution: wundo commentedAbout 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.
Comment #45
markhalliwellI 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?
Comment #46
markhalliwellAlso, 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.
Comment #47
markhalliwellNow 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.
Comment #48
wundo CreditAttribution: wundo commentedAs 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.
Comment #49
markhalliwellFair 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.
Comment #50
markhalliwellComment #51
markhalliwellReferencing: #1957620: [META] Refactor code to allow for either CDN or sub-theme source files.
Comment #52
markhalliwellAttached 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.
Comment #53
pasada CreditAttribution: pasada commentedWould really love to see this committed. Great addition to a fantastic theme.
Comment #54
wundo CreditAttribution: wundo commented#52: 1844448-bootstrap-subtheme-52.patch queued for re-testing.
Comment #55
geocalleo CreditAttribution: geocalleo commentedHi 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
Comment #56
busla CreditAttribution: busla commentedWhen 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.
Comment #57
markhalliwell@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.
Comment #58
Danny EnglanderI am not sure if I should open a new issue for this or not but regarding #4, #11
and possibly #16above, 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.
Comment #59
markhalliwell@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.
Comment #60
daveferrara1 CreditAttribution: daveferrara1 commentedAny chance we can get just a tarball of your subtheme?
Comment #61
markhalliwell@daveferrara1: No, I'd rather get this committed. Until then, I recommend learning how to Apply Patches.
Comment #62
wundo CreditAttribution: wundo commented#52 was committed ;)
Comment #63
markhalliwell@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...
Comment #64
markhalliwellComment #66
hatuhay CreditAttribution: hatuhay commentedJust 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.
Comments welcome!!
Comment #67
JorgeArtware CreditAttribution: JorgeArtware commentedI 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.
Comment #67.0
JorgeArtware CreditAttribution: JorgeArtware commentedAdded info: enabling basetheme is not needed.