diff options
Diffstat (limited to 'views/default/css/elements/layout.php')
| -rw-r--r-- | views/default/css/elements/layout.php | 142 |
1 files changed, 97 insertions, 45 deletions
diff --git a/views/default/css/elements/layout.php b/views/default/css/elements/layout.php index 945a4a951..9d92752b4 100644 --- a/views/default/css/elements/layout.php +++ b/views/default/css/elements/layout.php @@ -1,69 +1,121 @@ <?php /** - * Reusable layout objects and elements + * Page Layout + * + * Contains CSS for the page shell and page layout + * + * Default layout: 990px wide, centered. Used in default page shell * * @package Elgg.Core * @subpackage UI */ ?> -/** - * elgg-body fills the space available to it. - * It uses hidden text to expand itself. The combination of auto width, overflow - * hidden, and the hidden text creates this effect. - * - * This allows us to float fixed width divs to either side of an .elgg-body div - * without having to specify the body div's width. - * - * @todo check what happens with long <pre> tags or large images - */ -.elgg-body { - width: auto; - word-wrap: break-word; - overflow: hidden; -} -.elgg-body:after { - display: block; - visibility: hidden; - height: 0 !important; - line-height: 0; - font-size: xx-large; - content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x "; +/* *************************************** + PAGE LAYOUT +*************************************** */ +/***** DEFAULT LAYOUT ******/ +<?php // the width is on the page rather than topbar to handle small viewports ?> +.elgg-page-default { + min-width: 998px; +} +.elgg-page-default .elgg-page-header > .elgg-inner { + width: 990px; + margin: 0 auto; + height: 90px; +} +.elgg-page-default .elgg-page-body > .elgg-inner { + width: 990px; + margin: 0 auto; +} +.elgg-page-default .elgg-page-footer > .elgg-inner { + width: 990px; + margin: 0 auto; + padding: 5px 0; + border-top: 1px solid #DEDEDE; } -.elgg_inner { +/***** TOPBAR ******/ +.elgg-page-topbar { + background: #333333 url(<?php echo elgg_get_site_url(); ?>_graphics/toptoolbar_background.gif) repeat-x top left; + border-bottom: 1px solid #000000; + position: relative; + height: 24px; + z-index: 9000; +} +.elgg-page-topbar > .elgg-inner { + padding: 0 10px; } -.elgg-footer { +/***** PAGE MESSAGES ******/ +.elgg-system-messages { + position: fixed; + top: 24px; + right: 20px; + max-width: 500px; + z-index: 2000; +} +.elgg-system-messages li { + margin-top: 10px; +} +.elgg-system-messages li p { + margin: 0; } -.elgg-media { - padding: 3px 0; +/***** PAGE HEADER ******/ +.elgg-page-header { + position: relative; + background: #4690D6 url(<?php echo elgg_get_site_url(); ?>_graphics/header_shadow.png) repeat-x bottom left; +} +.elgg-page-header > .elgg-inner { + position: relative; } -.elgg-media .elgg-pict { - float: left; - margin-right: 5px; +/***** PAGE BODY LAYOUT ******/ +.elgg-layout { + min-height: 360px; } -.elgg-media .elgg-pict-alt { +.elgg-layout-one-sidebar { + background: transparent url(<?php echo elgg_get_site_url(); ?>_graphics/sidebar_background.gif) repeat-y right top; +} +.elgg-layout-two-sidebar { + background: transparent url(<?php echo elgg_get_site_url(); ?>_graphics/two_sidebar_background.gif) repeat-y right top; +} +.elgg-layout-error { + margin-top: 20px; +} +.elgg-sidebar { + position: relative; + padding: 20px 10px; float: right; - margin-left: 5px; + width: 210px; + margin: 0 0 0 10px; } - -.elgg-list { - border-top: 1px dotted #CCCCCC; - margin: 5px 0; - clear: both; +.elgg-sidebar-alt { + position: relative; + padding: 20px 10px; + float: left; + width: 160px; + margin: 0 10px 0 0; } - -.elgg-list li { - border-bottom: 1px dotted #CCCCCC; +.elgg-main { + position: relative; + min-height: 360px; + padding: 10px; } - -.elgg-center { - margin: 0 auto; +.elgg-main > .elgg-head { + padding-bottom: 3px; + border-bottom: 1px solid #CCCCCC; + margin-bottom: 10px; } -.elgg-width-classic { - width: 990px; +/***** PAGE FOOTER ******/ +.elgg-page-footer { + position: relative; +} +.elgg-page-footer { + color: #999; +} +.elgg-page-footer a:hover { + color: #666; } |