• تصویر شما

    ورود به حساب کاربری

ورود و ثبت نام

آخرین ارسال های انجمن پشتیبانی

آموزش اپلیکیشن نویسی هایبرید
جومینا هاست
اپلیکیشن ساز جوملا
سئو گوگل
اپلیکیشن فروشگاه ساز ویرچومارت

امروز یک نکته بیاموزید

انتشار جوملا 3.7

جوملا 3.7 با امکانات جدید و بسیار متفاوت از نسخه های قبلی منتشر شده است در این نسخه از جوملا تغییرات بزرگی داده شده که از جمله ان میتوان به امکان ایجاد فیلد های اختصاصی برای بخش های مختلف اشاره نمود . همچنین 8 باگ امنیتی نیز در این نسخه رفع شده است و یکی از چیزهایی که جالب بود قالب مدیریت میباشد که مدرن تر از گذشته گشته است

آرشیو مطالب

آخرین نظرات

درود بر شما
به سرورتون درخواست ip میدید و میگید رو اکانتتون ست کنه
ip که دریافت کردید در قسمت پر...
سلام
لطفا در مورد اتصال به پروکسی توضیح میدید ؟
با سلام این اموزش فقط html است آموزش css هم جداگانه در سایت هست کافی است سرچ بفرمایید
با جوملا 3 سازگار است اما برای تماس مستقیم باید voip داشته باشید
22
آذر
1389

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

آموزش فارسی سازی قالب های جوملا
(8 رای)
سلام ،
مثل اینکه خیلی ها با فارسی سازی قالب مشکل دارند . فکر کنم بهترین راه فارسی قالب یاد گرفتن چند دستور css و یکم تجربه هست که برای همه بدست میاید . هیچ نسخه از قبل تعیین شده وجود ندارد که مثلا بگوییم این کار را انجام دهید همه چیز خودش دریت میشه هر قالب با قالب قبلی فرق داره اما نکته خوبش اینه که اکثر قالب هایی که ماله یک شرکت خاص هستند به یه شکل فارسی میشن مثلا اگر شما یک بار یه قالب جوملا آرت را فارسی کنید چون تمامی آنها از الگوریتم تقریبا یکسانی بهره میبرند قالبهای بعدی را راحت تر فارسی میکنید .
سطح آموزش :
مبتدی
منبع آموزش : www.joomina.ir
توضیحات : آموزشهای طراحی وب جومینا براساس نیاز سنجی مدیران جومینا تهیه و منتشر میشود این آموزش ها قالبا آموزش هایی است که دردنیای مجازی یا نیست و یا کمیاب است . لطفا در صورتی که از آموزش های عمومی جومینا در سایت های دیگر منتشر مینمایید منبع را ذکر نمایید

 


