Skip to content

MODX Revolution Add-on that adds an Evo style hover bar to the top of your site for quick editing. Only for users that are logged into the Manager of course.

Notifications You must be signed in to change notification settings

Lefthandmedia/QuickBar

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

72 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#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.

Table of Contents

Included Themes

aquanight

clouds

html5

sassy

pier29

pier31

purplenight

sublime

trycatch

pedometer

stork

sherbert

taos

mirage

modx

rtfm

interverse-light

interverse

subtractive

additive

fpo

retro

funguy

dallas

purplerain

Creating a Theme

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.

Using the Sass Component

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 */

About

MODX Revolution Add-on that adds an Evo style hover bar to the top of your site for quick editing. Only for users that are logged into the Manager of course.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 79.1%
  • PHP 20.6%
  • Smarty 0.3%