Download - Drupal 7 — Circle theme
![Page 1: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/1.jpg)
![Page 2: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/2.jpg)
Files
![Page 3: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/3.jpg)
template.php
![Page 4: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/4.jpg)
Separate files
/includes/icons.template.inc
/includes/form.template.inc
/includes/menu.template.inc
/includes/css.template.inc
/includes/theme-functions.template.inc
![Page 5: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/5.jpg)
_preprocess
_preprocess_menu_link
_preprocess_image_style
_preprocess_panels_pane
_theme_registry_alter*
_js_alter / _css_alter
_breadcrumb
_field
_form_alter
_form_element / _form_element_label
_theme
![Page 6: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/6.jpg)
_preprocess_panels_pane
theme_hook_suggestions:
- panels_pane__TITLE
- panels_pane__class__PANECLASS[0]
- panels_pane__class__PANECLASS
![Page 7: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/7.jpg)
Libraries:
- Bootstrap
- Foundation
- Modernizr
- Normalize
- Html5shiv
- Less
- IE 7-9 support
![Page 8: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/8.jpg)
Apple
devices
icons
![Page 9: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/9.jpg)
Theme settings
![Page 10: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/10.jpg)
CSS
- Remove system styles
- Include circle styles
- Use IE styles
- Aggregate all css into 1 file
![Page 11: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/11.jpg)
JavaScript
- Include libraries
- Aggregate files into 1
- All scripts in footer
- Use jQuery from CDN
![Page 12: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/12.jpg)
Frameworks
- Separate CSS and JS for Bootstrap
- Separate CSS and JS for Foundation
- CDN or locally via libraries (thx Placinta!)
![Page 13: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/13.jpg)
Breadcrumb
- custom separator
- add content title
- hide if only home present
- anything else?
![Page 14: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/14.jpg)
Circle features:
- Humancs.css
- Less support
+ Mobile support
New features coming up soon!
![Page 15: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/15.jpg)
Starterkit
![Page 16: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/16.jpg)
Layouts:
- 1,2,3,4,5 Columns
- Bootstrap & Foundation
Designed for Grid system panel styles
![Page 17: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/17.jpg)
Layouts have additional settings:
(currently only Bootstrap)
![Page 18: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/18.jpg)
Panel pane/region styles:
Grid system columns:
- for framework grids
Pane classes:
- for custom content
and title classes.
![Page 19: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/19.jpg)
Grid system columns:
![Page 20: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/20.jpg)
Pane classes:
![Page 21: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/21.jpg)
For themers
![Page 22: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/22.jpg)
Scss support:
/base
_forms
_lists
/variables
_colors
_typography
THEME.styles.scss
.gem file coming soon.
![Page 23: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/23.jpg)
IE support:
css/ie.css
css/ie8.css
css/ie9.css
Make sure to enable IE support in settings
![Page 24: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/24.jpg)
Custom layouts and styles:
Theme layouts and styles are part of
starterkit, so make sure to delete layouts
that you don’t need. Path to layouts defined
automatically in starterkit theme.
/plugins/layouts/…
/plugins/styles/...
![Page 25: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/25.jpg)
Custom templates:
panels-pane.tpl.php
views-view.tpl.php
Both are duplicated in starterkit
![Page 26: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/26.jpg)
For developers
![Page 27: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/27.jpg)
Custom theme functions:
Currently some simple functions.
You can preprocess Circle theme function
and add your stuff.
Plans:
circle_theme_table
circle_theme_fieldset
circle_theme_accordion
![Page 28: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/28.jpg)
Renderable arrays:
$submitted = array(
'label' => array(
'#prefix' => '<span class="submitted-by-name">',
'#markup' => t('Submitted by '),
'#suffix' => '</span>',
'#weight' => -20,
),
'username' => array(
'#markup' => $variables['name'],
'#weight' => -15,
),
'on_text' => array(
'#prefix' => '<span class="submitted-by-on">',
'#markup' => t(' on '),
'#suffix' => '</span>',
'#weight' => -10,
),
...
![Page 29: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/29.jpg)
Menus:
Custom menu_preprocess keeps all the menu items
information.
Class attribute fixes:
You can add classes for theme functions that didn’t
accept them before. Ex.: _field, _menu_tree
* Some functions are still in progress :)
![Page 30: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/30.jpg)
Garland styles:
You can enable Garland in theme settings.
And disable when an actual themer appears.
Hope you’re glad, Vladimir :)
![Page 31: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/31.jpg)
Pros and Cons
![Page 32: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/32.jpg)
Cons:
- No as large community as Zen or Omega
- No great starting styles*
- Few custom features
- Good only for working with panels
- Often updates
![Page 33: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/33.jpg)
Pros
+ Bootstrap and Foundation out of the box
+ Great Panels support
+ Clean markup and no styles
+ Configures a lot from theme settings
+ Often updates
+ Commit rights
![Page 34: Drupal 7 — Circle theme](https://reader031.vdocument.in/reader031/viewer/2022020314/5a6eae4a7f8b9a49648b5a93/html5/thumbnails/34.jpg)
Thank you!
http://dgo.to/circle
Create your issues and bug reports athttps://drupal.org/project/issues/circle