|
|
Rank: Member
Groups: Member
Joined: 7/29/2007
Posts: 3
Points: 0
|
Hi
I have been facing a proble for resizing the UI of editor(means the total size of full page which includes different panel like PhotoEditorSampleControlPanel,PhotoEditorSampleCommandPanel etc) as i have very lesser are to fit the UI of this component. I am having width=490 in which i want the photoeditors main interface to be incorporated. Please guide me exactly where to make changes to resize the layout ASAP
Regards
Gourav Verma
|
|
Rank: Member
Groups: Member
Joined: 3/28/2007
Posts: 56
Points: 0
|
I just used the style sheet to change my sizes.
look for the file called /PhotoEditor/Styles/PhotoEditorSample.css in your project, you should see sizes there for all the controls
Nate
|
|
Rank: Member
Groups: Member
Joined: 7/29/2007
Posts: 3
Points: 0
|
Hi
Thanks for your reply . But please tell me exactly which width attributes has to be changed in order to reduce the size or i will be very thankfull if you can provide me the css code in which you have made changes
Regards
Gourav Verma
|
|
Rank: Member
Groups: Member
Joined: 3/28/2007
Posts: 56
Points: 0
|
below is a copy of the default css file, I've bolded the places you might need to change:
/* Styles for PhotoEditor sample. */
.PhotoEditorSample
{
position: relative;
border: solid 1px #929292;
background-color: #7FA7E5;
background-image: url("../Images/BodyGradient.png");
background-position: bottom;
background-repeat:repeat-x;
top: 0px;
left: 0px;
width: 870px;/* change this to 490px */
height: 575px;
}
.PhotoEditorSampleQualityMeter
{
position: absolute;
top: 500px;
left: 270px;
}
.PhotoEditorSampleStatusPanel
{
position: absolute;
top: 4px;
left: 847px;
}
.PhotoEditorSampleControlPanel
{
position: absolute;
top: -2px;
left: -2px;
}
.PhotoEditorSampleCommandPanel
{
position: absolute;
top: 42px;
left: 10px;
}
.PhotoEditorSampleImagePanel
{
position:absolute;
top: 42px;
right: 10px;
}
.PhotoEditorButtons
{
position: absolute;
top: 500px;
right: 20px;
width: 200px;
height: auto;
text-align: right;
}
.PhotoEditorRestoreButton, .PhotoEditorShowButton
{
visibility: inherit;
text-align: center;
width: 200px;
height: 24px;
margin: 2px;
background-image: url("../Images/PhotoEditorButton.gif");
background-repeat: no-repeat;
background-color: Transparent;
color: #FFFFFF;
border: 0px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
font-weight: 700;
}
.PhotoEditorRestoreButton:disabled, .PhotoEditorShowButton:disabled
{
background: url( "../Images/PhotoEditorButtonDisabled.gif" ) no-repeat;
color: #555555;
}
notice that each section of the interface is absolutely positioned. if you change the width or height, you'll have to change the positions accordingly as well. just make the change in the css and then hit ctrl+f5 (refresh) in the browser and you should see the change immediately without the need to recompile
Nate
|
|
Rank: Advanced Member
Groups: Member
Joined: 6/6/2007
Posts: 57
Points: 45
|
Hello!
Nate, thank you for your help. I just add some remarks for this question.
1. If you use some design theme (for example Standard) you should made changes not in
/PhotoEditor/Styles/PhotoEditorSample.css, but in App_Themes/Standard/PhotoEditor/Styles/PhotoEditorSample.css.
2. To change sizes of ImagePanel you should also modify App_Themes/Standard/ImagePanel.skin
3. To make your PhotoEditor sizes extremly small you should also change sizes of effect buttons, navigation panel buttons, tab control etc. You can do it using App_Themes/Standard/PhotoEditor/Styles/PhotoEditor.css and App_Themes/Standard/PhotoEditor/Styles/TabControl.css.
Sincerely yours,
Sergey Peshekhonov.
Aurigma Technical Support Team.
|
|
|
Guest |