تنظیمات و سفارشی سازی فریم ورک Warp (یوتم)

[Mahboobe.Maleki 53]

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

بنابراین این تاپیک همون طور که از اسمش پیداست، قرار نیست طراحی قالب با فریم ورک warp رو یاد بده فقط تغییرات و اصلاحات... (البته با همین تغییرات شما میتونید یه قالب جدید در بیارید!!)

برای شروع کار کافیست شما به لینک زیر برید و روی قالب Master کلیک و بسته مورد نظرتون رو انتخاب و دانلود کنید ( بهتره نسخه های Demo Package مربوط به جوملا 2.5 یا 3.1 رو دانلود کنید تا به راحتی بتونید قالب رو بسازید ) ، با دانلود این بسته شما آخرین نسخه وارپ 6 رو دریافت می کنید و سپس می تونید از طریق آموزش های فارسی زیر که با همکاری دوستان آماده شده قالب اختصاصی خودتون رو بسازید با تشکر

Downloads - YOOtheme

دسته بندی آموزش ها :

شروع کار :

نصب قالب های قدرت گرفته از وارپ در جوملا

نصب بسته های نصب آسان ساخته شده با وارپ

تنظیمات قالب

تنظیم لوگو

تنظیم منوی جوملا

تنظیم ماژول جوملا

نحوه استفاده از پروفایل ها

نحوه بروزرسانی

سفارشی سازی :

نحوه سفارشی سازی

ساختار توضیح داده شده فایل های موجود در دایرکتوری قالب

ساخت استایل جدید

ساخت موقعیت ماژول جدید

ساخت طرحبندی ماژول جدید

ساخت استایل ماژول جدید

افزودن فایل CSS ، JS و فونت جدید

جایگزین کردن فایل های سیستم

ساخت فایل های زبان

سفارشی سازی صفحه های خطا

رفع مشکل :

نحوه رفع مشکلات قالب

مشکلات نصب

مشکلات سطوح دسترسی فایل ها

خطا های جاوا اکسریپت

اعتبار سنجی خطا ها

بروزرسانی به جوملا 3.1

آموزش های اختصاصی :

نحوه تغییر کتابخانه Jquery ( جهت رفع مشکلات تداخل )

نحوه افزودن کالرپیکر به قسمت مدیریت وارپ

نحوه ساخت یک سفارشی ساز پایه در قسمت تنظیمات قالب

آموزش تصویری افزودن فونت به قالب های یوتم ( وارپ 6)

دوستان اگر مشکلی با وارپ 6 یا 7 ( البته نسخه رایگان وارپ 7 هنوز منتشر نشده ) دارین که نتونستین حل کنین به تاپیک زیر برید و سوالتون رو بپرسین :

مهم مشکلات و سوالات عمومی پیرامون قالب های وارپ ( یوتم )

ویرایش شده در بهمن 92 توسط Vahid Taheri
دسته بندی مطالب

[Mahboobe.Maleki 53]

استایل جدیدی که میخوایم بسازیم، اسمشو میذاریم Mini.

اول یک فولدر به نام Mini در مسیر \templates\Your-Yootheme-Template\styles می سازیم. مثل تصویر:

[ATTACH=CONFIG]4457[/ATTACH]

در مرحله ی بعد، میخوایم layout پیش فرض رو با override تغییر بدیم و بصورت دلخواه خودمون در بیاریم. layout پیش فرض در مسیر /layouts/template.php هست. یک فایل و فولدر با همین نام در فولدر Mini خودمون می سازیم:

/styles/Mini /layouts/template.php.

حالا نوبت به فایل css می رسه. از فایل /css/layout.css یک کپی بگیرید و در مسیر /styles/Mini/css/layout.css بذارید. (پوشه هایی که نداریم رو هم ایجاد میکنیم در اینجا یه پوشه با نام css در فولدر Mini ساختیم و فایل layoyt.css رو داخلش کپی کردیم)

برای انجام تغییرات، میتونیم این فایل Css رو تغییر بدیم. ولی نیازی نیست که تمام محتوای فایل اصلی رو داشته باشیم . ممکنه تغییر ما در حد یک تغییر رنگ متن باشه و نیازی نباشه دوباره کل محتویات فایل css/layout.css رو override کنیم. به این منظور کافیه که محتویات فایل رو بصورت زیر داخل فایل css خودمون ایمپورت کنیم و بعدش تغییرات خودمون رو در چند خط اضافه کنیم

@import url(../../../css/layout.css)

