I followed the step by step to create a subtheme of bootstrap theme. Now, I am not able to apply my custom css to my page.
I took the below steps:
A) Downloaded Bootstrap project (7.x-3.0). Placed the bootstrap folder in sites/all/themes/.
B) Downloaded jQuery Update project, which is required by Bootstrap. In ../admin/config/development/jquery_update and set the default jQuery version to 1.10.
C) From bootstrap folder, moved the bootstrap_subtheme folder to sites/all/themes/ and name it bootsub
D) In bootsub directory, renamed the bootstrap_subtheme.info.starterkit file to bootsub.info. I edited the content and it looks as below:
name = bootsub
description = A Bootstrap Sub-theme.
core = 7.x
base theme = bootstrap
;;;;;;;;;;;;;;;;;;;;;
;; Regions
;;;;;;;;;;;;;;;;;;;;;
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'
regions[page_top] = 'Page top'
regions[page_bottom] = 'Page bottom'
;;;;;;;;;;;;;;;;;;;;;
;; Stylesheets
;;;;;;;;;;;;;;;;;;;;;
stylesheets[all][] = css/bootsub.css
; For information on choosing the desired method, please read the Drupal
; Bootstrap sub-theme "how-to" documentation:
; https://drupal.org/node/1978010
; ;----------------------------------
; ; METHOD 1: Bootstrap Source Files
; ;----------------------------------
;
; ;;;;;;;;;;;;;;;;;;;;;
; ;; Scripts
; ;;;;;;;;;;;;;;;;;;;;;
;
; scripts[] = 'bootstrap/css/style.css'
; scripts[] = 'bootstrap/js/affix.js'
; scripts[] = 'bootstrap/js/alert.js'
; scripts[] = 'bootstrap/js/button.js'
; scripts[] = 'bootstrap/js/carousel.js'
; scripts[] = 'bootstrap/js/collapse.js'
; scripts[] = 'bootstrap/js/dropdown.js'
; scripts[] = 'bootstrap/js/modal.js'
; scripts[] = 'bootstrap/js/tooltip.js'
; scripts[] = 'bootstrap/js/popover.js'
; scripts[] = 'bootstrap/js/scrollspy.js'
; scripts[] = 'bootstrap/js/tab.js'
; scripts[] = 'bootstrap/js/transition.js'
;
; ; Disable BootstrapCDN if using Bootstrap source files in your sub-theme.
; settings[bootstrap_cdn] = ''
; ;-------------------------
; ; METHOD 2: Bootstrap CDN
; ;-------------------------
;
; Method 2 uses BootstrapCDN, the only thing you might need to provide here
; is overrides to Bootstrap theme settings. Copy them here from the base theme
; to override.
E) I enabled the bootsub subtheme.
F) Sites/all/themes/bootsub/css, I added bootsub.css file. I added some styling in the css file.
G) I inspected my page using chrome and I see that styling is not coming from bootsub.css file and instead it is coming from
"netdna.bootstrapcdn.com.......bootstrap.min.css.."
Do you know why custom css file is not applying the styling on my page?
Further Notes
- Using CDN method
- Cache has been cleared
- Aggregation is OFF
- "View source" in browser does not show bootsub.css had been loaded
- Using shared hosting
I found the link which does not allow me to comment. Link says:
I had the same issue few days ago and I fixed with the template preprocess function. Just put the following function inside your template.php
function YOUR_THEME_preprocess_html(&$variables) { drupal_add_css('/PATH_TO_THEME/custom-style.css'); }
I tried to follow the above steps and did not work. I have the subtheme in sites>all>themes. In sites>all>themes>subtheme, I have template.php. I added the below code in template.php:
<?php
function subtheme_preprocess_html(&$variables) {
drupal_add_css('/sites/all/themes/subtheme/css/subtheme.css');
}
?>
Do you know if i followed the steps correctly or anything else you would like to recommend to resolve this issue?