Melody Designer Training

an introduction to

for designers
The Open Melody Software Group
Byrne Reese

what’dya gonna talk about?

• Why Melody?
• Templating Language
• Templates and Themes
• Theme Options & Conﬁg Bundles
• Great Tools & Plugins for Designers

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.

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.

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.

getting started:
templating language

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

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

HTML

<h1>My Website Name</h1>

if this looks familiar...

<h1><$mt:BlogName$></h1>

then so should this.

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

lotsa variation

These are all equivalent:
• <mt:Foo>
• <MTFoo>
• <$mt:Foo$>
• <mtfoo>

function tags
• <$mt:EntryTitle$>
• <$mt:AuthorName$>
• <$mt:AuthorUserpic$>
• <$mt:AssetThumbnailURL width=”100”$>

• <$mt:CommentText$>
Plus hundreds more...

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>

loops & container tags
• <mt:Entries>
• <mt:Comments>
• <mt:Authors>
• Sort and ﬁlter:
• sort, sort_direction, lastn, <filter by>

And many more...

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

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

includes & encapsulation
• Share HTML and template code between templates
<$mt:include module=”Module Name”$>

• Include:

• Modules

• Widgets

• Files

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...

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 "Blog"

<$mt:EntryTitle count_words=”1”$> => 2

conditionals

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

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)

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>

</li>
</mt:Entries>

loops

</li>
</mt:Entries>

conditional tags

</li>
</mt:Entries>

variables & meta-loop variables

theme structure

• Themes are broken up into three components:

• a configuration file, a.k.a. “config.yaml”

• templates

• static files (images, stylesheets, javascript, etc)

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

config.yaml
name: My Theme Pack
template_sets:
my_theme:
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

total control

• Your conﬁg.yaml let’s you:

• Name all the templates.

• Deﬁne modules, widgets, sidebars, archives and
more.

• Set caching preferences.

• And more...

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

• Give customers the controls they need.
• Prevent your users from hanging
themselves.

• Extend Melody in seconds.
• Say “goodbye” to PHP and Perl.

config.yaml
name: My Theme
template_sets:
my_theme:
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?

Supported Option Types
• Simple Text Inputs • Blog Selectors

• Text Areas • Entry Selectors

• Radio Buttons • Image Radio Buttons

• Checkboxes

• Pull-down Menus

Supported Option Types
• Simple Text Inputs • Blog Selectors

• Text Areas • Entry Selectors

• Radio Buttons • Image Radio Buttons

• Checkboxes

• Pull-down Menus Exten
sible!

Example: Homepage Manager
Image
Radios

Fieldsets

Entry
Selectors

Installation Instructions:
Thank you for installing my theme. To get started
lets conﬁgure 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

• 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.

great tools & plugins
for designers

Custom CSS
Give clients control without
sacriﬁcing supportability and
warrantability.

• Dedicated CSS Editor.

• Easily accessible from
menu.

• No republishing necessary.

Custom Header
Provide rich user experiences when customizing a design.

• Give clients control over the things they need.

• Provides gratifying and rich user experience.

Image Cropper
Professionally produced
images for your web site.

• Deﬁne thumbnail sizes for
your theme.

• Allow users to crop and
annotate images.

• Adjust image size and
quality.

Template Profiler
Produce performant code.

• Troubleshoot
performance problems.

• Isolate what plugins
may be contributing to
poor performance.

• Just make things faster!

Advanced Topics

• Template Functions
• Global Templates
• Module Caching
• Template Performance Proﬁling

• Website
http://openmelody.org/

• Documentation
http://docs.openmelody.org/

• Download
http://openmelody.org/code/downloads

• Mailing List
http://groups.google.com/group/openmelody

Melody Designer Training

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (6)

Similar to Melody Designer Training

Similar to Melody Designer Training (20)

Recently uploaded

Recently uploaded (20)

Melody Designer Training