آموزش سازگار کردن قالب با زبان پارسی (بخش سوم-تصاویر)

[دانوش]

تا به این‌جای کار با دوجهته کردن بخش اصلی قالب و ماژول آشنا شدید. اما یکی از بخش‌های مهم تصاویر هستند. وقتی قالب را راست چین می‌کنید تصاویر به راست منتقل شده و اگر نامتقارن باشند به چپ اشاره می‌کنند و یا برعکس. برای حل مشکل تصاویر باید تصاویر را به چند دسته تقسیم کنیم:

 

- تصاویر نامتقارن دوگانه. این تصاویر نامتقارن هستند اما همیشه جفت هستند. یکی برای راست و یکی برای چپ. مانند تصاویری که برای بعدی و قبلی به کار می‌روند. این تصاویر نیاز به تغییر ندارند ولی در فایل css راست چین شده (rtl) جای تصویر سمت چپ و راست با یک دیگر عوض می‌شود. مثال:

 

#view_scroll_left, #view_scroll_right {
background: url('../img/thumbs_left.gif') no-repeat center;
text-indent: -3000px;
width: 9px;
height: 18px;
float: left;
margin-top: 30px;
padding-right: 6px;
padding-left: 4px
}
#view_scroll_right { background-image: url('../img/thumbs_right.gif') }

 

 

که بعد از تغییرات به شکل زیر خواهد شد.

 

#view_scroll_left, #view_scroll_right {
background: url('../img/thumbs_right.gif') no-repeat center;
text-indent: -3000px;
width: 9px;
height: 18px;
float: right;
margin-top: 30px;
padding-right: 4px;
padding-left: 6px
}
#view_scroll_right { background-image: url('../img/thumbs_right.gif') }

.

http://presta-shop.ir/images/articles/thumbs_left.gif http://presta-shop.ir/images/articles/thumbs_right.gif >>> بعد از تغییر >>> http://presta-shop.ir/images/articles/thumbs_right.gif http://presta-shop.ir/images/articles/thumbs_left.gif

.

- تصاویر نامتقارن تکی. این تصاویر مانند تصاویر قبلی دارای تقارن نیستند و باید برای استفاده در قالب راست چین یک بار آینه شوند. اما باید توجه کنید که حتماً نام آن را هم به شکل imagename-rtl یا imagename_rtl تغییر دهید تا تصویر برای قالب چپ چین دچار مشکل نشوند. برای ویرایش عکس می‌توانید از هر ویرایشگر تصویر ساده‌ای (به جز paint) استفاده کنید. دقت کنید که ویرایشگر تصویر باید از تصاویر png که دارای پشت‌نمایی (Transparency) هستند پشتیبانی کند و این قابلیت را از تصویر نگیرد.

 

ویرایشگر پیشنهادی: snag-it یا Microsoft office یا photoshop.

 

#instant_search_results a.close {
background: url("../img/nav-logout.gif") no-repeat scroll right 2px transparent;
float: right;
margin-right: 7px;
padding-right: 21px;
text-transform: none
}

 

کد بالا بعد از تغییر تصویر به شکل زیر خواهد شد:

 

#instant_search_results a.close {
background: url("../img/nav-logout-rtl.gif") no-repeat scroll left 2px transparent;
float: left;
margin-left: 7px;
margin-right: 0;
padding-left: 21px;
padding-right: 0;
text-transform: none
}

 

http://presta-shop.ir/images/articles/step_start.gifhttp://presta-shop.ir/images/articles/step_end.gif >>> بعد از تغییر >>> http://presta-shop.ir/images/articles/step_start_rtl.gifhttp://presta-shop.ir/images/articles/step_end_rtl.gif

.

http://presta-shop.ir/images/articles/block_header_exclusive_cart.gif >>> بعد از تغییر >>> http://presta-shop.ir/images/articles/block_header_exclusive_cart_rtl.gif

 

- تصاویر دارای متن انگلیسی. تصاویری هستند که دارای متن هستند. می‌توانید متن داخل آن را با ویرایشگر تصویر تغییر دهید یا یک تصویر جدید مشابه آن تولید کنید و مانند روش قبل با تغییر نام کد آن را تغییر دهید. البته توجه کنید که در این حالت ممکن است تصاویر با کد زبان نام‌گذاری شده باشند؛ مانند image_en که در این حالت برای نام‌گذاری از کد زبان استفاده می‌کنیم؛ مانند image_fa.

 

- تصاویر متقارن. تصاویری که نسبت به خط عمود بر مرکز آن متقارن باشند. این تصاویر که نزدیک به 90 درصد تصاویر را تشکیل می‌دهند نیازی به ویرایش ندارند.

 

