Welcome Guest! You need to login or register to make posts.

Notification

Icon
Error

Options
Go to last post Go to first unread
gourav  
#1 Posted : Wednesday, August 22, 2007 8:42:25 PM(UTC)
gourav

Rank: Member

Groups: Member
Joined: 7/29/2007(UTC)
Posts: 3

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
natebell  
#2 Posted : Wednesday, August 22, 2007 9:25:19 PM(UTC)
natebell

Rank: Member

Groups: Member
Joined: 3/28/2007(UTC)
Posts: 56

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
gourav  
#3 Posted : Wednesday, August 22, 2007 11:59:41 PM(UTC)
gourav

Rank: Member

Groups: Member
Joined: 7/29/2007(UTC)
Posts: 3

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
natebell  
#4 Posted : Thursday, August 23, 2007 12:27:23 AM(UTC)
natebell

Rank: Member

Groups: Member
Joined: 3/28/2007(UTC)
Posts: 56

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
Sergey Peshekhonov  
#5 Posted : Thursday, August 23, 2007 7:15:22 PM(UTC)
Sergey Peshekhonov

Rank: Advanced Member

Groups:
Joined: 6/5/2007(UTC)
Posts: 57

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.
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.