آموزش فارسی سازی قالب های Artisteer ورژن 2.4.0
برنامه آرتیستیر Artisteer برانامه ای است برای طراحی قالب های جوملا ،وردپرس، HTML , .... این برنامه گرچه محدودیتهایی برای طراحی دارد اما به دلیل سلدگی کارکرد میتواند برای طراحان کاربردهای موردی و مناسبی داشته باشد . ورژن جدید این نرم افزار قابلیت های جدید را به طراحی افزوده است اما ساختار کد دهی آن کاملا تغییر نموده است . در چندین پست قبل من آموزش فارسی سازی قالب های تولید شده با این نرم افزار را برای اعضا تشریح نموده بودم که با تغییر ورژن این نرم افزار و اضافه شدن امکانات جدید به قالب های این نرم افزار آموزش قبلی دیگر کارایی ندارد لذا به اصرار دوستان و جهت رفع مشکل فارسی سازی قالب های تولیدی این ورژن (۲,۴,۰,۲۴) این آموزش را تهیه کردم . برای مشاهده آموزش دکمه ادامه مطلب را بزنید |
- طراحی قالب
- 7959 بازدید
- اولین نفری باشید که نظر میدهد
سطح آموزش : |
مبتدی |
منبع آموزش : | www.joomina.ir |
توضیحات : | آموزشهای طراحی وب جومینا براساس نیاز سنجی مدیران جومینا تهیه و منتشر میشود این آموزش ها قالبا آموزش هایی است که دردنیای مجازی یا نیست و یا کمیاب است . لطفا در صورتی که از آموزش های عمومی جومینا در سایت های دیگر منتشر مینمایید منبع را ذکر نمایید |
در آموزش قبلی که مربوط به ورژن قدیمی تر این نرم افزار بود براحتی یادگرفتیم که چگونه با چند حرکت ساده میتوان قالب های تولید شده این نرم افزار را فارسی نمود . همانطور که ذکر شد ساختار کد ها در ورژن تغییر یافته است لذا روش فارسی سازی نیز باید تغییر نماید . برای فارسی سازی قالب های تولید شده ورژن جدید
1- ایتدا به سرغ فایل index.php میرویم.....
در پوشه اصلی قالب فایل index.php را باز کنید . این کار را با هر نرم افزاری میتونید انجام بدید حتی با notepad خود ویندوز . حال در این فایل دنبال این عبارت ها بگردید
<link rel="stylesheet" type="text/css" href="/<?php echo $templateUrl; ?>/css/template.css" />
ین کد ها معمولا در خط ۱۹ فایل index.php موجود است .در این خط php داره به جوملا میگه که تنظیمات css را از فایل template.css در پوشه css بخوان. در اینجا این نکته را بگم که میشه فارسی سازی را از همین فایل شروع کرد اما من شخصا شدیدا مخالف تغییر template.css در تمامی قالب ها هستم . چرا ؟
چون ممکنه در آینده بخواهیم قالب ۲ زبانه داشته باشیم برای همین یک ترفند دیگه بکار میبریم تا به فایل template.css دست نزنیم. برای این کار در زیر خطی که کد بالا قرار دارد کد های زیر را گپی میکنیم :
<?php if($this->direction == 'rtl') : ?>
<link rel="stylesheet" type="text/css" href="/<?php echo $templateUrl; ?>/css/template_rtl.css" />
<?php endif; ?>
این بدان معناسات که نمای کلی حالا باید اینطوری بنظر بیاد
<link rel="stylesheet" type="text/css" href="/<?php echo $templateUrl; ?>/css/template.css" />
<?php if($this->direction == 'rtl') : ?>
<link rel="stylesheet" type="text/css" href="/<?php echo $templateUrl; ?>/css/template_rtl.css" />
<?php endif; ?>
خوب کد های جدیدی که اضافه کردیم داره به جوملا میگه که اگر دیدی متن داخل قالب راست به چپ بود علاوه بر تنظمات فایل template.css تنظیمات template_rtl.css را نیز که در پوشه css قرار داره اعمال کن .
اما ما هنوز هیچ فایلی به این نام در پوشه css نداریم خوب در این پوشه یهنی پوشه css یک فایل با نام template_rtl.css بسازید !
حالا کد های زیر را در این فایل کپی نمایید
.art-PostContent,.art-menu a, .art-menu a:link, .art-menu a:visited,
.art-menu a:hover,.art-menu ul li a:link, li, ul , .art-menu ul li a:hover ,.art-page-footer,.pollstableborder td, .art-footer {direction:rtl; text-align:right;}
.art-menu li {float:right}
.art-menu ul {
visibility: hidden;
position: absolute;
z-index: 10;
right: 0; margin:0; padding:0;
top: 0;
background:none; left: inherit; direction:rtl; text-align:right
}
.art-blockcontent-body ul li {line-height: 1.5em;
direction:rtl; text-align:right; padding-right:10px
}
h1, h2,form#form-login, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited, .art-postheader, .art-postheader a, .art-postheader a:link, .art-postheader a:visited, .art-postheader a:hover, .art-blockheader .t, .art-vmenublockheader .t, .art-logo-text, .art-logo-text a, h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover,.art-blockcontent-body,.art-post-body,.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover,.art-menu a,.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span,.art-menu ul li, form ,form#form-login ul,fieldset, ul.art-vmenu { direction:rtl; text-align:right;}
.art-blockcontent-body ul li { padding-right:15px; background-position:right top;line-height: 1.3em;}
.art-post p{ }
.art-menu ul li ul li { right:150px}
ul.art-vmenu ul a { padding-right:25px}
.art-vmenublockheader .t { padding-right:28px; font-weight:700}
ul.art-vmenu a .t {padding-right:40px}
div#itemListLinks h3 a {font-size:15px}
div.itemCommentsForm form input.button {margin:0}
/* by amirrezatehrani */
هنوز کار تمام نشده ! حالا در پوشه قالب دنبال فایل templatedetails.xml بگردید و این خط را در قسمت فایل ها اضافه کنید
<fileName>css/template_rtl.css</fileName>
میتونید این خط را زیر کدهای زیر اضافه کنید
<fileName>css/templatel.css</fileName>
این خطی که اضافه کردیم داره به نصب کننده جوملا میگه که یک فایل به نام template_rtl.css وجود داره که باید در پوشه css قرار داده بشه .
دو کار دیگه هنوز باقی مانده است
یکی تصحیح فایل های مربوط به ie است و دیگری برعکس نمودن تصاویر و نشانه ها مربوط به سر منو ها و گلوله ها
برای تصحیح فایل های css مربوط به IE دو فایل در پوشه css وجود دارد به نام های template.ie6.css و template.ie7.css هر دو فایل را باز میکنیم و در آخر کدهای css هر دو فایل کد های زیر را اضافه میکنیم
.art-menu UL LI {
DIRECTION: rtl; FLOAT: right; right:-10px
}
.art-menu UL LI LI {
RIGHT: 150px; FLOAT: right
}
حال فایل های تصویری که در پوشه images قرار دارد را برعکس نمایید . این فایل ها شامل
vmenuitem
vsubitem
vsubitem
و فایلهای دیگری مربوط به تصاویر است.
کار تمام است . حالا پوشه قالب را zip کنید و آن را در جوملا نصب نمایید قالب شما کاملا فارسی است
من فایل جلسه اول رو دیدم و عالی بود.
میخوام در این دوره شرکت کنم که از ادامه دوره ...
این دوره کاملا رایگان بود و قسمت های بعدی هم در سایت منتشر نمیشود
لینک دانلود کجاست ؟