1. an introduction to
for designers
The Open Melody Software Group
Byrne Reese

2. what’dya gonna talk about?
• Why Melody?
• Templating Language
• Templates and Themes
• Theme Options & Config Bundles
• Great Tools & Plugins for Designers

3. about melody
Melody is an open source CMS
built by professional service
providers for people who share
a passion for community and
creating great web sites.

4. why melody?
• Easy to use with no knowledge of a
programming language required.
• Highly extensible with tons of plugins to
choose from.
• Build powerful, secure and reliable web
sites with no additional plugins or software
needed.
• Create feature rich, social-media aware
web sites for customers.

5. why designers like melody
• Simple, semantic and intuitive templating language.
• Easy to build web sites quickly.
• Focus on features that allow for supportable and
maintainable themes and code.
• Upgrade without breaking everything.

6. getting started:
templating language

7. The Melody Templating Language is a
mark-up language
just like:

8. The Melody Templating Language is a
mark-up language
just like:
HTML

9. <h1>My Website Name</h1>
if this looks familiar...

10. <h1><$mt:BlogName$></h1>
then so should this.

11. basic syntax
• Markup Language
• Case Insensitive
• XML-ish
• Examples:
• Function: <$mt:MyTag$>
• Loop: <mt:MyLoop>...</mt:MyLoop>

16. lotsa variation
These are all equivalent:
• <mt:Foo>
• <MTFoo>
• <$mt:Foo$>
• <mtfoo>

17. function tags
• <$mt:EntryTitle$>
• <$mt:AuthorName$>
• <$mt:AuthorUserpic$>
• <$mt:AssetThumbnailURL width=”100”$>
• <$mt:CommentText$>
Plus hundreds more...

18. variables
• Setting a variable:
<mt:var name=”foo” value=”bar”>
• Outputting a variable:
<mt:var name=”foo”>
• Setting a variable block:
<mt:SetVarBlock name=”foo”>
<mt:Entries>
<$mt:EntryTitle$>
</mt:Entries>
</mt:SetVarBlock>

19. loops & container tags
• <mt:Entries>
• <mt:Comments>
• <mt:Authors>
• Sort and filter:
• sort, sort_direction, lastn, <filter by>
And many more...

20. special loop variables
• These are maintained for you:
• __first__
• __last__
• __counter__
• __even__
• __odd__
e.g. <$mt:var name=”__counter__”$>

21. special loop variables
• These are maintained for you:
• __first__
Yes, those are two
• __last__ underscores.
• __counter__
• __even__
• __odd__
e.g. <$mt:var name=”__counter__”$>

22. includes & encapsulation
• Share HTML and template code between templates
<$mt:include module=”Module Name”$>
• Include:
• Modules
• Widgets
• Files

23. modifiers
• Can be used to transform any tag
• <$mt:EntryTitle lower_case=”1”$>
• encode_html=”1” (js, xml, etc)
• upper_case=”1”, lower_case=”1”
• count_words=”1”
• trim
• Many more...

24. for example...
<$mt:EntryTitle$> => My “Blog”
<$mt:EntryTitle upper_case=”1”$> => MY “BLOG”
<$mt:EntryTitle lower_case=”1”$> => my “blog”
<$mt:EntryTitle encode_html=”1”$> => My &quot;Blog&quot;
<$mt:EntryTitle count_words=”1”$> => 2

25. conditionals
• <mt:if name=”foo” eq=”Byrne”>
• <mt:else name=”foo” eq=”Jay”>
• <mt:else>
• <mt:if name=”foo” ne=”$bar”>

26. conditional operators
• Equals?
<mt:if name=”foo” eq=”Byrne”>
• Not equal to?
<mt:if name=”foo” ne=”Byrne”>
• Greater than?
<mt:if name=”foo” gt=”10”>
• Less than?
<mt:if name=”foo” lt=”366”>
• Plus: le (less then or equal to), ge (greater than or
equal to)

27. bringing it all together
<mt:Entries lastn="10">
<mt:if name="__first__"><ul></mt:if>
<li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>">
<$mt:var name="__counter__"$>. <$mt:EntryTitle$>
</li>
<mt:if name="__last__"></ul></mt:if>
</mt:Entries>

28. bringing it all together
<mt:Entries lastn="10">
<mt:if name="__first__"><ul></mt:if>
<li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>">
<$mt:var name="__counter__"$>. <$mt:EntryTitle$>
</li>
<mt:if name="__last__"></ul></mt:if>
</mt:Entries>
loops

29. bringing it all together
<mt:Entries lastn="10">
<mt:if name="__first__"><ul></mt:if>
<li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>">
<$mt:var name="__counter__"$>. <$mt:EntryTitle$>
</li>
<mt:if name="__last__"></ul></mt:if>
</mt:Entries>
conditional tags

30. bringing it all together
<mt:Entries lastn="10">
<mt:if name="__first__"><ul></mt:if>
<li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>">
<$mt:var name="__counter__"$>. <$mt:EntryTitle$>
</li>
<mt:if name="__last__"></ul></mt:if>
</mt:Entries>
variables & meta-loop variables

31. templates

40. packaging

41. theme structure
• Themes are broken up into three components:
• a configuration file, a.k.a. “config.yaml”
• templates
• static files (images, stylesheets, javascript, etc)

42. config.yaml
name: My Theme Pack
template_sets:
my_theme:
label: The Best Theme in the World
templates:
base_path: templates/
index:
main_index:
label: Main Index
filename: index.mtml

