Building a Drupal site from scratch - part 8 - Theming subtheme CSS

Updated: 24 June, 2014 seen 1,938

In part 2 of series how to build a Drupal site from scratch, I'm talking about how to create a subtheme from Bootstrap theme.

Today I would like to speak how to actually theme it, because just enabled it comes empty,with all files served from Bootstrap mater theme.

By default Bootstrap theme is set to be 1200px and wider, this is first thing I would like to change for our customers tourism website we are using in thee Drupal series. I don't mind for ite being 1200px and more wider, just I like to them be 940-980px, to work well on most display's.

 

In your mytheme/css folder look for style.css file. It's empty, and now let's start overriding it:

add:

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 940px;
}
 
This will make themes default witdth to 940px.
 
Actually this is it. Of course you must rewrite each h1, h2, h3 .e.t.c tag.
To do this, just apply your CSS on your subtheme style.css file.
 
Bootstrap is responsive theme, so before making any huge edits and overrides, plan how to minimaze your CSS, to use % instead of pixels.
For any custom edits on your views I highly recommend to use seperate css file, like custom.css (Read more how to theme views)