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

Updated: 24 June, 2014 seen 1,942

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)

about

Hi! My name is Reinis Fischer (38), a proud dad and devoted husband. CEO and Founder of Terramatris crypto hedge fund, drone enthusiast, world traveler, photographer, and passionate lover of Georgian cuisine (vegetarian).

An ex-pat living in Georgia since 2011, I trade stocks, take photographs, work out at the gym, and many more. Here I write about travel, finance, and other things that might interest me.