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

@sotaksotak.co.ukinlinemanual.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 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

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 CSSin 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 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

https://drupal.org/project/zenhttps://drupal.org/project/bootstraphttps://drupal.org/project/taohttps://drupal.org/project/frameworkhttp://drupal.org/project/adaptivethemehttps://drupal.org/project/omegahttps://drupal.org/project/fusionhttps://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 workshopsBasic themingAdvanced themingdrupal module developmentDrupal knowledge sharingConsulting

£130/person excl. VAT

@sotaksotak.co.ukinlinemanual.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!