ویرایش محل قرارگیری Background

 

محل قرار گیرفتن تصاویر در یک لایه، جدول، خط و ... با استفاده از ویژگی Background-position قابل تعریف است. که به اشکال مختلفی ممکن است استفاده شود. تغییر مکان تصاویر را به عنوان یکی از کارهای پایانی در نظر داشته باشید و سعی کنید محل تصاویری که تغییر می‌دهید را بدانید. توصیه می‌شود از افزونه‌ی Firebug برای فایرفاکس استفاده کنید. در کروم ویرایشگری به صورت پیش فرض مشابه فایرباگ وجود دارد.

 

background-position با پذیرفتن دو مقدار میزان حرکت تصویر از سمت چپ کادر به سمت راست واز بالای کادر به سمت پایین را مشخص می‌کند. این ویژگی ممکن است با پذیرفتن مقادیر right, left, top, bottom تصویر را در یکی از گوشه‌های کادر قرار دهد.

 

background: url(...) no-repeat right top;  =>  در گوشه‌ی سمت راست و بالا قرار می‌گیرد، شیوه‌ی ویرایش این کد مشخص است و قبلاً توضیح داده شده است
background: url(...) no-repeat right 10px;  =>  در سمت راست کادر به اندازه 10 پیکسل از بالا به سمت پایین فاصله می‌گیرد.
background: url(...) no-repeat 5px 10px;  =>  به اندازه 5 پیکسل از چپ به سمت راست و به اندازه‌ی 10 پیکسل از بالا به سمت پایین.
background: url(...) no-repeat -5px -10px;  =>  به اندازه‌ی 5 پیکسل از چپ به سمت چپ و 10 پیکسل از بالا به سمت بالا - یعنی از کادر خارج می‌شود
background: url(...) no-repeat 10% 5%;  =>  استفاده از درصد برای مکان تصویر

 

همه‌ی تصاویر نیاز به تغییر مکان ندارند. توصیه‌ی اکید می‌شود این کار را به عنوان آخرین کار در ویرایش قالب انجام دهید.

تصاویری که دارای حالت اشاره به سمت چپ و یا راست هستند معمولاً نیاز به تغییر مکان دارند.

برای تشخیص تصاویری که نیاز به تغییر مکان دارند می‌توانید قالب را بعد از ویرایش بازبینی کنید.

برای ویرایش به مقدار دوم کاری نداریم و فقط تغییر مکان از سمت چپ را ویرایش می‌کنیم (با فاصله‌ی تصویر از بالای کادر کاری نداریم).

 

به دلیل این که مکان تصاویر معمولاً با استفاده از پیکسل مشخص می‌شوند ویرایش آن‌ها قدری دشوار است. css این قابلیت را ندارد تا این جابه‌جایی را از سمت راست محاسبه کند! بنابراین چاره‌ای نداریم تا جابه‌جایی از سمت چپ را طوری تنظیم کنیم که از سمت راست به نظر برسند.

 

اگر مقادیر بر اساس پیکسل باشند و ما عرض کادری که تصویر در آن باشد را بدانیم کافی است به اندازه‌ی عرض کادر به سمت راست بریم و به اندازه‌ی مقدار اصلی برگردیم. یعنی اگر عرض به طور مثال 120 باشد و مقدار تغییر مکان 10 کافی است به اندازه‌ی 110 پیکسل به سمت راست حرکت کنیم (10 پیکسل از سمت راست فاصله داریم).

 

اگر عرض کادر را ندانیم چاره‌ای نداریم جز تبدیل حالت پیکسلی به حالت درصدی. در این حالت باید حتماً نتیجه‌ی کار را ببینید. در غیر این صورت مشخص نیست تصویر در جای خودش قرار گرفته یا نه. اگر محل تصویر را در سایت پیدا نکردید توصیه می‌شود عدد 100% را جایگزین کنید تا در سمت راست قرار بگیرد. به جز در مواردی محدود حساسیت روی محل قرار گیری تصاویر نیاز نیست. به طور مثال می‌توانید برای 10px مقدار 98% را قرار دهید. (10 پیکسل را معادل 2 درصد فرض کردیم و از 100 کم کردیم).

 

اگر مقادیر بر اساس درصد باشند نیازی به عرض کادر (لایه) نداریم (عرض کادر 100 درصد است!) کافی است درصد تغییر مکان را از 100 درصد کم کنیم. به طور مثال به جای 10% مقدار 90% را وارد می‌کنیم (100 درصد منهای 10 درصد).

 

