diff options
| author | marijus <mario@mariovavti.com> | 2014-03-02 10:27:08 +0100 |
|---|---|---|
| committer | marijus <mario@mariovavti.com> | 2014-03-02 10:27:08 +0100 |
| commit | 2313736e92f8e89d46cdb002c9d6b2b82f1d6511 (patch) | |
| tree | 22c4493a364ec2f90d752464a0d57d2441f9f20e /doc | |
| parent | db266958c43196564ff8ee30fc1e95a0f459c185 (diff) | |
| parent | bf401a5afaca8f96606b22e219bd595646ac9dab (diff) | |
| download | volse-hubzilla-2313736e92f8e89d46cdb002c9d6b2b82f1d6511.tar.gz volse-hubzilla-2313736e92f8e89d46cdb002c9d6b2b82f1d6511.tar.bz2 volse-hubzilla-2313736e92f8e89d46cdb002c9d6b2b82f1d6511.zip | |
Merge branch 'master' of https://github.com/friendica/red
Diffstat (limited to 'doc')
| -rw-r--r-- | doc/Comanche.md | 8 | ||||
| -rw-r--r-- | doc/Creating-Templates.md | 91 | ||||
| -rw-r--r-- | doc/comanche.bb | 6 | ||||
| -rw-r--r-- | doc/main.bb | 1 |
4 files changed, 99 insertions, 7 deletions
diff --git a/doc/Comanche.md b/doc/Comanche.md index 2c3bb914a..a1fbe023d 100644 --- a/doc/Comanche.md +++ b/doc/Comanche.md @@ -19,9 +19,9 @@ Currently there are two layout templates, unless your site provides additional l The full template defines the same as the default template with the exception that there is no "aside" region. -To choose a layout template, use the 'layout' tag. +To choose a layout template, use the 'template' tag. - [layout]full[/layout] + [template]full[/template] The default template will be used if no other template is specified. The template can use any names it desires for content regions. You will be using 'region' tags to decide what content to place in the respective regions. @@ -100,11 +100,11 @@ The 'comment' tag is used to delimit comments. These comments will not appear on **Complex Example** -Please note that pasting this example into a layout page is not likely to do anything useful as the chosen names (layout, theme, regions, etc.) may not correspond to any existing webpage components. +Please note that pasting this example into a layout page is not likely to do anything useful as the chosen names (template, theme, regions, etc.) may not correspond to any existing webpage components. [comment]use an existing page template which provides a banner region plus 3 columns beneath it[/comment] - [layout]3-column-with-header[/layout] + [template]3-column-with-header[/template] [comment]Use the "darknight" theme[/comment] diff --git a/doc/Creating-Templates.md b/doc/Creating-Templates.md new file mode 100644 index 000000000..35003cb1a --- /dev/null +++ b/doc/Creating-Templates.md @@ -0,0 +1,91 @@ +Creating Page Templates +======================= + + +A page template for use with Comanche requires two files - a PHP template and a CSS file. Page templates will need to be installed by the system administrator of your site. + + +First choose a name. Here we'll create a template and call it "demo". + +You will need to create the files "view/php/demo.php" and "view/css/demo.css" to hold the PHP template and CSS respectively. + +To get a better idea of this process, let's look at an existing template - the "default" template. This is used by default throughout the application. + +view/php/default.php +==================== + + <!DOCTYPE html > + <html> + <head> + <title><?php if(x($page,'title')) echo $page['title'] ?></title> + <script>var baseurl="<?php echo $a->get_baseurl() ?>";</script> + <?php if(x($page,'htmlhead')) echo $page['htmlhead'] ?> + </head> + <body> + <?php if(x($page,'nav')) echo $page['nav']; ?> + <aside id="region_1"><?php if(x($page,'aside')) echo $page['aside']; ?></aside> + <section id="region_2"><?php if(x($page,'content')) echo $page['content']; ?> + <div id="page-footer"></div> + <div id="pause"></div> + </section> + <aside id="region_3"><?php if(x($page,'right_aside')) echo $page['right_aside']; ?></aside> + <footer><?php if(x($page,'footer')) echo $page['footer']; ?></footer> + </body> + </html> + + +Here's is the corresponding CSS file + +view/php/default.css +==================== + + + aside#region_1 { + display: block; + width: 210px; + position: absolute; + top: 65px; + left: 0; + margin-left: 10px; + } + + aside input[type='text'] { + width: 174px; + } + + + section { + position: absolute; + top: 65px; + left: 250px; + display: block; + right: 15px; + padding-bottom: 350px; + } + + +Some things you may notice when looking at these definitions: + +* We have not specified any CSS for the "nav", "right_aside", or "footer" regions. In this template "nav" and "footer" will be the full page width and we will let the size and placement of these elements be controlled by the theme. "right_aside" is not currently used. + +* There are elements on the page such as "page-footer" and "pause" for which there is no apparent content. This content will come from Javascript elements. + +* Our default template uses absolute positioning. Modern web design often uses "float" div containers so that scrollbars aren't typically needed when viewing on small-screen devices. + +To design a new template, it is best to start with an existing template, and modify it as desired. That is what we will do here. + +The way that Comanche provides content inside a specific region is by using a region tag. + + [region=aside][widget=profile][/widget][/region] + +This example will place a "profile" widget in the "aside" region. But what it actually does is place the HTML for the widget into a code variable **$page['aside']**. Our default page template defines a region on the page (the CSS positions this as an absolute sidebar) and then inserts the contents of $page['aside'] (if it exists). + +So if you wanted to create a template with a region named "foo", you would provide a place for it on the page, then include the contents of $page['foo'] wherever you wanted to use it, and then using Comanche, you could specify + + [region=foo][widget=profile][/widget][/region] + +and this would place a profile widget into the "foo" region you created. + +Use the CSS file to position the region on the page where desired and optionally control its size. + +[To be continued]
\ No newline at end of file diff --git a/doc/comanche.bb b/doc/comanche.bb index ea2069b35..5bfa59a50 100644 --- a/doc/comanche.bb +++ b/doc/comanche.bb @@ -18,10 +18,10 @@ Currently there are two layout templates, unless your site provides additional l The full template defines the same as the default template with the exception that there is no "aside" region.
[/code]
-To choose a layout template, use the 'layout' tag.
+To choose a layout template, use the 'template' tag.
[code]
- [layout]full[/layout]
+ [template]full[/template]
[/code]
The default template will be used if no other template is specified. The template can use any names it desires for content regions. You will be using 'region' tags to decide what content to place in the respective regions.
@@ -98,7 +98,7 @@ The 'comment' tag is used to delimit comments. These comments will not appear on [code]
[comment]use an existing page template which provides a banner region plus 3 columns beneath it[/comment]
- [layout]3-column-with-header[/layout]
+ [template]3-column-with-header[/template]
[comment]Use the "darknight" theme[/comment]
diff --git a/doc/main.bb b/doc/main.bb index f8d3e1ade..decaa0ffc 100644 --- a/doc/main.bb +++ b/doc/main.bb @@ -36,6 +36,7 @@ [zrl=[baseurl]/help/install]Install[/zrl]
[zrl=[baseurl]/help/comanche]Comanche Page Descriptions[/zrl]
+[zrl=[baseurl]/help/Creating-Templates]Creating Comanche Templates[/zrl]
[zrl=[baseurl]/help/plugins]Plugins[/zrl]
[zrl=[baseurl]/help/schema_development]Schemas[/zrl]
[zrl=[baseurl]/help/developers]Developers[/zrl]
|