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

[sarj 31]

باعرض سلام خدمت کلیه دوستان عزیز

در این تاپیک آموزشی قصد دارم تا به مرور زمان آموزش کاملی از فارسی سازی و بهینه سازی قالب های جوملا رو ارائه بدیم خدمت کاربران عزیز:

این آموزش در چند قسمت اصلی تقسیم شده:

1. آموزش html و css پایه جهت فارسی سازی بهمراه استفاده از ابزارهای مورد نیاز
   
2. آموزش فارسی سازی بسته نصبی(قالب) جوملا-> قالب های ساده
   
3. آموزش فارسی سازی بسته نصبی(قالب) جوملا-> قالب های پیشرفته تحت فریم ورک t3
   
4. آموزش فارسی سازی بسته نصبی(قالب) جوملا-> قالب های پیشرفته تحت فریم ورک Gantry
   

در واقع توی این آموزش قالب ها به سه دسته کلی تقسیم شدندهیچ سندیت علمی نداره-فقط جهت افزایش کارایی ویدئوها)

1. قالب های Simple: مثل قالب های Artisteer و TemplateToaster و قالب های تبدیلی از HTML و PSD
   
2. قالب های Simple & Powerful: مثل قالب های T3-Helix و...
   
3. قالب های Advance & Complex: مقل قالب های Gantry
   

با ما همراه باشید

[sarj 31]

سلام دوستان عزیز

برای شروع کار نیاز هست ابزارهای زیر رو نصب کنید:

1. مرورگر فایر فاکس آخرین نسخه
   
2. نرم افزار ویرایشگر Notepad++
   
3. افزونه Firebug قابل نصب بروی فایرفاکس و کروم
   

دانلود آخرین نسخه فایرفاکس(علت انتخاب نمایش استاندارد در خدمات وب هست)

سعی کنید نسخه 32 بیتی رو نصب کنید و از نسخه Waterfox استفاده نکنید که هنوز مشکلاتی رو داره:

Download Firefox — Free Web Browser — Mozilla

دانلود نرم افزار ویرایشگر متن حرفه ای Notepad++:

Notepad++ v6.7.7 - Current Version

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

نسخه فایرفاکس: Firebug :: Add-ons for Firefox

نسخه کروم:

Firebug Lite for Google Chrome : Firebug

[sarj 31]

سلام دوستان عزیز

در این قسمت دستورات پایه و ساده HTML و CSS جهت ویرایش قالب ها بعنوان پیش نیاز مطرح شده:

سرفصل ها:

1. Editors

2. Basic

3. p,h,a,img

4. AttributesExp (p=class,style,id,dir |h=class |a=href,target |img=src,alt,style )

5. Style (bg,color,font,size,align,float,height,width,padding,margin,border,pos[staric,rel,fixed,abs]...)

6. Formatting (b,i,sub,sup,...)

7. Comments

8. List

9. Block

10. Class

11. Color

12. Symbols

همچنین اشاره ای هم به نحوه کار با وب سایت W3schools و ابزاهاش شده:

لینک دانلود از آپارات:

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

[sarj 31]

باسلام خدمت همه عزیزان

در این قسمت آموزش فارسی سازی و بهینه سازی قالب های ساده جوملا مثل قالب های HTML و PSD تبدیل شده به جوملا یا قالب های Artisteer و templateToaster ارائه شده البته قالبی که بروی اون کار میشه قالبی هست از JoomShaper با نسخه قدیمی فریم ورک Helix تا مواردی هم تشریح بشه

لطفا توجه داشته باشید این آموزش بهمراه نکاتی ارائه میشه که احتمالا در زمان فارسی سازی با آنها روبرو میشید:

ضمنا پس از دیدن فیل مسیر زیر جهت حذف کپی رایت Helix برای شما مهم خواهد بود که به شرح ذیل می باشد:

در فایل template.css خط 97 عبارت زیر هست:

#powered-by {
   display: block;
   text-indent: -999em;
}

block رو به none تغییر بدید و سپس

در فایل template_rtl.css در خط 38 عبارت زیر هست:

#sp-footer .cp {

float: right !important;

}

که بایست کد زیر رو نیز اضافه کنید:

display: none;

لینک دانلود از آپارات:

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

موفق باشید

[taher1983 10]

میشه آموزش فارسی سازی قالب های با فریم وورک t3 رو اینجا قرار بدهید

با تشکر

[sarj 31]

میشه آموزش فارسی سازی قالب های با فریم وورک t3 رو اینجا قرار بدهید

با تشکر

الان شروع میکنم به ضبط اگر مشکلی پیش نیاد بامید خدا تا آخر امشب آپ میکنم و لینک دانلود میدم

موفق باشید

[sarj 31]

باعرض سلام اینم از آموزش فارسی سازی و بهینه سازی قالب های طراحی شده تحت فریم ورک t3 به روش کاملا استاندارد و اصولی:

