©2009 SugarCRM Inc. All rights reserved.

Theme Development in Sugar 5.5

John Mertic

SugarCRM

12/30/08©2009 SugarCRM Inc. All rights reserved. 3

Agenda

Themes before Sugar 5.5

Goals of Theme improvements

Demo Time!

Upgrading old Themes

Questions?

Themes prior to Sugar 5.5

12/30/08 ©2009 SugarCRM Inc. All rights reserved. 4

12/30/08©2009 SugarCRM Inc. All rights reserved. 5

Hard to create

Lots of copy and pasting from existing themesHeader/footer PHP code

Duplicate Images / Javascript

Results in breakages of themes over timeMany bugs exist in themes because of not applying changes to every theme.

12/30/08©2009 SugarCRM Inc. All rights reserved. 6

Hard to create

CSS was very uglyNot intuitive to know which styles to change

Unclear on how to make simple changes to the layout

12/30/08©2009 SugarCRM Inc. All rights reserved. 7

Hard to work with existing themes

No way to modify theme in an upgrade-safe wayHave to replace theme components and then re-apply modification after version upgrades

12/30/08©2009 SugarCRM Inc. All rights reserved. 8

Hard to work with existing themes

Could not leverage existing theme in a new themeHad to copy all components of the theme to the new theme

Would not get bug fixes and upgrades from existing theme

This needs to be MUCH easier.

12/30/08 ©2009 SugarCRM Inc. All rights reserved. 9

12/30/08©2009 SugarCRM Inc. All rights reserved. 10

Goals of Theme Improvements

Clean up CSS and HTML

Simplify the theme directory layout.

Allow themes to inherit from other themes.

Allow upgrade-safe modifications to themes.

Improve theme performance

12/30/08©2009 SugarCRM Inc. All rights reserved. 11

Clean up CSS and HTML

Standardize the layout of the application

Break apart the UI components into separate templates, identified by DIV tags

12/30/08©2009 SugarCRM Inc. All rights reserved. 12

Clean up CSS and HTML

Each component is built in it’s own template, which is assembled in the main header template

Allows customization of the HTML layout of the header without having to copy/paste or change the code of each component.

12/30/08©2009 SugarCRM Inc. All rights reserved. 13

Clean up CSS and HTML

Removed and updated many CSS class namesAdded base classes for the container HTML elements

.view, .edit, .detail, etc

Child element styles can be defined from them

Example: .edit.view td[scope=row] to style editview label

12/30/08©2009 SugarCRM Inc. All rights reserved. 14

Simplify Theme Directory Layout

Move theme components into directories

css/ - contains all css files

images/ - contains all images

js/ - contains any js files.

tpls/ - smarty templates

Only file in theme directory is the themedef.php definition file.

12/30/08©2009 SugarCRM Inc. All rights reserved. 15

Allow themes to inherit from other themes

All themes by default will extend from a default theme.

Contains all images used in the application

Base CSS styleUses YUI base.css to help browser inconsistencies

Provides default styling and positioning for most theme elements

Contains base templates for non-content sections ( header, left sidebar, footer )

Can also extend from an existing theme.

12/30/08©2009 SugarCRM Inc. All rights reserved. 16

Allow themes to inherit from other themes

Theme Inheritance Model

12/30/08©2009 SugarCRM Inc. All rights reserved. 17

Allow upgrade-safe modifications to themes

All themes can be modified by putting the replacement or overriding file in the custom/theme/<themename> directory

Image, HTML template file overrides are used as a replacement of the previous file

Example: an image custom/theme/<themename>/dog.gif would be used instead of theme/<themename>/dog.gif

CSS and Javascript files are combined in order of inheritance

Uses cssmin and jsmin to help reduce file size

No further code changes are required – changes are picked up automatically when themes cache is rebuilt.

12/30/08©2009 SugarCRM Inc. All rights reserved. 18

Improve theme performance

Cleaned up layout template has reduced payload size 5-10%

Removed much of the Javascript that can be done in other ways

Dropdown menus – now pure CSS

Row highlighting – now uses :hover pseudo-class

Removed much of the inline javascript, now is unobtrusive

Duplicate javascript removed

Automatic minifying of CSS and Javascript code before delivering it to the client

Caching of theme file locations ( requires external cache )

12/30/08©2009 SugarCRM Inc. All rights reserved. 19

Demo Time!

Changing images in a theme.

Customize colors and fonts in a theme.

Change layout of a theme.

Fixes to a few forums problems

Upgrading old Themes to work in Sugar 5.5

12/30/08 ©2009 SugarCRM Inc. All rights reserved. 20

12/30/08©2009 SugarCRM Inc. All rights reserved. 21

Theme Upgrading

Setup the new theme directory layoutMove images to images/ directory, css files to css/ directory, and javascript to js/ directory.

Create the themedef.php fileSettings come from the config.php file and layout_utils.php file.

Defined as an associative array ( similar to vardefs.php ).

12/30/08©2009 SugarCRM Inc. All rights reserved. 22

Theme Upgrading

Consolidate FilesMove contents of core styles ( navigation.css, style.css, calendar-win2k-cold-1.css ) to style.css

Remove any duplicate images or js files from default theme.

Convert CSS stylesSpec will be provided on style changes

Should mostly be a find and replace operation, but you’ll need to take into account css styling from the default theme.

Make any layout changes to the tpls/header.tpl file.Only required if your theme has a non-standard layout

Questions?

12/30/08 ©2009 SugarCRM Inc. All rights reserved. 23