در مواقعی که مقدار منفی است کافی است به جای کم کردن از عرض کادر به آن مقدار تغییر مکان اصلی را اضافه کنیم. به طور مثال 110%.

 

مثال:

 

.idTabs a {
background-image: url('../img/tab_bg.jpg') no-repeat 10px 10px;
width: 173px; => عرض کادر
height: 25px
}

بعد از ویرایش:

.idTabs a {
background-image: url('../img/tab_bg.jpg') no-repeat 163px 10px; => فاصله از سمت چپ به 163 تغییر کرد.
width: 173px;
height: 25px
}

 

 

.idTabs a {
background-image: url('../img/tab_bg.jpg') no-repeat 10px 10px;
height: 25px; => عرض کادر را نداریم
}

بعد از ویرایش

.idTabs a {
background-image: url('../img/tab_bg.jpg') no-repeat 98% 10px; => به صورت فرضی یا با مشاهده سایت 98 درصد را جایگزین کردیم
height: 25px; => عرض کادر را نداریم
}

 

.idTabs a {
background-image: url('../img/tab_bg.jpg') no-repeat -10% -10%;
width: 173px; => عرض کادر مهم نیست
height: 25px
}

بعد از ویرایش:

.idTabs a {
background-image: url('../img/tab_bg.jpg') no-repeat 110% -10%; => عدد منفی با 100 درصد جمع می‌شود
width: 173px; => عرض کادر مهم نیست
height: 25px
}

 

نکات مهم

• در هنگام ویرایش قالب برای اعمال تغییرات باید «اعمال کامپایل» را از تنظیمات » کاربری‌ها فعال کنید.
  
• برای نمایش تغییرات باید در ابزارها » زبان‌ها در ویرایش زبان فارسی آن را به عنوان زبان RTL علامت بزنید.
  
• حتماً بخش‌های قبلی و بعدی آموزش را بخوانید.

این مطالب را هم بخوانید

• 
  آموزش سازگار کردن قالب با زبان پارسی (بخش اول)
• آموزش سازگار کردن قالب با زبان پارسی (بخش دوم - ماژول)
• آموزش کار با افزونه‌ی Firebug

 

این آموزش به صورت اختصاصی و برای اولین بار

در انجمن پشتیبانی پرستا شاپ پارسی ارایه شده. هرگونه کپی برداری از آن

فقط و ققط با ذکر نام و لینک این انجمن مجاز است.

[شوییچی]

بخش دوم کجاست ؟ یا همینه؟؟

[admin]

مای لیدی جان دیگه از این آموزش استفاده نکنید! برای دیدن آموزش جدید این لینک رو مشاهده کنید. خیلی ساده تره و نیازی به این کارها نیست!

 

http://presta-shop.ir/showthread.php?tid=662

 

 

موفق باشد

[شوییچی]

مای لیدی جان دیگه از این آموزش استفاده نکنید! برای دیدن آموزش جدید این لینک رو مشاهده کنید. خیلی ساده تره و نیازی به این کارها نیست!

http://presta-shop.ir/showthread.php?tid=662

موفق باشد

 

سازگارکردن قالب با نسخه فارسی ریزه کاری زیاد داره ، مخصوصن اگر ورژنهای فروشگاهی فرق کنه که کلن بحثش جداست.

 

اون تاپیک شما صرفن برای دوجهته کردن مورد استفاده داره.

 

[دانوش]

مای لیدی جان دیگه از این آموزش استفاده نکنید! برای دیدن آموزش جدید این لینک رو مشاهده کنید. خیلی ساده تره و نیازی به این کارها نیست!

http://presta-shop.ir/showthread.php?tid=662

موفق باشد

 

سازگارکردن قالب با نسخه فارسی ریزه کاری زیاد داره ، مخصوصن اگر ورژنهای فروشگاهی فرق کنه که کلن بحثش جداست.

 

اون تاپیک شما صرفن برای دوجهته کردن مورد استفاده داره.

 

حق با my lady است. اون آموزش فقط برای فعال کردن قابلیت دوجهته است و ربطی به راست چین کردن css نداره.

بخش دوم آموزش حذف شده چون روش ارایه شده صحیح نبود. به زودی برای نسخه 1.4.4.1 هم یک اصلاحیه قرار میدیم تا این نسخه هم دوجهته بشه. البته مشکلی برای قالب های یک جهته وجود نداره و به درستی کار میکنه.

 

این آموزش 80 تا 90 درصد مشکلات رو حل میکنه. با این حال به مرور کامل خواهد شد تا هیچ مشکلی وجود نداشته باشد.