From 851230155900124e2429e0f782ba4d8429bfe43a Mon Sep 17 00:00:00 2001 From: pete Date: Mon, 26 May 2008 18:12:12 +0000 Subject: simple default theme as a starting point git-svn-id: https://code.elgg.org/elgg/trunk@714 36083f99-b078-4883-b0ff-0f9b5a30f544 --- views/default/css.php | 400 +++++++++++++-------------------- views/default/navigation/toolbox.php | 18 +- views/default/page_elements/header.php | 7 +- views/default/reset.css | 47 ++++ 4 files changed, 215 insertions(+), 257 deletions(-) create mode 100755 views/default/reset.css (limited to 'views/default') diff --git a/views/default/css.php b/views/default/css.php index cb626e115..c27ec5da2 100644 --- a/views/default/css.php +++ b/views/default/css.php @@ -16,132 +16,103 @@ ?> -/* - Default Elgg CSS -*/ - -/* - Globals -*/ + -* { - /* border: 0; */ - margin: 0; - padding: 0; -} body { - background:#ffffff; /* url(/_graphics/header.gif) repeat-x; */ - color:#697C83; - font-family:'Trebuchet MS','Lucida Grande', Arial, sans-serif; text-align:left; margin:0 auto; padding:0; - font-size: 80%; - line-height:1.6em; -} - -p { - color:#555; - margin:0 0 10px 0; + background: #42afdc url(/_graphics/pagebackground.gif) repeat-x; + font: 75%/170% Arial, Helvetica, sans-serif; + padding: 0px; + margin: 0px; + color: #333333; } +/* *************************************** + DEFAULT BASE STYLES +*************************************** */ a { - text-decoration:none; - color:#336699; + color: #3399cc; + text-decoration: none; +} +a:visited { + color: #336699; } - a:hover { - text-decoration:underline; + text-decoration: underline; } - -ol, ul { - color:#697C83; +p { + margin: 0px 0px 15px; } - -h1 { - font-size:130%; +img { + border: none; } - -h2, h3, h4, h5 { - font-size:100%; +ul { + margin: 5px 0px 15px; + padding-left: 20px; } - -input { vertical-align:middle; } - -blockquote{ - background: #EEE url(/_graphics/blockquote.png) no-repeat bottom left; - padding: 10px; - padding-bottom: 40px; - margin: 1em; +ul li { + margin: 0px; } - -/******* End of globals *************/ - -/* - TABLES IN ELGG -*/ - -td { - border:1px solid #eee; - padding:0; - margin:0; +ol { + margin: 5px 0px 15px; + padding-left: 20px; } - -td h4, h3, h5 { - padding:0; - margin:0; +ul li { + margin: 0px; +} +form { + margin: 0px; + padding: 0px; +} +small { + font-size: 90%; } -/******** end tables **************/ - -/* - CONTAINER: WRAPS THE HEADER AND MAIN CONTENT AREA BELOW THE USER TOOLBAR -*/ - +/* CONTAINER: WRAPS THE HEADER AND MAIN CONTENT AREA BELOW THE USER TOOLBAR */ div#container { - width:970px; - margin:0 auto; - padding:0; + /* width:90%; */ + padding:0 40px 0 40px; + background: url(/_graphics/pagebackground.jpg) no-repeat center top; + min-height: 600px; } -/* - HEADER: THE HEADER INCLUDES THE LOGO AND SEARCH BAR -*/ +/* *************************************** + HEADER +*************************************** */ div#header { margin:0 0 10px 0; - padding:5px; text-align:left; position:relative; - background:#006699; width:100%; - height:50px; + height:60px; + border-bottom:1px solid white; } div#header h1 { - font-size:20px; - padding:0; - margin:0; + font: 160%/100% "Lucida Grande", Arial, sans-serif; + padding:10px 0 0 0; + color:#ffffff; } div#header h2 { - font-size:16px; - padding:5px 0 0 0; - margin:0; + font: 150%/100% "Lucida Grande", Arial, sans-serif; color:#ffffff; } div#header h1 a{ - color:#fff; - /* font-family:Helvetica, "Myriad Web", Arial, sans-serif;*/ + color:#ffffff; } -/**** End header ****/ -/* +/* *************************************** Topmenu -*/ +*************************************** */ #topmenu { position:absolute; @@ -165,35 +136,29 @@ div#header h1 a{ float:right; } -/**** end top menu ****/ - -/* +/* *************************************** sidebar menu -*/ +*************************************** */ #sidebar_menu { width: 150px; - margin:0; - padding:0; float: left; - background:#f5f5f5; /* url(/_graphics/sidebar-top.gif) no-repeat top;*/ + background: #ffffff; } #sidebar_right { width:380px; min-height: 380px; float:right; - margin: 0; - padding: 0; - border-top:1px solid white; + border-top:1px solid black; + background: #ffffff; } #mainContent { - margin:0 0 0 160px; - width:810px; - min-height: 380px; - padding:0; - border-top:1px solid white; + margin:0 0 0 165px; + padding:10px 20px 20px 20px; + min-height: 480px; + background: #ffffff; } #login-box { @@ -201,23 +166,21 @@ div#header h1 a{ border:1px solid #ddd; width:300px; padding:10px; + background: #ffffff; } -/* +/* *************************************** FOOTER -*/ +*************************************** */ div#footer { clear: both; position: relative; font-size:1em; - height:26px; - margin:20px 0 0 0; - color:#174764; + height:40px; + margin:20px 40px 20px 40px; font-weight:bold; - width:100%; - padding:3px 0 0 0; - background:url(/_graphics/footer.gif) repeat-x; + background: #ffffff; } div#footer img { @@ -242,43 +205,22 @@ div#footer a:link, div#footer a:visited { text-align:right; } -/* +/* *************************************** System messages -*/ +*************************************** */ .messages { border:1px solid #D3322A; background:#F7DAD8; color:#000; - padding:3px 50px; - margin:20px 20px 10px 20px; -} - -/* - Forms -*/ - -.input-text, -.input-tags, -.input-url, -.input-textarea { - /* width: 600px;*/ - width:95%; - font-weight: inherit; - font-style: inherit; - font-size: 100%; - line-height: 1.4; - font-family: inherit; - padding:5px; + padding:3px 10px 3px 10px; + margin:10px 0px 10px 0px; } -.input-textarea { - height: 200px; -} -/* +/* *************************************** elgg toolbar -*/ +*************************************** */ .elggtoolbar ul.drawers { width: 150px; @@ -298,149 +240,125 @@ div#footer a:link, div#footer a:visited { padding: 3px 3px 3px 10px; } +.elggtoolbar li { + background: #e4ecf5; +} + .elggtoolbar li a { text-decoration: none; - color: #666; + color: #3399cc; line-height:0.5em; } .elggtoolbar li a:hover { text-decoration: underline; + color: #003366; } .elggtoolbar h2.drawer-handle { margin: 0; padding: 1px 1px 1px 10px; - background-color: #e5e5e5; + background-color: #ffffff; + border-bottom: 1px solid #0099cc; cursor: pointer; font-size: 100%; } .elggtoolbar h2.drawer-handle.open { color:#ffffff; - background-color: #666666; + background-color: #003366; + border-bottom: 1px solid #003366; } -/* - rounded corner widget boxes -*/ -.ui-sortable { color:#222; margin:0; padding:0 10px 10px; } -.ui-sortable h2 {color:#555; font-size:11px; margin:0; line-height:2; padding:0; } -.ui-sortable-helper { - /* width:150px !important; */ -} -.placeholder { - border:2px dashed #AAA; - margin-left:-12px; +/* *************************************** + GENERAL FORM ELEMENTS +*************************************** */ +label { + font-weight: bold; + color:#666; + font-size: 100%; } - - -.sort { - margin:10px 0; - position:relative; - /* margin:0px auto;*/ - z-index:1; - margin-left:12px; /* default, width of left corner */ - margin-bottom:0.5em; /* spacing under box */ -} - -.sort h1 { - color:#5d9ed6; - font-size:14px; - margin:0 43px 0 0; /* margin so edit buttons are not obscured */ - cursor:move; - height:1.8em; - padding:8px 0 0 0; - position:relative; +input { + font: 110% Arial, Helvetica, sans-serif; + width: 220px; + padding: 5px 3px 3px 7px; + border: 1px solid #cccccc; +} +textarea { + font: 110% Arial, Helvetica, sans-serif; + width: 480px; + height: 140px; + border: solid 1px #cccccc; + padding: 5px 3px 3px 7px; +} +.submit_button { + font: 12px/100% Arial, Helvetica, sans-serif; + color: #000000; + border: none; + width: 135px; + height: 25px; + padding-bottom: 6px; + margin:10px 0 10px 0; + cursor: pointer; } - -.sort .content, -.sort .t, -.sort .b, -.sort .b div { - background:transparent url(/_graphics/box.png) no-repeat top right; - _background-image:url(/_graphics/box.gif); /* for ie 6 as can't use AlphaImageLoader due to div width/height not being known */ - /* _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/box.png', sizingMethod='crop'); */ +.submit_button:hover { + background: #e4ecf5; } - -.sort .content { - position:relative; - zoom:1; - _overflow-y:hidden; - padding:0 12px 0 0; +textarea:focus, input[type="text"]:focus { + border: solid 1px #3b9acc; + background: #e4ecf5; } -.sort .t { - /* top+left vertical slice */ - position:absolute; - left:0px; - top:0px; - width:12px; /* top slice width */ - margin-left:-12px; - height:100%; - _height:1600px; /* arbitrary long height, IE 6 */ - background-position:top left; +.input-text, +.input-tags, +.input-url, +.input-textarea { + width:95%; } -.sort .b { - /* bottom */ - position:relative; - width:100%; +.input-textarea { + height: 200px; } -.sort .b, -.sort .b div { - height:6px; /* height of bottom round */ - font-size:1px; -} -.sort .b { - background-position:bottom right; +/* *************************************** + MAIN CONTENT ELEMENTS +*************************************** */ +#mainContent h1 { + color: #333333; + margin: 3px 0 2px; + padding-bottom: 4px; + font: normal 160%/100% "Lucida Grande", Arial, sans-serif; + border-bottom: dotted 1px #CCCCCC; } - -.sort .b div { - position:relative; - width:12px; /* bottom corner width */ - margin-left:-12px; - background-position:bottom left; +#mainContent h1 a, #mainContent h1 a:visited { + color: #333333; + text-decoration: none; } - -.sort p { - margin:0px; - padding:0.5em 0px 0.5em 0px; - line-height: 1.4em; - color:#555; +#mainContent h1 a:hover { + color: #44a1d0; + text-decoration: none; } - -.editpanel { - background: #cccccc; - height: 100px; - display: none; +#mainContent h2 { + color: #333333; + margin: 3px 0 2px; + padding-bottom: 4px; + font: normal 150%/100% "Lucida Grande", Arial, sans-serif; + border-bottom: dotted 1px #CCCCCC; } -.button_editpanel { - z-index:1; - float:right; - /* background: url(images/ todo - add arrow graphic ) no-repeat right -50px; */ - text-align: right; - padding: 10px 0 0 0; - cursor:pointer; - color: #cccccc; +#mainContent h2 a, #mainContent h2 a:visited { + color: #333333; text-decoration: none; - outline: none; - -moz-outline-style: none; } -.active { - /* background-position: right 12px;*/ +#mainContent h2 a:hover { + color: #44a1d0; + text-decoration: none; +} +#mainContent h3 { color: #666666; + margin: 5px 0px 5px; + font: bold 110%/110% "Lucida Grande", Arial, sans-serif; } -a.togglepanel { - color: #cccccc; - cursor:pointer; - text-decoration:none; - float:right; - padding: 9px 0 0 8px; - font-weight: bold; - outline: none; - -moz-outline-style: none; -} \ No newline at end of file + + diff --git a/views/default/navigation/toolbox.php b/views/default/navigation/toolbox.php index 549efc5ad..2a96d34b2 100644 --- a/views/default/navigation/toolbox.php +++ b/views/default/navigation/toolbox.php @@ -37,7 +37,7 @@ foreach($item->children as $subitem) { ?>
  • - name; ?> | + name; ?>
    • $(document).ready(function () { - $('li.drawer ul:not(:first)').hide(); // hide all ULs inside LI.drawer except the first one - $('h2.drawer-handle').click(function () { - // hide all the drawer contents - $('li.drawer ul:visible').slideUp().prev().removeClass('open'); - // show the associated drawer content to 'this' (this is the current H2 element) - // since the drawer content is the next element after the clicked H2, we find - // it and show it using this: - $(this).addClass('open').next().slideDown(); - }); + $('li.drawer ul:not(:first)').hide(); + + $('h2.drawer-handle').click(function () { + $('li.drawer ul:visible').slideUp('medium').prev().removeClass('open'); + $(this).addClass('open').next().slideDown('fast'); + return false; + }); }); diff --git a/views/default/page_elements/header.php b/views/default/page_elements/header.php index 56bc98101..e293b65f0 100644 --- a/views/default/page_elements/header.php +++ b/views/default/page_elements/header.php @@ -34,12 +34,7 @@ <?php echo $title; ?> - - - - - - + diff --git a/views/default/reset.css b/views/default/reset.css new file mode 100755 index 000000000..0cf92e978 --- /dev/null +++ b/views/default/reset.css @@ -0,0 +1,47 @@ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-weight: inherit; + font-style: inherit; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; +} +/* remember to define focus styles! */ +:focus { + outline: 0; +} +body { + line-height: 1; + color: black; + background: white; +} +ol, ul { + list-style: none; +} +/* tables still need 'cellspacing="0"' in the markup */ +table { + border-collapse: separate; + border-spacing: 0; +} +caption, th, td { + text-align: left; + font-weight: normal; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ""; +} +blockquote, q { + quotes: "" ""; +} \ No newline at end of file -- cgit v1.2.3