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

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

فایل های

Templates.css

Template.ie7.css

رو با این نرم افزار باز کنید و درون صفحه فایل template.css  کلیدهای CTRL+F

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

در کادر اول دستور

text-align:left;
را بدون خط فاصله بزنید و در کادر دوم دستور

text-align: right;

را وارد کنید و دکمه Replace All  رو بزنید.با زدن این دکمه همه دستورات text-align:left; در فایل سی اس اس به text-align: right;  تبدیل خواهند شد.

تصویر

در مرحله بعدی در کادر اولی دستور

text-align: left;

را با یک خط فاصله بین : و left  تایپ کنید و دوباره دکمه Replace All  را بزنید با این کار دوباره اتفاق بالا تکرار میشه با این تفاوت که این دفعه تمام دستورات text-align: left;  در قالب که بین : و left یک فاصله هست به text-align:right;  تبدیل خواهند شد.

تصویر

 

نتیجه کار تا اینجا

 

در مرحله بعدی توی قالب سلکتور

#art-main

رو پیدا میکنید و بهش دستورات

direction: rtl;
text-align: right;

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

در مرحله بعدی از فارسی سازی میریم سراغ منو های بالای قالب که آبشاری نیز هستند.

در مرحله اول سلکتور

ul.art-hmenu li

رو پیدا میکنید و دستور

float: left;

رو به دستور

float: right;

تصویر

تغییر میدهد با این کار دکمه منوی صفحه اصلی در منوی بالا که در موقعیت چپ قالب قرار دارد به سمت راست خواهد آمد ولی اگر خوب نگاه کنید هنوز کل منو از سمت چپ شروع می شود برای حل این مشکل شما باید سلکتور

ul.art-hmenu

رو پیدا و دستور

float: left;

را به دستور

float: right;

تغییر دهید.با این کار و ذخیره فایل و رفرش قالب خواهید دید که منو های بالا به صورت کامل به طرف راست خواهند آمد.

در مرحله بعد میخواهیم به سراغ سطح های زیرین منو با همون آبشاری های منوبرویم برای این کار ابتدا سلکتور

 

ul.art-hmenu ul

رو پیدا کنید واین دستورات را

 

left: 0;

margin:  -10px 0 0 -10px;

را به

 

right: 0;

margin: -10px -10px 0 0;

تغییر دهید.با این تغییرات خواهد دید که منوهای زیرین قالب به درستی و بر اساس سیستم فارسی نمایش داده خواهد شد ولی اینجا دو مشکل وجود خواهد داشت مشکل اول اینکه منو ها در مرورگر مزخرف اینترنت اکسلورر 7 خراب نمایش داده خواهند شد و دوم اینکه هنوز سطح دوم منو های آبشاری خراب هستند ولی نگران نباشید در ادامه آموزش این مشکلات را برای شما حل خواهیم کرد.

برای مشکل اول کلا این سلکتور و دستوراتش را بدون تغییر در فایل template.ie7.css  اضافه کنید و فایل را ذخیره کنید.

 

ul.art-hmenu ul

{

Visibility: hidden;

Position: absolute;

z-index: 10;

left: 0;

top: 0;

background-image: url('../images/spacer.gif’);

padding: 10px 30px 30px 30px;

margin: -10px -30px 0 0;

}

برای رفع مشکل دوم سلکتور

 

ul.art-hmenu li li:hover>ul

را در قالب پیدا کنید و دستور

 

left: 100%;

را به دستور

 

right: 12em;

تصویر

تغییر دهید.با این کار سطح دوم منوی های شما نیز به درستی کار خواهند کرد.

در مرحله بعد باید به سراغ تصاویر کوچک در کنار لینک ها برویم که به آنها bullet  میگوییم.برای تغییر موقعیت آنها که در طرف چپ هستند و باید در طرف راست باشند ابتدا به پوشه images  قالب میرویم و تصویر مورد نظر که معمولا با نام blockcontentbullets  هست رو پیدا میکنیم و تصویر را با فتوشاپ باز میکنیم و با استفاد از منوی

Image==>image rotation==>flip convas horizontal

تصویر

تصویر را اصطلاحا برعکس میکنیم.بعد در فایل template.css  قالب کلید های CTRL+f را میزنیم و در کادر اول نام تصویر که blockcontentbullets هست را وارد میکنیم و دکمه Find next  را میزنیم تا تصویر مورد نظر در قالب پیدا بشه

تصویر

و دستورات

 

background-position: top left;

padding: 0 0 0 12px;

را به

 

background-position: top right;

padding: 0 12px 0 0;

تغییر می دهیم.شما میتونید این کار را برای همه تصاویری که در جهت چپ قرار دارند و بخواهید اونا را به جهت راست بیارید انجام بدین.

نتیجه کار

دانلود آموزش فارسی سازی قالب آرتیستر در قالب یک فایل PDF

آموزش فارسی سازی قالب های آرتیستر 3

لطفا برای دانلود فایل از این مجموعه عضو شده و یا وارد شوید!			تاریخ اندازه فایل تذکرات	1390-09-26 749.88 KB 899

دانلود نمونه قالب فارسی شده آرتیستر 3.1

نمونه قالب فارسی شده آرتیستر 3.1

لطفا برای دانلود فایل از این مجموعه عضو شده و یا وارد شوید!			تاریخ اندازه فایل تذکرات	1390-09-26 794.04 KB 305

 

• آموزش قرار دادن کد وب گذر در سایت
• آموزش آبشاری کردن منوی قالب
• آموزش برداشتن کپی رایت جوملا
• آموزش نصب و فعال کردن قالب مدیریت در جوملا 1.7
• آموزش فعال کردن منوهای بازشونده در قالب های حرفه ای

Powered by Bullraider.com