tonyair/silverstripe-simple
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-simple synced 2024-10-22 11:05:50 +02:00
Code Issues Projects Releases Wiki Activity

ENHANCEMENT basic updates to enhance usability and appearance of theme

Browse Source 
Minor clean-up of consistency for tablet main menu styles
Added multilevel subnavigation in sidebar for internal pages
Updated search styling and positioning
Changed header color and link color to provide more consistency for the
theme
Footer links to red on hover and site name to link to homepage
Search results page styling updated
This commit is contained in:
Paul Clarke 2012-10-08 17:02:34 +13:00
parent 7ff80fd5f4
commit 275f5ba33d
6 changed files with 134 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
css/layout.css
View File

@ -62,7 +62,7 @@ body {
} }
/* Brand */ /* Brand */
.brand, .brand:hover { header .brand, header .brand:hover {
float: left; float: left;
color: #fff; color: #fff;
display: inline-block; display: inline-block;
@ -82,34 +82,30 @@ body {
margin-bottom: 22px; margin-bottom: 22px;
} }
/* Search form */ /* TODO: make sure this is not double up from form.css */ /* Search form */
.search-bar { .search-bar {
position: absolute; position: absolute;
right: 30px; right: 28px;
top: 34px; top: 32px;
} }
.search-bar form fieldset { .search-bar #Search {
position: relative; margin: 0;
padding: 0; padding: 0;
margin: 0;
} }
.search-bar form input.text { .search-bar form input.text {
width: 155px; width: 155px;
padding:6px 35px 6px 10px; padding: 5px 34px 5px 10px;
color: #888; color: #888;
margin: 0; margin: 0;
border: none; border: none;
border-radius: 20px; border-radius: 14px;
background: #fff; background: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.search-bar form input.active {
color: #000
} }
.search-bar form input.action { .search-bar form input.action {
font-size: 15px; font-size: 14px;
position: absolute; position: absolute;
right: 3px; right: 0;
top: -1px; top: -1px;
cursor: pointer; cursor: pointer;
border: none; border: none;
@ -117,9 +113,10 @@ body {
background: none; background: none;
font-family: 'WebSymbolsRegular'; font-family: 'WebSymbolsRegular';
color: #848484; color: #848484;
border-radius:0; border-radius: 0;
margin-top:0; margin: 0;
} }
.search-bar form input.active,
.search-bar form input.action:hover { .search-bar form input.action:hover {
color: #000 color: #000
} }
@ -127,14 +124,12 @@ body {
.header textarea:focus { .header textarea:focus {
outline: none outline: none
} }
#Search {
padding:0;
}
.search-dropdown-icon { .search-dropdown-icon {
display: none display: none
} }
/* NAVIGATION */ /* NAVIGATION */
/* Primary navigation */ /* Primary navigation */
@ -143,7 +138,7 @@ body {
} }
.header .primary li { .header .primary li {
float: left; float: left;
padding-bottom: 17px; padding-bottom: 14px;
margin: 0 5px; margin: 0 5px;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
@ -190,13 +185,11 @@ body {
float: left; float: left;
clear: both; clear: both;
position: relative; position: relative;
margin: 20px 0 4px -12px; margin: 20px 0 0 -13px;
white-space: nowrap; white-space: nowrap;
right: auto; right: auto;
} }
.tablet-nav .header .primary ul li { .tablet-nav .header .primary ul li {
margin-bottom: 10px;
padding-bottom: 0;
white-space: nowrap; white-space: nowrap;
} }
.tablet-nav .header .primary ul li a { .tablet-nav .header .primary ul li a {
@ -204,15 +197,6 @@ body {
-webkit-transition: none; -webkit-transition: none;
transition: none; transition: none;
} }
.tablet-nav .header .primary ul li.current a,
.tablet-nav .header .primary ul li.section a {
background-color: #525252;
border-radius: 4px;
}
.tablet-nav .header .primary li.section:after,
.tablet-nav .header .primary li.current:after {
display: none
}
.tablet-nav .footer .right { .tablet-nav .footer .right {
float: left; float: left;
width: 100%; width: 100%;
@ -252,13 +236,12 @@ body {
-webkit-transition: 0.2s; -webkit-transition: 0.2s;
transition: 0.2s; transition: 0.2s;
} }
.main .secondary li:hover .arrow { .main .secondary li a:hover .arrow {
left: 6px left: 6px
} }
.main .secondary li a { .main .secondary li a {
padding: 10px 0; padding: 10px 0;
display: block; display: block;
width: 100%;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 2px;
font-size: 11px; font-size: 11px;
@ -271,9 +254,12 @@ body {
padding-left: 28px; padding-left: 28px;
display: block; display: block;
} }
.main .secondary li.current a.current {
color: #b80000;
}
.main .secondary li.section, .main .secondary li.section,
.main .secondary li.current { .main .secondary li.current {
background-color: #f7f7f7 background-color: #f1f1f1
} }
.main .secondary li.section a, .main .secondary li.section a,
.main .secondary li.current a { .main .secondary li.current a {
@ -283,6 +269,41 @@ body {
color: #aaa; color: #aaa;
} }
/* Secondary navigation 2-5 levels deep */
.main .secondary ul ul {
display: none;
}
.secondary ul li.current ul,
.secondary ul li.section ul { /* Only show child pages from selected parent */
display: block;
}
.secondary li.current ul ul {
display: none;
}
.main .secondary ul ul li a { padding-left: 10px; } /* Indent all sidebar navigation levels*/
.main .secondary ul ul li a .arrow { left: 12px; }
.main .secondary ul ul li a:hover .arrow { left: 16px; }
.main .secondary ul ul ul li a { padding-left: 20px; }
.main .secondary ul ul ul li a .arrow { left: 22px; }
.main .secondary ul ul ul li a:hover .arrow { left: 26px; }
.main .secondary ul ul ul ul li a { padding-left: 30px; }
.main .secondary ul ul ul ul li a .arrow { left: 32px; }
.main .secondary ul ul ul ul li a:hover .arrow { left: 36px; }
.main .secondary ul ul ul ul ul li a { padding-left: 40px; }
.main .secondary ul ul ul ul ul li a .arrow { left: 32px; }
.main .secondary ul ul ul ul ul li a:hover .arrow { left: 36px; }
.main .secondary li a:hover,
.main .secondary li.section a:hover,
.main .secondary li.current a:hover {
color: #b80000;
}
/* MIXED */ /* MIXED */
header:after, header:after,
@ -304,6 +325,8 @@ footer:after {
-webkit-transition: color 0.2s; -webkit-transition: color 0.2s;
transition: color 0.2s; transition: color 0.2s;
} }
.footer a.brand { color: #333; margin-left: 0; }
.footer a.brand:hover { color: #B80000; }
body h1 span.amp { body h1 span.amp {
font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia; font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
font-style: italic; font-style: italic;
@ -313,17 +336,21 @@ body h1 span.amp {
/* PAGE SPECIFIC LAYOUT */ /* PAGE SPECIFIC LAYOUT */
/* Homepage */ /* Homepage */
/* Search Results */ /* TODO: Test search results styles */ /* Search Results */
.searchResults h1 { .typography .searchResults h1 {
font-size: 36px; margin-bottom: 0;
margin-bottom: 15px; padding-bottom: 0;
} border-bottom: none;
} /* TODO: Test search results styles */
.searchResults p.searchQuery { .searchResults p.searchQuery {
color: #333;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 15px;
font-weight: bold;
} }
.searchResults ul#SearchResults { .searchResults ul#SearchResults {
padding: 0 padding: 0;
margin-left: 0;
border-bottom: 1px solid #e5e5e5;
} }
.searchResults ul#SearchResults li { .searchResults ul#SearchResults li {
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
@ -331,18 +358,12 @@ body h1 span.amp {
list-style-type: none; list-style-type: none;
} }
.searchResults ul#SearchResults p { .searchResults ul#SearchResults p {
margin-bottom: 12px margin-bottom: 10px
} }
.searchResults ul#SearchResults a.searchResultHeader { .searchResults #PageNumbers {
font-size: 16px; border-top: 1px solid #e5e5e5;
font-weight: bold; padding-top: 20px;
margin-bottom: 6px;
display: block;
} }
.searchResults #PageNumbers {
border-top: 1px solid #e5e5e5;
padding-top: 20px;
}
.searchResults #PageNumbers a { .searchResults #PageNumbers a {
padding: 0 5px padding: 0 5px
} }
@ -373,10 +394,10 @@ body h1 span.amp {
line-height: 22px; line-height: 22px;
} }
.footer a { .footer a {
color: #999 color: #999;
} }
.footer a:hover { .footer a:hover {
color: #000 color: #B90000
} }
.footer .left { .footer .left {
float: left; float: left;
@ -534,6 +555,13 @@ body h1 span.amp {
.header .primary ul li a:hover { .header .primary ul li a:hover {
color: inherit color: inherit
} }
.header .primary li.section:after,
.header .primary li.current:after {
display: none;
}
.tablet-nav .header nav.primary ul li {
padding: 0;
}
/* Search Form */ /* Search Form */
.search-bar { .search-bar {
@ -543,7 +571,7 @@ body h1 span.amp {
right: 0; right: 0;
display: none; display: none;
padding: 20px 0; padding: 20px 0;
margin: 0; margin: 80px 0 0;
background-color: #E7E7E7; background-color: #E7E7E7;
} }
.search-dropdown-icon { .search-dropdown-icon {
@ -693,7 +721,11 @@ body h1 span.amp {
/* Simple theme custom print styles */ /* Simple theme custom print styles */
.header, .header,
.footer { .footer,
display: none .nav-open-button,
.search-bar,
.search-dropdown-icon,
nav.primary {
display: none;
} }
} }

8
css/typography.css
View File

@ -53,8 +53,8 @@ body {
.typography h6 { .typography h6 {
font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif; font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
font-weight: normal; font-weight: normal;
color: #b80000;
margin-bottom: 10px; margin-bottom: 10px;
color: #444;
} }
.typography h1 { font-size: 36px; .typography h1 { font-size: 36px;
line-height: 45px; line-height: 45px;
@ -95,9 +95,11 @@ body {
.typography a.intro { .typography a.intro {
color: #B80000; color: #B80000;
text-decoration: none; text-decoration: none;
border-bottom: 1px dashed #B80000;
} }
.typography a:hover { color: #D80000; } .typography a:hover {
color: #D80000;
border-bottom: 1px dashed #B80000;
}
.typography a:focus { } .typography a:focus { }

4
templates/Includes/Footer.ss
View File

@ -1,6 +1,8 @@
<footer class="footer" role="contentinfo"> <footer class="footer" role="contentinfo">
<div class="inner copy"> <div class="inner copy">
<div class="left">$SiteConfig.Title <span class="arrow">&rarr;</span> <% include Navigation %></div> <div class="left">
<a href="$BaseHref" class="brand" rel="home">$SiteConfig.Title</a>
<span class="arrow">&rarr;</span> <% include Navigation %></div>
<small class="right"><a href="http://simple.innovatif.com/about/">Theme</a> by <a href="http://www.saratusar.com">Sara</a> (Innovatif) / Powered by <a href="http://silverstripe.org">Silverstripe</a></small> <small class="right"><a href="http://simple.innovatif.com/about/">Theme</a> by <a href="http://www.saratusar.com">Sara</a> (Innovatif) / Powered by <a href="http://silverstripe.org">Silverstripe</a></small>
</div> </div>
</footer> </footer>

8
templates/Includes/SideBar.ss
View File

@ -3,14 +3,14 @@
<nav class="secondary"> <nav class="secondary">
<h3> <h3>
<% loop Level(1) %> <% loop Level(1) %>
$Title $Title
<% end_loop %> <% end_loop %>
</h3> </h3>
<ul> <ul>
<% loop Menu(2) %> <% loop Menu(1) %>
<li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><span class="arrow">&rarr;</span><span class="text">$MenuTitle.XML</span></a></li> <% include SidebarMenu %>
<% end_loop %> <% end_loop %>
</ul> </ul>
</nav> </nav>
<% end_if %> <% end_if %>
</aside> </aside>

18
templates/Includes/SidebarMenu.ss Normal file
View File

@ -0,0 +1,18 @@
<!--Include SidebarMenu recursively /-->
<% if Children %>
<% loop Children %>
<li class="$LinkingMode">
<a href="$Link" class="$LinkingMode" title="Go to the $Title.XML page">
<span class="arrow">&rarr;</span>
<span class="text">$MenuTitle.XML</span>
</a>
<% if Children %>
<ul>
<% include SidebarMenu %>
</ul>
<% end_if %>
</li>
<% end_loop %>
<% end_if %>

22
templates/Layout/Page_results.ss
View File

@ -2,21 +2,25 @@
<h1>$Title</h1> <h1>$Title</h1>
<% if Query %> <% if Query %>
<p class="searchQuery"><strong>You searched for &quot;{$Query}&quot;</strong></p> <p class="searchQuery">You searched for &quot;{$Query}&quot;</p>
<% end_if %> <% end_if %>
<% if Results %> <% if Results %>
<ul id="SearchResults"> <ul id="SearchResults">
<% control Results %> <% control Results %>
<li> <li>
<a class="searchResultHeader" href="$Link"> <h4>
<% if MenuTitle %> <a href="$Link">
$MenuTitle <% if MenuTitle %>
<% else %> $MenuTitle
$Title <% else %>
<% end_if %> $Title
</a> <% end_if %>
<p>$Content.LimitWordCountXML</p> </a>
</h4>
<% if Content %>
<p>$Content.LimitWordCountXML</p>
<% end_if %>
<a class="readMoreLink" href="$Link" title="Read more about &quot;{$Title}&quot;">Read more about &quot;{$Title}&quot;...</a> <a class="readMoreLink" href="$Link" title="Read more about &quot;{$Title}&quot;">Read more about &quot;{$Title}&quot;...</a>
</li> </li>
<% end_control %> <% end_control %>