Continuing work on boxxie theme

moodle · Apr 19, 2010 · 1cbdc5a · 1cbdc5a
1 parent 5b95dae
commit 1cbdc5a
Show file tree

Hide file tree

Showing 6 changed files with 676 additions and 17 deletions.
diff --git a/theme/boxxie/config.php b/theme/boxxie/config.php
@@ -21,7 +21,7 @@
 ////////////////////////////////////////////////////
 
 
-$THEME->sheets = array('screen');
+$THEME->sheets = array('pagelayout', 'boilerplate', 'screen');
 
 ////////////////////////////////////////////////////
 // Name of the stylesheet(s) you've including in 
@@ -69,7 +69,7 @@
     ),
     'frontpage' => array(
         'theme' => 'boxxie',
-        'file' => 'general.php',
+        'file' => 'frontpage.php',
         'regions' => array('side-pre', 'side-post'),
         'defaultregion' => 'side-post',
     ),

diff --git a/theme/boxxie/layout/frontpage.php b/theme/boxxie/layout/frontpage.php
@@ -0,0 +1,113 @@
+<?php
+
+$hasheading = ($PAGE->heading);
+$hasnavbar = (empty($PAGE->layout_options['nonavbar']) && $PAGE->has_navbar());
+$hasfooter = (empty($PAGE->layout_options['nofooter']));
+$hassidepre = $PAGE->blocks->region_has_content('side-pre', $OUTPUT);
+$hassidepost = $PAGE->blocks->region_has_content('side-post', $OUTPUT);
+
+$bodyclasses = array();
+if ($hassidepre && !$hassidepost) {
+    $bodyclasses[] = 'side-pre-only';
+} else if ($hassidepost && !$hassidepre) {
+    $bodyclasses[] = 'side-post-only';
+} else if (!$hassidepost && !$hassidepre) {
+    $bodyclasses[] = 'content-only';
+}
+
+echo $OUTPUT->doctype() ?>
+<html <?php echo $OUTPUT->htmlattributes() ?>>
+<head>
+  <title><?php echo $PAGE->title; ?></title>
+  <link rel="shortcut icon" href="<?php echo $OUTPUT->pix_url('favicon', 'theme')?>" />
+  <?php echo $OUTPUT->standard_head_html() ?>
+</head>
+
+<body id="<?php echo $PAGE->bodyid ?>" class="<?php echo $PAGE->bodyclasses.' '.join(' ', $bodyclasses) ?>">
+
+<?php echo $OUTPUT->standard_top_of_body_html() ?>
+
+<?php if ($hasheading || $hasnavbar) { ?>
+
+<div id="page-wrapper">
+  <div id="page" class="clearfix">
+
+    <div id="page-header">
+      <?php if ($PAGE->heading) { ?>
+        <h1 class="headermain"><?php echo $PAGE->heading ?></h1>
+        <div class="headermenu">
+          <?php echo $OUTPUT->login_info();
+          if (!empty($PAGE->layout_options['langmenu'])) {
+            echo $OUTPUT->lang_menu();
+          }
+          echo $PAGE->headingmenu; ?>
+        </div>
+      <?php } ?>
+    </div>
+
+
+      <?php if ($hasnavbar) { ?>
+        <div class="navbar clearfix">
+          <div class="breadcrumb"><?php echo $OUTPUT->navbar(); ?></div>
+          <div class="navbutton"> <?php echo $PAGE->button; ?></div>
+        </div>
+      <?php } ?>
+
+<?php } ?>
+
+    <div id="page-content">
+      <div id="regions">
+        <div id="regions-mask">
+
+          <div id="region-main">
+            <div id="region-main-mask">
+              <div class="region-content">
+                <?php echo core_renderer::MAIN_CONTENT_TOKEN ?>
+              </div>
+            </div>
+          </div>
+
+          <?php if ($hassidepre) { ?>
+          <div id="region-pre">
+            <div class="region-content">
+              <?php echo $OUTPUT->blocks_for_region('side-pre') ?>
+            </div>
+          </div>
+          <?php } ?>
+
+          <?php if ($hassidepost) { ?>
+          <div id="region-post">
+            <div class="region-content">
+              <?php echo $OUTPUT->blocks_for_region('side-post') ?>
+            </div>
+          </div>
+          <?php } ?>
+
+        </div>
+      </div>
+    </div>
+
+<?php if ($hasfooter) { ?>
+
+    <div id="page-footer" class="clearfix">
+      <p class="helplink"><?php echo page_doc_link(get_string('moodledocslink')) ?></p>
+      <?php
+        echo $OUTPUT->login_info();
+        echo $OUTPUT->home_link();
+        echo $OUTPUT->standard_footer_html();
+      ?>
+    </div>
+
+<?php }
+
+if ($hasheading || $hasnavbar) { ?>
+
+  </div> <!-- END #page -->
+</div> <!-- END #page-wrapper -->
+
+<?php } ?>
+
+
+<?php echo $OUTPUT->standard_end_of_body_html() ?>
+</body>
+</html>
diff --git a/theme/boxxie/layout/general.php b/theme/boxxie/layout/general.php
@@ -66,23 +66,23 @@
               </div>
             </div>
           </div>
