Changing the default bootstrap theme

We will show two ways to customize our blog: one superficial, changing only the stylesheet, and a deeper one, changing all the page's markup.

For the stylesheet changes, we are using the http://bootswatch.com/ free Bootstrap themes.

The bootstrap framework is very flexible for this; we will use a theme called the superhero.

  1. Go to the http://bootswatch.com/superhero/_variables.scss URL.
  2. Copy the page content.
  3. Inside public/styles/boostrap/bootstrap, create a new file called _theme_variables.scss and paste the code copied from the Bootswatch page.
  4. Open public/styles/bootstrap/_bootstrap.scss and replace the following  lines:
     // Core variables and mixins @import "bootstrap/_theme_variables"; @import "bootstrap/mixins"; ...

Get Node.js 6.x Blueprints now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.