Home  Contact  Sitemap

Untitled 2

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

Artisteer Logo1

به نام ایزد منان

یکی از اهداف گروه مجیک جوملا آموزش جوملا و نیز آموزش فارسی سازی قالب است برای همین در این آموزش به شما یاد میدهیم چگونه قالبی که با آخرین نسخه نرم افزار آرتیستر یعنی نسخه 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 Mini

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

text-align: left;

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

تصویر

 

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


Web Mini

 

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

#art-main

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

direction: rtl;
text-align: right;

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

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

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

ul.art-hmenu li

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

float: left;

رو به دستور

float: right;

تصویر


Menu1 Mini

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

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;

تصویر


Menu2 Mini

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

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

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

تصویر


Images2 Mini

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

تصویر


Images Mini

و دستورات

 

background-position: top left;

padding: 0 0 0 12px;

را به

 

background-position: top right;

padding: 0 12px 0 0;

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

نتیجه کار

Web2 Mini

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

نام فایل : artisteer_rt_3.1 حجم فایل : 749 KB نوع فایل : Pdf قیمت : رایگان

نظر خود را اضافه کنید.

0
Komento
شرایط و قوانین.
  • هیچ نظری یافت نشد

MagicJoomla.com   |    کلیه حقوق مادی و معنوی نزد وب سایت  مجیک جوملا  محفوظ می باشد.

  Getpr