Babel 225 Styling - covers resource tabs page settings, template variables etc

[howster]

Hi Guys,
The babel languages in the resource section cover all the page setting tabs eg create/edit document, page settings, templa variables. I have 10 languages in and they span the width of the page blocking tabs. Can you recommend the fix. Using Modx Revo 213
Thanks

This the css

/**

• Babel CSS file
• @author Jakob Class jakob.class@class-zec.de
  *
• @Package babel
  _/
  #babel-box{
  background: rgba(224, 224, 224, 0.75);
  margin:15px 0 0;
  padding:10px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  /_display: inline-block; */ also tried it uncommented!
  position: fixed;
  top: 124px;
  right: 20px;
  z-index: 12;
  }
  #babel-box a{
  display:block;
  padding:5px 12px 4px 12px;
  background:#779937;
  color:white;
  text-decoration:none;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 0 2px 1px #666;
  }

babel-box div.selected a{

background:#666;

}

babel-box div.notset a{

background:#999;
cursor:default;

}

babel-box a:hover{

background:#628f2c;

}

babel-box div.notset a:hover{

background:#999;

}

babel-box div.babel-language {

position: relative;
float:left;
margin:0 12px 0 0;

}

babel-box div.babel-language-layer {

z-index: 1000;
display: none;
position: absolute;
top: 24px;
right: 0;
padding:11px;
background:#ddd;
border: 1px solid #ccc;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#666666')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#666666');

}

babel-box input.x-form-text {

padding: 0 2px;
width: 20px;
font-size: 11px;
line-height: 18px;
margin-right: 5px;

}

babel-box input.x-btn {

line-height: 14px;
padding: 3px;
margin: 2px 0;

}

babel-second-row {

white-space: nowrap;

}

babel-error{

padding-bottom:10px;
color: red;
font-weight: bold;

}

babel-box hr {

margin: 8px 0;

}

babel-box strong {

font-weight: bold;

}

[howster]

below css fixes it: re: assets/components/babel/css - position fixed was the issue in Firefox anyway

/**

• Babel CSS file
• @author Jakob Class jakob.class@class-zec.de
  *
• @Package babel
  */
  #babel-box{
  background: rgba(224, 224, 224, 0.75);
  margin:38px 0px 0px 0px;
  padding:10px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  z-index: 12;
  display: inline-block;

}
#babel-box a{
display:block;
padding:5px 12px 4px 12px;
background:#779937;
color:white;
text-decoration:none;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 2px 1px #666;
}

#babel-box div.selected a{
background:#666;
}
#babel-box div.notset a{
background:#999;
cursor:default;
}
#babel-box a:hover{
background:#628f2c;
}
#babel-box div.notset a:hover{
background:#999;
}
#babel-box div.babel-language {
position: relative;
float:left;
margin:0 12px 10px 0;
}
#babel-box div.babel-language-layer {
z-index: 1000;
display: none;
position: absolute;
top: 24px;
left: 0;
padding:11px;
background:#ddd;
border: 1px solid #ccc;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
/* For IE 8 /
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#666666')";
/ For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#666666');
}
#babel-box input.x-form-text {
padding: 0 2px;
width: 20px;
font-size: 11px;
line-height: 18px;
margin-right: 5px;
}
#babel-box input.x-btn {
line-height: 14px;
padding: 3px;
margin: 2px 0;
}
#babel-second-row {
white-space: nowrap;
}
#babel-error{
padding-bottom:10px;
color: red;
font-weight: bold;
}
#babel-box hr {
margin: 8px 0;
}
#babel-box strong {
font-weight: bold;
}

[pdincubus]

I am having the same problem and have currently 12 languages in total with the possibility of more being added in future. I have altered the CSS to prevent the overlap in a similar way to the above suggested CSS:

#babel-box {
    background: rgba(224, 224, 224, 0.75);
    padding:10px 10px 0 10px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    clear: both;
    position: relative;
    margin: 70px 20px 0px 0px;
    z-index: 12;
}

#babel-box:before,
#babel-box:after {
    content: " ";
    display: table;
}

#babel-box:after {
    clear: both;
}
#babel-box {
    *zoom: 1;
}

While this seems to work, the Babel Language selection toolbar causes a "double scrollbar" issue, especially on smaller screens where you cannot scroll through a long list of template variables unless you have a scrollwheel. It seems there is a "page scrollbar" for the full page, and a separate "frame scrollbar" for the main .x-panel-bwrap box area, and the scrollbars show over one another (Firefox/Chrome on Mac, but also seen on Chrome on Windows 7)

My suggestion would be to move #babel-box into .x-panel-bwrap > .x-panel-body so that it scrolls with the rest of the page correctly. You can see the result of this in Chrome by dragging the live HTML element into this div, and the page now scrolls correctly.

[pdincubus]

Got around the problem successfully using a miniature plugin to fire when the window has loaded which moved the babel-box into the correct place, and fixes the issues described above. System events: onDocFormRender, OnManagerPageAfterRender (I think that's the only ones you need) Plugin code:

<?php

$modx->regClientStartupHTMLBlock('
<script>
    window.onload = function() {

    var babelBox = document.getElementById("babel-box"),
        siblings = babelBox.parentNode.childNodes,
        nextNode = null,
        next = false;

    for (var i in siblings) {
        var sibling = siblings[i];
        if (sibling.nodeType == Node.TEXT_NODE) {
            continue;
        }

        if (next) {
            nextNode = sibling;
            break;
        }
        next = (sibling === babelBox);
    }

    if (nextNode !== null) {
        var thisChild = nextNode.firstChild;
        thisChild.insertBefore(babelBox,thisChild.firstChild);
    }

};


</script>');

return;

[pdincubus]

Also worth noting that you'll probably want to alter the babel.css file in assets/components/babel/css folder as detailed in above posts.

[goldsky]

duplicate of #27
And just to let you know, we are heading to different direction now.
Pls check #90