diff options
| -rw-r--r-- | doc/Creating-Templates.md | 91 | ||||
| -rw-r--r-- | doc/main.bb | 1 | ||||
| -rw-r--r-- | version.inc | 2 | ||||
| -rw-r--r-- | view/css/bootstrap-red.css | 6 | ||||
| -rw-r--r-- | view/css/conversation.css | 1 | ||||
| -rw-r--r-- | view/theme/redbasic/css/style.css | 11 | ||||
| -rwxr-xr-x | view/tpl/nav.tpl | 2 |
7 files changed, 108 insertions, 6 deletions
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/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]
diff --git a/version.inc b/version.inc index e1a04d750..075d00c35 100644 --- a/version.inc +++ b/version.inc @@ -1 +1 @@ -2014-02-28.602 +2014-03-01.603 diff --git a/view/css/bootstrap-red.css b/view/css/bootstrap-red.css index 45cf76fb6..606e47838 100644 --- a/view/css/bootstrap-red.css +++ b/view/css/bootstrap-red.css @@ -110,3 +110,9 @@ nav .navbar-collapse { } /* nav overrides end */ + +.dropdown-menu img { + width: 32px; + height: 32px; + margin-right: 5px; +} diff --git a/view/css/conversation.css b/view/css/conversation.css index 3396863e7..325303559 100644 --- a/view/css/conversation.css +++ b/view/css/conversation.css @@ -306,7 +306,6 @@ .like-rotator { float: left; margin: 8px; - color: $toolicon_colour; } .wall-item-delete-wrapper { diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 2efe79dcc..c410c61bc 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -2210,6 +2210,14 @@ nav .dropdown-menu { border-bottom-left-radius: $radiuspx; } +#usermenu-caret { + color: #999; +} + +#avatar:hover + #usermenu-caret { + color: #fff; +} + /* bootstrap overrides */ blockquote { font-size: $body_font_size; @@ -2221,8 +2229,5 @@ blockquote { } .dropdown-menu img { - width: 32px; - height: 32px; - margin-right: 5px; border-radius: $radiuspx; } diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl index 20600ccd7..7d2ce1b7a 100755 --- a/view/tpl/nav.tpl +++ b/view/tpl/nav.tpl @@ -12,7 +12,7 @@ <span class="icon-bar"></span> </button> {{if $userinfo}} - <img class="dropdown-toggle fakelink" data-toggle="dropdown" id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}"><span class="caret"></span> + <img class="dropdown-toggle fakelink" data-toggle="dropdown" id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}"><span class="caret" id="usermenu-caret"></span> {{if $localuser}} <ul class="dropdown-menu" role="menu" aria-labelledby="avatar"> {{foreach $nav.usermenu as $usermenu}} |