با توجه به مسائل با لا تصمیم گرفتم هر چند ناقص اما هر هر چیز از چند دستور css که بلدم را ذره ذره اینجا براتون تشریح کنم . بعدشم یه قالب را با هم فارسی میکنیم و میبینیم که چطوری یه قالب فارسی میشه مثل یه دوره تحصیلی .
اول از همه برای فارسی سازی بهتر است یک سری ابزار داشته باشید لطفا این ها را تهیه کنید :
1- تمامی مرور گر ها (چون باید دائما قالب خود را با مرور گرهای خود تست کنید
2- یکی از اضافات firefox به نام ; cssviewerکه میتونید از اینجا دانلودش کنید: https://addons.mozilla.org/en-US/firefox/addon/2104
3- برنامه معروف photoshop هر ورژنی که بود
4- برنامه dreamviewer

مقدمه در مورد دستورات css
i هر دستور css دارای سه بخش به ترتیب زیر است

 

کد:
selector {property:value}


مثال

کد:
body {color:black}


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

کد:

h1,h2,h3,h4,h5,h6 {color:green}

یعنی h1 تا 6 همگی سبز باشد

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

نکته : کسانی که کد نویسی html را میدانند این دروس برای آنان بسیار ساده خواهد شد چرا که css پیوستگی مشخصی با html دارد

به عنوان آموزش اول با دستور direction شروع میکنیم که خاصیت است

direction میتواند دارای 3 ارزش متفاوت باشد

 

direction: ltr(left to right) & rtl(right to left) & inherit
 

ltr به معنای چپ به راست
rtl یعنی راست به چپ
inherit به معنای ارث بری از بخش والد است

برای فارسی سازی قالب معمولا میگویند به تگ body که مربوط به کل قالب است دستور direction:rtl را اضافه کنید . نمیتوان گفت که این کار درست است یا غلط ! به دلیل این که هر قالب با قالب قبلی فرق دارد در بعضی از قالب ها اصلا نباید این کار را انجام داد و در بعضی دیگر این یک باید است .
اما اگر نخواهیم این دستور را در ابتدای قالب یا همان body قرار دهیم چه باید انجام دهیم . که البته خود من هم این کار را توصیه میکنم اما وقت گیر تر است .
ما باید در قسمت را جداگانه با این دستور بکار ببریم
direction به معنای جهت میباشد و وقتی میگوییم direction:rtl یعنی جهت از راست به چپ باشد
برای آنکه با این دستور بیشتر آشنا شوید میتوانید از کارگاه آنلاین برای تست دستور استفاده کنید از این ادرس :

 

http://www.w3schools.com/Css/tryit.asp?filename=trycss_text_direction


فعلا ما در قسمت مربوط به متن یا text هستیم لذا با دستور کاربردی دیگری آشنا میشویم به نام text-align به معنای تراز متن
کار این دستور دقیقا همانند گزینه مشابه آن در microsoftword است و دارای 3 ارزش میباشد به شرح زیر
کد:


{text-align:center}
{text-align:left}
{text-align:right}

center برای تراز وسط
left به معنای تراز به چپ
right برای تراز به راست
مثال :
کد:


h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

 

یعنی عنوان h1 در مرکز موقعیت قرار گیرد و h2 در چپ و h3 در راست
به صورت پیش فرض برای تمامی قالب های انگلیسی با توجه به نحوه نگارش حروف انگلیسی direction: rtl; text-align:left است . بدلیل آنکه انگلیسی را از چپ به راست مینویسند و فارسی را از راست به چپ لذا ممکن است ما جهت را در قالب از راست به چپ کرده باشیم یعنی direction: rtl اما تراز نوشته ها را راست نکرده باشیم .
بر اساس ترجبه ناچیزی که من دارم در بیشتر مواق لازم است در قالب جستوجو کنید و text-align:left را به text-align:right تبدیل کنید این کار را میتوانید با فشار یک دکمه در dreamviewer و در قسمت find and replace انجام دهید .
نکته گاهی مواقع در قالب ها بین دو نقطه و ارزش (به عنوان مثالtext-align) فاصله نمیگذارند لذا با هر دو حالت جستجو کنید
نکته ممکن است پس از تبدیل تمامی left ها به right باز هم قسمت هایی باشد که تراز راست نباشد اینجاست که باید از ابزار cssviewer در فایر فاکس استفاده کنید که در آموزش بعدی راجع به آن توضیح خواهم داد
برای درک بهتر این دستور میتوانید از کارگاه آنلاین استفاده نمایید برای این کار به آدرس زیر بروید :

http://www.w3schools.com/CSS/tryit.asp?filename=trycss_text-align

 

در این آموزش 5دستور دیگر که مربوط به متن یا text است بکار میرود

TEXT-COLOR

رنگ متن
در CSS شما میتوانید یک تگ را به رنگهای مختلف نشان دهید . در نمایش رنگ از دستود ساده COLOR استفادخ میشود اما ارزشی که به COLOR میتوان داد به سه روش است .
شما میتوانید تنها نام رنگ را بنویسید مثل RED
شما میتوانید کد RGB رنگ را در مقابل color بنویسید
شما میتوانید میزان هگزا رنگ را در جلو آن را بنویسید .
برای اولی تنها زمانی استفاده میشود که شما میخواهید از رنگها ساده استفاده کنید
برای دومی رنگ ترکیبی استفاده میشود . برای درک بهتر آن از پنل کنترل رنگ فتوشاپ مشاهده نمایید هر رنگ ترکیبی از سه رنک قرمز ، آبی و سبز است به شما با وارد نمودن 3 عدد در مقابل کد رنگ ترکیب این رنگها را به کار میبرید
از طرفی برای کدهای هگزا در همان پنل کنترل رنگ فتو شاپ در قسمت پایین معادل کد هگزا هر رنگ مشاهده میشود که میتوانید آن را نیز بکار ببرید
مثال:
کد:


body {color:blue}
h1 {color:#00ff00}
h2 {color:rgb(255,0,0)}

ترجمه این کد ها به شرح زیر است
برای متن body از رنگ آبی استفاده شود
برای عنوان نوع اول h1 از رنگ سبز استفاده شود
برای عنوان نوع دوم h2 از از رنگ قرمز استفاده شود
برای درک بهتر میتوانید از کارگاه آنلاین استفاده کنید از این آدرس :
http://www.w3schools.com/CSS/tryit.asp?filename=trycss_color

دستور بعدی Text Decoration میباشد که در فارسی سازی هم کاربرد بیشتری دارد
این دستور نوع آرایش متن را مشخص مینماید که مثلا زیر خط دار باشد مایل باشد و ....
ارزش هایی که این خاصیت میتواند کسب کند به شرح زیر است
none بدون ارزش
underline زیر خط دار
overline یک خط در بالای متن
line-through یک خط در وسط متن
blink چشمک زن

مثال:
کد:


h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}


ترجمه دستورات بالا به شرح زیر است
برای عنوان ها از نوع اول یک خط در بالای آن قرار بده
برای عنوان ها از نوع دوم یک خط در وسط آن قرار بده
برای عنوان ها از نوس سوم یک خط در زیر آن قرار بده
و تمامی عنوان ها زا نوع چهارم چشکم زن باشند
در برخی از قالب ها تمامی لینک ها زیر خط دار هستند حال فهمیدیم اگر بخواهیم در قالبمان لینک ها زیر خط دار نباشند کافی است که در قالب بگردیم و text-decoration:underline را به none تبدیل نموده یا آن را کاملا حذف نمایید . اینکه از کجا این دستور را بیابیم با استفاده ایزار cssviewer در فایر فاکس است که متعاقبا راجع به آن توضیح داده خواهد شد .

دستور بعدی text Transformation است که در فارسی سازی اصلا کاربردی ندارد لذا ما هم مختصر از آن میگذریم تنها به ذکر آدرس آزمایش آنلاین آن اکتفا میکنیم
http://www.w3schools.com/CSS/tryit.asp?filename=trycss_text-transform

و دستور آخر در این قسمت آموزش Text Indentation یا تو رفتگی متن پاراگراف است
همانطور که میدانید در آیین نگارش فارسی متن در سطر اول پاراگراف میباید به اندازه 3 نقطه تو رفته باشد رعایت این مورد باعث زیبایی متن و جلب نظر مخاطب میشود . این موردی است که متاسفانه خود من هم در قالب ها رعایت نمیکنم و فراموش میشود اما این دستور به شما این امکان را میدهد تا سطر اول را به میزان دلخواه تو رفته نمایید .

مثال :
کد:

p {text-indent:50px}


ترجمه این کد به شرح زیر است سطر اول پاراگراف به اندازه 50 پیکسل تو رفته باشد
برای درک بهتر میتوانید از آزمایش آنلاین استفاده کنید :
http://www.w3schools.com/CSS/tryit.asp?filename=trycss_text-indent

دستور بعدی line-height میباشد به معنای ارتفاع خط
بوسیله این دستور میتوانید ارتفاع هر خط را در بخش مورد نطر تعیین کنید

مثال :
کد:



body{line-height:20px}



یعنی در کل قالب ارتفاع هر خط با خط بعدی 20 پیکسل باشد . نحوه ارزش دهی این خاصیت به شرح زیر است
normal که از پیش فرض php استفاده میکند
length یک میزان مشخص مانند 20px
% درصدی از اندازه فونت در حال استفاده
inherit از خاصیت والد استفاده میکند

مثال به ترتیب :
کد:


line-height:normal



کد:


line-height:20px


کد:


line-height:20%


کد:

line-height:inherit 

 


در قارسی سازی قالب ها زمانی این دستور کاربرد دارد که قسمت از متن به صورت عرضی یا از ارتفاع ناپدید شده است

دستور بعدی letter-spacing
من بارها به این دستور در فارسی سازی قالب ها بر خورده ام در زبان انگلیسی بدلیل آنکه حروف از هم جدا هستند میتواند گفت که هر حرف با حرف قبلی x پیکسل فاصله داشته باشد اما در فارسی همچین کاری را نمیتوان کرد به همین دلیل گاهی شما قالب را کاملا فارسی میکنید اما میبینید که بین حروف فاصله وجود دارد . اینجاست که باید به دنبال این دستور بگردید و فاصله بین حروف را صفر کنید

روش استفاده از این دستور بسیار ساده است
مثال
کد:


h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}


