#Quickbar
QuickBar adds a Evo-style custom styled Quick Edit bar to the front end of your site. For logged in users only of course.
You'll see a thin strip at the top. Hovering over it will slide down a bar with Edit Resource, Dashboard and Create Here buttons.
Supports Articles, meaning if you are viewing an Article Container, clicking Create Here, will take you to a page to create a new Article within that container. If you are viewing an Article, you'll be taken to a page to create a new Article in the same Article Container.
Themes are written using Object-Oriented Sass. Below is an example of the aquanights theme. Simply clone an existing theme and change properties, and override styles if you need to. Or, if you want to go old school grab some example css. Once your stylesheet is ready, simply update the quickbar.css System Setting to point to your custom theme.
##Contributing Themes Submit me a pull request with your coolest themes and I will add them!
Working on switching to grunt but right now best way to create a theme now is:
- checkout develop branch
- create codekit project of repo
- enable project level settings
- apply project defaults from _build/codekit-config.json
- duplicate a scss file in _build/sass
- make changes and ensure sass is compiling to assets/components/quickbar/css/
If you aren't using Codekit, just make sure your sass builds to the correct location.
If you are up and running on Sass, creating themes couldn't be easier. Here's a look at how the aquanight works.
@import "box-sizing";
@import "transition";
@import "gradients";
@import "quickbar-layout";
@import "quickbar-style";
$sliverH:4px;
$white:white;
$offwhite:#ECECEC;
$black:black;
/* start layout */
/* properties */
$sliverH:4px;
$barH:40px;
$buttonH:24px;
$barPadding:6px;
$buttonP:4px 8px 1px 8px;
@include quickbar-layout(
$sliverH,
$barH,
$buttonH,
$barPadding,
$buttonP
);
/* end layout */
/* start style */
/* properties */
$borderB:rgb(70,70,70);
$barBGL:rgb(30,30,30);
$barBG:rgba(30,30,30,0.96);
$barShadow:0 1px 1px rgba(0, 0, 0, 0.5);
$textColor:#5AC4E8;
$textShadow:none;
$buttonHighlight:rgb(90,90,90);
$buttonLowLight:black;
$fontWeight:normal;
$fontFamily:"Lucida Console", Monaco, monospace;
$fontSize:12px;
$buttonGradientFrom:rgb(72,72,72) 42%;
$buttonGradientTo:rgb(72,72,72) 100%;
@include quickbar-style( /* call quickbar component, pass in properties */
$textColor,
$borderB,
$barBGL,
$barBG,
$barShadow,
$textColor,
$textShadow,
$buttonHighlight,
$buttonLowLight,
$fontWeight,
$sliverH
);
@include quickbar-fontfamily {
font-family:"Lucida Console", Monaco, monospace;
}
#quickbar-wrapper {
text-transform: lowercase;
}
/* add a gradient and a rollover effect */
#quickbar-wrapper .quickbar ul {
li {
@include transition(all, 240ms, ease-out);
background:rgb(72,72,72);
/*@include gradient( background-image, linear-gradient(180deg, $buttonGradientFrom, $buttonGradientTo ) );*/
&:hover {
/*color: $white;*/
opacity: 0.86;
}
}
}
/* end style */