Theming with
   Skinr!
Presented by Jacine Rodriguez
Hello
 Jacine Rodriguez          Bala Bosch
   Jacine                    moonray
 http://drupal.org/user/   http://drupal....
Themer Pain Points

Lack of Mockups    =   No big picture planning

Lack of Time       =   Sloppy CSS

Crazy Selectors    ...
You’re doing it wrong if...
 you’re not styling default Drupal elements
 you’re targeting ID’s in your CSS excessively
 yo...
Skinr is a tool which...
 allows you create your own reusable style definitions
 (skins) in the theme layer
 lets you creat...
What can I do with Skinr?
 headings                   layout
 blocks/panes               fonts
 menus                     ...
Where Skinr shines
Contributed themes
Projects where development is ongoing
Themes for clients that are very hands on
Code...
Start by defining your Skins
in .info
skinr[my_nav][title] = Navigation Style
skinr[my_nav][description] = Here's a nav wit...
Print $skinr in your templates
A Client example...
What we skinned...
Themes that support Skinr
Base themes
  Fusion, Adaptive Theme, Zen, Studio, Basic

General/Subthemes
  Acquia Prosper, Ac...
More information
Project page: http://drupal.org/project/skinr
Documentation: Skinr provides full documentation
within the...
Upcoming SlideShare
Loading in …5
×

Theming with Skinr

5,555 views

Published on

Drupalcon SF session: http://sf2010.drupal.org/conference/sessions/theming-skinr

Published in: Technology
2 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total views
5,555
On SlideShare
0
From Embeds
0
Number of Embeds
80
Actions
Shares
0
Downloads
121
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide













  • Theming with Skinr

    1. 1. Theming with Skinr! Presented by Jacine Rodriguez
    2. 2. Hello Jacine Rodriguez Bala Bosch Jacine moonray http://drupal.org/user/ http://drupal.org/user/ 88931 68275 twitter.com/jacine twitter.com/dasphere
    3. 3. Themer Pain Points Lack of Mockups = No big picture planning Lack of Time = Sloppy CSS Crazy Selectors = Less Reusable Code Not much flexibility, After Completion = Low shelf life
    4. 4. You’re doing it wrong if... you’re not styling default Drupal elements you’re targeting ID’s in your CSS excessively you’re writing way too specific CSS you’re creating a new tpl file for every little change you’re not structuring markup in a way that is flexible
    5. 5. Skinr is a tool which... allows you create your own reusable style definitions (skins) in the theme layer lets you create your own CSS classes, and forget about Drupal makes your styles pointy clicky so that you can take a vacation
    6. 6. What can I do with Skinr? headings layout blocks/panes fonts menus carousels lists sliders As much or as little as you want to...
    7. 7. Where Skinr shines Contributed themes Projects where development is ongoing Themes for clients that are very hands on Code snippet sharing and reuse
    8. 8. Start by defining your Skins in .info skinr[my_nav][title] = Navigation Style skinr[my_nav][description] = Here's a nav with 2 color options. Pick one. skinr[my_nav][features][] = block_menu_block skinr[my_nav][type] = select skinr[my_nav][stylesheets][all][] = css/nav.css skinr[my_nav][options][1][label] = Blue skinr[my_nav][options][1][class] = nav nav-blue skinr[my_nav][options][2][label] = Green skinr[my_nav][options][2][class] = nav nav-green
    9. 9. Print $skinr in your templates
    10. 10. A Client example...
    11. 11. What we skinned...
    12. 12. Themes that support Skinr Base themes Fusion, Adaptive Theme, Zen, Studio, Basic General/Subthemes Acquia Prosper, Acquia Marina, AT Koda, Light Fantastic, Celadon, Newswire, Abstract, AT Panels Everywhere
    13. 13. More information Project page: http://drupal.org/project/skinr Documentation: Skinr provides full documentation within the Skinr module via the Advanced Help module.

    ×