Rarely do I have a tip or a trick.
I have often ignored the image editor because the frame is to small. And like a few others I want to know how to extend the editor canvas so it fills the screen, or at least lets the clients extend to their screen size.
I finally had a couple of hours to work at this. I want to use the editor; it would be easier for clients to upload their files and then edit on screen. Well not really, but that is how it was delivered to me... I am still trying to wrap my head around the idea that they can Edit in their browser but not in their camera software (which has more options!).
The cool thing is the editor is controlled by CSS.
The Image editor lives in /lib/filemanager/ImageManager.
You want to drill a big further, /assets/editor.css
That is the css file that controls the look of the image Editor and it's canvas.
When you first activate the editor you will get the popup, and it will be locked to the old size, I presume that the java in the editor.php controls that. You can then expand the page freely.
The changes I have made work wonderfully in Firefox. But not IE. So if anyone has an idea about what I am missing, please let me know. If I figure it out I will update.
It looks like IE is pulling height and width from some other location but I have yet to find it. I will keep looking.
Thanks!
Code: Select all
html {
height:100%;
width: 100%;
max-height:100%;
padding:0;
margin:0;
border:0;
}
body {
margin: 0;
padding: 0;
font: 11px Tahoma, Verdana, sans-serif;
height:100%;
width:100%;
overflow: auto;
}
select, input, button {
font: 11px Tahoma, Verdana, sans-serif;
}
#indicator {
width: 25px;
height: 20px;
background-color: #eef;
padding: 15px 20px;
position: absolute;
left: 0;
top: 0;
}
* html #indicator {
padding: 14px 22px;
}
#tools {
width: 100%;
height: 50px;
background-color: #eef;
padding: 0;
position: absolute;
left: 63px;
border-left: 1px solid white;
border-bottom: 1px solid white;
}
#toolbar {
width: 53px;
height: 100%;
background-color: #eef;
float: left;
text-align: center;
padding: 5px;
position: absolute;
top: 50px;
border-top: 1px solid white;
border-right: 1px solid white;
}
#contents {
width: 100%;
height: 100%;
position: absolute;
left: 64px;
top: 51px;
}
#editor {
width: 100%;
height: 100%;
}
#toolbar a {
padding: 5px;
width: 40px;
display: block;
border: 1px solid #eef;
text-align: center;
text-decoration: none;
color: #669;
margin: 5px 0;
}
#toolbar a:hover {
background-color: #F9F9FF;
border-color: #669;
}
#toolbar a.iconActive {
border-color: #669;
}
#toolbar a span {
display: block;
text-decoration: none;
}
#toolbar a img {
border: 0 none;
}
#tools .textInput {
width: 3em;
vertical-align: 0px;
}
* html #tools .textInput {
vertical-align: middle;
}
#tools .measureStats {
width: 4.5em;
border: 0 none;
background-color: #eef;
vertical-align: 0px;
}
* html #tools .measureStats {
vertical-align: middle;
}
#tools label {
margin: 0 2px 0 5px;
}
#tools input {
vertical-align: middle;
}
#tools #tool_inputs {
padding-top: 10px;
float: left;
}
#tools .div {
vertical-align: middle;
margin: 0 5px;
}
#tools img {
border: 0 none;
}
#tools a.buttons {
margin-top: 10px;
border: 1px solid #eef;
display: block;
float: left;
}
#tools a.buttons:hover {
background-color: #F9F9FF;
border-color: #669;
}
#slidercasing {
/*border:1px solid #CCCCCC;
background-color:#FFFFFF;*/
width:100px;
height:5px;
position:relative;
z-index:4;
padding:10px;
top: 6px;
margin: 0 -5px 0 -10px;
}
#slidertrack {
position:relative;
border:1px solid #CCCCCC;
background-color:#FFFFCC;
z-index:5;
height:5px;
}
#sliderbar {
position:absolute;
z-index:6;
border:1px solid #CCCCCC;
background-color:#DDDDDD;
width:15px;
padding:0px;
height:20px;
cursor: pointer;
top:2px;
}
* html #slidercasing {
top:0;
}
#bottom {
position: relative;
top: 490px;
}
