Rank: Advanced Member
Groups: Guest
Joined: 3/3/2008(UTC)
Posts: 185
Thanks: 8 times
|
Hi, We would like to make the UI for the side panel. We manage to get the "format" button, and the "apply crop" and "cancel crop" skin as what we want. But, we are not manage to get the button for Orientation. Both of the button will always just follow the CSS for the "format" button. Is that any possibility for us to archive the UI as below? Please advise. ChingYen attached the following image(s):
|
|
|
|
|
|
Rank: Advanced Member
Groups: Guest
Joined: 5/29/2010(UTC)
Posts: 1,310
Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
|
Hello Ching-Yen, Yes, it is possible to get the UI like in the attachment model image. To perform it you need to: - replace crop button images – But.gif, and ButPressed.gif with your ones. They are located in the Images/ folder of project.
- add new images for orientation buttons. There are orientation buttons are the same as crop buttons - But.gif, and ButPressed.gif in standard sample project.
- replace buttons for “Apply crop”, and “Cancel crop” – PhotoEditorButton.gif, and PhotoEditorButtonDisabled.gif in the Images/ folder.
- replace small icons which show a sample of cropping and orientation, and add new ones. They are located in the Images/Effects/Crop/ catalog.
Please let me know if you have any additional questions or problems with preparing new UI. Edited by user Wednesday, January 26, 2011 11:22:20 PM(UTC)
| Reason: Not specified |
Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
|
|
|
|
|
|
Rank: Advanced Member
Groups: Guest
Joined: 3/3/2008(UTC)
Posts: 185
Thanks: 8 times
|
Dmitry.Obukhov wrote:add new images for orientation buttons. There are orientation buttons are the same as crop buttons - But.gif, and ButPressed,gif in standard sample project.
[/list] Hi, as mentioned, we already did the above changes. Everything works fine beside the Orietation button. Where it will always pickup the CSS from the "format button". You mentioned create new Image But.gif and ButPressed.gif for the orientation button, but, If we copy over the file, it will overwrite the format button. Kindly advise.
|
|
|
|
|
|
Rank: Advanced Member
Groups: Guest
Joined: 5/29/2010(UTC)
Posts: 1,310
Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
|
Hello Ching-Yen, Here is the code snippet of \PhotoEditor\Styles\PhotoEditor.css file, which allow to edit But.gif, ButPressed.gif buttons, and their contains: Code:.SimpleEffectControl
{
position: relative;
display: block;
font-family: Arial, Tahoma, Geneva, sans-serif;
font-weight: bold;
color: #000000;
text-align: left;
float: left;
width: 201px;
height: 45px;
font-size: 15pt;
}
.SimpleEffectControl a:link, .SimpleEffectControl a:visited
{
position: absolute;
color: #FFFFFF;
text-decoration: none;
top: 15px;
height: 17px;
left: 45px;
width: 161px;
}
.SimpleEffectButton
{
background: url(../Images/but.gif) 12px 0px !important;
filter:Alpha(opacity=70);-moz-opacity: 0.7;opacity:0.7;
}
.SimpleEffectSelectButton
{
background: url(../Images/butPressed.gif) 0px 0px !important;
filter:Alpha(opacity=70);-moz-opacity: 0.7;opacity:0.7;
}
.SimpleEffectButton, .SimpleEffectSelectButton
{
position: absolute;
display: block;
width: 201px;
margin: 5px 12px 5px 12px;
height: 35px;
overflow: visible;
}
.SimpleEffectButton .Content, .SimpleEffectSelectButton .Content
{
border: 1px solid black;
position: absolute;
width: 32px;
height: 32px;
overflow: hidden;
}
.SimpleEffectButton .Content
{
top: 9px;
left: 8px;
width: 16px;
height: 16px;
}
.SimpleEffectSelectButton .Content
{
top: 12px;
left: 8px;
width: 16px;
height: 16px;
}
Quote: add new images for orientation buttons. There are orientation buttons are the same as crop buttons - But.gif, and ButPressed.gif in standard sample project. I have meant that you need to add your own images of orientation buttons. Then you will need to add new CSS classes for the new buttons like in the code I listed above. |
Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
|
|
|
|
|
|
Rank: Advanced Member
Groups: Guest
Joined: 3/3/2008(UTC)
Posts: 185
Thanks: 8 times
|
ChingYen wrote:Dmitry.Obukhov wrote:add new images for orientation buttons. There are orientation buttons are the same as crop buttons - But.gif, and ButPressed,gif in standard sample project.
[/list] Hi, as mentioned, we already did the above changes. Everything works fine beside the Orietation button. Where it will always pickup the CSS from the "format button". You mentioned create new Image But.gif and ButPressed.gif for the orientation button, but, If we copy over the file, it will overwrite the format button. Kindly advise. I think we didn't the question well..May be it should be how can we set Orientation button CSS different from the Format button? As all of them were being generated by the control. I can't find any place that I could chage the Orientation Button CSS to something like class="myOrientation_Design"
|
|
|
|
|
|
Rank: Advanced Member
Groups: Guest
Joined: 5/29/2010(UTC)
Posts: 1,310
Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
|
Hello Ching-Yen,
Sorry for the misunderstanding.
Please open PhotoEditor\App_Code\PhotoEditor\Effects\Crop\CropEffect.cs. You need to add condition of checking orientation buttons in the RenderSimpleElement() method, and add new classes for orientation buttons style. If you have some problems with it, please let me know.
|
Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
|
 1 user thanked Dmitry.Obukhov for this useful post.
|
|
|
|
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.