Sub-theming Diw from Bootstrap
by Gisle Hannemyr
This case study takes you through the steps of creating a sub-theme, using Bootstrap as the base theme.
Table of contents
Introduction
This case study assumes that you've already created a Bootstrap sub-theme, as described here.
foo
Here are a list of basic changes that I often apply to Bootstrap:
- Refactor regions. Note that the regions outlined in
page.tpl.php
must reflect those inmy_bootstrap.info
.- Rename the machine name of the Top Bar region from
header
totop_bar
. - Optionally add a Header region
header
to the top of the stack.
- Rename the machine name of the Top Bar region from
overrides.less
).I also prefer to customize the fonts, using a font stack drawing on Google webfonts.
- Change
html.tpl.php
to link to the Google webfonts I want to use. - Change font stacks at the beginning of
variables.less
to include the Google webfonts. - To have a different font-familiy and weight for the headings, change the headings-variables (
@headings-font-family
and@headings-font-weight
invariables.less
).
I prefer captions to be centered, and to have some distance between the border and the text for left or right aligned images:
.caption { margin: 0; text-align: center; font-size: 0.9em; } .pull-left { margin-right: 0.7em; } .pull-right { margin-left: 0.7em; }
Using the classes pull-left
and pull-right
makes images non-resposive. I add the following pull-right-lg
class. It will only right-align the image on the large screen. On
smaller screens, the image will be centered.
.pull-right-lg { @media (min-width: @screen-lg-min) { margin-left: 0.7em; float: right !important; } }
Final word
[mumble]
Last update: 2015-03-15 [gh].