Adopt or hack - how to hack a theme in a Drupal way

  • 2,011 views
Uploaded on

How to create a base theme for Drupal 7

How to create a base theme for Drupal 7

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,011
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
6
Comments
1
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Adopt or hack How to hack a theme in a Drupal way London learning meetup 2014 Marek Sotak - @sotak - sotak.co.uk
  • 2. @sotak sotak.co.uk inlinemanual.com
  • 3. You have a vision...
  • 4. Choices...
  • 5. Where is your creativity now?
  • 6. Should I hack or adopt?
  • 7. Drupal police: So you want to hack?
  • 8. Direct code changes are OK if: you know what you are doing you have process behind of keeping changes after upgrade > patches
  • 9. Hack with confidence - systematically
  • 10. Lets put a theme into a theme to override a theme
  • 11. 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
  • 12. Lets try it out
  • 13. 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
  • 14. Sub-theme shares these resources from its base theme ● stylesheets ● scripts ● *.tpl.php files ● anything declared in template.php ● screenshot Creating a sub-theme
  • 15. 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
  • 16. 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
  • 17. Play and learn with CSS - small intro
  • 18. Once you master the CSS > freedom
  • 19. 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
  • 20. 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
  • 21. Base-themes - Do you still need that scaffolding?
  • 22. “Creativity comes from looking for the unexpected and stepping outside your own experience.” Masaru Ibuka
  • 23. Workshops in London 1 day workshops Basic theming Advanced theming drupal module development Drupal knowledge sharing Consulting £130/person excl. VAT
  • 24. @sotak sotak.co.uk inlinemanual.com
  • 25. 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!