فقط دوستان عزیز توجه داشته باشند برای استفاده از این آموزش یا بایست ویدئوهای قبلی رو مشاهده کرده باشید یا اینکه آشنایی با فارسی سازی قالب های جوملا بصورت کلی و ساده داشته باشید.

لینک دانلود از آپارات:

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

موفق باشید

[sarj 31]

باعرض سلام خدمت کلیه دوستان عزیز

آموزش ویدئویی تغییر فونت در گانتری از لینک زیر قابل دریافت هستش:

http://www.aparat.com/v/Cmfwo

کلاس جهت معرفی فونت:

@font-face
{
 font-family:'yj';
src: url('../fonts/BYekan.eot?#') format('eot'),  /* IE6–8 */
    url('../fonts/BYekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/BYekan.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

کلاس جهت معرفی فونت پیش فرض در DropDown:

.font-family-byekan {
 font-family: 'yj',tahoma;
 font-weight: normal;
 font-style: normal;
}

امیدوارم که مفید واقع بشه

[majid_tiger 10]

با سلام خسته نباشید ،

آموزش فارسی سازی helix رو میشه توضیح بدید ؟

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

با تشکر

[Vahid Taheri 74]

با سلام خسته نباشید ،

آموزش فارسی سازی helix رو میشه توضیح بدید ؟

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

با تشکر

آموزش های فریم ورک هلیکس در تاپیک زیر قرارمیگیرند. پست 37 این تاپیک درباره اضافه کردن فونت به قالب هست :

آموزش فریم ورک رایگان Helix

[sarj 31]

باعرض سلام خدمت کلیه دوستان عزیز

برای تغییر فونت در فریم ورک Helix3 روش های متفاوتی وجود که اصولی ترین و استانداردترین روش به بیان خود سایت JoomShaper روش زیر هستش:

1. در پوشه CSS قالب یک فایل css ایجاد نمایید فرضا font.css و در اون مسیر فونت های ذخیر شده خودتون رو قرار بدید مثلا: (توحه فرمایید مسیر رو بصورت صحیح وارد کنید الان بنده در پوشه font واقع در روت قالب فونتم رو قرار دادم)

@font-face
{
 font-family:'yj';
src: url('../font/BYekan.eot?#') format('eot'),  /* IE6–8 */
    url('../font/BYekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../font/BYekan.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

2. سپس فونت های خود رو به مسیر مورد نظر کپی کنید (با پسوندهای مربوطه که اموزش های گذشته عرض کردم)

3. وارد مدیریت جوملا شوید و از قسمت مدیریت قالب -> قالب مورد نظر خود را ویرایش کنید

در تب CustomCode وارد شوید و قسمت Before </head> رو مسیر فایل css فونت خودتون رو درج کنید مثلا:

<link rel="stylesheet" href="templates/shaper_helix3/css/font.css" />

در همون تب قسمت Custom CSS میتونید المان های خودتون رو فونت دهی کنید و تغییرات رو اعمال کنید مثلا:

body {

font-family: yj;

font-size: 13px;

font-weight: normal;

}

نهایتا ذخیره کنید و کار تمام است

موفق باشید

[reza jafari 39]

درود ممنونم علیرضا جان که به فکر دوستان انجمن هستی بنده هم میخوام آموزش فارسی سازی قالبهای جدید Smartaddons رو بگم اینم براساس خود سایت سازنده و تجربه شخصی خودمه:

1- به پوشه قالبتون برید سپس پوشه Asset رو بازکرده حالا فایل gfonts که یک فایل متنی هست رو با Notepad++ یا خود Notepad ویندوز باز کنید حالا اسم فونتی که میخواین تو قسمت Typography تو قالب قرار بگیره رو به این صورت وراد کنید

مثلا من میخوان از فونت یکان استفاده کنم اینطور تایپ میکنم: Yekan=yekan; حالا بجای ; ممکنه فونت بعدی کاما گذاشته باشه که شما باید به جای سمیکالون کاما بذارین.

2- به پوشه css برین و یک پوشه به نام font ایجاد کنید حالا فونت یکان روتوش قرار بدین.

3- حالا فایل your_css رو با Notepad باز کنید و فونتهای خودتون رو وارد کنید(اگر قالبتون دوزبانه است بایستی واسه قالب فارسیتون تو مدیریت قالب از قسمت Typography فونت رو یکان بذارین و خوب به طبع برای اینکه فقط در قسمت فارسی

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

@font-face {
   font-family: 'yekan';
   src: url('font/BYekan.eot');
   src: url('font/BYekan.eot?#iefix') format('embedded-opentype'),
        url('font/BYekan.woff') format('woff'),
        url('font/BYekan.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}
rtl. body{font-family:yekan !important;}

}

همنطور که در کد میبینید یک .rtl قبل اون قسمتی که میخواین تو حالت فارسی فونت بگیره میذارین که فقط تو حالت راست چین فونت رو نشون بده.

کارتمومه یک رفرش کنید قالب فونت دهی شد:motat:

[aynalserat 17]

باعرض سلام اینم از آموزش فارسی سازی و بهینه سازی قالب های طراحی شده تحت فریم ورک t3 به روش کاملا استاندارد و اصولی:

فقط دوستان عزیز توجه داشته باشند برای استفاده از این آموزش یا بایست ویدئوهای قبلی رو مشاهده کرده باشید یا اینکه آشنایی با فارسی سازی قالب های جوملا بصورت کلی و ساده داشته باشید.

لینک دانلود از آپارات:

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

موفق باشید

آقای sarj ویدئو خیلی بی کیفیت بود چیزهایی متوجه شدم ولی بازهم گیر کردم در صورت امکان به صورت متنی توضیح دهید یا ویدئو با کیفیت قرار بدید .

متشکرم

[aynalserat 17]

کسی نیست راهنمایی کنه ؟

با توجه به توضیحی که در فیلم آموزشی داده شده بود به دلیل پایین بودن کیفیت فیلم نتونستم درست متوجه بشم می تونید بیشتر توضیح بدید ؟

فایل style.css رو چطور باید درست کنم ؟ از کجا بیارم ؟

[alirezazare 54]

شما دقدیق بفرمایید قصد چه کاری دارید تا بهتر و سریعنر راهنمایی شوید .

شما فایل بزساید اسمش رو بزارید style و پسوندش رو بزارید css

[sarj 31]

کسی نیست راهنمایی کنه ؟

با توجه به توضیحی که در فیلم آموزشی داده شده بود به دلیل پایین بودن کیفیت فیلم نتونستم درست متوجه بشم می تونید بیشتر توضیح بدید ؟

فایل style.css رو چطور باید درست کنم ؟ از کجا بیارم ؟

دوست غزیز لطفا کامل سوالتون رو مطرح کنید؛در چه فریم ورکی شما در نظر داشتید؟

[aynalserat 17]

شما فایل استایل رو از کجا اوردید ؟

محتواش چی هست ؟

[sarj 31]

شما فایل استایل رو از کجا اوردید ؟

محتواش چی هست ؟

عرض کردم در چه فریم ورکی منظور شما هست؟

[aynalserat 17]

روی فریم ورک t3 دارم کار می کنم

اگر توجه کنید در پست شماره 13 برای آموزش فریم ورک t3 نقل قول گذاشتم

[sarj 31]

اونجا شما بایست فایلی بنام custom.css ایجاد کنید و با فایرباگ المنت هایی که تمایل دارید تغییر پیدا کنند رو توی اون فایل درج کنید و attribute های خاص خودش رو براش تعریف کنید.مثلا:

h1{
font-family:b yekan;
font-size:13px;
}

[aynalserat 17]

توی فایل های قالب فایل custom.css موجود هست همچنین امکان انتخاب فونت از تنظیمات قالب هم فراهم شده است .

خب در فایل style.css چی باید بنویسیم ؟

[sarj 31]

توی t3 تا جایی که من اطلاع دارم جایی برای انتخاب فونت در فریم ورک وجود نداره شما بایست فونت دهی خودت رو در فایل custom.css انجام بدی

توی فایل style.css نمیخواد تغییری ایجاد کنید چون وقتی less2css انجام میدی همه کارهایی که کردید از بین میره

لذا تنها فایل custom.css بایست ویرایش بشه

[aynalserat 17]

من فکر کنم پستی ارسال کردم کسی حذف کرد ؟

مجدداً عرض می کنم به سوال من توجه کنید

آنچه که فرمودید رو من می دونم تنها مشکلم اینه که شما

فایل style.css رو از کجا اوردید و محتویاتش رو چی قرار دادید ؟

[sarj 31]

من فکر کنم پستی ارسال کردم کسی حذف کرد ؟

مجدداً عرض می کنم به سوال من توجه کنید

آنچه که فرمودید رو من می دونم تنها مشکلم اینه که شما

فایل style.css رو از کجا اوردید و محتویاتش رو چی قرار دادید ؟

بزرگوار اصلا بنده فایل style.css نمیارم که نمیدونم شما اینو از کجا میگید تنها فایلی که بنده تهیه کردم از قبل فایلی هست که کلاس فونت رو بهش از قبل آماده دادم بدین شکلتوی همون custom.cssوارد کنید):

@font-face
{
 font-family:'yj';
src: url('../fonts/BYekan.eot?#') format('eot'),  /* IE6–8 */
    url('../fonts/BYekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/BYekan.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

بعد المنت ها رو فونت دهی میکنم

[CO-2014 23]

درود

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

dasan.ir-_T3_Framework_video_tutorials_-_How_to_add_new_web_fonts_and_Google_fonts_[YT-f22][EEenVoXzHEA]

این مطلب هم تو مستندات فریم ورک T3 هست. میتونید استفاده کنید.

: Add / install new fonts

BS3 Customization - T3 - Joomla Template Framework

اگر نتونستید به وبسایت مراجعه کنید، (فی لتر شکن میخواد) مطلب در این فایل قرار داده شده.

Add and install new fonts