Building an Initial Custom Theme

607 views
556 views

Published on

Presented at San Diego Drupal Camp 2010

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
607
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building an Initial Custom Theme

  1. 1. Creating an Initial Custom Theme in Drupal by Troy Shields www.troyshields.com 1
  2. 2. Assumptions • You understand how to: • Set up a Drupal site • Write HTML/CSS 2
  3. 3. The Situation What I Wish I Knew • You’re a “Themer” • You’re working with a team of Explain my experience and “what I wish I knew” developers • You’re working in tandem • You need to get base styles & your regions in place for your developers 3
  4. 4. Understanding the Files • sites/all/themes/yourthemename • .info file • logo.png, screenshot.png • stylesheets & tpls Go over what’s in INFO file: Name Regions CSS 4
  5. 5. Creating the Template Bad HTML and CSS are not Drupal’s fault. If it doesn’t work outside of Drupal, it won’t work inside of Drupal. • Create a static template & test in browsers you support page-front/homepage is last because it’s a • page.tpl.php should be the most conglomeration of the rest of the site. Use as few page tpls as possible common page if nothing is in the • Simple “if” statements for sidebars sidebar, it won’t show up. use body class to style columns appropriately • Site Building: build what you know 5
  6. 6. A Theory of CSS • Understand Floating & Positioning. Holy Grail • Absolutely position elements in headers with static heights. There are no mysteries here • Columns need floats and widths, but rarely elements inside of them • Use negative margins sparingly. This is often used as a band-aid on a gunshot wound 6
  7. 7. Wrap Up think: generic enough to contribute or use for another site. • Build stuff you know. Columns, header, footer. • Stuff you don’t know. Theming that relies on specific id’s and classes output by Drupal modules. This is stuff with id’s and classes you don’t know because they haven’t been built. 7
  8. 8. The End. Thanks. 8

×