(البته اینو ابتدای فایل css خودتون بذارید)

درباره ی @import میتونید اینجا اطلاعات خوبی بدست بیارید. دقت کنید که مسیر رو در مثال بالا درست بزنید.

روشی که برای override استفاده کردیم میتونه شامل تصاویر، جاوااسکریپت ها و استایل شیت های default theme هم بشه. بصورت معمول پوشه ی mini ما میتونه شامل موارد زیر هم باشه (بطور ساده تر شما از ldefault theme قالب یوتمی که نصب کردید، میتونید هر چیزی رو هم inherit کنید هم override.

[ATTACH=CONFIG]4458[/ATTACH]

استایل جدیدی که ساختیم باید در theme settings قالب یوتم خودمون ( مدیریت قالب) قابل مشاهده باشه.

برای فعال کردن استایل جدیدمون، به تب profile میریم و منوی پایین افتادنی ای که توش پروفایل پیش فرض (معمولا با اسم default) فعاله، باز می کنیم و استایل خودمون رو انتخاب می کنیم

[Mahboobe.Maleki 53]

در اکثر قالب های جوملایی صفحات پیغام خطای 404، آفلاین بودن سایت وجود دارن. همین طور هشدار برای نسخه های قدیمی مرورگر (مثلا اگه کاربر با IE6 سایت رو باز کرده یه هشداری بهش داده میشه که برو مرورگرتو آپ دیت کن)

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

خروجی HTML صفحات خطا (404، خطای مرورگر قدیمی و صفحه ی آفلاین offline mode)، در مسیر /warp/layouts قرار گرفته. (مسیر دهی از داخل پوشه ی templates و اسم قالب شماست که برای رعایت اختصار نیاوردم)

صفحات خطا: /warp/layouts/error.php

صفحه مد آفلاین: /warp/layouts/offline.php

برای override کردن این فایل ها رو میتونید به استایل جدیدی که در پست قبلی ساختیم، اضافه کنید و فایل ها رو مطابق میلتون تغییر بدید

مسیر کپی فایل ها با تو جه به مثال پست قبلی ما میشه این شکلی:

/styles/Mini/layouts

و یه توضیح اینکه استفاده از override کلا باعث میشه که در صورت آپ دیت شدن هسته ی جوملا ( و در اینجا قالب یو تم)، هیچ اتفاقی برای تغییراتی که ما دادیم نیفته و اونا به قوت قبل باقی بمونن.

[Vahid Taheri 74]

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

1- در پوشه ی custom یک پوشه ی جدید با نام fonts بسازید و فایل های فونت خود را داخل آن بریزید( فایل های tiff,woff,eot,svg)

2- در پوشه ی /custom/less/ یک فایل با نام theme.less بسازید و در اون از کد های font-face استفاده کنید.

3- در پوشه ی /custom/less/ یک فایل با نام customizer.json و گزینه های فونت خود را داخلش بزنید.

کار تمام است . حالا شما میتوانید فونت خود را از داخل مدیریت انتخاب کنید.

نمونه ی کد برای این مرحله :

{
   "controls": [
	{
           "type": "font",
           "vars": [
               "*-font-family"
           ],
           "options": [
               {"name": "B Yekan", "value": "\"BYekan\", Tahoma, Arial"}
           ]
       }
]
}

برای اضافه کردن یه آیتم دیگه یه , آخر عبارت {"name": "B Yekan", "value": "\"BYekan\", Tahoma, Arial"} میزاریم و در خط بعد مثل همون کد یه کد مینویسیم و مقدار فونتش رو عوض میکنیم

خوب حالا هر بخش چی هست :

{
   "controls": [
	{
           "type": "font",
           "vars": [
               "*-font-family"
           ],
           "options": [
               {"name": "نام نمایشی در مدیریت", "value": "\"فونت اضافه شده\", فونت جایگزین اول, فونت جایگزین دوم"}
           ]
       }
]
}

(البته یکم کد ها بخاطر ltr بودن بهم ریخته ولی نمونه ی اول سالمه)

فکر نمیکنم دیگه مشکل باشه. برای نسخه 6 هم بزودی قرار میدهم.

موفق باشید

ویرایش شده در فروردین 93 توسط Vahid Taheri

[amin.poorsaeed 26]

سلام دوستان برای اینکه این تاپیک شلوغ نشه و به راحتی به مطالب تاپیک دسترسی داشته باشین من دسته بندی مطالب رو به پست اول اضافه کردم و پست های اضافه رو از تاپیک حذف کردم ، از کاربران عزیز هم خواهش می کنیم که اگر مشکلی داشتن به لینکی که در پست اول تاپیک ارائه شده مراجعه کنند .

[amin.poorsaeed 26]

سلام دوستان کتابخانه جی کوئری پیشفرض مورد استفاده در وارپ 6 کمی تغییر داده شده به همین دلیل وقتی شما پلاگین خاصی رو به قالبتون اضافه کنید متوجه میشید که اون پلاگین کار نمی کنه به همین دلیل شما مجبورید که یه کتابخانه جیکوئری جدید جایگزین قبلی کنید برای این کار آموزش ساده زیر رو ادامه بدین

اول از همه به این لینک برید و فایل رو ذخیره کنید تا آخرین ویرایش نسخه 1.x جی کوئری رو دریافت کنید بعد از دریافت و ذخیره این فایل به پوشه زیر در قالبتون برید

\warp\libraries\jquery

و فایل دانلود شده رو به این مسیر انتقال بدین مهم نیست که جایگزین جی کوئری قبلی کنید یا جیکوئری قبلی رو حذف کنید

سپس این فایل را باز کنید

\warp\systems\joomla\config\elements\config.php

و به سطر 29 برید که این کد در اون قسمت هست

$warp['system']->document->addScript($warp['path']->url('lib:jquery/jquery.js'));

کد بالا رو با این کد

$warp['system']->document->addScript($warp['path']->url('lib:jquery/jquery-1.10.2.min.js'));

جایگزین کنید البته دقت کنید که فایل دانلود شده رو با چه اسم ذخیره کردین به صورت پیشفرض اسم اون فایل باید jquery-1.10.2.min.js باشه .

سپس فایل زیر رو باز کنید

\warp\systems\joomla\layouts\head.php

و به سطر 21 برید که کد زیر در اون قسمت هست

// load jQuery, if not loaded before
if (!$this['system']->application->get('jquery')) {
$this['system']->application->set('jquery', true);
$this['system']->document->addScript($this['path']->url('lib:jquery/jquery.js'));
}

اگر به این کد دقت کنید در این کد گفته شده که اگر کتابخانه دیگه ای نبود کتاخانه مد نظر ما رو بارگذاری کنه برای مثال اگر فردا شما کامپوننت ویجت کیت نصب کنید قالب کتاخانه اون رو بارگذاری می کنه و این باعث میشه که پلاگین های دیگه کار نکنن به همین دلیل کد بالا رو با کد زیر جایگزین کنید :

// load jQuery, if not loaded before
$this['system']->document->addScript($this['path']->url('lib:jquery/jquery-1.10.2.min.js'));

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

[Vahid Taheri 74]

با سلام

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

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

مشکلات و سوالات عمومی پیرامون قالب های وارپ ( یوتم )

اگر کیفیتش هم پایین بود بگید تا یه کیفیت بالاترش رو قرار بدم

موفق باشید

-----------------------------------------------------

عنوان :آموزش تصویری افزودن فونت به قالب های یوتم ( وارپ 6)

سازنده : طراحان روز

مدت فیلم : 6 دقیقه و 31 ثانیه

سایز تصویر : 800 × 576

فرمت فایل : WMV

حجم فایل : 27.1 مگابایت

دانلود فیلم آموزشی از سرور مدیافایر

دانلود فیلم آموزشی از سرور طراحان روز

نمایش آنلاین فیلم آموزشی ( بزودی )

* بدلیل حجم نسبتا بالا وسرعت پایین اینترنت قادر به آپلود در آپلودسنتر انجمن نشدم ولی اگر لازم شد اون هم درست میکنم و قرار میدم

----------------------------------

[amir_seddighi 146]

درود

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

لینک دانلود از آپلود سنتر انجمن : warp-font-learning دانلود ● آپلود سنتر انجمن جوملای ایران

[mp_mp353 12]

قصد دارم در این آموزش نحوه ی قرار دادن فونت دلخواه در فریم ورک warp 7 رو قرار یدم.

لینک دانلود فایل آموزش

ابتدا وارد این پوشه بشید.

{theme}/less/

در ادامه در این آدرس یک پوشه به نام fonts ایجاد کنید و فونت های خود را در آن قرار دهید. برای مثال داریم

Less/fonts/BKoodak.eot
Less/fonts/BKoodak.svg
Less/fonts/BKoodak.ttf
Less/fonts/BKoodak.woff

حالا فایل theme.less را باز کرده و در انتهای آن دستور فونت فیس خود را قرار دهید.

برای مثال داریم:

[left]@font-face {
font-family: 'BKoodak';
src: url('fonts/BKoodak.eot');
src: url('fonts/BKoodak.eot?#iefix') format('embedded-opentype'),
	 url('fonts/BKoodak.woff') format('woff'),
	 url('fonts/BKoodak.ttf') format('truetype'),
	 url('fonts/BKoodak.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}[/left]

حالا فایل customizer.json را باز کنید و دنبال System Fonts بگردید.

حالا کافی است تا در بین System Fonts و Google Fonts یک بخش جدید با نام دلخواه خود قرار دهید. برای مثال Custom Fonts حالا داریم :

[left]"System Fonts": [  
       ...  
],  
"Custom Fonts": [  
       {"name": "B Nazanin", "value": "BNazanin"} ,
	{"name": "B Koodak", "value": "BKoodak"}
],  
"Google Fonts": [  
   ...  
][/left]

خوب مقدار name نامی است که میخواهیم برای فونت ما نمایش داده شود. و مقدار value نام فونت فیسی است که ما ایجاد کرده ایم.

حالا در تمام بخشی هایی که نمایش فونت قرار داشته باشد فونت های ما نمایش داده خواهند شد.

کافی است تا از بخش تنظیمات قالب روی Customizer کلیک کنیم.

امیدوارم آموزش به درد بخور بوده باشه

ویرایش شده در اردیبهشت 93 توسط mp_mp353

[Vahid Taheri 74]

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

مشکلات و سوالات عمومی پیرامون قالب های وارپ ( یوتم )

پست ها به تاپیک "مشکلات و سوالات عمومی پیرامون قالب های وارپ ( یوتم ) " انتقال یافتند ....

ویرایش شده در آبان 93 توسط Vahid Taheri

[mal2moh 10]

سلام

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

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

[mal2moh 10]

لطفا یه جوری باشه منظم که بدونیم چکار کنیم

[Mahboobe.Maleki 53]

دانلود آخری نسخه فریم ورک warp

دانلود نسخه 7.3.4 از آپلود سنتر انجمن :

yoo_master2_j3 دانلود ● آپلود سنتر انجمن جوملای ایران

yoo_master2_j25 دانلود ● آپلود سنتر انجمن جوملای ایران

[Mahboobe.Maleki 53]

اگر به تنظیمات قالب > ماژول ها در قالب warp تون مراجعه کنید، میبینید که امکان انتخاب رنگ باکس ها بر اساس استایلی که به قالب اختصاص داده شده وجود داره. که به این شکله

box-primary, box-secendary, box, default, blank

اگر بجز این دو سه استایل ، استایل دیگه ای برای باکس ها بخوایم به روش ساده زیر عمل می کنیم:

1- فایل tempaltes/your-warp7-temlate/css/custom.css رو باز می کنیم.

برای تعریف استایل مورد نظر به شکل زیر عمل می کنیم (در این مثال بک گراند باکس قرمز، رنگ فونت سفیده. هر چی که بخواین با css میتونین اضافه کنین دیگه)

.uk-panel-box-red {background:#f30;color:#fff;}

2- به ماژول مورد نظر میریم. در قسمت کلاس ماژول (module class suffix)، عبارت uk-panel-box-red رو وارد می کنیم. این کلاس ماژول به انتخابی که در مدیریت قالب برای نوع باکس این ماژول کردیم اولویت داره

[mustafaehsani 10]

برای ویرایش فایل css (Add custom CSS) قالبهای یوتم در warp7 به نحوی که هم بتونیم از تنظیمات قالب Styles>Customizer تغییرات خودمون اعمال کنیم و همچنین بتونیم کدهای css خودمون با ایجاد یک فایل جدید در style مربوطه اضافه کنیم باید به روش زیر عمل کرد.

1- ایجاد فایل theme.config.php در مسیر templates/yoo_whatever/custom/layouts

2- کدهای زیر را در فایل theme.config.php بنویسید

<?php    

require_once(__DIR__.'/../../layouts/theme.config.php');    


$this['asset']->addFile('css', 'css:YOUR-CSS.css');  

3- ایجاد فایل YOUR-CSS.css در مسیر templates/yoo_whatever/custom/css/YOUR-CSS.css

4- نوشتن کدهای css مورد نظرتون در فایل YOUR-CSS.css