Magnolia CMS green bars… why not red?


Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /membri/maips21/wp-content/plugins/wp-syntax/wp-syntax.php on line 380

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /membri/maips21/wp-content/plugins/wp-syntax/wp-syntax.php on line 380

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /membri/maips21/wp-content/plugins/wp-syntax/wp-syntax.php on line 380

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /membri/maips21/wp-content/plugins/wp-syntax/wp-syntax.php on line 380

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

Matteo Pelucco Written by:

2 Comments

  1. Peter
    April 15

    Hello Matteo Pelucco,

    thanks, but where is needed write these codes?

  2. Matteo Pelucco
    April 16

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *


nine × 2 =