آژانس هواپیماییexchanging

آموزش طراحی قالب های whmcs

شروع موضوع توسط IACbook ‏5 آگوست 2010 در انجمن HTML

  1. IACbook

    IACbook کاربر تازه وارد

    تاریخ عضویت:
    ‏5 آگوست 2010
    نوشته ها:
    5
    تشکر شده:
    0
    درود

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

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

    ابتدا در مرحله اول ، آموزش را بصورتی شروع می کنیم که فرض می شود قالب اچ تی ام ال آماده کردید و میخوایم اون قالب رو برای whmcs مهیا کنیم. برای این کار هم یک قالب برای دانلود قرار میدم که روی اون قالب کار می کنیم و تصاویر طراحی و مراحل کار روی این قالب انجام می شوند و در نهایت که این قالب برای whmcs آماده خواهد شد.
    پس از آنکه اولین قالب رو با whmcs آماده کردیم مطمئنا" همه دوستان قادر به طراحی قالب های خودشون برای این سیستم خواهند بود و وارد مراحل حرفه ای آموزش خواهیم شد.
    (چون همزمان با هم در مراحل طراحی این قالب پیش میریم احتمال داره که در مسیر طراحی به مشکلاتی هم برخورد کنیم که مطمئنا" اینها مشکلاتی خواهند بود که بدون شک شما هم ممکنه در هنگام طراحی خود به آنها برخورد کنید که فکر کنم روش مناسبی باشه ..... )

    موارد مورد نیاز جهت طراحی :

    1- نرم افزار Dreamweaver
    2- مرورگر قدرتمند موزیلا فایرفاکس
    3- نصب افزونه webdeveloper بر روی مرورگر ( از اینجا دانلود و نصب کنید )


    پیش نیازها :

    1- داشتن اطلاعات در مورد طراحی قالب های اچ تی ام ال ( سعی می کنیم به نحوی آموزش داده شود تا همه دوستان بتوانند استفاده کنند )
    2- داشتن اطلاعات در مورد سی اس اس ( همزمان سعی می کنیم هر موردی که برای سی اس اس لازم هست رو هم آموزش بدیم )
    3- نصب whmcs بر روی هاست (در شاخه ای بصورت آزمایشی و نه بر روی سایت اصلی! ) جهت مشاهده تغییراتی که در قالب داده می شود و مشاهده نتایج کار
    4 - داشتن قالب portal برای whmcs
    5 - بسته زبان فارسی سیستم

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

    ( استفاده از قالب portal دلیل داره که میگم! )

    ---------- Post added at 08:58 PM ---------- Previous post was at 08:09 PM ----------

    دانلود موارد مورد نیاز:

    دانلود نرم افزار Dreamweaver
    Pass: warez-bb

    دانلود قالب اچ تی ام الی که روی اون کار خواهیم کرد:
    http://www.iacbook.com/upload/Hosting.zip

    تصویر قالب:
    http://up.iranblog.com/Files/607d8d487df343809761.jpg


    دانلود زبان فارسی قالب های whmcs :
    http://www.iacbook.com/upload/farsi.txt.zip

    دانلود قالب پورتال برای این سیستم ( قصد داریم از نام تمپلیت های این قالب استفاده کنیم و لازم است این قالب رو روی سیستم خودتون داشته باشید)
    http://www.iacbook.com/upload/portal.zip

    ---------- Post added at 09:12 PM ---------- Previous post was at 08:58 PM ----------

    اینم دموی قالبی که میخوایم برای whmcs آماده کنیمش:

    Hosting Company

    ---------- Post added at 09:58 PM ---------- Previous post was at 09:12 PM ----------

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

    دقت کنید وقتی وارد پوشته portal در شاخه tamplate میشید کلی تمپلیت مشاهده می کنید که همشون با پسوند .tpl هستند و هر کدوم اینا مربوط به یک قسمت از سیستم هستند.
    مثلا" یکی مربوط به قالب صفحه اصلی هست (homepage.tpl )
    یکی مربوط به ستون سمت راست هست ( footer.tpl )
    یکی مربوطه به هیدر سایت هست ( header.tpl )
    یکی مربوطه به صفحه بازاریابیه ...
    یکی برای صفحه جستجوی دامینه ...
    و ....

    دقت کنید که بعضی از اینها برای یک صفحه کامل هستند و بعضی هم برای یک قسمتی از صفحه ( مثلا" قالب ستون سمت راست سایت )

    پس تا اینجا دیدیم که هر صفحه از سایت یک قالب داره و اینها مربوط به صفحات سایت هستند.
    مثلا" وقتی کاربر از منوی راست روی گزینه ناحیه کاربری کلیک می کنه وارد لینک clientarea.php میشه که در اینصورت صفحه اصلی سایت که در تمپلیت ها homepage.tpl بود به صفحه دیگر تغییر می کند که یکی دیگر از این قالبهاست !
    اما منوی سمت راست همچنان در جای خود باقیست (اسم قالب ستون سمت راست هم footer.tpl هست ) . باقی موندن این منو در جای خود بدلیل سی اس اس هست. یعنی سی اس اس قالب گفته که یه ستونی به این عرض در این قسمت قرار بگیره و اسمش رو هم گفته !

    برای مشاهده این موضوع وارد فایل style.css بشید ( در شاخه template/portal/style.css )
    کد:
    [LEFT]
    #side_menu{background-color:#EFF5FF;border-left:1px solid #CFE2FF;float:right;margin:0;padding:15px;text-align:left;width:219px;}
    #side_menu ul{list-style:none;margin:0 0 10px;padding:0;}
    #side_menu ul li{line-height:25px;margin:0;padding:0;}
    [/LEFT]
    side_menu مشخصات این قسمت از قالب هست که به ترتیب از بالا به پایین زبونش رو ترجمه می کنم که چی گفته ! ;)
    background-color:#EFF5FF یعنی رنگ پشت زمینه #EFF5FF باشه

    border-left:1px solid #CFE2FF یعنی سمت چچ یک حاشیه به ضخامت 1px و به رنگ #CFE2FF و از نوع solid

    float:right یعنی در سمت راست قرار گرفته ( دقت کنید که بدون اطلاع این راست و چپ رو تغییر ندید!! )

    margin:0 یعنی از بیرون هیچ حریمی نداشته باشه

    padding:15px یعنی از داخل دارای حریم 15px باشه ( یعنی نوشته ها و گزینه های منو از حاشیه ها فاصله 15 پیکسل داشته باشند )

    text-align:left گفته متن چپ چین باشه ( این سی اس اس قالب پیشفرضه که هنوز فارسی نکردیمش و هدفمون هم فارسی کردن این نیست و فقط میخوایم یک مواردی شرح داده بشه )

    width:219px یعنی عرض ستون 219 پیکسل باشه

    side_menu ul این برای سبک لیست منو هست که جلوش گفته شده list-style:none یعنی لیستمون هیچ استایلی نداشته باشه ( مثلا" کنارش دایره دار نباشه و ... )

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

    تا اینجا اگر سوالی هست بگید تا وارد قسمت بعدی بشیم.
    ممنون

    ---------- Post added at 11:15 PM ---------- Previous post was at 09:58 PM ----------

    خوب مثل اینکه تا اینجا هم مشکلی نبود

    حالا طراحی رو میخوایم شروع کنیم :

    ابتدا در شاخه template در داخل هاست یک فولدر جدید بسازید مثلا" به اسم orange که اسم قالب جدید ما باشه

    حالا وارد شاخه portal شوید و select all بزنید و همه رو کپی کنید در فولدری که برای قالبتون ساختید ( همون فولدر orange )

    الان style.css و پوشه images که مربوط به قالب قبلی هستند رو حذف کنید و بجاش از قالبی که خدمتتون ارائه دادم فایل style.css و فولدر images رو در فولدر قالب جدید (orange ) آپلود کنید .

    فایل index.html قالب html را با نرم افزار Dreamweaver باز کنید و کل کدهاش و کپی کنید و از داخل هاست وارد فولدر orange شده و روی تمپلیت homepage.tpl راست کلیک کنید و کل کدها را پاک کرده و کدهای index.html قالب خودتون رو توش قرار بدید و فایل رو ذخیره کنید.
    حال از داخل whmcs وارد setup و General setting شده و قالب orange را فعال کرده و قالب رو تا اینجا مشاهده نمایید.

    تا به اینجا قالب سایتمون بصورت زیر شده :
    http://up.iranblog.com/Files/3757b6a1e22448c4b8ba.jpg

    هنوز تا یه قالب درست و حسابی زیاد فاصله داریم. اما مرحله اول رو با موفقیت انجام دادیم...

    ---------- Post added at 11:17 PM ---------- Previous post was at 11:15 PM ----------

    بازهم اگر تا اینجا اگر دوستان سوالی دارند بفرمایند تا وارد مرحله بعدی بشیم...

    ---------- Post added 10-08-03 at 12:23 AM ---------- Previous post was 10-08-02 at 11:17 PM ----------

    خوب حالا زمان این رسیده تا از قدرت بی نظیر افزونه web developer که بر روی مرورگر خود نصب کردیم توی این قسمت از کار استفاده کنیم !

    از منوی این افزونه روی css کلیک کنید و view style information را انتخاب کنید.
    بصورت زیر:

    [​IMG]



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


    [​IMG]



    دقت کنید ، همانطور که در زیر قالب خود مشاهده می کنید همه منویی که در قالب پورتال در سمت راست بود الان در زیر قالب قرار گرفته و از طرق افزونه web developer هم می توانید آدرس سی اس اس اون رو مشاهده کنید.
    وقتی ماوس را بر روی قسمت های پایین قالب می برید آدرس هایی در نوار مربوطه نمایش داده میشه که همشون به آی دی side_menu ختم میشن .

    اما همانطوریکه میدانید ما در سی اس اس جدید اصلا" side_menu نداریم !
    اما تمپلیتش در حال حاضر در شاخه orange که ما ساختیم وجود داره و div مربوطه هم توسط سیستم تعریف شده ، ولی چون توی سی اس اس تعریف نشده ، بنابراین در زیر قالب نمایش داده شده .

    اکنون وارد پوشه orange و فایل footer.tpl شوید و کل کدها رو پاک کنید. سپس ذخیر نموده و ببندید.

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

    تا اینجا سایت ما بصورت تصویر زیر شده:


    [​IMG]


    تا اینجا اگر سوالی هست بفرمایید.
    اگر در نحوه آموزش هم مشکلی هست بگید. ;;)
     
  2. IACbook

    IACbook کاربر تازه وارد

    تاریخ عضویت:
    ‏5 آگوست 2010
    نوشته ها:
    5
    تشکر شده:
    0
    درود

    شروع می کنیم به ادامه آموزش

    تا اینجا رسیدیم که قالب رو فعلا" در سیستم whmcs همانطوریکه هست به نمایش در بیاریم.
    قبل از اینکه وارد مرحله بعدی بشیم یک تغییر دیگه هم باید در قالبتون بدید. همانطوریکه در شکل بالا مشاهده می کنید هنوز قسمت بالای قالبمون یک چیزایی اضافه هستند که اونا رو هم میخوایم حذف کنیم تا اینکه تازه به حالت اصلی قالب اچ تی ام المون برسیم.
    برای اینکار قالب header.tpl را بر روی کامپیوتر خود با نرم افزار dreamweaver باز کنید و نرم افزار رو روی پنجره design قرار بدید و همه صفحه رو پاک کنید . سپس وارد قسمت code در همان فایل شده و کدهای صفحه خالی را کپی کنید و وارد هاست شده و از پوشه orange فایل header.tpl رو باز کرده و این کدها رو توش قرار بدید و سپس ذخیره کرده و پنجره را ببندید.

    توجه مهم : دقت کنید که صفحه سفید شما که توسط dreamweaver ایجاد شد باید دارای کدهایی باشد و اگر از تمپلیت header.tpl همه کدها رو حذف کنید قالب شما اجرا نمیشه و یا اینکه بهم خواهد ریخت. بنابراین اشتباه نکنید و هیچگاه کل کدهاش رو حذف نکنید! صفحه سفید باید دارای کد باشد...

    اکنون تازه به قالب اولیه اچ تی ام ال خودمون رسیدیم و تازه تونستیم که قالبمون رو در whmcs به نمایش دربیاریم.
    تا اینجا حتما" مراحل رو خودتون انجام بدید تا موضوع رو خوب درک کنید.

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

    بازم اگر سوالی بود بفرمایید

    ---------- Post added at 08:48 AM ---------- Previous post was at 07:04 AM ----------

    خوب حالا نوبت به متغیرهای سیستم رسید که این قسمت بسیار بسیار مهمه

    هر متغیری حاوی عدد و یا عبارتی هست که وقتی اون متغیر رو در قالب خودتون قرار بدید در هنگام اجرای قالب محتویات متغیر نمایش داده میشه.
    متغیرهایی که حاوی کلمه ای هستند معمولا" در یک LANG ضرب شده اند! یعنی با توجه به زبان فعال سیستم محتویات داخلشون نمایش داده میشه.

    خوب اگر در صفحه اصلی پورتال رو دیده باشید 2 ستون و 6 ردیف وجود داره .
    هر کدوم اینا یک عنوان دارند که بصورت لینک هست و یک نوشته توضیحی در زیرشون اومده
    میشه 6 * 2 * 2 = 24 متغیر
    یک تعداد متغیر هم در منوی سمت راست سیستم قرار داره
    یک تعداد متغیر هم در منوی بالا قرار داره که وقتی کاربر وارد میشه نمایش داده میشن
    متغیرهای دیگری هم وجود دارند که در صفحات دیگر سیستم هستند ....

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

    البته بعضی موارد رو هم باید از تمپلیت های دیگر سیستم بردارید. مثلا" اگر بخواید جستجوی دامین رو در صفحه اصلی قرار بدید یا ....

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

    ابتدا از روی هاست کدهای مربوط به homepage.tpl رو از قالب orange بردارید و در dreamweaver یک فایل جدید بازکنید با فرمت html و کدهای homepage.tpl رو توی این فایل قرار بدید و حالا برید روی پنجره design

    از اینطرف وارد قالب PORTAL در کامپیوتر خودتون بشید و تمپلیت footer.tpl رو با نرم افزار Dreamweaver باز کنید.
    نرم افزار رو در حالت پنجره Design قرار بدید و کل جعبه مربوط به فرم ورود رو انتخاب کنید و کپی کنید و الان وارد فایل homepage.tpl که در dreamweaver بازش کرده بودید بشید و این جعبه عضویت رو که کپی کردید توی ستون سمت راست پیست کنید.

    در پست بعدی تصاویر مربوط به این توضیحات رو قرار خواهم داد.
    ( صبر کنید تا تصاویرش رو بسازم :دی )

    ---------- Post added at 10:27 AM ---------- Previous post was at 08:48 AM ----------

    دقت کنید دوستان که برای قراردادن قسمت ورود به سایت در ستون سمت راست قالب سایتمون باید وارد تمپلیت footer.tpl از قالب پورتال بشید و از پنجره ی design از جاییکه کد {if $loggedin} قرار دارد انتخاب کنید تا {/if} در آخر صفحه
    این قسمت در واقع یک دستور شرطی هست که میگه اگر کاربر وارد شده منو رو به همراه اطلاعات حساب های مالی کاربر نمایش بده و اگر وارد نشده فرم ورود رو نمایش بده ........

    اگر فقط فرم ورود رو بدون دستور شرطی قرار بدید کاربر حتی اگر وارد سایت هم بشه باز فرم ورود رو اونجا نشون میده و فکر می کنید که سایتتون مشکل داره !
    این دستورات شرطی خیلی مهم هستند و اگر بدرستی ازشون استفاده نشه خیلی مشکل آفرین خواهند شد !
    بنابراین در جاهاییکه میخواید یک قسمت رو انتخاب کنید و وارد قالبتون کنید حتما" باید به دستورات هم دقت کنید و در واقع یکبار دستورات موجود در صفحه رو مرور کنید و ببینید که چه اتفاقی داره میفته

    ---------- Post added at 10:35 AM ---------- Previous post was at 10:27 AM ----------

    قالبی که درست کردیم رو تا اینجای کار میتونید از لینک زیر دانلود کنید و ببینید.

    www.IACbook.com/test/templates/orange1.zip

    دانلود کنید و روی whmcs خودتون فعالش کنید و تا اینجا کار رو مشاهده نمایید....

    البته این هنوز اول کاره ! هر چندین قدمی که جلو میریم سعی می کنم یک فایل از قالب تولید شده تا اون قسمت از کار برای دانلود قرار بدم ...
     
  3. IACbook

    IACbook کاربر تازه وارد

    تاریخ عضویت:
    ‏5 آگوست 2010
    نوشته ها:
    5
    تشکر شده:
    0
    خوب حالا میخوایم اون جدول منوهایی که در قالب پورتال قرار داره رو به صفحه اصلی قالبمون منتقل کنیم.
    اینم که کار خیلی ساده ای هست !
    مثل همیشه از قالب پورتال روی سیستمتون homepage.tpl رو باز کرده و جدول رو انتخاب می کنید و وارد قالبتون می کنید ....

    در حال حاضر فونت های قالب هم استاندارد نیستند و بهتره که از تاهوما استفاده بشه. بنابراین فایل style.css رو روی هاست باز کنید و از منوی بالای مرورگر خودتون edit و سپس FIND رو زده و کلمه ARIAL رو جستجو کنید و هرچی ARIAL دیدید رو به tahoma تبدیل کنید.

    حالا من یک مقدار به جدول بصورت سلیقه ای رنگ و رو دادم و چندتا عکس برای گزینه هاش قراردادم که در نهایت قالبمون بصروت تصویر زیر شد:


    البته اینجا فقط قصد آموزش داریم و اینکه بخوایم به قالبی که داریم طراحی می کنیم افکت بدیم و گرافیکی کار کنیم فعلا" برامون اهمیت نداره !
    فعلا" دستور کار مهمه ...
    [​IMG]
     
  4. IACbook

    IACbook کاربر تازه وارد

    تاریخ عضویت:
    ‏5 آگوست 2010
    نوشته ها:
    5
    تشکر شده:
    0
    آموزش رو ادامه میدیم چون قصد داریم مواردی را در این تاپیک ارائه بدیم که آموزش آنها در هیچ کجای اینترنت قرار داده نشده است !

    خوب قبل از اینکه وارد ادامه آموزش بشیم لازمه که نکاتی ذکر شود:

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

    این استایل های داخلی چه زمانی ایجاد می شوند؟
    زمانیکه شما مثلا" یک متن را در نرم افزار Dreamweaver انتخاب می کنید و رنگش رو تغییر میدید در واقع یک استایل وارد قالب شما شده است و همین دستور باعث میشه که قالب شما کار نکند.

    بنابراین استایل هایی که قصد دارید به قسمت های مختلف قالبتون بدید رو باید از طریق style.css آدرس دهی کنید و انجام بدید.

    ---------- Post added at 06:19 AM ---------- Previous post was at 05:43 AM ----------

    تعدادی از متغیرهای سیستم رو به همراه کاربردشون در اینجا لیست می کنیم تا کار شما هنگام طراحی راحت بشه :
     
  5. fcbarcairan

    fcbarcairan Registered User

    تاریخ عضویت:
    ‏7 جولای 2010
    نوشته ها:
    1,214
    تشکر شده:
    228
    من اکثر قالبهایی که برای این سیستم دیدم با سافاری مشکل دارند نمیدونم چرا کسی میدونه دلیلش چیه؟؟
     
  6. IACbook

    IACbook کاربر تازه وارد

    تاریخ عضویت:
    ‏5 آگوست 2010
    نوشته ها:
    5
    تشکر شده:
    0
    من در مورد سافاری زیاد اطلاعات کاملی ندارم! اما به نظرم کافیه از طرق هک مرورگر مشکلات آی ای رو برطرف کنید و با خیال راحت از قالبتون استفاده کنید. چون مهم آی ای هست که استفاده کننده ی زیادی داره ، ولی سافاری فکر نمی کنم توی ایران طرفدار داشته باشه !
     
  7. appbannerkhuniresbanner