-                
+
           <?php if ($hassidepre) { ?>
           <div id="region-pre">
             <div class="region-content">
               <?php echo $OUTPUT->blocks_for_region('side-pre') ?>
             </div>
           </div>
           <?php } ?>
-
+          
           <?php if ($hassidepost) { ?>
           <div id="region-post">
             <div class="region-content">
               <?php echo $OUTPUT->blocks_for_region('side-post') ?>
             </div>
           </div>
           <?php } ?>
-              
+
         </div>
       </div>
     </div>
@@ -91,11 +91,7 @@
 
     <div id="page-footer" class="clearfix">
       <p class="helplink"><?php echo page_doc_link(get_string('moodledocslink')) ?></p>
-      <?php
-        echo $OUTPUT->login_info();
-        echo $OUTPUT->home_link();
-        echo $OUTPUT->standard_footer_html();
-      ?>
+      <?php echo $OUTPUT->login_info(); ?>
     </div>
 
 <?php }
@@ -106,7 +102,14 @@
 </div> <!-- END #page-wrapper -->
 
 <?php } ?>
-
+
+<?php if ($hasfooter) {
+
+  echo $OUTPUT->home_link();
+  echo $OUTPUT->standard_footer_html();
+
+} ?>
+
 
 <?php echo $OUTPUT->standard_end_of_body_html() ?>
 </body>

