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; } |
Hello Matteo Pelucco,
thanks, but where is needed write these codes?
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.