ENHANCEMENT basic updates to enhance usability and appearance of theme
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
parent
7ff80fd5f4
commit
275f5ba33d
150
css/layout.css
150
css/layout.css
|
|
@ -62,7 +62,7 @@ body {
|
|||
}
|
||||
|
||||
/* Brand */
|
||||
.brand, .brand:hover {
|
||||
header .brand, header .brand:hover {
|
||||
float: left;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
|
|
@ -82,34 +82,30 @@ body {
|
|||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
/* Search form */ /* TODO: make sure this is not double up from form.css */
|
||||
/* Search form */
|
||||
.search-bar {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 34px;
|
||||
right: 28px;
|
||||
top: 32px;
|
||||
}
|
||||
.search-bar form fieldset {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
.search-bar #Search {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.search-bar form input.text {
|
||||
width: 155px;
|
||||
padding:6px 35px 6px 10px;
|
||||
padding: 5px 34px 5px 10px;
|
||||
color: #888;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
.search-bar form input.active {
|
||||
color: #000
|
||||
}
|
||||
|
||||
.search-bar form input.action {
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
right: 0;
|
||||
top: -1px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
|
@ -117,9 +113,10 @@ body {
|
|||
background: none;
|
||||
font-family: 'WebSymbolsRegular';
|
||||
color: #848484;
|
||||
border-radius:0;
|
||||
margin-top:0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.search-bar form input.active,
|
||||
.search-bar form input.action:hover {
|
||||
color: #000
|
||||
}
|
||||
|
|
@ -127,14 +124,12 @@ body {
|
|||
.header textarea:focus {
|
||||
outline: none
|
||||
}
|
||||
#Search {
|
||||
padding:0;
|
||||
}
|
||||
.search-dropdown-icon {
|
||||
display: none
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* NAVIGATION */
|
||||
|
||||
/* Primary navigation */
|
||||
|
|
@ -143,7 +138,7 @@ body {
|
|||
}
|
||||
.header .primary li {
|
||||
float: left;
|
||||
padding-bottom: 17px;
|
||||
padding-bottom: 14px;
|
||||
margin: 0 5px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
|
@ -190,13 +185,11 @@ body {
|
|||
float: left;
|
||||
clear: both;
|
||||
position: relative;
|
||||
margin: 20px 0 4px -12px;
|
||||
margin: 20px 0 0 -13px;
|
||||
white-space: nowrap;
|
||||
right: auto;
|
||||
}
|
||||
.tablet-nav .header .primary ul li {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tablet-nav .header .primary ul li a {
|
||||
|
|
@ -204,15 +197,6 @@ body {
|
|||
-webkit-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 {
|
||||
float: left;
|
||||
width: 100%;
|
||||
|
|
@ -252,13 +236,12 @@ body {
|
|||
-webkit-transition: 0.2s;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.main .secondary li:hover .arrow {
|
||||
.main .secondary li a:hover .arrow {
|
||||
left: 6px
|
||||
}
|
||||
.main .secondary li a {
|
||||
padding: 10px 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-size: 11px;
|
||||
|
|
@ -271,9 +254,12 @@ body {
|
|||
padding-left: 28px;
|
||||
display: block;
|
||||
}
|
||||
.main .secondary li.current a.current {
|
||||
color: #b80000;
|
||||
}
|
||||
.main .secondary li.section,
|
||||
.main .secondary li.current {
|
||||
background-color: #f7f7f7
|
||||
background-color: #f1f1f1
|
||||
}
|
||||
.main .secondary li.section a,
|
||||
.main .secondary li.current a {
|
||||
|
|
@ -283,6 +269,41 @@ body {
|
|||
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 */
|
||||
header:after,
|
||||
|
|
@ -304,6 +325,8 @@ footer:after {
|
|||
-webkit-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 {
|
||||
font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
|
||||
font-style: italic;
|
||||
|
|
@ -313,17 +336,21 @@ body h1 span.amp {
|
|||
/* PAGE SPECIFIC LAYOUT */
|
||||
/* Homepage */
|
||||
|
||||
/* Search Results */ /* TODO: Test search results styles */
|
||||
.searchResults h1 {
|
||||
font-size: 36px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
/* Search Results */
|
||||
.typography .searchResults h1 {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
} /* TODO: Test search results styles */
|
||||
.searchResults p.searchQuery {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.searchResults ul#SearchResults {
|
||||
padding: 0
|
||||
padding: 0;
|
||||
margin-left: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.searchResults ul#SearchResults li {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
|
|
@ -331,18 +358,12 @@ body h1 span.amp {
|
|||
list-style-type: none;
|
||||
}
|
||||
.searchResults ul#SearchResults p {
|
||||
margin-bottom: 12px
|
||||
margin-bottom: 10px
|
||||
}
|
||||
.searchResults ul#SearchResults a.searchResultHeader {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
.searchResults #PageNumbers {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.searchResults #PageNumbers {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.searchResults #PageNumbers a {
|
||||
padding: 0 5px
|
||||
}
|
||||
|
|
@ -373,10 +394,10 @@ body h1 span.amp {
|
|||
line-height: 22px;
|
||||
}
|
||||
.footer a {
|
||||
color: #999
|
||||
color: #999;
|
||||
}
|
||||
.footer a:hover {
|
||||
color: #000
|
||||
color: #B90000
|
||||
}
|
||||
.footer .left {
|
||||
float: left;
|
||||
|
|
@ -534,6 +555,13 @@ body h1 span.amp {
|
|||
.header .primary ul li a:hover {
|
||||
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-bar {
|
||||
|
|
@ -543,7 +571,7 @@ body h1 span.amp {
|
|||
right: 0;
|
||||
display: none;
|
||||
padding: 20px 0;
|
||||
margin: 0;
|
||||
margin: 80px 0 0;
|
||||
background-color: #E7E7E7;
|
||||
}
|
||||
.search-dropdown-icon {
|
||||
|
|
@ -693,7 +721,11 @@ body h1 span.amp {
|
|||
|
||||
/* Simple theme custom print styles */
|
||||
.header,
|
||||
.footer {
|
||||
display: none
|
||||
.footer,
|
||||
.nav-open-button,
|
||||
.search-bar,
|
||||
.search-dropdown-icon,
|
||||
nav.primary {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -53,8 +53,8 @@ body {
|
|||
.typography h6 {
|
||||
font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
|
||||
font-weight: normal;
|
||||
color: #b80000;
|
||||
margin-bottom: 10px;
|
||||
color: #444;
|
||||
}
|
||||
.typography h1 { font-size: 36px;
|
||||
line-height: 45px;
|
||||
|
|
@ -95,9 +95,11 @@ body {
|
|||
.typography a.intro {
|
||||
color: #B80000;
|
||||
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 { }
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<footer class="footer" role="contentinfo">
|
||||
<div class="inner copy">
|
||||
<div class="left">$SiteConfig.Title <span class="arrow">→</span> <% include Navigation %></div>
|
||||
<div class="left">
|
||||
<a href="$BaseHref" class="brand" rel="home">$SiteConfig.Title</a>
|
||||
<span class="arrow">→</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>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -3,14 +3,14 @@
|
|||
<nav class="secondary">
|
||||
<h3>
|
||||
<% loop Level(1) %>
|
||||
$Title
|
||||
$Title
|
||||
<% end_loop %>
|
||||
</h3>
|
||||
<ul>
|
||||
<% loop Menu(2) %>
|
||||
<li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><span class="arrow">→</span><span class="text">$MenuTitle.XML</span></a></li>
|
||||
<% loop Menu(1) %>
|
||||
<% include SidebarMenu %>
|
||||
<% end_loop %>
|
||||
</ul>
|
||||
</nav>
|
||||
<% end_if %>
|
||||
</aside>
|
||||
</aside>
|
||||
|
|
@ -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">→</span>
|
||||
<span class="text">$MenuTitle.XML</span>
|
||||
</a>
|
||||
|
||||
<% if Children %>
|
||||
<ul>
|
||||
<% include SidebarMenu %>
|
||||
</ul>
|
||||
<% end_if %>
|
||||
|
||||
</li>
|
||||
<% end_loop %>
|
||||
<% end_if %>
|
||||
|
|
@ -2,21 +2,25 @@
|
|||
<h1>$Title</h1>
|
||||
|
||||
<% if Query %>
|
||||
<p class="searchQuery"><strong>You searched for "{$Query}"</strong></p>
|
||||
<p class="searchQuery">You searched for "{$Query}"</p>
|
||||
<% end_if %>
|
||||
|
||||
<% if Results %>
|
||||
<ul id="SearchResults">
|
||||
<% control Results %>
|
||||
<li>
|
||||
<a class="searchResultHeader" href="$Link">
|
||||
<% if MenuTitle %>
|
||||
$MenuTitle
|
||||
<% else %>
|
||||
$Title
|
||||
<% end_if %>
|
||||
</a>
|
||||
<p>$Content.LimitWordCountXML</p>
|
||||
<h4>
|
||||
<a href="$Link">
|
||||
<% if MenuTitle %>
|
||||
$MenuTitle
|
||||
<% else %>
|
||||
$Title
|
||||
<% end_if %>
|
||||
</a>
|
||||
</h4>
|
||||
<% if Content %>
|
||||
<p>$Content.LimitWordCountXML</p>
|
||||
<% end_if %>
|
||||
<a class="readMoreLink" href="$Link" title="Read more about "{$Title}"">Read more about "{$Title}"...</a>
|
||||
</li>
|
||||
<% end_control %>
|
||||
|
|
|
|||
Loading…
Reference in New Issue