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

25
Adopt or hack How to hack a theme in a Drupal way London learning meetup 2014 Marek Sotak - @sotak - sotak.co.uk

Upload: marek-sotak

Post on 17-Aug-2014

511 views

Category:

Design


0 download

DESCRIPTION

How to create a base theme for Drupal 7

TRANSCRIPT

Page 1: Adopt or hack - how to hack a theme in a Drupal way

Adopt or hackHow to hack a theme in a Drupal way

London learning meetup 2014 Marek Sotak - @sotak - sotak.co.uk

Page 3: Adopt or hack - how to hack a theme in a Drupal way

You have a vision...

Page 4: Adopt or hack - how to hack a theme in a Drupal way

Choices...

Page 5: Adopt or hack - how to hack a theme in a Drupal way

Where is your creativity now?

Page 6: Adopt or hack - how to hack a theme in a Drupal way

Should I hack or adopt?

Page 7: Adopt or hack - how to hack a theme in a Drupal way

Drupal police: So you want to hack?

Page 8: Adopt or hack - how to hack a theme in a Drupal way

Direct code changes are OK if:

you know what you are doing

you have process behind of keeping

changes after upgrade > patches

Page 9: Adopt or hack - how to hack a theme in a Drupal way

Hack with confidence - systematically

Page 10: Adopt or hack - how to hack a theme in a Drupal way

Lets put a theme into a theme to override a theme

Page 11: Adopt or hack - how to hack a theme in a Drupal way

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

Page 12: Adopt or hack - how to hack a theme in a Drupal way

Lets try it out

Page 13: Adopt or hack - how to hack a theme in a Drupal way

Lets create a sub-theme of Bartik called “My Bartik1. 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.info3. 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

Page 14: Adopt or hack - how to hack a theme in a Drupal way

Sub-theme shares these resources from its base theme● stylesheets● scripts● *.tpl.php files● anything declared in template.php● screenshot

Creating a sub-theme

Page 15: Adopt or hack - how to hack a theme in a Drupal way

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

Page 16: Adopt or hack - how to hack a theme in a Drupal way

Adding your stylesheet - overriding the CSSin the sub-theme .info file stylesheets[all][] = style.css

works same for the scripts scripts[] = script.js

Creating a sub-theme

Page 17: Adopt or hack - how to hack a theme in a Drupal way

Play and learn with CSS - small intro

Page 18: Adopt or hack - how to hack a theme in a Drupal way

Once you master the CSS > freedom

Page 19: Adopt or hack - how to hack a theme in a Drupal way

CSS Selectors- http://www.sitepoint.com/web-foundations/css-selectors/

CSS Reference- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Other resourceshttp://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

Page 21: Adopt or hack - how to hack a theme in a Drupal way

Base-themes - Do you still need that scaffolding?

Page 22: Adopt or hack - how to hack a theme in a Drupal way

“Creativity comes from looking for the unexpected and stepping

outside your own experience.”

Masaru Ibuka

Page 23: Adopt or hack - how to hack a theme in a Drupal way

Workshops in London

1 day workshopsBasic themingAdvanced themingdrupal module developmentDrupal knowledge sharingConsulting

£130/person excl. VAT

Page 25: Adopt or hack - how to hack a theme in a Drupal way

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!