ترجمه دستور به شرح زیر است :
برای تمامی عنوان ها از نوع اول فاصله بین حروف 2 پیکسل و برای عنوان ها از نوع دوم فاصله بین حروف 3 باشد
برای درک بهتر از کارگاه آنلاین استفاده کنید از آدرس زیر

http://www.w3schools.com/CSS/tryit.asp?filename=trycss_letter-spacing

body {color:black}

مطالب مرتبط :

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

مجموع رتبه (0)

0 از 5 ستاره
لطفا برای ثبت نظر خود وارد شوید

کاربرانی که در این گفتگو شرکت کرده اند

  • سلام.
    تشکر از مطلب جالب شما.

    سه شنبه 10 شهریور 1394 - حدود 3 سال قبل
  • مهمان - شهریار

    :):)درود بر شما


    سپاس از مطالب جالبی که قرار دادین

    در پناه یزدان پاک

    سه شنبه 04 شهریور 1393 - حدود 4 سال قبل

درباره جومینا

خدمات گروه طراحان وب جومینا

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

نمونه کارهای طراحی سایت

ویپ باز خرید ویپ ، سیگار الکترونیک و ایجویس

Design
Programming
SEO

وب سایت فروشگاهی بر پایه ویرچومارت

بیشتر بدانید

فروشگاه سیستمهای صوتی فلسفی

