sarj

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

37 پست در این موضوع

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites


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

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

  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

Share this post


Link to post
Share on other sites

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

در این قسمت دستورات پایه و ساده 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

Share this post


Link to post
Share on other sites

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

در این قسمت آموزش فارسی سازی و بهینه سازی قالب های ساده جوملا مثل قالب های 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;

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

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

موفق باشید

Share this post


Link to post
Share on other sites
میشه آموزش فارسی سازی قالب های با فریم وورک t3 رو اینجا قرار بدهید

با تشکر

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

موفق باشید

Share this post


Link to post
Share on other sites

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

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

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

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

موفق باشید

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites

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

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

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;
}

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

Share this post


Link to post
Share on other sites

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

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

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

با تشکر

Share this post


Link to post
Share on other sites
با سلام خسته نباشید ،

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

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

با تشکر

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

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

Share this post


Link to post
Share on other sites

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

برای تغییر فونت در فریم ورک 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;

}

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

موفق باشید

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
باعرض سلام اینم از آموزش فارسی سازی و بهینه سازی قالب های طراحی شده تحت فریم ورک t3 به روش کاملا استاندارد و اصولی:

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

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

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

موفق باشید

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

متشکرم

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
کسی نیست راهنمایی کنه ؟

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

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

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

Share this post


Link to post
Share on other sites
شما فایل استایل رو از کجا اوردید ؟

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites
من فکر کنم پستی ارسال کردم کسی حذف کرد ؟

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

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

فایل 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+ */
}

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

Share this post


Link to post
Share on other sites

درود

این فیلم رو خود جوملا آرت در مورد افزودن فونت به 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

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

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

دارای حساب کاربری هستید؟ از اینجا وارد شوید


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