43. config.yaml
name: My Theme Pack
template_sets:
my_theme:
label: The Best Theme in the World
templates:
base_path: templates/
index:
main_index:
label: Main Index
filename: index.mtml
What’s on the file system:
plugins/MyTheme/config.yaml
plugins/MyTheme/templates/ (your “base path”)
plugins/MyTheme/templates/index.mtml (your “Main Index” template)
mt-static/plugins/MyTheme/base.css
mt-static/plugins/MyTheme/logo.gif

44. config.yaml
name: My Theme Pack
template_sets:
my_theme:
label: The Best Theme in the World
templates:
base_path: templates/
index:
main_index:
label: Main Index
filename: index.mtml
What’s on the file system:
plugins/MyTheme/config.yaml
plugins/MyTheme/templates/ (your “base path”)
plugins/MyTheme/templates/index.mtml (your “Main Index” template)
mt-static/plugins/MyTheme/base.css
mt-static/plugins/MyTheme/logo.gif

45. config.yaml
name: My Theme Pack
template_sets:
my_theme:
label: The Best Theme in the World
templates:
base_path: templates/
index:
main_index:
label: Main Index
filename: index.mtml
What’s on the file system:
plugins/MyTheme/config.yaml
plugins/MyTheme/templates/ (your “base path”)
plugins/MyTheme/templates/index.mtml (your “Main Index” template)
mt-static/plugins/MyTheme/base.css
mt-static/plugins/MyTheme/logo.gif

46. total control
• Your config.yaml let’s you:
• Name all the templates.
• Define modules, widgets, sidebars, archives and
more.
• Set caching preferences.
• And more...

47. applying a theme

48. theme options

49. “
Can you make me a
button that does...?
– Famous Customer Quote

50. “
Can you make me a
button that does...?
– Famous Customer Quote

51. “
Can you make me a
button that does...?
– Famous Customer Quote

52. “
Can you make me a
button that does...?
– Famous Customer Quote

53. “
Can you make me a
button that does...?
– Famous Customer Quote

54. “
Can you make me a
button that does...?
– Famous Customer Quote

55. “
Can you make me a
button that does...?
– Famous Customer Quote

56. • Give customers the controls they need.
• Prevent your users from hanging
themselves.
• Extend Melody in seconds.
• Say “goodbye” to PHP and Perl.

57. config.yaml
name: My Theme
template_sets:
my_theme:
label: The Best Theme in the World
options:
fieldsets:
feeds:
label: Feeds and Syndication
feedburner_id:
label: Feedburner URL
type: text
tag: FeedburnerURL
use_feedburner:
label: Use Feedburner?
hint: Turn on if you want to use Feedburner instead of...
type: checkbox
tag: IfFeedburnerEnabled?

59. Supported Option Types
• Simple Text Inputs • Blog Selectors
• Text Areas • Entry Selectors
• Radio Buttons • Image Radio Buttons
• Checkboxes
• Pull-down Menus

60. Supported Option Types
• Simple Text Inputs • Blog Selectors
• Text Areas • Entry Selectors
• Radio Buttons • Image Radio Buttons
• Checkboxes
• Pull-down Menus Exten
sible!

61. Example: Homepage Manager

62. Example: Homepage Manager
Image
Radios
Fieldsets
Entry
Selectors

63. configuration bundles

64. Installation Instructions:
Thank you for installing my theme. To get started
lets configure your system properly:
1. Navigate to “Comment Preferences” and turn off
TrackBacks
2. Navigate to Facebook Plugin preferences and
enter in “dc123213b2d96f71458cb8eddd5f3427”
as your Application Key.
3. Navigate to “Registration Preferences” and make
sure Facebook is checked or enabled.
4. Turn on Twitter Authentication by navigating to
plugin settings and entering in the following for

65. Installation Instructions:
Thank you for installing my theme. To get started
lets configure your system properly:
1. Navigate to “Comment Preferences” and turn off
TrackBacks
2. Navigate to Facebook Plugin preferences and
enter in “dc123213b2d96f71458cb8eddd5f3427”
as your Application Key.
3. Navigate to “Registration Preferences” and make
sure Facebook is checked or enabled.
4. Turn on Twitter Authentication by navigating to
plugin settings and entering in the following for

66. • Make it easy for your clients to configure
their system.
• Give them multiple, pre-approved and
supported configuration options.
• Pre-configure Melody and plugins.
• Create bundles quickly just by editing a
config file.

69. great tools & plugins
for designers

70. Custom CSS
Give clients control without
sacrificing supportability and
warrantability.
• Dedicated CSS Editor.
• Easily accessible from
menu.
• No republishing necessary.

71. Custom Header
Provide rich user experiences when customizing a design.
• Give clients control over the things they need.
• Provides gratifying and rich user experience.

72. Image Cropper
Professionally produced
images for your web site.
• Define thumbnail sizes for
your theme.
• Allow users to crop and
annotate images.
• Adjust image size and
quality.

73. Template Profiler
Produce performant code.
• Troubleshoot
performance problems.
• Isolate what plugins
may be contributing to
poor performance.
• Just make things faster!

74. for later study...

75. Advanced Topics
• Template Functions
• Global Templates
• Module Caching
• Template Performance Profiling

76. • Website
http://openmelody.org/
• Documentation
http://docs.openmelody.org/
• Download
http://openmelody.org/code/downloads
• Mailing List
http://groups.google.com/group/openmelody

77. Thank you.