RTL CSS & Templates

khalid

vot رد في  2011-12-14 07:37
Lets's look to RTL pages again.
1) Find wrong positioned elements and correct it's style
2) Find ima ...

ok

1%

...............

khalid

Find wrong positioned elements 80%



RTL IMG READY 100%

vot

I want to know, WHY you changed block width and height here?

1. -        .pi { overflow: hidden; margin-bottom: 10px; padding: 10px 0; height: 16px; border-bottom: 1px dashed {COMMONBORDER}; }
   
2. +        .pi { overflow: hidden; margin-bottom: 10px; padding: 10px 0; height: 33px; border-bottom: 1px dashed {COMMONBORDER}; }
   
3. 
   
4. -#psd,appl { width: 136px; } /*vot*/
   
5. +#psd,appl { width: 120px; } /*vot*/
   

Copy the Code

May be, default LTR style must be changed by the same manner?

vot

Now about RTL images.
1) Some images are not used, and may be removed: pic-next.png, pic-prev.png.

2) Some images does not require to redraw! They may be used as is.
i.e. arw_l.gif, arw_r, pic_next.gif, pic_prev.gif, pic_nv_next.gif, pic_nv_prev.gif, thread_next.gif, thread_prev.gif.
Instead of redrawing this images we can simple reassign existing images like this:

1. <a href="QQQ.htm" style="display:block;width:23px;height:17px;background:url(static/image/common/pic_nv_next.gif);"></a>

Copy the Code

3) Some images may be redrawn to be universal (both rtl and ltr),
i.e. sortnum.png, search.gif. search.png

vot

What to do with mood_input_btn.png?


This image was drawn by me as universal button for all the languages,
but I have forgot about RTL language at that time

Is this possible to find a new universal visual solution for this button?
May be, just rotate the triangle 90 grad clockwise?

vot

I have redrawn search.gif, search.png and  sortnum.png as universal sprites:

vot

mood_input_btn was redrawn too:

vot

RTL styles patched:
http://code.google.com/p/discuzx-en/source/detail?r=250

Sprite images adopted to universal LTR/RTL
http://code.google.com/p/discuzx-en/source/detail?r=251

khalid

As you like in IMG

But all Modifications in css files are important !

vot

common_rtl.css adjusted for new sprites.
http://code.google.com/p/discuzx-en/source/detail?r=252