diff --git a/theme/boxxie/style/boilerplate.css b/theme/boxxie/style/boilerplate.css
@@ -0,0 +1,148 @@
+/* -------------------------------------------------------------- 
+  
+   Boilerplate reset.css
+   * Resets default browser CSS.
+   
+-------------------------------------------------------------- */
+
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
+body { line-height: 1.5; background: #fff; margin: 0; }
+table { border-collapse: collapse; border-spacing: 0; }
+caption, th, td { text-align: left; font-weight:400; }
+blockquote:before, blockquote:after, q:before, q:after { content: ""; }
+blockquote, q { quotes: "" ""; }
+a img { border: none; }
+input,textarea { margin: 0; }
+
+/* Removes Firefox imposed outline */
+a { outline: none; }
+
+/* Clearing floats without extra markup  */
+.wrapper { display: inline-block; }
+.wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+* html .wrapper { height: 1%; }
+.wrapper { display: block; }
+
+/* -------------------------------------------------------------- 
+   
+   Boilerplate typography.css
+   * Sets up some sensible default typography.
+  
+-------------------------------------------------------------- */
+
+/* This is where you set your desired font size. The line-heights 
+   and vertical margins are automatically calculated from this. 
+   The percentage is of 16px (0.75 * 16px = 12px). */
+body { font-size: 85%; }
+
+
+/* Default fonts and colors. */
+body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: Helvetica, Arial, sans-serif; }
+
+
+/* Headings
+-------------------------------------------------------------- */
+
+h1,h2,h3,h4,h5,h6 { font-weight: bold; }
+
+h1 { font-size: 2.25em; line-height: 1; margin-bottom: 0.5em; }
+h2 { font-size: 1.75em; margin-bottom: 0.5em; }
+h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
+h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1em; }
+h5 { font-size: 1em; margin-bottom: 1.5em; }
+h6 { font-size: 1em; }
+
+
+/* Text elements
+-------------------------------------------------------------- */
+
+p { margin: 0 0 1em; }
+
+ul, ol { margin: 0 1.5em 1.5em 1.5em; }
+ul { list-style-type: circle; }
+ol { list-style-type: decimal; }
+
+dl { margin: 0 0 1.5em 0; }
+dl dt { font-weight: bold; }
+dl dd { margin-left: 1.5em; }
+
+abbr, acronym { border-bottom: 1px dotted #000; }
+address { margin-top: 1.5em; font-style: italic; }
+del { color: #000; }
+
+a { color: #009; text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+blockquote { margin: 1.5em; }
+strong { font-weight: bold; }
+em, dfn { font-style: italic; }
+dfn { font-weight: bold; }
+pre, code { margin: 1.5em 0; white-space: pre; }
+pre, code, tt { font: 1.2em monospace; line-height: 1.5; } 
+tt { display: block; margin: 1.5em 0; line-height: 1.5; }
+
+
+/* Tables
+-------------------------------------------------------------- */
+
+table { margin-bottom: 1.4em; }
+th { border-bottom: 2px solid #ddd; font-weight: bold; }
+th,td { padding: 4px 10px 4px 0; }
+tfoot { font-style: italic; }
+caption { background: #ffc; }
+
+
+/* Some default classes
+-------------------------------------------------------------- */
+
+.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
+.large { font-size: 1.25em; line-height:1.5em; margin-bottom: 1em; }
+.quiet { color: #999; }
+
+.hide { display: none; }
+.highlight { background: #ffc; }
+
+.top { margin-top: 0; padding-top: 0; }
+.bottom { margin-bottom: 0; padding-bottom: 0; }
+
+/* -------------------------------------------------------------- 
+   
+   Boilerplate forms.css
+   * Sets up some default styling for forms
+   
+-------------------------------------------------------------- */
+
+label { font-weight: bold; }
+
+/* Fieldsets */
+fieldset { padding: 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ddd; }
+legend { padding: 0 .4em; font-weight: bold; font-size: 1.2em; }
+
+/* Textareas */
+textarea { margin: 0.5em 0.5em 0 0; }
+textarea { padding: .4em; }
+
+
+/* hForm
+-------------------------------------------------------------- */
+form.hform p { margin: 0 0 .5em; }
+form.hform p label { float: left; width: 100px; }
+
+form.hform p input { width: 200px; }
+form.hform p select { width: 200px; }
+
+form.hform p input.button { width: auto; }
+form.hform p input.checkbox { width: auto; }
+form.hform p input.radio { width: auto; }
+
+form.hform p.checkbox { margin-left: 100px; }
+form.hform p.checkbox label { float: none; }
+form.hform p.checkbox input { width: auto; }
+
+
+/* vForm
+-------------------------------------------------------------- */
+form.vform p { margin: 0 0 .5em; }
+form.vform p label { display: block; }
+
+form.vform p.checkbox label { display: inline; }
diff --git a/theme/boxxie/style/pagelayout.css b/theme/boxxie/style/pagelayout.css
@@ -0,0 +1,57 @@
+
+/*-----------------------------------------------------------------------------------|
+|--------------LEFT--------------------MIDDLE-------------------RIGHT----------------|
+|--------------210px--------------------------------------------210px----------------|
+|-----------------------------------------------------------------------------------*/
+
+#page-content #regions {
+  left: 210px; /* Width of left sideblock */
+}
+
+#page-content #regions #regions-mask {
+  margin-left: -420px; /* Twice width of left sideblock */
+  padding-top: 5px;
+}
+
+#page-content #regions #regions-mask #region-main #region-main-mask {
+  margin-left: 420px; /* Twice width of left sideblock */
+  padding: 0 15px; /* Padding around middle column */
+}
+
+#page-content #regions #regions-mask #region-pre {
+  left: 210px; /* Width of left sideblock */
+  width: 210px; /* Width of left sideblock */
+}
+
+#page-content #regions #regions-mask #region-post {
+  width: 210px; /* Width of right sideblock */
+}
+
+#page-content #regions .region-content {
+  padding: 0;
+}
+
+/** Only side pre **/
+
+.side-pre-only #page-content #regions #regions-mask {
+  margin-left: -210px; 
+}
+
+.side-pre-only #page-content #regions #regions-mask #region-main #region-main-mask {
+  margin-left: 210px;
+}
+
+/** Only side post **/
+
+.side-post-only #page-content #regions #regions-mask {
+  margin-left: -210px;
+}
+
+.side-post-only #page-content #regions #regions-mask #region-main #region-main-mask {
+  margin-left: 210px;
+}
+
+
+.has_dock.side-post-only .page-middle #regions #regions-mask #region-main #region-main-mask {
+  margin-left: 210px;
+}