Sugar Developer Guide Version 5.1

Tips & Pitfalls

Pick your Canvas

Think about how you want the general look and feel of your theme, and see which out-of-the-box existing Sugar theme best fits. This will reduce any extra work that may come out of rearranging the layout because you chose the first theme you saw.

Replace All

When changing colors in the css files, do a “replace all” on the file. For example, if you are changing the color ‘#FF0000’ to ‘#CC0000’, change all instances of ‘#FF0000’ to ‘#CC0000’. Eventually you will get to a point where you may want your changes to only affect one class, and may have to go back and refine some of the mass changes. However doing this initially will usually result favorably and save you some time.

Check your work

So you have all your css laid out and your home page looks good? Did you check your Edit and List views? Did you check the calendar popup widgets (from date fields)? Often themes developers forget to check the css for Sugar Dashlets, reports and charts. Don’t forget to do a thorough check and keep in mind that you may have to tweak with navigation.css, layout_utils.php, and sugarColors.xml files before being finally done.

Personalize your theme

Remember this is your theme now. If you want to add a new div, or introduce a new class, you don’t have to make it fit within the confines of the theme you started with. Most of the images are transparent and work fine, but changing the look and feel of those would add an extra degree of customization. So go ahead and add your flash intro, embedded mp3 or Star Wars Background (C’mon, you know you were thinking about a Star Wars theme).