3

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

link

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?

site

10
  • did you clear cache after adding your css to the .info file?
    – sam2de
    Aug 26, 2015 at 15:21
  • Yes by following this step: config > performance > clear all cache.
    – autop
    Aug 26, 2015 at 16:29
  • one other thought, try to disable the CSS aggregation and see if it's comes up
    – sam2de
    Aug 26, 2015 at 16:33
  • Hi, Drupol. The CSS from the CDN is supposed to be there, else your site won't look very Bootstrappy. :) Your custom CSS file should load after this file and also after Bootstrap Theme's 'overrides.css' file. Did you do an in-page search for your "bootsub.css" in Source mode (View Source)? Aug 26, 2015 at 17:51
  • I added my site url above. I did see the source code and I dont see my css. I thought I did follow the steps. If you could help, it will be so great.
    – autop
    Aug 26, 2015 at 18:09

1 Answer 1

2

In the Theme settings Under Bootstrap Settings, Go to Advanced -> BootstrapCDN and choose Disabled from the dropdown.

Then in the theme info file uncomment the Method 1 section. Download the bootstrap files from Bootstrap Download and extract it to the subtheme folder. The extracted folder should be named - bootstrap and should contain all the necessary bootstrap js, css files.

You may get more info from this link Bootstrap sub-theming "how to"

3
  • I thought you can subtheme using the method1 and 2. Your above step is for method1? I rather use method2. For method2, It says "Method 2: Bootstrap CDN This method is rather simple. You don't have to do anything unless you wish to override the default Bootstrap base theme settings. If so, just un-comment the lines pertaining to Method 2. Edit the provided ./css/style.css file to your liking."
    – autop
    Aug 26, 2015 at 16:59
  • Then, I hope you have defined your CSS correctly. I did find this troublesome in my other projects and used Method 1 instead
    – pritywiz
    Aug 26, 2015 at 17:05
  • So, now what would be the solution to my problem?
    – autop
    Aug 26, 2015 at 17:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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