• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 1 post ] 
Author Message
 Post subject: Resizing the Image Editor Canvas
PostPosted: Thu May 17, 2012 5:18 pm 
Offline
Forum Members
Forum Members

Joined: Thu Nov 15, 2007 6:55 pm
Posts: 165
Afternoon All,

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!


\$1:
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;
}




Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting