دخول

~~Dr.Desmond~~ · 2009-09-12, 10:04 AM

مرحبا
الملخص في اساسيات تحويل استايلات VB الى MyBB

اهم المتطلبات:
1- ان تكون لديك معرفة و لو الاساسيات فقط بال HTML و ال CSS
3- ان تعرف اساسيات قوالب MyBB
2-برنامج سيرفر محلي ....و يمكنك تحميله من هنا مع شرح التركيب
3-نسخة VB منزوعة الكود ....و يوجد الكثير منها هنا
4-نسخة منتديات MyBB
اول شيء تقوم به هو تركيب منتدى VB و منتدى MyBB على السيرفر المحلي

القوالب التي نحتاج نقلها:
قوالب ال HEADER و ال FOOTER بالدرجة الأساس...
قوالب ال CSS معظمها...

و سنأتي على الشرح الموجز لذلك
بعد تثبيت نسخة ال VB يجب عليك تثبيت الأستايل...
بالنسبة لمجلد الاستايل يتم وضعه اما بداخل رئيسية المنتدى (مجلد المنتدى) او بداخل مجلد IMAGES و ستجد ذلك مرفقا مع الاستايل...
بالنسبة لملف الاستايل XML يتم استيراده من خلال لوحة التحكم:
القوالب و الاستايلات>تصدير و استيراد الاستايلات >(اختر الاستايل الذي تريد رفعه)>تجاهل اصدار الاستايل > استيراد
الآن للدخول الى قوالب الاستايل أذهب الى:
القوالب و الاستايلات > ادارة الاستايل > امام الاستايل المعني اختر (اذهب)....

ستظهر لنا الصورة التاليه:

[صورة: 128.gif]

بالنسبة لكود الهيدر يجب علينا ان نقوم بنسخه بالكامل...لكنه يحتوي لى بعض اكواد ال VB و التي يجب ازالتها...
مثال الكود

كود :
$spacer_open

و

كود :
$_phpinclude_output

هذا ليس كافي...هنا يأتي دور معرفتك بلغة الهتمل حتى تستطيع اخذ الكود كاملا و بصورة صحيحة..و ايضا اذا كان الهيدر يحوي على روابط للتسجيل او البحث او المساعدة..الخ يجب عليك ان تستبدلها بما يقابله في ال MyBB
الآن بعد ان حصلنا على الكود كاملا يجب وضعه في قالب الهيدر الخاص بال MyBB
كل ما عليك فعله هو استبدال الكود التالي الموجود في الهيدر في ال MyBB بالذي نسخته من ال vb

كود :
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>

و اذا كنت تحتاج تعديل اضافي يمكنك فعل ذلك حسب معرفتك بالهتمل....
بعد عمل اي تعديل قم بحفظ العمل ثم قم بمعاينه نتيجة العمل حتى تتأكد من عدم وجود اي خطأ او كود غير مرغوب به

بالنسبة لكود الفوتر يجب عليك ان تنسخه ايضا و ان تستثني الأكواد التاليه منه:

كود :
<br />

<div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>

<br />

$spacer_close

<!-- /content area table -->

<form action="$vboptions[forumhome].php" method="get">

<table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="$stylevar[outertablewidth]" class="page" align="center">

<tr>

    <if condition="$show['quickchooser']">

 <td>

 <select name="styleid" onchange="switch_id(this, 'style')">

 <optgroup label="$vbphrase[quick_style_chooser]">

 $quickchooserbits

 </optgroup>

 </select>

 </td>

    </if>

    <if condition="$show['languagechooser']">

 <td>

 <select name="langid" onchange="switch_id(this, 'lang')">

 <optgroup label="$vbphrase[quick_language_chooser]">

 $languagechooserbits

 </optgroup>

 </select>

 </td>

    </if>

    <td align="$stylevar[right]" width="100%">

 <div class="smallfont">

 <strong>

 <if condition="$show['contactus']"><a href="$vboptions[contactuslink]" rel="nofollow">$vbphrase[contact_us]</a> -</if>

 <a href="$vboptions[homeurl]">$vboptions[hometitle]</a> -

 <if condition="$show['admincplink']"><a href="$admincpdir/index.php$session[sessionurl_q]">$vbphrase[admin]</a> -</if>

 <if condition="$show['modcplink']"><a href="$modcpdir/index.php$session[sessionurl_q]">$vbphrase[mod]</a> -</if>

 <if condition="$vboptions['archiveenabled']"><a href="archive/index.php">$vbphrase[archive]</a> -</if>

 <if condition="$vboptions[privacyurl]"><a href="$vboptions[privacyurl]">$vbphrase[privacy_statement]</a> -</if>

 <a href="#top" onclick="self.scrollTo(0, 0); return false;">$vbphrase[top]</a>

 </strong>

 </div>

    </td>

</tr>

</table>

و ايضا احذف هذا الكود:

كود :
<div align="center">

    <div class="smallfont" align="center">

    <!-- Do not remove this copyright notice -->

    $vbphrase[powered_by_vbulletin]

    <!-- Do not remove this copyright notice -->

    </div>

    <div class="smallfont" align="center">

    <!-- Do not remove $cronimage or your scheduled tasks will cease to function -->

    $cronimage

    <!-- Do not remove $cronimage or your scheduled tasks will cease to function -->

    $vboptions[copyrighttext]

    </div>

</div>

</form>

<if condition="$show['dst_correction']">

<!-- auto DST correction code -->

<form action="profile.php" method="post" name="dstform">

    <input type="hidden" name="s" value="$session[sessionhash]" />

    <input type="hidden" name="do" value="dst" />

</form>

<script type="text/javascript">

<!--

    var tzOffset = $bbuserinfo[timezoneoffset] + $bbuserinfo[dstonoff];

    var utcOffset = new Date().getTimezoneOffset() / 60;

    if (Math.abs(tzOffset + utcOffset) == 1)

    {    // Dst offset is 1 so its changed

 document.forms.dstform.submit();

    }

//-->

</script>

<!-- / auto DST correction code -->

</if>

<script type="text/javascript">

<!--

    // Main vBulletin Javascript Initialization

    vBulletin_init();

//-->

</script>

طبعا قد يوجد اختلاف بسيط في الاكواد بين استايل و آخر..و لكن المفهوم نفسه...لقد قمنا بحذف الأكواد الخاصة بالروابط الموجود اسفل المنتدى (مثل رابط اتصل بنا و الارشيف و الرجوع للأعلى)...ايضا قمنا بحذف روابط الحقوق الخاصة بالفي بي و ما الى ذلك....
الاكواد المتبقية لا شك انها الكود المطلوب...قم بنسخه و ضعه في أسفل قالب الفوتر في ال MyBB

الآن نأتي الى قوالب ال CSS

الجدول التالي يوضح قوالب ال CSS المهمة في ال vb و ما يقابلها في ال MyBB
Body > Body
Page Background > container
Table Border > tborder
Category Strips > thead
Table Header > tcat
Table Footer > tfoot
First Alternating Color > trow1
Second Alternating Color > trow2
بالنسبه لهذه القوالب يجب عليك ان تنسخها كما هي من ال VB الى ال Mybb
هذه هي اهم القوالب...بعض قوالب ال MyBB الأخرى قد تحتاج الى تعديل يدوي اذا احببت لجعل الوانها متوافقه مع الاستايل الجديد...
ملاحظة: عند نقل اكواد ال CSS من الفي بي الى ال MyBB يجب عليك مراعاة التالي (سأخذ مثال قالب ال BODY في الفي بي و ما يقابله في الماي بي بي)

[صورة: 224.gif]

أخيرا ...هذا الموضوع فقط لتوضيح الاساسيات التي تحتاجها للتحويل .... بمجرد تحويلك لاول استايل سيكون الباقي سهل جدا...و طبعا ستكتسب المزيد من الخبرة بالممارسة و لكن قبل كل شيء يجب ان تكون لديك اساسيات في الهتمل و CSS بالدرجة الأساس...فبدونها لن تستطيع فعل شيء....
كنت اتمنى ان اتعمق اكثر بالموضوع...لكن لضيق الوقت حاليا اكتفي بهذا المقدار و اتمنى يكون اساس جيد لمن يرغب في التحويل...
و ان شاء الله اذا فرغت سأضيف امور اكثر للمشاركة اذا تطلب الأمر..
تمنياتي بالتوفيق
تحياتي

hgh20 · 2009-09-12, 10:23 AM

ماشاء الله عليك
ياريت الجميع يحاولوا والشرح واضح جدا
وان شاء الله نجد مئات الاستايلات هنا

~~Dr.Desmond~~ · 2009-09-12, 10:30 AM

تسلم عيني hgh20 على ردك المشجع...
ان شاء الله يستفاد منه الأعضاء...
بالتوفيق
تحياتي

~~Bestpublisher~~ · 2009-09-12, 12:43 PM

بارك الله فيك اخي المرتضى على الشرح الوافي
و ما قصرت. flower

~~Dr.Desmond~~ · 2009-09-12, 05:24 PM

الله يبارك بيك اخي بيست...
شكرا لك على المرور...
تحياتي

الوَحش · 2009-09-14, 05:59 PM

مش عارف اقول لك ايه بصراحة , كلمة شكر حتكون قليلة .
جزاك الله خيرا على شروحاتك الجميلة و الرائعة

~~Dr.Desmond~~ · 2009-09-14, 06:56 PM

العفو عيني الوَحش...
و يجازيك كل خير على ردك الجميل...
اتمنى ان يكون الموضوع بالمستوى المطلوب...
تحياتي لك

الوَحش · 2009-09-14, 09:54 PM

أعلى من المستوى المطلوب . ده أول موضوع من نوعه فى المنتديات سواء العربية أو الإنجليزية . و به الأساسيات اللازمة و إن شاء الله أحاول أبذل شوية جهد و أعرف أحول استايل و كما قلت . بعد أول تحويل سيكون كل شىء سهل إن شاء الله .

~~Dr.Desmond~~ · 2009-09-14, 10:03 PM

الله يخليك عزيزي...
تسلم ...
بالتوفيق في التحويل...
تحياتي

heart breaker · 2011-04-11, 12:19 PM

السلام عليكم

اخي انت شرحت الهيدر والفوتر ممكن تشرح كيفية اضافة اطارات الاقسام وكيف احمل ملف الاستايل المحول والخلفية للاستايل الفي بي كيف اضيفها للماي بي بي بعد التحويل

دخول
إسم المستخدم
كلمة المرور :	فقدت كلمة المرور ؟
	تذكرني بالمرة القادمة