24 May
Styles, the worldoutline and OPML Editor
Posted May 24, 2011 by Dave Winer in News. Leave a Comment
You can add styles to your worldOutline. And when we make the templates more style-friendly, which should be a quick bootstrap, that will mean you will be able to completely redesign the look of a hierarchy from within the OPML Editor.
How to
Here’s how it works, revealed in layers (as you’d expect since all this stuff cascades)…
1. To see what styles you can set, do a view-source on any page in a worldOutline server you can author for. One where you are either the author of the root outline, or one of your outlines has been included within the root outline, either by the author or one of the people he or she delegates to.
2. In the OPML Editor, add a style to any headline, by choosing the Add Styles command in the World Outline sub-menu of the Outliner menu. The styles are anything that can appear in the <style> section of the <head> section of an HTML document.
The styles accumulate in a hierarchic manner, with the outer styles appearing before the inner styles. That is, the inner styles can override the outer ones. Exactly as you’d want it to work.
3. When you save the outline, the new version of the outline is displayed. When you visit a page that is subordinate to a style or a collection of styles, they govern the appearance of the page, as any other styles in HTML would.
We’ve started a group project with this blog post on Scripting News. Since you have detailed knowledge of how the worldOutline app works, and presumably are running it on your server, here’s an additional hint.
4. There are two templates that you can edit that control how themable your worldOutline is. They are at: config.worldOutline.prefs.directoryTemplate and config.worldOutline.prefs.template.
You can add classes to HTML elements in either of those templates and that will allow authors to add styles to control their appearance, using the OPML Editor, as described above.
Demo
body {color: #DC143C; %;} — this is the styles attribute of the demo headline.
body {color: #008000; %;} — this is the styles attrbiute of the New York headline.
To see how it works, you have to do a View Source on the New York City page.
You’ll see the <style> element in <head> has two items in it, and the latter one overrides the former one.
That’s why the text is green and a little larger underneath New York City.
Obviously this is just the beginning. Next thing to do is to re-do the templates so that everything has proper classes on them, and the tables should go away as the layout mechanism.
If you have questions, ask them here or on the EC2-for-Poets mail list.
Leave a Reply Cancel reply
Fill in your details below or click an icon to log in:
You are commenting using your WordPress.com account. ( Log Out / Change )
You are commenting using your Twitter account. ( Log Out / Change )
You are commenting using your Facebook account. ( Log Out / Change )
Connecting to %s