From 400779f5a9cdb8f691c8f84f4ad3a8fef59f75e9 Mon Sep 17 00:00:00 2001 From: Michael Dorian Bach Date: Tue, 19 Oct 2010 18:18:53 -0700 Subject: [PATCH] CSS refactoring and cleanup for ThemeMachine. Resolved default padding styles. --HG-- branch : dev --- .../Views/Parts/Search.SearchForm.cshtml | 2 +- .../Themes/TheThemeMachine/Styles/Site.css | 501 ++++++++---------- .../TheThemeMachine/Views/Layout.cshtml | 4 +- 3 files changed, 219 insertions(+), 288 deletions(-) diff --git a/src/Orchard.Web/Modules/Orchard.Search/Views/Parts/Search.SearchForm.cshtml b/src/Orchard.Web/Modules/Orchard.Search/Views/Parts/Search.SearchForm.cshtml index 6fd978460..187cf3b5c 100644 --- a/src/Orchard.Web/Modules/Orchard.Search/Views/Parts/Search.SearchForm.cshtml +++ b/src/Orchard.Web/Modules/Orchard.Search/Views/Parts/Search.SearchForm.cshtml @@ -1,6 +1,6 @@ @using Orchard.Search.ViewModels; -@using(Html.BeginForm("index", "search", new { area = "Orchard.Search" }, FormMethod.Get, new { @class = "search" })) { +@using(Html.BeginForm("index", "search", new { area = "Orchard.Search" }, FormMethod.Get, new { @class = "search-form" })) {
@Html.TextBox("q", (SearchViewModel)Model.ViewModel.Query) diff --git a/src/Orchard.Web/Themes/TheThemeMachine/Styles/Site.css b/src/Orchard.Web/Themes/TheThemeMachine/Styles/Site.css index d75b48be3..1593c84e9 100644 --- a/src/Orchard.Web/Themes/TheThemeMachine/Styles/Site.css +++ b/src/Orchard.Web/Themes/TheThemeMachine/Styles/Site.css @@ -72,7 +72,7 @@ header, footer, aside, nav, article { display: block; } visibility: hidden; } -.zone-asidethird:after +.zone:after /* Self clears every zone container */ { content: "."; display: block; @@ -155,58 +155,37 @@ pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: +/* Forms +***************************************************************/ + +form { margin: 0; padding: 0; } +legend { font-size: 1.6em; font-weight: normal; margin: 0 0 1.2em 0; border:none; } +fieldset { padding:0em; margin: 0 0 0em 0; border: 0px solid #dbdbdb; } +label { font-size: 1.3em; font-weight: normal; display:block; padding: 0 0 0.3em 0; } +label.forcheckbox { margin:0 0 0 .4em; display:inline; } + +input[type="text"], input[type="password"] { + display: block; + padding: 0.3em; +} + +input[type="checkbox"] { + margin:.2em 0 1.2em 0; +} + +fieldset ol { list-style-type:none; padding: 0; margin: 0; } +fieldset ol li { margin: 0 0 6px 0; } + + + /* Structure ***************************************************************/ -#layout-wrapper -{ - -} - -#layout-header, #layout-before-main, #layout-main, #layout-footer, #layout-after-main, #layout-tripel { +#layout-header, #layout-featured, #layout-before-main, #layout-main, #layout-footer, #layout-after-main, #layout-tripel { width:960px; margin:0 auto; } -#layout-header -{ - margin: 30px auto; -} - #branding - { - font-family: 'Lobster', Tahoma, Arial, Helvetica, sans-serif; - font-size: 3.4em; - padding: 0; - margin: 0; - - } - - #branding a - { - text-decoration:none; - color: #434343; - } - -#layout-tripel -{ - border-top: 1px solid #dbdbdb; -} - -#layout-before-main -{ - border-bottom: 1px solid #dbdbdb; -} - -#layout-main -{ - border-top: 1px solid #fff; -} - -#layout-after-main -{ - -} - /* Navigation */ #layout-navigation { @@ -245,32 +224,156 @@ nav ul line-height:24px; } -#layout-footer -{ - border-top: 1px solid #dbdbdb; -} - #footer-sig - { - +#layout-wrapper {} +#layout-header {} + #branding + { + font-family: 'Lobster', Tahoma, Arial, Helvetica, sans-serif; + font-size: 3.4em; + padding: 0; + margin: 0; } - + #branding a + { + text-decoration:none; + color: #434343; + } +#layout-navigation {} +#layout-featured {} +#layout-before-main {} +#layout-main {} + #aside-first {} + #layout-content {} + #messages {} + #before-content {} + #content {} + #after-content {} + #aside-second {} +#layout-after-main {} +#layout-tripel {} + #tripel-first {} + #tripel-second {} + #tripel-third {} +#layout-footer {} + #footer-quad {} + #footer-quad-first {} + #footer-quad-second {} + #footer-quad-third {} + #footer-quad-forth {} + #footer-sig {} + /* Zones */ -/*.zone { +.zone +{ + padding: 12px; + + /* Enable this to see zone visualizations background-color: yellow; - box-shadow:inset 0 0 1px red; - -moz-box-shadow:inset 0 0 1px red; - -webkit-box-shadow:inset 0 0 1px red; -} Used for visualizing zones */ -.zone-header { } -.zone-footer { padding: 24px 0 12px 0px; float: left; font-size: 1.3em; color: #999999; } -.zone-content { } -.zone-asidethird { padding: 0 0 6px 0; } + box-shadow:inset 0 0 1px purple; + -moz-box-shadow:inset 0 0 1px purple; + -webkit-box-shadow:inset 0 0 1px purple; + */ +} +.zone-header { padding: 30px 0 30px 12px; } +.zone-navigation { padding: 0; } +.zone-featured {} +.zone-beforemain {} +.zone-asidefirst {} +.zone-messages {} +.zone-beforecontent {} +.zone-content {} +.zone-aftercontent {} +.zone-asidesecond {} +.zone-aftermain {} +.zone-zone-tripelfirst {} +.zone-zone-tripelsecond {} +.zone-zone-tripelthird {} +.zone-footerquadfirst {} +.zone-footerquadsecond {} +.zone-footerquadthird {} +.zone-footerquadfourth {} +.zone-footer { font-size: 1.3em; color: #999999; } /* Main ***************************************************************/ +/* Blogs */ +.blog-description { font-size: 1.3em; } +.blog-post .tags { margin-top: 12px; } +.blog-post .tags a { background-color: #dbdbdb; padding: 3px; color: #434343; } +.blog-post .tags a:hover { background-color: #434343; padding: 3px; color: #fff; } +.blog-posts { padding: 0; margin: 0; list-style: none; } +.blog-posts li { padding: 0; margin: 0; } +.blog-posts .blog-post { border-top: 1px solid #dbdbdb; padding: 6px 0 6px 0; } +.blog-posts .blog-post header {} +.blog-posts .blog-post header h1 { font-size: 1.7em; } +.blog-posts .blog-post header h1 a { color: #434343; } +.blog-posts .blog-post header h1 a:hover {} +.blog-posts .blog-post .tags { margin-top: 12px; } +.blog-posts .blog-post .tags a { background-color: #dbdbdb; padding: 3px; color: #434343; } +.blog-posts .blog-post .tags a:hover { background-color: #434343; padding: 3px; color: #fff; } +.blog-posts .blog-post .metadata { margin: 0 0 12px 0; color: #999; font-size: 1.1em; } +.blog-posts .blog-post .metadata .published { display: inline; margin: 0 6px 0 0; } +.blog-posts .blog-post .metadata .commentcount { display: inline; } +.blog-post {} +.blog-post-title {} +.meta {} + +/* Comments */ +#comments { margin: 24px 0 0 0; padding: 0; } +.comment-form { margin: 24px 0 0 0; padding: 0; } +.comments { margin: 0; padding: 0; list-style: none; } +.comments li { margin: 12px 0 0 0; padding: 12px; border: 1px solid #dbdbdb; } +.comment { margin: 0; padding: 0; } +.comment h4 { font-size: 1.4em; } +.comment .who {} +.comment .what {} +.comment #add-comment {} +.comment-form #comment-by { font-size: 1.6em; font-weight: normal; margin: 0 0 1.2em 0; border:none; } +.comment-form #comment-text { width: 33.2em; } +.comment-form input[type="text"] { width: 32em; } +.comment-disabled {} +.comment-count { font-size: 1.6em; } + +/* Tag Search */ +.tagged-posts {} +.tagged-posts { padding: 0; margin: 0; list-style: none; } +.tagged-posts li { padding: 0; margin: 0; } +.tagged-posts .blog-post { border-top: 1px solid #dbdbdb; padding: 6px 0 6px 0; } +.tagged-posts .blog-post header {} +.tagged-posts .blog-post header h1 { font-size: 1.7em; } +.tagged-posts .blog-post header h1 a { color: #434343; } +.tagged-posts .blog-post header h1 a:hover {} +.tagged-posts .blog-post .tags { margin-top: 12px; } +.tagged-posts .blog-post .tags a { background-color: #dbdbdb; padding: 3px; color: #434343; } +.tagged-posts .blog-post .tags a:hover { background-color: #434343; padding: 3px; color: #fff; } +.tagged-posts .blog-post .metadata { margin: 0 0 12px 0; color: #999; font-size: 1.1em; } +.tagged-posts .blog-post .metadata .published { display: inline; margin: 0 6px 0 0; } +.tagged-posts .blog-post .metadata .commentcount { display: inline; } + +/* Search Results */ +.search-results {} +.search-results { padding: 0; margin: 0; list-style: none; } +.search-results li { padding: 0; margin: 0; } +.search-results .blog-post { border-top: 1px solid #dbdbdb; padding: 6px 0 6px 0; } +.search-results .blog-post header {} +.search-results .blog-post header h1 { font-size: 1.7em; } +.search-results .blog-post header h1 a { color: #434343; } +.search-results .blog-post header h1 a:hover {} +.search-results .blog-post .tags { margin-top: 12px; } +.search-results .blog-post .tags a { background-color: #dbdbdb; padding: 3px; color: #434343; } +.search-results .blog-post .tags a:hover { background-color: #434343; padding: 3px; color: #fff; } +.search-results .blog-post .metadata { margin: 0 0 12px 0; color: #999; font-size: 1.1em; } +.search-results .blog-post .metadata .published { display: inline; margin: 0 6px 0 0; } +.search-results .blog-post .metadata .commentcount { display: inline; } + + + +/* Secondary +***************************************************************/ + /* Has Aside */ .has-aside-two #layout-content { @@ -307,120 +410,39 @@ nav ul float:left; } +/* Tripel Zones*/ +#layout-tripel > div { float:left; width:960px; } +/*2 zones on */ +.tripel-12 #layout-tripel > div { width:480px; } /* If zones 1, 2 are on */ +.tripel-23 #layout-tripel > div { width:480px; } /* If zones 2, 3 are on */ +.tripel-13 #layout-tripel > div { width:480px; } /* If zones 1, 3 are on */ -/* Secondary -***************************************************************/ -/* Blogs */ -.blog-description { font-size: 1.3em; } +/*3 zones on */ +.tripel-123 #layout-tripel > div { width:320px; } /* If zones 1, 2, 3 are on */ -.blog-post .tags { margin-top: 12px; } -.blog-post .tags a { background-color: #dbdbdb; padding: 3px; color: #434343; } -.blog-post .tags a:hover { background-color: #434343; padding: 3px; color: #fff; } +/* Quad Footer Zones */ +#footer-quad > div { float:left; width:240px; } -/* Blogs Posts Summary List */ -.blog-posts { padding: 0; margin: 0; list-style: none; } -.blog-posts li { padding: 0; margin: 0; } -.blog-posts .blog-post { border-top: 1px solid #dbdbdb; padding: 6px 0 6px 0; } -.blog-posts .blog-post header {} -.blog-posts .blog-post header h1 { font-size: 1.7em; } -.blog-posts .blog-post header h1 a { color: #434343; } -.blog-posts .blog-post header h1 a:hover {} -.blog-posts .blog-post .tags { margin-top: 12px; } -.blog-posts .blog-post .tags a { background-color: #dbdbdb; padding: 3px; color: #434343; } -.blog-posts .blog-post .tags a:hover { background-color: #434343; padding: 3px; color: #fff; } -.blog-posts .blog-post .metadata { margin: 0 0 12px 0; color: #999; font-size: 1.1em; } -.blog-posts .blog-post .metadata .published { display: inline; margin: 0 6px 0 0; } -.blog-posts .blog-post .metadata .commentcount { display: inline; } +/*1 zone on */ +.split-1 #footer-quad-first { width:960px; } /* If zone 1 is on */ +.split-2 #footer-quad-second { width:960px; } /* If zone 2 is on */ +.split-3 #footer-quad-third { width:960px; } /* If zone 3 is on */ +.split-4 #footer-quad-fourth { width:960px; } /* If zone 4 is on */ -/* Blogs Post Detail */ -.blog-post {} -.blog-post-title {} -.meta {} +/*2 zones on */ +.split-12 #footer-quad-first, .split-12 #footer-quad-second { width:480px; } /* If zones 1, 2 are on */ +.split-13 #footer-quad-first, .split-13 #footer-quad-third { width:480px; } /* If zones 1, 3 are on */ +.split-14 #footer-quad-first, .split-14 #footer-quad-fourth { width:480px; } /* If zones 1, 4 are on */ +.split-23 #footer-quad-second, .split-23 #footer-quad-third { width:480px; } /* If zones 2, 3 are on */ +.split-24 #footer-quad-second, .split-24 #footer-quad-fourth { width:480px; } /* If zones 2, 4 are on */ +.split-34 #footer-quad-third, .split-34 #footer-quad-fourth { width:480px; } /* If zones 3, 4 are on */ -/* Comments */ -#comments { margin: 24px 0 0 0; padding: 0; } -.comment-form { margin: 24px 0 0 0; padding: 0; } -.comments { margin: 0; padding: 0; list-style: none; } -.comments li { margin: 12px 0 0 0; padding: 12px; border: 1px solid #dbdbdb; } -.comment { margin: 0; padding: 0; } -.comment h4 { font-size: 1.4em; } -.comment .who {} -.comment .what {} -.comment #add-comment {} - -.comment-form #comment-by { font-size: 1.6em; font-weight: normal; margin: 0 0 1.2em 0; border:none; } -.comment-form #comment-text { width: 33.2em; } -.comment-form input[type="text"] { width: 32em; } - -.comment-disabled {} -.comment-count { font-size: 1.6em; } - -/* Tag Search */ - -.tagged-posts {} -.tagged-posts { padding: 0; margin: 0; list-style: none; } -.tagged-posts li { padding: 0; margin: 0; } -.tagged-posts .blog-post { border-top: 1px solid #dbdbdb; padding: 6px 0 6px 0; } -.tagged-posts .blog-post header {} -.tagged-posts .blog-post header h1 { font-size: 1.7em; } -.tagged-posts .blog-post header h1 a { color: #434343; } -.tagged-posts .blog-post header h1 a:hover {} -.tagged-posts .blog-post .tags { margin-top: 12px; } -.tagged-posts .blog-post .tags a { background-color: #dbdbdb; padding: 3px; color: #434343; } -.tagged-posts .blog-post .tags a:hover { background-color: #434343; padding: 3px; color: #fff; } -.tagged-posts .blog-post .metadata { margin: 0 0 12px 0; color: #999; font-size: 1.1em; } -.tagged-posts .blog-post .metadata .published { display: inline; margin: 0 6px 0 0; } -.tagged-posts .blog-post .metadata .commentcount { display: inline; } - - - - -/* Forms -***************************************************************/ -form { margin: 0; padding: 0; } -legend { font-size: 1.6em; font-weight: normal; margin: 0 0 1.2em 0; border:none; } -fieldset { padding:0em; margin: 0 0 0em 0; border: 0px solid #dbdbdb; } -label { font-size: 1.3em; font-weight: normal; display:block; padding: 0 0 0.3em 0; } -label.forcheckbox { margin:0 0 0 .4em; display:inline; } - -input[type="text"], input[type="password"] { - display: block; - padding: 0.3em; -} - -input[type="checkbox"] { - margin:.2em 0 1.2em 0; -} - -fieldset ol { list-style-type:none; padding: 0; margin: 0; } -fieldset ol li { margin: 0 0 6px 0; } - -/* -input[type="submit"], input[type="button"], button, .button, .button:link, .button:visited { - color:#333; - background:#F5F5F5; - background: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#cbcbcb)); - background:-moz-linear-gradient(top , #F5F5F5, #cbcbcb); - border:1px solid #999; - cursor:pointer; - margin:.2em 0 2em 0; - padding:.3em 1.8em; - text-align:center; -} - -input[type="submit"]:hover, input[type="button"]:hover, -input[type="submit"]:active, input[type="button"]:active, -input[type="submit"]:focus, input[type="button"]:focus, -button:hover, .button:hover, -button:active, .button:active, -button:focus, .button:focus { - text-decoration:none; - background: #ebebeb; - background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ebebeb)); - background:-moz-linear-gradient(top , #e1e1e1, #ebebeb); -} -*/ +/*3 zones on */ +.split-234 #footer-quad-second { width:480px; } /* If zones 2, 3, 4 are on */ +.split-134 #footer-quad-first { width:480px; } /* If zones 1, 3, 4 are on */ +.split-124 #footer-quad-fourth { width:480px; } /* If zones 1, 2, 4 are on */ +.split-123 #footer-quad-third { width:480px; } /* If zones 1, 2, 3 are on */ @@ -428,6 +450,8 @@ button:focus, .button:focus { ***************************************************************/ .widgets {} +/* Search */ + /* Misc @@ -456,123 +480,30 @@ button:focus, .button:focus { .login-form { margin: 24px 0 0 0; } + /* CSS 3 Enhancements ***************************************************************/ -/* For testing purposes */ - - -/*.aside.third { - border-top:1px solid #dbdbdb; - clear:both; -}*/ - - - -#footer-quad div.zone { - float:left; - width:240px; - /*padding:12px 6px 0 6px;*/ +input[type="submit"], input[type="button"], button, .button, .button:link, .button:visited { + color:#333; + background:#F5F5F5; + background: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#cbcbcb)); + background:-moz-linear-gradient(top , #F5F5F5, #cbcbcb); + border:1px solid #999; + cursor:pointer; + margin:.2em 0 2em 0; + padding:.3em 1.8em; + text-align:center; } -/* Featured Zone - switch to an image */ - -.featuredimage { - float:left; - border: 1px solid #dbdbdb; - width: 462px; - height: 240px; - margin: 6px; +input[type="submit"]:hover, input[type="button"]:hover, +input[type="submit"]:active, input[type="button"]:active, +input[type="submit"]:focus, input[type="button"]:focus, +button:hover, .button:hover, +button:active, .button:active, +button:focus, .button:focus { + text-decoration:none; + background: #ebebeb; + background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ebebeb)); + background:-moz-linear-gradient(top , #e1e1e1, #ebebeb); } - -/* Recent Zone */ - -#zone-recent ul li { - float:left; - width: 462px; - margin: 6px; -} - -.clearfix { - clear:both; -} - -#footer div { - /*border:1px solid #ff0000;*/ -} - -/* Tripel */ - -#layout-tripel div { - float:left; - width:960px; - /*padding:12px 6px 0 6px;*/ -} - -/*2 zones on */ - -/* If zones 1, 2 are on */ -.tripel-12 #layout-tripel div { width:480px; } - -/* If zones 2, 3 are on */ -.tripel-23 #layout-tripel div { width:480px; } - -/* If zones 1, 3 are on */ -.tripel-13 #layout-tripel div { width:480px; } - -/*3 zones on */ - -/* If zones 1, 2, 3 are on */ -.tripel-123 #layout-tripel div { width:320px; } - - - -/* Quad */ -/*1 zone on */ - -/* If zone 1 is on */ -.split-1 #footer-quad-first div.zone { width:960px; } - -/* If zone 2 is on */ -.split-2 #footer-quad-second div.zone { width:960px; } - -/* If zone 3 is on */ -.split-3 #footer-quad-third div.zone { width:960px; } - -/* If zone 4 is on */ -.split-4 #footer-quad-fourth div.zone { width:960px; } - - -/*2 zones on */ - -/* If zones 1, 2 are on */ -.split-12 #footer-quad-first div.zone, .split-12 #footer-quad-second div.zone { width:480px; } - -/* If zones 1, 3 are on */ -.split-13 #footer-quad-first div.zone, .split-13 #footer-quad-third div.zone { width:480px; } - -/* If zones 1, 4 are on */ -.split-14 #footer-quad-first div.zone, .split-14 #footer-quad-fourth div.zone { width:480px; } - -/* If zones 2, 3 are on */ -.split-23 #footer-quad-second div.zone, .split-23 #footer-quad-third div.zone { width:480px; } - -/* If zones 2, 4 are on */ -.split-24 #footer-quad-second div.zone, .split-24 #footer-quad-fourth div.zone { width:480px; } - -/* If zones 3, 4 are on */ -.split-34 #footer-quad-third div.zone, .split-34 #footer-quad-fourth div.zone { width:480px; } - -/*3 zones on */ - -/* If zones 2, 3, 4 are on */ -.split-234 #footer-quad-second div.zone { width:480px; } - -/* If zones 1, 3, 4 are on */ -.split-134 #footer-quad-first div.zone { width:480px; } - -/* If zones 1, 2, 4 are on */ -.split-124 #footer-quad-fourth div.zone { width:480px; } - -/* If zones 1, 2, 3 are on */ -.split-123 #footer-quad-third div.zone { width:480px; } \ No newline at end of file diff --git a/src/Orchard.Web/Themes/TheThemeMachine/Views/Layout.cshtml b/src/Orchard.Web/Themes/TheThemeMachine/Views/Layout.cshtml index 2462c24bf..f472f1ac5 100644 --- a/src/Orchard.Web/Themes/TheThemeMachine/Views/Layout.cshtml +++ b/src/Orchard.Web/Themes/TheThemeMachine/Views/Layout.cshtml @@ -75,7 +75,7 @@ @Zone(Model.Navigation) } -@if (Model.Featered != null) { +@if (Model.Featured != null) { @@ -87,7 +87,7 @@ }
@if (Model.AsideFirst != null) { -