How can i write a new css file for Discuz!ML?

mj1919

Hello Friends,
i use a RTL default  version of ML, is many parts of forum i see bugs (chaos) in style, cuz of RTL css files were not created,

for example in "new treads", "collections" and so on... , now i want  ask you, freinds , please explain here , how can i write a correct RTL suitable CSS file for each html file? Step by Step
i open a file , for example "collection_view.htm" in text editor and convert "Left" to "Right"? yes? and what about other codes?

please create a good instruction, and i will create all RTL needed files in ML,

Thank you

khalid

It's Ready RTL CSS JUST copy and paste at your work

mj1919

khalid 2013-8-13 01:26
It's Ready RTL CSS JUST copy and paste at your work

Thank you,
you didn't say how to use?

i just rename "*.html" to "*_rtl.css" ?
anymore editing in codes?

vot

The LTR - RTL idea explanation:

Every CSS file in Discuz!ML must have an inverted CSS file with the "_rtl" suffix.
i.e. common.css and common_rtl.css
or css_diy.css and css_diy_rtl.css

If you see a template where CSS used without the {RTL_SUFFIX} (that suffix is just empty for LTR),
or if there exists any CSS file without the RTL brother,
then you must report here about a bug!!!!

Styles with the "_rtl" suffix are used ONLY FOR RTL languages,
but files WITHOUT the "_rtl" suffix are used ONLY FOR LTR languages.

The main file and the RTL file are mainly the same,
but LIKE A MIRROR REFLECTION:
1) All the "left" options must be inverted to "right"
2) All the "right" options must be inverted to "left"
3) All the LTR images must be replaced with the RTL images
4) All the backgrounds positions must be rewritten for RTL
5) All the border width values (Top Right Bottom Left) must be rewritten for RTL


That's all...

mj1919

vot 2013-8-13 15:52
The LTR - RTL idea explanation:

Every CSS file in Discuz!ML must have an inverted CSS file with the ...

Thank you for good explanation

but i know about of *_rtl.css and *.css and difference of these,
my question is : when we have a HTML file (without any related CSS files), How can i write a CSS file for this?
for example in Collection(http://codersclub.org/discuzx/forum.php?mod=collection) when you see page in En (or other LTR langs) all thing is correct, but when you see in Arabic view, a style is lose, ( same as problem   that i reported in " Bug in New Thread style " thread ).

Now we found that style in LTR is correct and in RTL No, OK we find lose file in Firebug, in above example, in RTL view "forum_collection.css" is lose.

we did to this step, now, we want to write ( create or edit) a file : collection_rtl.css ! is it correct? How?

vot

If you see the forum_collection.css exists,
but there is no forum_collection_rtl.css,
so you have to do the next:
1) Report this here.
2) Copy forum_collection.css to forum_collection_rtl.css
3) Use Winmerge as a Comparer/Editor for "reflect" all styles in _rtl file.
4) Post a new _rtl file here
5) Change the corresponding template (*.htm) file for add the RTLSUFFIX,
i.e. was:
<link rel="stylesheet" type="text/css" href="data/cache/style_{STYLEID}_editor.css?{VERHASH}" />
must became:
<link rel="stylesheet" type="text/css" href="data/cache/style_{STYLEID}_editor{RTLSUFFIX}.css?{VERHASH}" />
6) Post the template patch here.

khalid

mj1919 2013-8-13 14:10

Thank you,
you didn't say how to use?

i just rename "*.html" to "*_rtl.css" ?
anymore editing in codes?

Yes, just add vot(ml) codes

mj1919

vot 2013-8-13 16:31
If you see the forum_collection.css exists,
but there is no forum_collection_rtl.css,
so you have to ...

If you see the forum_collection.css exists,
but there is no forum_collection_rtl.css,
so you have to do the next:

there is nor forum_collection.css neither forum_collection_rtl.css  in template !!!!

---

but when i use "inspect element" in collection page of codersclub(En), i can get a CSS file(that not shown in Ar view),  
in next step, as your manual, i saved that file by this name: forum_collection.css
next, i create a forum_collection_rtl.css file
i placed that two in forum folder, and i edit collection.htm as you said.

result: nothing!

what is wrong? i did it wrong? or i made mistake in steps?

vot

there is nor forum_collection.css neither forum_collection_rtl.css  in template

That was a sample!
Read it as "XXX.css" and "XXX_rtl.css" !

"inspect element" in collection page of codersclub(En), i can get a CSS file

What the file name you have found?
Find that css file!
but NOT in the "/data/..." folder!!!!! You must find it in template folder!
And copy it to the same with a suffix "_rtl".

mj1919

vot 2013-8-22 17:01
That was a sample!
Read it as "XXX.css" and "XXX_rtl.css" !

yes, i edit its name! i did this process for collection, cuz of style of it, is not correct in Ar view, you can check here!
i asked my doing is right?

---

we have a bug in Ar view of collection tab,
(i point in pic that css file that i get)


++++++++++++++++++++++++++++++++++++++++++

---

there is not any *collection*.css in template.