SugarCON 2009 - Theme Development in Sugar 5.5

1,538 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

SugarCON 2009 - Theme Development in Sugar 5.5

  1. 2. ©2009 SugarCRM Inc. All rights reserved. Theme Development in Sugar 5.5 John Mertic SugarCRM
  2. 3. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Agenda <ul><li>Themes before Sugar 5.5 </li></ul><ul><li>Goals of Theme improvements </li></ul><ul><li>Demo Time! </li></ul><ul><li>Upgrading old Themes </li></ul><ul><li>Questions? </li></ul>
  3. 4. Themes prior to Sugar 5.5 12/30/08 ©2009 SugarCRM Inc. All rights reserved.
  4. 5. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Hard to create <ul><li>Lots of copy and pasting from existing themes </li></ul><ul><ul><li>Header/footer PHP code </li></ul></ul><ul><ul><li>Duplicate Images / Javascript </li></ul></ul><ul><ul><li>Results in breakages of themes over time </li></ul></ul><ul><ul><ul><li>Many bugs exist in themes because of not applying changes to every theme. </li></ul></ul></ul>
  5. 6. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Hard to create <ul><li>CSS was very ugly </li></ul><ul><ul><li>Not intuitive to know which styles to change </li></ul></ul><ul><ul><li>Unclear on how to make simple changes to the layout </li></ul></ul>
  6. 7. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Hard to work with existing themes <ul><li>No way to modify theme in an upgrade-safe way </li></ul><ul><ul><li>Have to replace theme components and then re-apply modification after version upgrades </li></ul></ul>
  7. 8. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Hard to work with existing themes <ul><li>Could not leverage existing theme in a new theme </li></ul><ul><ul><li>Had to copy all components of the theme to the new theme </li></ul></ul><ul><ul><li>Would not get bug fixes and upgrades from existing theme </li></ul></ul>
  8. 9. This needs to be MUCH easier. 12/30/08 ©2009 SugarCRM Inc. All rights reserved.
  9. 10. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Goals of Theme Improvements <ul><li>Clean up CSS and HTML </li></ul><ul><li>Simplify the theme directory layout. </li></ul><ul><li>Allow themes to inherit from other themes. </li></ul><ul><li>Allow upgrade-safe modifications to themes. </li></ul><ul><li>Improve theme performance </li></ul>
  10. 11. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Clean up CSS and HTML <ul><li>Standardize the layout of the application </li></ul><ul><ul><li>Break apart the UI components into sep a rate templates, identified by DIV tags </li></ul></ul>
  11. 12. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Clean up CSS and HTML <ul><li>Each component is built in it’s own template, which is assembled in the main header template </li></ul><ul><ul><li>Allows customization of the HTML layout of the header without having to copy/paste or change the code of each component. </li></ul></ul>
  12. 13. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Clean up CSS and HTML <ul><li>Removed and updated many CSS class names </li></ul><ul><ul><li>Added base classes for the container HTML elements </li></ul></ul><ul><ul><ul><li>.view, .edit, .detail, etc </li></ul></ul></ul><ul><ul><li>Child element styles can be defined from them </li></ul></ul><ul><ul><ul><li>Example: .edit.view td[scope=row] to style editview label </li></ul></ul></ul>
  13. 14. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Simplify Theme Directory Layout <ul><li>Move theme components into directories </li></ul><ul><ul><li>c ss/ - contains all css files </li></ul></ul><ul><ul><li>i mages/ - contains all images </li></ul></ul><ul><ul><li>j s/ - contains any js files. </li></ul></ul><ul><ul><li>t pls/ - smarty templates </li></ul></ul><ul><li>Only file in theme directory is the themedef.php definition file. </li></ul>
  14. 15. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Allow themes to inherit from other themes <ul><li>All themes by default will extend from a default theme. </li></ul><ul><ul><li>Contains all images used in the application </li></ul></ul><ul><ul><li>Base CSS style </li></ul></ul><ul><ul><ul><li>Uses YUI base.css to help browser inconsistencies </li></ul></ul></ul><ul><ul><ul><li>Provides default styling and positioning for most theme elements </li></ul></ul></ul><ul><ul><li>Contains base templates for non-content sections ( header, left sidebar, footer ) </li></ul></ul><ul><li>Can also extend from an existing theme. </li></ul>
  15. 16. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Allow themes to inherit from other themes <ul><li>Theme Inheritance Model </li></ul>
  16. 17. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Allow upgrade-safe modifications to themes <ul><li>All themes can be modified by putting the replacement or overriding file in the custom/theme/<themename> directory </li></ul><ul><ul><li>Image, HTML template file overrides are used as a replacement of the previous file </li></ul></ul><ul><ul><ul><li>Example: an image custom/theme/<themename>/dog.gif would be used instead of theme/<themename>/dog.gif </li></ul></ul></ul><ul><ul><li>CSS and Javascript files are combined in order of inheritance </li></ul></ul><ul><ul><ul><li>Uses cssmin and jsmin to help reduce file size </li></ul></ul></ul><ul><li>No further code changes are required – changes are picked up automatically when themes cache is rebuilt. </li></ul>
  17. 18. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Improve theme performance <ul><li>Cleaned up layout template has reduced payload size 5-10% </li></ul><ul><li>Removed much of the Javascript that can be done in other ways </li></ul><ul><ul><li>Dropdown menus – now pure CSS </li></ul></ul><ul><ul><li>Row highlighting – now uses :hover pseudo-class </li></ul></ul><ul><ul><li>Removed much of the inline javascript, now is unobtrusive </li></ul></ul><ul><ul><li>Duplicate javascript removed </li></ul></ul><ul><li>Automatic minifying of CSS and Javascript code before delivering it to the client </li></ul><ul><li>Caching of theme file locations ( requires external cache ) </li></ul>
  18. 19. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Demo Time! <ul><li>Changing images in a theme. </li></ul><ul><li>Customize colors and fonts in a theme. </li></ul><ul><li>Change layout of a theme. </li></ul><ul><li>Fixes to a few forums problems </li></ul>
  19. 20. Upgrading old Themes to work in Sugar 5.5 12/30/08 ©2009 SugarCRM Inc. All rights reserved.
  20. 21. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Theme Upgrading <ul><li>Setup the new theme directory layout </li></ul><ul><ul><li>Move images to images/ directory, css files to css/ directory, and javascript to js/ directory. </li></ul></ul><ul><li>Create the themedef.php file </li></ul><ul><ul><li>Settings come from the config.php file and layout_utils.php file. </li></ul></ul><ul><ul><li>Defined as an associative array ( similar to vardefs.php ). </li></ul></ul>
  21. 22. 12/30/08 ©2009 SugarCRM Inc. All rights reserved. Theme Upgrading <ul><li>Consolidate Files </li></ul><ul><ul><li>Move contents of core styles ( navigation.css, style.css, calendar-win2k-cold-1.css ) to style.css </li></ul></ul><ul><ul><li>Remove any duplicate images or js files from default theme. </li></ul></ul><ul><li>Convert CSS styles </li></ul><ul><ul><li>Spec will be provided on style changes </li></ul></ul><ul><ul><li>Should mostly be a find and replace operation, but you’ll need to take into account css styling from the default theme. </li></ul></ul><ul><li>Make any layout changes to the tpls/header.tpl file. </li></ul><ul><ul><li>Only required if your theme has a non-standard layout </li></ul></ul>
  22. 23. Questions? 12/30/08 ©2009 SugarCRM Inc. All rights reserved.

×