blog theme: more on header/nav
This commit is contained in:
Fabrixxm
parent
77d0f4f2b8
commit
34f01ece9f
|
|
@ -10,13 +10,98 @@
|
||||||
<img width="1000" height="288" alt="" src="~blog.header.image~">
|
<img width="1000" height="288" alt="" src="~blog.header.image~">
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<form id="searchform" action="$baseurl/search" method="get">
|
<form id="searchform" action="$baseurl/search" method="get" role="search">
|
||||||
<label class="assistive-text" for="search">Search</label>
|
<label class="assistive-text" for="search">Search</label>
|
||||||
<input id="search" class="field" type="text" placeholder="Search" name="search">
|
<input id="search" class="field" type="text" placeholder="Search" name="search">
|
||||||
<input id="searchsubmit" class="submit" type="submit" value="Search" name="submit">
|
<input id="searchsubmit" class="submit" type="submit" value="Search" name="submit">
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<nav id="access" role="navigation">
|
<nav id="access" role="navigation">
|
||||||
|
<div class="menu">
|
||||||
|
<ul>
|
||||||
|
{{ if $nav.home }}
|
||||||
|
<li class="$sel.home"><a id="nav-home-link" class="nav-commlink $nav.home.2" href="$nav.home.0" title="$nav.home.3" >$nav.home.1</a></li>
|
||||||
|
<span id="home-update" class="nav-ajax-left"></span>
|
||||||
|
{{ endif }}
|
||||||
|
|
||||||
|
{{ if $nav.community }}<li class="$sel.community"><a id="nav-community-link" class="nav-commlink $nav.community.2 " href="$nav.community.0" title="$nav.community.3" >$nav.community.1</a></li>{{ endif }}
|
||||||
|
|
||||||
|
{{ if $nav.login }}<li class="$sel.login"><a id="nav-login-link" class="nav-login-link $nav.login.2" href="$nav.login.0" title="$nav.login.3" >$nav.login.1</a></li>{{ endif }}
|
||||||
|
|
||||||
|
{{ if $nav.register }}<li class="$sel.register"><a id="nav-register-link" class="nav-commlink $nav.register.2 " href="$nav.register.0" title="$nav.register.3" >$nav.register.1</a></li>{{ endif }}
|
||||||
|
|
||||||
|
{{ if $nav.apps }}<li class="$sel.apps"><a id="nav-apps-link" class="nav-link $nav.apps.2" href="$nav.apps.0" title="$nav.apps.3" >$nav.apps.1</a></li>{{ endif }}
|
||||||
|
|
||||||
|
{#<li><a id="nav-search-link" class="nav-link $nav.search.2" href="$nav.search.0" title="$nav.search.3" >$nav.search.1</a></li> #}
|
||||||
|
|
||||||
|
{{ if $nav.directory }}<li class="$sel.directory"><a id="nav-directory-link" class="nav-link $nav.directory.2" href="$nav.directory.0" title="$nav.directory.3" >$nav.directory.1</a></li>{{ endif }}
|
||||||
|
|
||||||
|
{{ if $nav.help }} <li class="$sel.help"><a id="nav-help-link" class="nav-link $nav.help.2" target="friendika-help" href="$nav.help.0" title="$nav.help.3" >$nav.help.1</a></li>{{ endif }}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
{{ if $nav.logout }}
|
||||||
|
<nav id="tools" role="navigation">
|
||||||
|
<div class="user">
|
||||||
|
<ul>
|
||||||
|
{{ if $userinfo }}
|
||||||
|
<li><a href="$nav.home.0" title="$sitelocation"><img src="$userinfo.icon" alt="$userinfo.name">$userinfo.name</a>
|
||||||
|
<ul id="nav-user-menu" class="menu-popup">
|
||||||
|
{{ for $nav.usermenu as $usermenu }}
|
||||||
|
<li><a class="$usermenu.2" href="$usermenu.0" title="$usermenu.3">$usermenu.1</a></li>
|
||||||
|
{{ endfor }}
|
||||||
|
|
||||||
|
|
||||||
|
{{ if $nav.contacts }}<li><a class="$nav.contacts.2" href="$nav.contacts.0" title="$nav.contacts.3" >$nav.contacts.1</a></li>{{ endif }}
|
||||||
|
|
||||||
|
{{ if $nav.manage }}<li><a class="$nav.manage.2 sep" href="$nav.manage.0" title="$nav.manage.3">$nav.manage.1</a></li>{{ endif }}
|
||||||
|
|
||||||
|
{{ if $nav.settings }}<li><a class="$nav.settings.2 sep" href="$nav.settings.0" title="$nav.settings.3">$nav.settings.1</a></li>{{ endif }}
|
||||||
|
{{ if $nav.admin }}<li><a class="$nav.admin.2" href="$nav.admin.0" title="$nav.admin.3" >$nav.admin.1</a></li>{{ endif }}
|
||||||
|
|
||||||
|
{{ if $nav.logout }}<li><a class="$nav.logout.2 sep" href="$nav.logout.0" title="$nav.logout.3" >$nav.logout.1</a></li>{{ endif }}
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
{{ endif }}
|
||||||
|
|
||||||
|
{{ if $nav.network }}
|
||||||
|
<li class="$sel.network">
|
||||||
|
<a class="$nav.network.2" href="$nav.network.0" title="$nav.network.3" >$nav.network.1</a>
|
||||||
|
<span id="net-update" class="nav-notify"></span>
|
||||||
|
</li>
|
||||||
|
{{ endif }}
|
||||||
|
|
||||||
|
{{ if $nav.notifications }}
|
||||||
|
<li class="$sel.notifications">
|
||||||
|
<a id="nav-notifications-linkmenu" class="nav-commlink" href="$nav.notifications.0" rel="#nav-notifications-menu" title="$nav.notifications.1">$nav.notifications.1</a>
|
||||||
|
<span id="notify-update" class="nav-ajax-left"></span>
|
||||||
|
<ul id="nav-notifications-menu" class="menu-popup">
|
||||||
|
<li id="nav-notifications-see-all"><a href="$nav.notifications.all.0">$nav.notifications.all.1</a></li>
|
||||||
|
<li id="nav-notifications-mark-all"><a href="#" onclick="notifyMarkAll(); return false;">$nav.notifications.mark.1</a></li>
|
||||||
|
<li class="empty">$emptynotifications</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
{{ endif }}
|
||||||
|
|
||||||
|
{{ if $nav.introductions }}
|
||||||
|
<li class="$sel.introductions">
|
||||||
|
<a id="nav-notify-link" class="nav-commlink $nav.introductions.2" href="$nav.introductions.0" title="$nav.introductions.3" >$nav.introductions.1</a>
|
||||||
|
<span id="intro-update" class="nav-ajax-left"></span>
|
||||||
|
</li>
|
||||||
|
{{ endif }}
|
||||||
|
|
||||||
|
{{ if $nav.messages }}
|
||||||
|
<li class="$sel.messages">
|
||||||
|
<a id="nav-messages-link" class="nav-commlink $nav.messages.2" href="$nav.messages.0" title="$nav.messages.3" >$nav.messages.1</a>
|
||||||
|
<span id="mail-update" class="nav-ajax-left"></span>
|
||||||
|
</li>
|
||||||
|
{{ endif }}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{{ endif }}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<script type="text/plain" id="nav-notifications-template" rel="template">
|
||||||
|
<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
|
||||||
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -234,6 +234,9 @@ a:focus, a:active, a:hover {
|
||||||
margin: 0 auto 6px;
|
margin: 0 auto 6px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
#access div {
|
||||||
|
margin: 0 7.6%;
|
||||||
|
}
|
||||||
#access ul {
|
#access ul {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
list-style: none outside none;
|
list-style: none outside none;
|
||||||
|
|
@ -287,7 +290,7 @@ a:focus, a:active, a:hover {
|
||||||
#access ul li:hover > ul {
|
#access ul li:hover > ul {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
#access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a {
|
.selected > a, #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
#branding #searchform {
|
#branding #searchform {
|
||||||
|
|
@ -338,9 +341,86 @@ a:focus, a:active, a:hover {
|
||||||
}
|
}
|
||||||
#branding #site-location {
|
#branding #site-location {
|
||||||
font-size: 0.7em;
|
font-size: 0.7em;
|
||||||
color: #666666;
|
color: #BBBBBB;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 7.6%;
|
right: 7.6%;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
top: -1.4em;
|
top: 13.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* user bar */
|
||||||
|
#tools {
|
||||||
|
background: -moz-linear-gradient(#444444, #222222) repeat scroll 0 0 transparent;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||||
|
clear: both;
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: auto;
|
||||||
|
margin: 0 auto 6px;
|
||||||
|
width: 1000px;
|
||||||
|
}
|
||||||
|
#tools div {
|
||||||
|
margin: 0 7.6%;
|
||||||
|
}
|
||||||
|
#tools ul {
|
||||||
|
font-size: 10px;
|
||||||
|
list-style: none outside none;
|
||||||
|
margin: 0 0 0 -0.8125em;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
#tools li {
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#tools a {
|
||||||
|
color: #EEEEEE;
|
||||||
|
display: block;
|
||||||
|
line-height: 3.333em;
|
||||||
|
padding: 0 1.2125em;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
#tools ul ul {
|
||||||
|
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
|
||||||
|
display: none;
|
||||||
|
float: left;
|
||||||
|
left: 0;
|
||||||
|
margin: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 3.333em;
|
||||||
|
width: 188px;
|
||||||
|
z-index: 99999;
|
||||||
|
}
|
||||||
|
#tools ul ul .sep {
|
||||||
|
border-top: 1px dotted #DDDDDD;
|
||||||
|
}
|
||||||
|
#tools ul ul ul {
|
||||||
|
left: 100%;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
#tools ul ul a {
|
||||||
|
background: none repeat scroll 0 0 #F9F9F9;
|
||||||
|
border-bottom: 1px dotted #DDDDDD;
|
||||||
|
color: #444444;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: normal;
|
||||||
|
height: auto;
|
||||||
|
line-height: 1.4em;
|
||||||
|
padding: 10px;
|
||||||
|
width: 168px;
|
||||||
|
}
|
||||||
|
#tools li:hover > a, #access ul ul *:hover > a, #access a:focus {
|
||||||
|
background: none repeat scroll 0 0 #EFEFEF;
|
||||||
|
}
|
||||||
|
#tools li:hover > a, #access a:focus {
|
||||||
|
background: -moz-linear-gradient(#F9F9F9, #E5E5E5) repeat scroll 0 0 transparent;
|
||||||
|
color: #373737;
|
||||||
|
}
|
||||||
|
#tools ul li:hover > ul {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#tools img {
|
||||||
|
width: 16px;
|
||||||
|
margin-bottom: -5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue