artisteer-greenlagoon and printerfriendly Skins with RTL Support

This forum is for questions about contributing to the project or proposing features that you would like to develop for the project. 

This thread is closed to new posts. You must sign in to post in the forums.
4/15/2011 4:07:28 AM
interteleco
Gravatar
Total Posts 23
View Posts
Ahmed Ali Senior Developer

artisteer-greenlagoon and printerfriendly Skins with RTL Support

 

he joe,

i have make some changes on the default skin (artisteer-greenlagoon) and printerfriendly  skin to add support for rtl and ltr directions at same time

please replace the skins 

Data\skins\artisteer-greenlagoon

Data\skins\printerfriendly

 

and there are some other changes on other CSS files to allow RTL support on admin pages i have edit 

ClientScript\greybox\gb_styles.css

 

Data\style\gridview\ChromeBlackGridView.css
Data\style\gridview\ChromeGridView.css
Data\style\gridview\GlassBlackGridView.css
Data\style\gridview\SoftGreyGridView.css
Data\style\gridview\WhiteChromeGridView.css
Data\style\gridview\YahooGridView.css

 


you can find skins and other files on this zip file 

 

http://www.interteleco.com/MojoPortal/RTL_Support.zip

 

thanks

4/15/2011 6:13:01 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: artisteer-greenlagoon and printerfriendly Skins with RTL Support

Hi Ahmed,

This zip file does not work I cannot extract it.

Best,

Joe

4/15/2011 9:06:04 AM
interteleco
Gravatar
Total Posts 23
View Posts
Ahmed Ali Senior Developer

Re: artisteer-greenlagoon and printerfriendly Skins with RTL Support

sory joe

 

web site didn't work

 

i have send the file to your mail

 

thanks

4/15/2011 9:32:57 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: artisteer-greenlagoon and printerfriendly Skins with RTL Support

Hi Ahmed,

The changes in the gb_styles.css is ok.

I don't like the changes in the gridview style where you simply removed left alignment, you should re-submit that with something that only affects rtl.

Also for the 2 skins, I am not just replacing those files, you need to only send me the files that changed and you need to make it easy for me to find your changes in the CSS files by putting comments near them, ideally putting all your changes near the bottom of the css file(s). I see the small changes in layout.master, those are ok, I got them.

All of your css changes should be specific to rtl by having html[dir='rtl'] as part of the selector in css to override the default style rule, no changes for ltr should result. (please include the quotes html[dir='rtl']).

Thanks,

Joe

4/15/2011 10:23:08 AM
interteleco
Gravatar
Total Posts 23
View Posts
Ahmed Ali Senior Developer

Re: artisteer-greenlagoon and printerfriendly Skins with RTL Support

hi joe

we didn't need to force text align that text align inherits by default form page direction on LTR pages the text align will be left and on RTL pages will be right

and for skins you need to replace CSS files and the <html> tag only on the layout.master and there are a rtl folder in images folder for artisteer-greenlagoon skin.

 

you can test my CSS on your local before add them to repository.

 

i will take care your notes on other skins i will edit theme and i will comment all me changes and but theme on the end off files.

thannks

 

 

 

4/15/2011 10:44:05 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: artisteer-greenlagoon and printerfriendly Skins with RTL Support

Hi Ahmed,

We cannot make assumptions about how alignment will be inherited in every skin that uses it including custom skins that others have developed that use these css file for grids. Therefore it is safer to not remove that alignment but only override it for rtl.

Thanks,

Joe

4/15/2011 11:12:56 AM
interteleco
Gravatar
Total Posts 23
View Posts
Ahmed Ali Senior Developer

Re: artisteer-greenlagoon and printerfriendly Skins with RTL Support

Hi Joe,

i have send you new files that i have change by add RTL rules at the end off files 

 

what abut skins tell me if you test me CSS and can but it on the repository than i can update me files to work on other skins

 

and there are many files i have translate them and need your commit

 

thanks

 

 

 

4/15/2011 11:35:03 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: artisteer-greenlagoon and printerfriendly Skins with RTL Support

Hi Ahmed,

