Magnolia CMS green bars… why not red?

You have in page a lot of paragraphs and Magnolia CMS green bars, unless their little user interface occupation, are too huge? You can differentiate them, applying easily few CSS classes and a little of jQuery:

The first step is to apply an outher div to Magnolia Edit bar. This will make your code more flexible:

<div class="mgnlPage">[@cms.editBar /]</div>

Now, I used these following CSS rules for highlight in-page properties edit bars (like intros, article kickers..), to make them more easy to find.

/** MGNL RED BARS ********************/
.mgnlEditBar.mgnlPage .mgnlControlBar, 
.mgnlEditBar.mgnlPage .mgnlControlBarSmall{
	border-color: #FFCCCC #000 #000 #FFCCCC !important;
}
 
.mgnlEditBar.mgnlPage .mgnlControlBar td, 
.mgnlEditBar.mgnlPage .mgnlControlBarSmall td {
	background-image: none !important; 
	background-color: #B70000 !important;	
}
 
.mgnlEditBar.mgnlPage .mgnlControlBar_PUSHED td, 
.mgnlEditBar.mgnlPage .mgnlControlBarSmall_PUSHED td {
    background-color: #FF9999 !important;
    border-color: #FFCCCC #FF9999 #FF9999 #FFCCCC !important;
    border-style: solid !important;
    border-width: 1px !important;
}
 
.mgnlEditBar.mgnlPage .mgnlControlButton, 
.mgnlEditBar.mgnlPage .mgnlControlButtonSmall, 
.mgnlEditBar.mgnlPage .mgnlControlButtonTransparent, 
.mgnlEditBar.mgnlPage .mgnlControlButtonTransparentSmall {
	border-color: #FFCCCC #000 #000 #FFCCCC !important;
	background-color: #B70000 !important;
}
 
.mgnlEditBar.mgnlPage .mgnlControlButton.down, 
.mgnlEditBar.mgnlPage .mgnlControlButtonSmall.down {
	border-color: #000 #FFCCCC #FFCCCC #000 !important; 
}

And yes, you need also a little of jQuery (or similar), because Magnolia JS (control.js) has some hard coded colors inside. Add these at the end of your page:

$('.mgnlControlButtonSmall').mousedown(function() {
  $(this).addClass("down");
});
$('.mgnlControlButtonSmall').mouseup(function() {
  $(this).removeClass("down");
});
$('.mgnlControlButtonSmall').mouseleave(function() {
  $(this).removeClass("down");
});
$('.mgnlControlButton').mousedown(function() {
  $(this).addClass("down");
});
$('.mgnlControlButton').mouseup(function() {
  $(this).removeClass("down");
});
$('.mgnlControlButton').mouseleave(function() {
  $(this).removeClass("down");
});

And the game is done. Remember also to change the “moving shadow image”, it is a simple background image binded to the div with id “mgnlMoveDivShadow”:

#mgnlMoveDivShadow {
    background-image: url("../../.resources/admin-images/mgnlMoveShadow.gif") !important; 
}

Latest articles

Written by:

2 Comments

  1. Peter
    4/15/2012
    Reply

    Hello Matteo Pelucco,

    thanks, but where is needed write these codes?

    • Matteo Pelucco
      4/16/2012
      Reply

      Hi Peter,
      just put the “div” in the “main.ftl” file, surrounding the @bar declaration.
      And put the css rules in a .css file (call it “mgnl.css”) and embed it into the page.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *


+ quattro = 13