Proposal:ThemeCatcher
From Movable Type
Contents |
Proposal Status
So, this proposal still has a few things to settle, but gives the general concept thus far.
Please edit with your thoughts and comments, that's what a wiki is for!
- Beau
Proposal: Theme Catcher
Proposal:StyleCatcher StyleCatcher is much out of date. It only modifies styles, thus if the styles available do not work with the installed template set, the style is not applied.
It is proposed that StyleCatcher be depreciated in exchange for ThemeCatcher.
Movable Type has always abstracted style from template html (a la CSS Zen Garden and Sandbox) which is a great way to abstract style, but this concept can be a bit too abstract for many users.
WordPress has a theme model that only requires a user to create a folder and place some specifically named files into it, and it also offers advanced options to suppor the same abstraction MT has traditionally used.
A Theme is a combination of:
- templates
- styles (possibly as index templates such that they can be edited through the app)
- settings
Use Cases
- Designer creates a theme. Client can install theme. If changes necessary, designer updates theme and provides new version to client. Client installs new version of them over previous version of theme.
- Designer creates themes. Sells themes on their website.
- Six Apart creates a number of themes and makes them available via a Theme library.
- Bug is found in theme, a new version of the theme is released, user can download and install without requiring update to core MT software.
- Within MT user chooses a theme and republishes their blog, there is no breakage caused by applying a new theme (unless the theme is borked)
- User installs a theme makes customizations and wants to share with a friend so they export/save the current theme and MT creates a new folder for the theme (perhaps even a zip file)
Problem Statements
- Development
- Themes and Templates are not coupled tightly enough.
- Creation of new themes is too difficult.
- No documented standard for creating themes
- Blog doesn't credit authors or developers of templates or style.
- Localization is important for sharing templates internationally
- Themes don't offer creation of custom fields that may be necessary for the theme
- Install/Update
- Installing a theme (templates + style) is too difficult
- Upgrading is confusing - differenciating between default and user-added
- Not easy to slurp theme from other site
- Choosing a theme via Stylecatcher allows choosing styles that are not supported by installed template set
- It's not visually apparent how many variations of theme are available.
- Modification
- Templates in MT don't map to files on the server which can be confusing.
- App
- MT doesn't delete files it previously published when a new template set is installed, causing many orphaned files.
- Personalization
- Easy to add a logo, update banner, edit navigation
Open Questions
Styles
There are many ways to work with a style sheets and images. Should a style sheet be:
- @import static style sheet in index template (incumbent option)
- CON - multiple levels of @imports don't work for some browsers.
- PRO - allows easy addition of styles or additional stylesheets after current styles.
- include style CSS directly in the style sheet index template
- PRO - simplicity of having styles directly in a template users can edit.
- PRO - conditionals in index template would allow for greater flexibility.
- CON - would require a tag to return the path to the theme folder in order to link to images referenced in the css.
- CON - would require publishing a css file in order to commit changes, this is how every other page is published.
- link to static css file in html header
- PRO - elimination of a stylesheet managed by MT.
- CON - switching themes would require rebuilding all pages where link to style exists.
- Other option?
Option 1 and 2 are both candidates with promise. Both can be used without sacrificing the other. Option 2 would be best for keeping things simple. Option 1 would allow one theme to have a setting to use multiple separate style documents... this might be a solution for a community where all the blogs are based off the same theme and the users can only select
Settings
- How are settings manifested in the blog?
- Are they Custom fields?
- Are they Plugin Settings?
- Are they Template Variables?
- Can the settings affect the behavior of other plugins?
Proposed Features
- Choosing Theme - one thumbnail per every combination of style and layout a theme supports. If Cityscape Seattle supports 4 layouts then there will be four thumbnails for Cityscape Seattle. (style: cityscape-seattle; layout: wide-thin-thin, wide-medium, etc.)
- Installation - Manifest file can be used to automate installation.
- Inherit from Parent theme - ability to inherit templates, styles, and settings from another theme, but have the ability to directly override any of those.
Using Themes
Visual Chooser
- Navigate to Design > Themes and you are presented with a screen of theme thumbnails. There is a thumbnail for every layout available for a theme.
- Choose a theme
- Click Apply
Installing a theme
Navigate to Design > Themes
- Download theme from repo (public or private) and then upload theme to the themes directory (`MT_HOME/mt-static/themes`).
or
- entry url of theme library
- Choose a theme
- Click Apply. MT will download the theme from the theme library then install the theme.
Install a variant
Same as Installing a theme. Additionally there could be a feature to filter the available themes by parent to show only variants.
YAML Config Files
Theme
Cityscape-San-Francisco/config.yaml
name: Cityscape San Francisco id: cityscape-san-francisco description: Theme featuring the cityscape of San Francisco (Theme Parent) version: 1.0 author_name: Six Apart author_link: http://themes.movabletype.com/ plugin_link: http://themes.movabletype.com/ themes: cityscape-sanfrancisco: name: Cityscape San Francisco variant: cityscape uri: http://www.movabletype.org/themes/cityscape-sanfrancisco/ description: Cityscape theme featuring San Francisco (cityscape parent theme) version: 1.0 requires: mt_version: 4.2 authors: Tiffany Chow: http://tiff.vox.com/ tags: - cityscape - san francisco - califorina - usa - city - west coast - day time layouts: layout-wtt: 3-Column, Wide-Thin-Thin layout-twt: 3-Column, Thin-Wide-Thin layout-wt: 2-Column, Wide-Thin layout-tw: 2-Column, Thin-Wide layout-wm: 2-Column, Wide-Medium base styles: - theme-base/blog.css # - theme-base/forum.css # - theme-base/layouts.css templates: index: main_index: label: Main Index outfile: index.html archive_index: label: Archive Index outfile: archives.html styles: label: Stylesheet outfile: styles.css javascript: label: JavaScript outfile: mt.js feed_recent: label: Feed - Recent Entries outfile: atom.xml rsd: label: RSD outfile: rsd.xml individual: entry: label: Entry mappings: entry_archive: archive_type: Individual page: page: label: Page mappings: page_archive: archive_type: Page archive: monthly_entry_listing: label: Monthly Entry Listing mappings: monthly: archive_type: Monthly category_entry_listing: label: Category Entry Listing mappings: category: archive_type: Category system: comment_response: label: Comment Response comment_preview: label: Comment Preview dynamic_error: label: Dynamic Error popup_image: label: Popup Image search_results: label: Search Results module: banner_header: label: Banner Header banner_footer: label: Banner Footer entry_summary: label: Entry Summary html_head: label: HTML Head sidebar: label: Sidebar comments: label: Comments trackbacks: label: Trackbacks widget: about_this_page: label: About This Page archive_widgets_group: label: Archive Widgets Group author_archive_list: label: Author Archives current_author_monthly_archive_list: label: Current Author Monthly Archives calendar: label: Calendar category_archive_list: label: Category Archives current_category_monthly_archive_list: label: Current Category Monthly Archives creative_commons: label: Creative Commons main_index_widgets_group: label: Home Page Widgets Group monthly_archive_dropdown: label: Monthly Archives Dropdown monthly_archive_list: label: Monthly Archives pages_list: label: Page Listing recent_assets: label: Recent Assets powered_by: label: Powered By recent_comments: label: Recent Comments recent_entries: label: Recent Entries search: label: Search signin: label: Sign In syndication: label: Syndication tag_cloud: label: Tag Cloud technorati_search: label: Technorati Search date_based_author_archives: label: Date-Based Author Archives date_based_category_archives: label: Date-Based Category Archives openid: label: OpenID Accepted widgetset: 2column_layout_sidebar: order: 1000 label: 2-column layout - Sidebar widgets: - Search - About This Page - Home Page Widgets Group - Archive Widgets Group - Page Listing - Syndication - OpenID Accepted - Powered By 3column_layout_primary_sidebar: order: 1000 label: 3-column layout - Primary Sidebar widgets: - Archive Widgets Group - Page Listing - Syndication - OpenID Accepted - Powered By 3column_layout_secondary_sidebar: order: 1000 label: 3-column layout - Secondary Sidebar widgets: - Search - Home Page Widgets Group - About This Page
Variant Theme (Basic)
Cityscape-Las-Vegas/config.yaml
name: Cityscape Las Vegas id: cityscape-lasvegas description: Theme featuring the cityscape of Las Vegas version: 1.0 author_name: Six Apart author_link: http://themes.movabletype.com/ plugin_link: http://themes.movabletype.com/ themes: cityscape-lasvegas: name: Cityscape Las Vegas variant: cityscape parent: cityscape-sanfrancisco uri: http://www.movabletype.org/themes/cityscape-lasvegas description: Cityscape theme featuring Las Vegas (cityscape parent theme) version: 1.0 requires: mt_version: 4.2 authors: Tiffany Chow: http://tiff.vox.com/ tags: - cityscape - las vegas - nevada - usa - city - night time templates: index: styles: label: Stylesheet outfile: styles.css
Variant Theme (Modified Templates)
This variant includes custom templates that override the parent templates for:
- main_index
- entry archive
Cityscape-Miami/config.yaml
name: Cityscape Miami id: cityscape-miami description: Theme featuring the cityscape of Miami version: 1.0 author_name: Six Apart author_link: http://themes.movabletype.com/ plugin_link: http://themes.movabletype.com/ themes: cityscape-miami: name: Cityscape Miami variant: cityscape parent: cityscape-sanfrancisco uri: http://www.movabletype.org/themes/cityscape-miami description: Cityscape theme featuring Miami (cityscape parent theme) version: 1.0 requires: mt_version: 4.2 authors: Tiffany Chow: http://tiff.vox.com/ tags: - cityscape - miami - florida - usa - city - night time layouts: layout-wtt: 3-Column, Wide-Thin-Thin layout-twt: 3-Column, Thin-Wide-Thin layout-wt: 2-Column, Wide-Thin layout-tw: 2-Column, Thin-Wide layout-wm: 2-Column, Wide-Medium templates: index: main_index: label: Main Index outfile: index.html rebuild_me: 1 individual: entry: label: Entry mappings: entry_archive: archive_type: Individual
Theme Directory File Structure
MT_HOME/
mt-static/
themes/
Cityscape-San-Francisco/
config.yaml
images/
banner.jpg
footer.gif
quote.png
preview/
layout-wtt.gif
layout-twt.gif
layout-wt.gif
layout-tw.gif
layout-wm.gif
templates/
archive/
author.mtml
category.mtml
category_monthly.mtml
monthly.mtml
individual/
entry.mtml
page.mtml
index/
archive_index.mtml
feed_recent.mtml
javascript.mtml
main_index.mtml
rsd.mtml
stylesheet.mtml
module/
banner_footer.mtml
banner_header.mtml
comments.mtml
entry_summary.mtml
html_head.mtml
sidebar.mtml
trackbacks.mtml
system/
comment_preview.mtml
comment_response.mtml
dynamic_error.mtml
popup_image.mtml
search_results.mtml
widget/
about_this_page.mtml
archive_widgets_group.mtml
author_archives.mtml
calendar.mtml
category_archives.mtml
creative_commons.mtml
current_author_monthly_archives.mtml
current_category_monthly_archives.mtml
date-based_author_archives.mtml
date-based_category_archives.mtml
home_page_widgets_group.mtml
monthly_archives.mtml
monthly_archives_dropdown.mtml
openid_accepted.mtml
page_listing.mtml
powered_by.mtml
recent_assets.mtml
recent_comments.mtml
recent_entries.mtml
search.mtml
sign_in.mtml
syndication.mtml
tag_cloud.mtml
technorati_search.mtml
Cityscape-Miami
config.yaml
images/
banner.jpg
preview/
layout-wtt.gif
layout-twt.gif
layout-wt.gif
layout-tw.gif
layout-wm.gif
Cityscape-Las-Vegas
config.yaml
images/
banner.jpg
preview/
layout-wtt.gif
layout-twt.gif
layout-wt.gif
layout-tw.gif
layout-wm.gif
How do all the other MT template design tools fit together?
Offline I asked Tim Appnel which "MT template design tools" he was speaking of when he asked the question above. He replied with a list, here's my take. These answers are merely my opinion and proposal of what I'd like to see....
- StyleCatcher/ThemeCatcher
StyleCatcher will be deprecated as ThemeCatcher will offer the same functionality as one of it's features.
(I'm hoping to just call the feature "Themes" as it'll be more understandable to a wider audience)
- Template Sets
Template Sets are one component of a theme: template, style, settings (hopefully custom fields)
- Various tools for exporting/importing template sets
Import is the heart of ThemeCatcher. Export should be a feature too. Ideally an MT consultant could develop a whole site for a customer and then export the theme and the customer can import the theme. If updates are necessary, the them should be able to
- Template Refresh feature
This will still exist as a method of resetting a blog's templates to the state they were in from the original template set (or theme).
- Design Assistant
This is one I'm not sure about long term... but I've had the idea of a service that Six Apart provides where you choose a template set, a style, tweak a bunch of knobs and then you can download a Theme from this service which you can apply with theme catcher. Then this service could share your themes with others, or possibly keep them private... or possibly allow you to sell your themes and further let others customize them.
Short term, Design Assistant could be used to create a new style for a theme in a repo.
- Widget Manager
A template set of a theme can specify widgets and widget sets. Sub feature of a Theme. If a theme doesn't want to use Widgets, perhaps they can be disabled for a blog. I've done a complete refactor of WidgetManager to YUI [1] (but if we're gonna use jQuery in the MT App, then that'll have to be rewritten). I'd like widgets to also have Template Variables such that they can be tweaked without needing to get knee deep in code.
- Global Template & Modules
Part of a template set... but hopefully these will be more closely associated with a "main" blog and then other blogs can refer to this blog for "global" templates and modules.
- Sandbox
Currently a template set with a style library. Someday a theme linking to a style library... or possibly Sandbox is a parent theme and the other theme based upon Sandbox refer to sandbox for their defaults, but override various individual templates and settings.
- Style Libraries
Hopefully this will be come Theme libraries and work with themes the way that it currently works with styles.