Difference between revisions of "D7 Themes"
Jump to navigation
Jump to search
(→Grid) |
|||
Line 1: | Line 1: | ||
{{techy}} | {{techy}} | ||
+ | |||
+ | * [http://drupal.org/node/464802 Semantics, structure and presentation] | ||
+ | |||
+ | * [http://drupal.org/node/171205 Structure of the .info file] | ||
+ | * [http://drupal.org/node/171206 Default .info values] | ||
+ | * [http://drupal.org/node/171224 Assigning content to regions] | ||
+ | * [http://drupal.org/node/225125 Creating a sub-theme] | ||
+ | * [http://drupal.org/node/171213 JavaScript and jQuery] | ||
+ | |||
+ | * Using the Drupal Theme Developer Tool: [http://www.youtube.com/watch?v=0z9FRWPfIOU YouTube: Theming Basics for Drupal] | ||
+ | ** http://drupal.org/project/devel_themer | ||
+ | |||
+ | == Templates == | ||
+ | * [http://www.archive.org/details/ThemePreprocessFunctionsAnIntroduction_383 Theme Preprocess Functions: an Introduction] | ||
+ | |||
+ | * [http://drupal.org/node/341628 Overriding themable output] | ||
+ | * [http://drupal.org/node/1200216 Theming forms in your theme] | ||
+ | |||
+ | * [http://api.drupal.org/api/drupal/modules--system--theme.api.php/group/themeable/7 modules--system--theme.api.php] - Default theme implementations | ||
+ | |||
+ | * [http://drupal.org/node/1089656 Drupal 7 Template Suggestions] | ||
+ | * [http://drupal.org/node/190815 Core templates] | ||
+ | |||
+ | * [http://api.drupal.org/api/drupal/modules--system--html.tpl.php modules--system--html.tpl.php] | ||
+ | * [http://api.drupal.org/api/drupal/modules--system--page.tpl.php/7 modules--system--page.tpl.php] | ||
+ | * [http://api.drupal.org/api/drupal/modules--node--node.tpl.php/7/source modules--node--node.tpl.php] | ||
+ | ** [http://api.drupal.org/api/drupal/modules%21node%21node.module/function/template_preprocess_node/7 template_preprocess_node] | ||
+ | * [http://api.drupal.org/api/drupal/modules--block--block.tpl.php/7 modules--block--block.tpl.php] | ||
+ | * etc. | ||
+ | |||
== Themes == | == Themes == | ||
Line 36: | Line 66: | ||
@include alpha; - remove left gutter, for nested grid first element. must got after grid() | @include alpha; - remove left gutter, for nested grid first element. must got after grid() | ||
@include omega; - remove right gutter, for nested grid last element. must got after grid() | @include omega; - remove right gutter, for nested grid last element. must got after grid() | ||
− | |||
− | |||
− |
Revision as of 03:42, 19 February 2012
- Structure of the .info file
- Default .info values
- Assigning content to regions
- Creating a sub-theme
- JavaScript and jQuery
- Using the Drupal Theme Developer Tool: YouTube: Theming Basics for Drupal
Templates
- modules--system--theme.api.php - Default theme implementations
- modules--system--html.tpl.php
- modules--system--page.tpl.php
- modules--node--node.tpl.php
- modules--block--block.tpl.php
- etc.
Themes
Sasson
- http://drupal.org/project/sasson - HTML5, responsive (content first), semantic grid (SASS/SCSS), CSS reset (normalize)
Currently uses this phamlp fork which bundles Compass. This might change if Sasson switches to this fork.
drush sns [name]
- generate a subtheme. ff does this auto if theme is sasson.
sasson.info calls
- sasson/styles/boilerplate.css - h5bp.com/css
- sasson/styles/sasson.scss (.info call is to the processed .css, natch)
- @imports "css3", "960/grid", @import "base";
- https://github.com/nextmat/compass-960-plugin/blob/master/stylesheets/960/_grid.sass
Notes
- sasson/styles/layout/desktop-first/sasson-base.scss sets .page as 960px. for a 100% wrapper, add a div in subtheme/templates/page.tpl.php
Grid
- compass-960-plugin - grid system used
@import "css3"; @import "960/grid"; @import "base"; $ninesixty-columns: 16;
@include grid(8); - declare an 8 column wide element @include grid-prefix(2); - add an empty 2-wide element before @include grid-suffix(2); - add an empty 2-wide element after @include grid-push(4); - push element 4 to the right @include grid-pull(4); - pull element 4 to the right @include alpha; - remove left gutter, for nested grid first element. must got after grid() @include omega; - remove right gutter, for nested grid last element. must got after grid()