Create Bootstrap Bootswatch sub-theme for Drupal 7
25 August, 2018 - 21:25
With these commands you can quickly create a Bootstrap sub-theme with a Bootswatch.
You should be able to copy and paste them into your terminal, and create a fresh Bootswatch-based theme:
cd /var/www/public/example_DEV/sites/all/themes/; drush dl bootstrap; # create sub theme from bootstrap cp bootstrap/starterkits/less/ my_new_theme -R; cd my_new_theme/; # rename less.starterkit to my_new_theme.info, and update THEMETITLE in the file to the name of your theme mv less.starterkit my_new_theme.info # download the latest release of Bootstrap, see https://getbootstrap.com/ wget https://github.com/twbs/bootstrap/archive/v3.4.0.zip; unzip v3.4.0.zip && rm v3.4.0.zip && mv bootstrap-3.4.0/ bootstrap; # get Bootswatch files, in this case Paper cd less/; wget https://bootswatch.com/3/paper/variables.less; wget http://bootswatch.com/3/paper/bootswatch.less; # change font path in variables.less @icon-font-path variable from ../fonts/ to ../bootstrap/fonts/ sed -i 's|../fonts/|../bootstrap/fonts/|g' variables.less; # add the two bootswatch files to style.less echo -e "// Bootswatch overrides.\n@import 'variables.less';\n@import 'bootswatch.less';" >> style.less; # create css file with less, you might have to install it first, with sudo npm install -g less lessc style.less ../css/style.css; # upgrade jQuery from 1.4.4 to fx 1.10 with jquery_update module, to fix error "TypeError: $(...).on is not a function" drush dl jquery_update && drush en -y jquery_update
To add custom style ccs file, create the file custom-style.css in the css folder and add this line to your my_new_theme.info file
stylesheets[all][] = css/custom-style.css
To serve fonts locally, use the google-webfonts-helper service to download them.