Admin Bar v0.9
This should be independent of your theme so if you use it it shouldn't either affect how your page looks and behaves. To be sure of that I've included custom styles. Those styles are loaded only when admin is logged in, that way there is no unnecessary clutter under the hood. One thing though - css uses rem instead of pixels. your theme needs to support rems to display everything correctly.
Yes, its sticky, currently stuck to the bottom of the page.
Yes, it's responsive.
How to use it
- - Copy the code below
- Paste it under the <body>
- - tidy up scss
- clean up php
- add more options like edit current page/post
Code: Select all
<?php if($Login->role()=='admin') { ?>
<style>
#admin-strip {
background: #1e1e20;
color: #65656d;
display: block;
overflow: hidden;
width: 100%;
padding: 1rem;
position: fixed;
bottom: 0;
z-index: 999;
}
#admin-strip ul {
margin: 0.5rem;
padding: 0;
overflow: hidden;
}
#admin-strip ul li {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#admin-strip .float-me-to-the-right {
float: right;
}
#admin-strip .you-gotta-spot-this {
color: #808687;
}
#admin-strip .you-gotta-spot-this strong {
color: #8e9596;
}
#admin-strip a {
display: block;
vertical-align: middle;
}
#admin-strip a:link, #admin-strip a:visited {
color: #7e7e90;
}
#admin-strip a:hover, #admin-strip a:active {
color: #ff8c00;
}
#admin-strip .action-buttons {
font-size: 1.6rem;
}
#admin-strip .admin-new-post, #admin-strip .admin-new-page {
background: #3d3d42;
color: #fff !important;
padding: 0.3rem;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin: 0 0.5rem;
padding: 0.3rem 1rem;
}
#admin-strip .admin-new-post:hover, #admin-strip .admin-new-page:hover {
background: #a7c520;
color: #1e1e20 !important;
text-decoration: none;
}
#admin-strip .admin-page-logout {
background: #ff2d00;
color: #fff !important;
padding: 0.3rem;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin: 0 0.5rem;
padding: 0.3rem 2rem;
}
#admin-strip .admin-page-logout:hover {
background: #a7c520;
color: #1e1e20 !important;
text-decoration: none;
}
#admin-strip .info-list {
font-size: 1.3rem;
line-height: 1.6rem;
}
@media (max-width: 768px) {
#admin-strip .float-me-to-the-right {
float: none;
}
#admin-strip .info-list {
display: none;
}
#admin-strip .action-buttons {
font-size: 1.2rem;
line-height: 1.2rem;
}
#admin-strip .action-buttons li {
display: block;
}
#admin-strip .action-buttons li a {
display: block;
margin: 0.5rem 0;
padding: 1rem;
}
}
</style>
<div id="admin-strip">
<ul class="action-buttons">
<li class="you-gotta-spot-this"><?php echo $Site->title() ?> administration:</li>
<li><a href="<?php echo HTML_PATH_ADMIN_ROOT.'new-post' ?>" class="admin-new-post"><?php $L->p('New post') ?></a></li>
<li><a href="<?php echo HTML_PATH_ADMIN_ROOT.'new-page' ?>" class="admin-new-page"><?php $L->p('New page') ?></a></li>
<li><a href="<?php echo HTML_PATH_ADMIN_ROOT ?>" class="admin-panel"> <?php $L->p('Admin panel') ?></a></li>
<li class="float-me-to-the-right"><a href="<?php echo HTML_PATH_ADMIN_ROOT.'/logout' ?>" class="admin-page-logout"><?php $L->p('Logout') ?></a></li>
</ul>
<ul class="info-list">
<li class="you-gotta-spot-this"><?php $L->p('Logged in as') ?> <strong><?php echo $Login->username() ?></strong> </li>
<li>Locale <strong><?php echo $Site->locale(); ?></strong></li>
<li>Timezone <strong><?php echo $Site->timezone();?></strong></li>
<li>Theme <strong><?php echo $theme = $Site->theme(); ?></strong></li>
<li>Build <strong><?php echo $Site->currentBuild();?></strong></li>
</ul>
</div>
<?php } ?>
optional - if you want scss use this in your _app.scss and chuck out <style> from the code above
Code: Select all
#admin-strip {
background: #1e1e20;
color: #65656d;
display: block;
overflow: hidden;
width: 100%;
padding: 1rem;
position: fixed;
bottom: 0;
z-index: 999;
ul {
margin: 0.5rem;
padding: 0;
overflow: hidden;
li {
display: inline-block;
list-style: none;
margin: 0;
padding: 0
}
}
.float-me-to-the-right {
float: right;
}
.you-gotta-spot-this {
color: #808687;
strong {
color: #8e9596;
}
}
a {
display: block;
vertical-align: middle;
&:link, &:visited {
color: #7e7e90;
}
&:hover, &:active {
color: #ff8c00;
}
}
.action-buttons {
font-size: 1.6rem;
}
.admin-new-post, .admin-new-page {
background: #3d3d42;
color: #fff!important;
padding: 0.3rem;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin: 0 0.5rem;
padding: 0.3rem 1rem;
&:hover {
background: #a7c520;
color: #1e1e20!important;
text-decoration: none;
}
}
.admin-page-logout {
background: #ff2d00;
color: #fff!important;
padding: 0.3rem;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin: 0 0.5rem;
padding: 0.3rem 2rem;
&:hover {
background: #a7c520;
color: #1e1e20!important;
text-decoration: none;
}
}
.info-list {
font-size: 1.3rem;
line-height: 1.6rem;
}
@media (max-width: 768px) {
.float-me-to-the-right {
float: none;
}
.info-list {
display: none;
}
.action-buttons {
font-size: 1.2rem;
line-height: 1.2rem;
li {
display: block;
a {
display: block;
margin: 0.5rem 0;
padding: 1rem;
}
}
}
}
}