From 1cbdc5a33aabe59508d494857a7fe19112112ef4 Mon Sep 17 00:00:00 2001 From: Patrick Malley Date: Mon, 19 Apr 2010 03:50:06 +0000 Subject: [PATCH] Continuing work on boxxie theme --- theme/boxxie/config.php | 4 +- theme/boxxie/layout/frontpage.php | 113 ++++++++++ theme/boxxie/layout/general.php | 21 +- theme/boxxie/style/boilerplate.css | 148 ++++++++++++ theme/boxxie/style/pagelayout.css | 57 +++++ theme/boxxie/style/screen.css | 350 ++++++++++++++++++++++++++++- 6 files changed, 676 insertions(+), 17 deletions(-) create mode 100644 theme/boxxie/layout/frontpage.php create mode 100644 theme/boxxie/style/boilerplate.css create mode 100644 theme/boxxie/style/pagelayout.css diff --git a/theme/boxxie/config.php b/theme/boxxie/config.php index 48182cedcfd..2a05f941d9c 100644 --- a/theme/boxxie/config.php +++ b/theme/boxxie/config.php @@ -21,7 +21,7 @@ $THEME->parents = array('base'); //////////////////////////////////////////////////// -$THEME->sheets = array('screen'); +$THEME->sheets = array('pagelayout', 'boilerplate', 'screen'); //////////////////////////////////////////////////// // Name of the stylesheet(s) you've including in @@ -69,7 +69,7 @@ $THEME->layouts = array( ), '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 new file mode 100644 index 00000000000..72a9f454e0b --- /dev/null +++ b/theme/boxxie/layout/frontpage.php @@ -0,0 +1,113 @@ +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() ?> +htmlattributes() ?>> + + <?php echo $PAGE->title; ?> + + standard_head_html() ?> + + + + +standard_top_of_body_html() ?> + + + +
+
+ +
+ heading) { ?> +

heading ?>

+
+ login_info(); + if (!empty($PAGE->layout_options['langmenu'])) { + echo $OUTPUT->lang_menu(); + } + echo $PAGE->headingmenu; ?> +
+ +
+ + + +
+
navbar(); ?>
+
button; ?>
+
+ + + + +
+
+
+ +
+
+
+ +
+
+
+ + +
+
+ blocks_for_region('side-pre') ?> +
+
+ + + +
+
+ blocks_for_region('side-post') ?> +
+
+ + +
+
+
+ + + +
+

+ login_info(); + echo $OUTPUT->home_link(); + echo $OUTPUT->standard_footer_html(); + ?> +
+ + + +
+
+ + + + +standard_end_of_body_html() ?> + + \ No newline at end of file diff --git a/theme/boxxie/layout/general.php b/theme/boxxie/layout/general.php index 7ac57470bbe..ddf90bcbfdf 100644 --- a/theme/boxxie/layout/general.php +++ b/theme/boxxie/layout/general.php @@ -66,7 +66,7 @@ echo $OUTPUT->doctype() ?> - +
@@ -74,7 +74,7 @@ echo $OUTPUT->doctype() ?>
- +
@@ -82,7 +82,7 @@ echo $OUTPUT->doctype() ?>
- + @@ -91,11 +91,7 @@ echo $OUTPUT->doctype() ?>

- login_info(); - echo $OUTPUT->home_link(); - echo $OUTPUT->standard_footer_html(); - ?> + login_info(); ?>
- + +home_link(); + echo $OUTPUT->standard_footer_html(); + +} ?> + standard_end_of_body_html() ?> diff --git a/theme/boxxie/style/boilerplate.css b/theme/boxxie/style/boilerplate.css new file mode 100644 index 00000000000..1360a615ccb --- /dev/null +++ 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 new file mode 100644 index 00000000000..a5a6048e0a5 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/theme/boxxie/style/screen.css b/theme/boxxie/style/screen.css index 02c5734e1fa..78095835527 100644 --- a/theme/boxxie/style/screen.css +++ b/theme/boxxie/style/screen.css @@ -1,4 +1,5 @@ -html { +html, +body { background: #6e8c45; } @@ -22,7 +23,18 @@ a:visited { a:hover, a:active { - text-decoration: underline; + color: #41512f; +} + +h2.main { + text-align: center; + margin-bottom: 25px; +} + + +.rolelink { + text-align: right; + margin: 10px 0; } /* Header */ @@ -40,20 +52,51 @@ a:active { #page-header h1.headermain { color: #fff; font-weight: normal; - margin:1em; + margin: 1em; + font-size: 2em; } +.pagelayout-frontpage #page-header h1.headermain { + font-size: 2.75em; +} + +/* Navbar */ + +.navbar { + padding: 4px 2px; + font-size: 0.95em; + color: #333; +} + +.navbar .sep { + color: #999; +} + +.navicon { + display: none; +} + +/* Content */ + +.sitetopic { + border: none; +} + +/* Sideblock */ + .sideblock { border: none; } .sideblock .header { background: #69804e; - padding:2px 5px; + padding: 2px 5px; } .sideblock .header h2 { color: #fff; + font-size: 1.2em; + line-height: 1; } .sideblock .content { @@ -61,6 +104,11 @@ a:active { border-width: 1px; border-color: #69804e; border-style: solid; + padding: 4px; +} + +.block_js_expansion .block_tree { + overflow: auto; } /* Course */ @@ -69,8 +117,23 @@ a:active { border-bottom: 1px solid #eee; } +.coursebox .info { + width: 35%; +} + +.coursebox .summary { + width: 63%; +} + .coursebox h3.name { - margin-top: 0; + margin: 0; + font-size: 1.2em; + line-height: 1.4; +} + +.coursebox .info .teachers { + margin-left: 0.6em; + font-size: 0.95em; } .categorybox { @@ -78,12 +141,287 @@ a:active { } h2.headingblock { - font-weight: normal; border-bottom: 1px solid #eee; + font-size: 1.5em; +} + +#page-course-category .categorypicker { + text-align: center; + margin: 10px 0 20px; +} + +#page-course-category .buttons { + text-align: center; +} + +/* Users */ + +/* Tabs */ + +.tabtree ul { + text-align: center; +} + +.tabtree .tabrow0 { + width: 100%; + margin: 1em 0px; +} + +.tabtree .tabrow0 li { + margin-right: -4px; +} + +.tabtree .tabrow0 li.here { + font-weight: bold; +} + +.tabtree .tabrow0 li.here a { + position: relative; + z-index: 102; +} + +.tabtree .tabrow0 li a { + background:#f3f8ed; + border-width:1px 1px 0; + border-style: solid; + font-weight: bold; + border-color: #dadfd5; + padding:6px 6px 5px; + margin-right: 3px; + color: #3b4c25; +} + +.tabtree .tabrow0 li.here a { + background: #fff; + border-color: #5b7439; + border-bottom-width: 0; + cursor: pointer; +} + +.tabtree .tabrow0 li a:hover { + background:#fff; + border-color: #84a754; +} + +.tabtree .tabrow0 ul, +.tabtree .tabrow0 div { + font-weight: normal; + background:#fff; + border-top: 1px solid #5b7439; + padding: 0; + margin: 0; +} + +.tabtree tabrow2 ul { + border: none; +} + +.tabtree .tabrow0 li.here .empty { + display: block; + height: 1px; + overflow: hidden; + padding: 0px; + position: absolute; + width: 100%; + background: #fff; +} + +.tabtree .tabrow1 li a, +.tabtree .tabrow1 li a:hover, +.tabtree .tabrow1 li a span, +.tabtree .tabrow1 li a:hover span { + background: none !important; + border: none; + font-size: 0.95em; +} + +.tabtree a.nolink, +.tabtree .here ul a.nolink, +.tabtree a.nolink:hover, +.tabtree .here ul a.nolink:hover { + color: #888; + text-decoration: none; +} + +.tabtree .here a.nolink, +.tabtree .here ul .here a.nolink, +.tabtree .here a.nolink:hover, +.tabtree .here ul .here a.nolink:hover { + color: black; + text-decoration: none; +} + +.ie7 .tabtree .tabrow0 li { + margin-left: 0; +} + +.ie7 .tabtree .tabrow0 li.first { + margin-right: -4px; +} + +.ie7 .tabtree .tabrow0 li.onerow { + margin-right: 0; +} + +.ie7 .tabtree .tabrow0 a { + display: inline-block; + padding: 8px 0 0.35em 13px; + line-height: 1.5em; +} + +.ie7 .tabtree .tabrow0 a span { + padding: 10px 1em 10px 0; +} + +.ie7 .tabtree .tabrow0 div { + top: 2.6em; + padding: 0.2em 0; +} + +.ie7 .tabtree .tabrow0 div.empty { + margin-right: 0; +} + +.ie7.mod-quiz div.tabtree a span img.iconsmall { + margin: 0; + vertical-align: baseline; + position: relative; + top: 2px; +} + +.ie6 .tabtree { + height: 100%; +} + +.ie6 .tabtree .tabrow0 { + padding-top: 10px; +} + +.ie6 .tabtree .tabrow0 li { + margin-left: 0; +} + +.ie6 .tabtree .tabrow0 li.first { + margin-left: -4px; + margin-right: -4px; +} + +.ie6 .tabtree .tabrow0 li.last a { + margin-right: 0; +} + +.ie6 .tabtree .tabrow0 li.onerow { + margin-right: 0; +} + +.ie6 .tabtree .tabrow0 a { + padding: 0 0 0 13px; +} + +.ie6 .tabtree .tabrow0 a span { + padding: 12px 1em 4px 0; +} + +.ie6 .tabtree .tabrow0 div { + top: 3.5em; + padding: 0.2em 0; } /* Forum */ +.forumpost { + border: none; +} + .forumpost .topic { background: #c9dfb2; + border: 1px solid #a0c278; + padding: 5px 10px; +} + +.forumpost .subject { + font-size: 1.2em; +} + +.forumpost .author { + font-style: italic; + color: #555; + font-size: 0.95em; +} + +.forumpost .author a:link, +.forumpost .author a:visited { + color: #566b3f; + text-decoration: underline; +} + +.forumpost .author a:hover { + text-decoration: none; +} + +.forumpost .content { + border-width: 0 1px 1px; + border-color: #a0c278; + border-style: solid; + padding: 5px 10px; +} + +.forumaddnew { + text-align: center; + margin-bottom: 15px; +} + +/* Footer */ + +#page-footer { + background: #4e6632; + color: #fff; +} + +#page-footer a { + color: #b3c79d; +} + +#page-footer a:hover { + color: #fff; +} + +#page-footer .logininfo { + float: left; + padding: 5px; + margin: 0; +} + +#page-footer .helplink { + float: right; + padding: 5px; + margin: 0; +} + +.homelink, +.performanceinfo { + text-align: center; + margin: 10px 20%; +} + +.performanceinfo span { + display: block; +} + +.validators { + margin-top: 40px; + padding-top: 5px; + border-top: 1px dotted gray; +} + +.validators ul { + margin: 0px; + padding: 0px; + list-style-type: none; +} + +.validators ul li { + display: inline; + margin-right: 10px; + margin-left: 10px; } \ No newline at end of file