Design
Programming
SEO

طراحی وبسایت فروش سیستمهای صوتی فلسفی توسط گروه طراحان وب جومینا

بیشتر بدانید

آژانس مسافرتی دراک - شیراز

Design
Programming
SEO

طراحی ، اجرا و بهینه سازی وبسایت آژانس مسافرتی دراک - شیراز

بیشتر بدانید

آخرین محصولات فروشگاه

پلاگین پرداخت هیکاشاپ به پاسارگاد
پلاگین پرداخت هیکاشاپ به پاسارگاد
پلاگین اتصال کامپوننت فروشگاه ساز هیکاشاپ به درگاه بانک پاسارگاد - قابلیت ذخیره کد رهیگیری بانک و شماره مرجع در مدیریت ، تعیین واحد پولی بصورت خودکار
پلاگین پرداخت J2Store به پاسارگاد
پلاگین پرداخت J2Store به پاسارگاد
پلاگین اتصال فروشگاه ساز جی 2 استور (J2Store) به درگاه بانک پاسارگاد - قابلیت انتخاب پول رایج در تنظیمات پلاگین ، ثبت کد پیگیری در جزییات سفارش
پلاگین اتصال DJ ClassiFieds به پیامک
پلاگین اتصال DJ ClassiFieds به پیامک
پلاگین اتصال کامپوننت آگهی ساز DJ ClassiFieds به پنل پیامک ، قابلیت ارسال پیامک بعد از پرداخت موفق بانکی ، امکان تنظیم ارسال پیامک تا 2 وضعیت پرداخت
پلاگین پرداخت ویرچومارت به پاسارگاد
پلاگین پرداخت ویرچومارت به پاسارگاد
پلاگین اتصال فروشگاه ساز ویرچومارت (VirtueMart) نسخه 3 به درگاه بانک پارسیان - قابلیت انتخاب پول رایج در تنظیمات پلاگین ، ذخیره کد پیگیری بانک در جزییات سفارش
پلاگین پرداخت ویرچومارت به ملی
پلاگین پرداخت ویرچومارت به ملی
پلاگین اتصال فروشگاه ساز ویرچومارت (VirtueMart) نسخه 3 به درگاه بانک ملی - قابلیت انتخاب پول رایج در تنظیمات پلاگین ، ذخیره کد پیگیری بانک در جزییات سفارش
پلاگین پرداخت J2Store به سامان
پلاگین پرداخت J2Store به سامان
پلاگین اتصال فروشگاه ساز جی 2 استور (J2Store) به درگاه بانک سامان - قابلیت انتخاب پول رایج در تنظیمات پلاگین ، ثبت کد پیگیری در جزییات سفارش
پلاگین پرداخت DJ ClassiFieds به سامان
پلاگین پرداخت DJ ClassiFieds به سامان
پلاگین اتصال آگهی ساز دی جی کلاسیفید (DJ ClassiFieds) به درگاه بانک سامان - قابلیت انتخاب پول رایج در تنظیمات پلاگین
پلاگین پرداخت DJ ClassiFieds به پاسارگاد
پلاگین پرداخت DJ ClassiFieds به پاسارگاد
پلاگین اتصال آگهی ساز دی جی کلاسیفید (DJ ClassiFieds) به درگاه بانک پاسارگاد - قابلیت انتخاب پول رایج در تنظیمات پلاگین

سرورهای قدرتمند جومینا مخصوص انواع مدیریت محتوا

سایر پنل ها
سایر پنل ها
  • پیشنهاد ما

  • هاست اشتراکی اقتصادی
    سالیانه 40 هزار تومان
  • هاست اشتراکی حرفه ای
    سالیانه 100 هزار تومان
  • سرور مجازی
    ماهیانه 30هزار تومان
جومینا هاست