adopt or hack - how to hack a theme in a drupal way

Click here to load reader

Post on 17-Aug-2014

500 views

Category:

Design

0 download

Embed Size (px)

DESCRIPTION

How to create a base theme for Drupal 7

TRANSCRIPT

  • Adopt or hack How to hack a theme in a Drupal way London learning meetup 2014 Marek Sotak - @sotak - sotak.co.uk
  • @sotak sotak.co.uk inlinemanual.com
  • You have a vision...
  • Choices...
  • Where is your creativity now?
  • Should I hack or adopt?
  • Drupal police: So you want to hack?
  • Direct code changes are OK if: you know what you are doing you have process behind of keeping changes after upgrade > patches
  • Hack with confidence - systematically
  • Lets put a theme into a theme to override a theme
  • themes nested in each other Due to performance multiple sub-theming is not recommended To make a sub-theme of another theme, we need to declare: base theme = themeName in our sub-theme's .info file Sub-theming
  • Lets try it out
  • Lets create a sub-theme of Bartik called My Bartik 1. Create a new directory in sites/all/themes called mybartik the theme name should be unique the sub-theme can be anywhere in the Drupal structure 2. Create new file within mybartik directory called mybartik.info 3. Edit mybartik.info and insert one line name = My Bartik base theme = bartik core = 7.x 4. See the result on the appearance page Creating a sub-theme
  • Sub-theme shares these resources from its base theme stylesheets scripts *.tpl.php files anything declared in template.php screenshot Creating a sub-theme
  • Sub-theme does not share these resources from its base theme logo.png favicon some .info file settings (regions,...) theme-settings.php color module integration Creating a sub-theme
  • Adding your stylesheet - overriding the CSS in the sub-theme .info file stylesheets[all][] = style.css works same for the scripts scripts[] = script.js Creating a sub-theme
  • Play and learn with CSS - small intro
  • Once you master the CSS > freedom
  • CSS Selectors - http://www.sitepoint.com/web-foundations/css-selectors/ CSS Reference - https://developer.mozilla.org/en-US/docs/Web/CSS/Reference Other resources http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html http://css-tricks.com/ http://cssdeck.com/ http://www.awwwards.com/the-best-css3-tools-experiments-and-demos-for-web-developers.html CSS Resources
  • https://drupal.org/project/zen https://drupal.org/project/bootstrap https://drupal.org/project/tao https://drupal.org/project/framework http://drupal.org/project/adaptivetheme https://drupal.org/project/omega https://drupal.org/project/fusion https://drupal.org/project/mothership Base-themes available
  • Base-themes - Do you still need that scaffolding?
  • Creativity comes from looking for the unexpected and stepping outside your own experience. Masaru Ibuka
  • Workshops in London 1 day workshops Basic theming Advanced theming drupal module development Drupal knowledge sharing Consulting 130/person excl. VAT
  • @sotak sotak.co.uk inlinemanual.com
  • Image credits Machines - https://www.flickr.com/photos/wsdot/12621857723 Burglar notice - https://www.flickr.com/photos/ell-r-brown/5035906423 Cathedral - https://flic.kr/p/dCmJ9E Containers - https://www.flickr.com/photos/chrism70/6215959995 Hack systematically - https://flic.kr/p/8VHWzh Machines - https://flic.kr/p/fASC3P Police - https://flic.kr/p/nyeinL Cups choices - https://flic.kr/p/dZDWUq OK hacking - https://flic.kr/p/fHSNAJ Pencils - https://flic.kr/p/9xZ1hY American freedom - https://flic.kr/p/6EpMSF Workshop - https://flic.kr/p/7r1qG8 Workshop 2 - https://flic.kr/p/b6WL9e All images are under CreativeCommons license (http://creativecommons.org/) Thank you!