I now have your changes for the gridview styles. You did not send updated files for artisteer-greenlagon or printerfriendly skins. I am not going to replace any whole css files in any skins. I want you to resend me the changed css files with the changes at the bottom in comments and I will copy it into my copy of the files. For artisteer-greenlagoon there should not be any changes made in the style.css file, if you need to override it use style-mojo.css or style-artisteer-overrides.css. The style.css file for artisteer is exported by artisteer and we never change that file because we may need to export it again.

Thanks,

Joe

 

4/15/2011 12:55:42 PM
interteleco
Gravatar
Total Posts 23
View Posts
Ahmed Ali Senior Developer

Re: artisteer-greenlagoon and printerfriendly Skins with RTL Support

Hi Joe,

 

i have take a long time to compare files and move the rules form all files 

at all all rtl css rules is :

 

 

/* Style.css */
html[dir=rtl] .art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover { text-align:right;}
html[dir=rtl] .art-menu li {float: right;}
html[dir=rtl] .art-menu ul ul { margin: -30px -30px 0 -30px;}
html[dir=rtl] .art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span {text-align: right;}
html[dir=rtl] .art-header-tag-icon { background-image: url('images/rtl/BlockHeaderIcon.png'); background-position:right top; }
html[dir=rtl] .art-article th, .art-article td {text-align:right;}
html[dir=rtl] .art-PostHeader{text-align:right;}
html[dir=rtl] .art-PostHeader a, .art-PostHeader a:link, .art-PostHeader a:visited, .art-PostHeader a:hover{text-align:right;}
html[dir=rtl] .art-PostHeader a:link{text-align:right;}
html[dir=rtl] .art-PostHeader a:hover, .art-PostHeader a.hovered {text-align:right;}
html[dir=rtl] .art-PostHeader a:visited, .art-PostHeader a.visited{text-align:right;}
html[dir=rtl] h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover{text-align:right;}
html[dir=rtl] h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover{text-align:right;}
html[dir=rtl] h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover{text-align:right;}
html[dir=rtl] h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover{text-align:right;}
html[dir=rtl] h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover{text-align:right;}
html[dir=rtl] h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover{text-align:right;}
html[dir=rtl] .art-Post ul li, .art-Post ol ul li { background-position:right;}
html[dir=rtl] .art-Post ul li, .art-Post ol ul li { padding-right:14px;}
html[dir=rtl] blockquote, blockquote p, .art-PostContent blockquote p{text-align: right;}
html[dir=rtl] .art-button-wrapper .art-button{text-align: right;}
/* End Style.css */

 


/* Styleblog.css */
html[dir=rtl] .blognavleft {float: right; width: 200px;}
html[dir=rtl] .blognavright {float: left;}
html[dir=rtl] .blogcenter-leftnav {margin: 0px 210px 0px 0px;}
html[dir=rtl] .blogcenter-rightnav {margin:0px 0px 0px 210px;}
/* End Styleblog.css */

/* Styleforum.css */
html[dir=rtl] .postwrapper {float: right;}
html[dir=rtl] .postleft {clear: right; float: right;}
html[dir=rtl] .postright {margin: 0px 21% 0px 0px;}
/* End Styleforum.css */

 

/* Stylemojo.css */
html[dir=rtl] .settinglabel { float:right; clear:right; width:20em; padding:1px; }
html[dir=rtl] .settinglabelFixedHeight { float:right; clear:right;}
html[dir=rtl] .settingrow { clear:right;}
html[dir=rtl] .settinglabeltight { float:right; clear:right;}
html[dir=rtl] .settingrowtight { clear:right;}
html[dir=rtl] .pagelayout .addcontent{float: right;}
html[dir=rtl] .pagelayout .layoutbuttons{right: auto; left: -10px; top: 5px; position: absolute;}
html[dir=rtl] .pagelayout .pane select {width: 170px; margin-right: 0px; margin-left: 10px;}
html[dir=rtl] h2.moduletitle {  background:url('images/rtl/PostHeaderIcon.png') no-repeat; background-position:right;}
html[dir=rtl] .leftside h2.moduletitle { background-image: none; font-size:12px; height:20px; color:black; padding: 0px 10px 0px 10px;}
html[dir=rtl] .rightside h2.moduletitle  { background-image: none; font-size:12px; height:20px; color:black; padding: 0px 10px 0px 10px;}
html[dir=rtl] fieldset h2.moduletitle { background-image: none; }
html[dir=rtl] li.topnavitem { float:right;}
html[dir=rtl] li.firstnav { float:right;}
html[dir=rtl] .floatpanel,.floatleftimage { float:right;}
/* End Stylemojo.css */


