Mahboobe.Maleki

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

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

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

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

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

Downloads - YOOtheme

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

شروع کار :

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

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

تنظیمات قالب

تنظیم لوگو

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

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

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

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

سفارشی سازی :

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

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

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

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

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

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

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

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

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

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

رفع مشکل :

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

مشکلات نصب

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

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

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

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

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

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش html و css آموزش لاراول آموزش cPanel آموزش php آموزش سئو وردپرس آموزش امنیت وردپرس آموزش وردپرس آموزش فرم ساز RSform آموزش سئو جوملا آموزش فروشگاه ساز Hikashop آموزش فروشگاه ساز ویرچومارت آموزش طراحی سایت آگهی تبلیغاتی آموزش امنیت جوملا آموزش طراحی سایت فروش فایل آموزش طراحی قالب ریسپانسیو با Helix آموزش جوملا 3 آموزش ساخت ربات دکمه ی شیشه ای آموزش ساخت ربات همکاری در فروش آموزش ساخت ربات جذب ممبر آموزش ساخت ربات ضد اسپم آموزش ساخت ربات پیوست فایل سورس ربات مدیر گروه | ربات مدیر گروه همسریابی

استایل جدیدی که میخوایم بسازیم، اسمشو میذاریم 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) فعاله، باز می کنیم و استایل خودمون رو انتخاب می کنیم

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

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

/styles/Mini/layouts

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

Share this post


Link to post
Share on other sites

وارپ به شما این اجازه رو میدهد تا از فونت های 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 هم بزودی قرار میدهم.

موفق باشید

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

سلام دوستان کتابخانه جی کوئری پیشفرض مورد استفاده در وارپ 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'));

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

Share this post


Link to post
Share on other sites

با سلام

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

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

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

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

موفق باشید

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

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

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

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

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

فرمت فایل : WMV

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

درود

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

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

Share this post


Link to post
Share on other sites

قصد دارم در این آموزش نحوه ی قرار دادن فونت دلخواه در فریم ورک 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 کلیک کنیم.

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

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

Share this post


Link to post
Share on other sites

ارسال شده در (ویرایش شده)

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

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

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

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

Share this post


Link to post
Share on other sites

سلام

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

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

Share this post


Link to post
Share on other sites

اگر به تنظیمات قالب > ماژول ها در قالب 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 رو وارد می کنیم. این کلاس ماژول به انتخابی که در مدیریت قالب برای نوع باکس این ماژول کردیم اولویت داره

Share this post


Link to post
Share on other sites

برای ویرایش فایل 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

Share this post


Link to post
Share on other sites

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

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

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

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


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

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

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


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