/* Stylewebstore.css */
html[dir=rtl] .productcontainer { float:right;}
/* End Stylemojo.css */

 


/* Jquery Css */
html[dir=rtl] .ui-tabs .ui-tabs-nav li {float: right;}
html[dir=rtl]  .ui-accordion-icons .ui-accordion-header a {padding-left: 2.2em;padding-right: 2.2em;}
html[dir=rtl]  .ui-accordion .ui-accordion-header .ui-icon {left:auto;right: .5em;}
html[dir=rtl]  .ui-icon-triangle-1-e {background-position: -98px -16px;}
/* end jquery Css */

 

 

4/15/2011 1:00:37 PM
interteleco
Gravatar
Total Posts 23
View Posts
Ahmed Ali Senior Developer

Re: artisteer-greenlagoon and printerfriendly Skins with RTL Support

Hi Jone,

the css rules for artisteer-greenlagoon skin was send to your mail you can but them any file you see that can pest place

please d forget to add the rt folder

 

thanks

 

4/15/2011 1:06:34 PM
interteleco
Gravatar
Total Posts 23
View Posts
Ahmed Ali Senior Developer

Re: artisteer-greenlagoon and printerfriendly Skins with RTL Support

hi

 

you can but all css rules in a new css files with name rtl.css

 

just we need to add this file to skin.config file

 

and in will but this file to each skin and work on it to add rtl support to all skins

thanks

 

4/15/2011 1:54:27 PM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: artisteer-greenlagoon and printerfriendly Skins with RTL Support

putting the css all in style-rtl.css is a good idea.

There are some mistakes in your CSS that breaks the style in ltr, , it is no big deal, I am fixing them before I commit it to the repository.

Whenever you have more than one selector separated by commas, you need to have the html[dir='rtl'] again after each comma or else it also affects ltr. It is very noticeable in the menu of artisteer-greenlagoon when your changes were applied and then I changed  back to ltr culture.

For example where you had:

html[dir='rtl'] h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover{text-align:right;}

it really should be:

html[dir='rtl'] h1, h1 a,
html[dir='rtl'] h1 a:link,
html[dir='rtl'] h1 a:visited,
html[dir='rtl'] h1 a:hover{text-align:right;}

every selector must start with html[dir='rtl']

Best,

Joe

4/15/2011 2:10:13 PM
interteleco
Gravatar
Total Posts 23
View Posts
Ahmed Ali Senior Developer

Re: artisteer-greenlagoon and printerfriendly Skins with RTL Support

thanks Joe and sorry for this mistakes. 

and i will work to add RTL support to all skins and will send you the style-rtl.css for each skin with the jqueryui classes rules to all jqueryui controls we use in the project like tabs and accordions and buttons.

i wait your commit and don't forget to commit arabic language files.

thanks

 

4/15/2011 2:19:03 PM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: artisteer-greenlagoon and printerfriendly Skins with RTL Support

Hi Ahmed,

I have committed it to the repository just now. However, I commented it out in style.config so you will need to un-comment it to use the style-rtl.css. Note that I also moved the images into images-rtl rather than nested in the other images folder.

The style-rtl.css still needs some work, when using rtl the menu offset for the flyout sub menus is not right (it might be something in the artisteer menu javascript if you don't find it in CSS), also headings have the icon overlapping the heading text.

I think it is nice to be able to support this kind of skin that can adapt to either ltr or rtl but I think most people will not want to do that, so the default config setting remains as 

<add key="AdaptHtmlDirectionToCulture" value="false" />

and I do not think we should include the style-rtl.css by default (but have it there commented out so people can find it and un-comment it if they want to) since it is not used when that setting is false and it is a significant amount of additional CSS and will make the CSS payload larger than it needs to be when not using it.

It is not a goal for me to have this ability in all skins we ship, but if you want to do that it is fine, but still it will be disabled by default and those who wish to use it will have to opt in to use it by enabling it.

Best,

Joe

4/15/2011 2:21:43 PM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: artisteer-greenlagoon and printerfriendly Skins with RTL Support

Hi Ahmed,

Your translation work from Amanuens should be automatically syncing with the repository every morning automatically, so it should already be up to date.

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.