كيفية تطوير الاستايلات من v2.0.4 إلى v2.1.3, درس جديد,,,

لسلام عليكم ورحمة الله وبركاته,,,
حياكم الله إخوتي الكرام
يتسائل الكثير منا عن تطوير الاستايلات من النسخة v2.0.4 إلى النسخة v2.1.3 و اليوم أقدم بعض ما توصلت له بفضل الله وما كان من توفيق فمن الله

كما نعلم ان اي استايل لأي نوع منتدى يتكون من شيئين مهمين هما : القوالب و الاستايل شيت فمهما تطورت النسخ او اي شئ فهنا يلزم تطوير القوالب بما يتناسب مع تطوير النسخة و كذلك الاستايل شيت بالطبع

فمثلا اذا ذكرنا ان القالب الفلاني له لون اخضر و خطوط معينة فذلك يعني ان الكلاس المعتمد عليه هذا القالب لونه اخضر في الاستايل شيت ,و هذه نقطة مهمة تعني ان القوالب يتم ربطها بالاستايل شيت وهذا ما اريد ان اقوله وهذه هي مهمتنا هنا في التطوير هي ربط القوالب الجديدة في استايل النسخة الجديدة بالاستايل شيت بنفس الالوان و الخصائص التي كان عليها في النسخة القديمة

و الآن فلنبدأ بالتطوير و نتوكل على الله عز و جل

1 - قم بتنصيب السيرفر الشخصي على جهازك و قم بتنصيب النسخة القديمة 2.0.4 على قاعدة بيانات بإسم old وأيضا قم بتنصيب النسخة الحديثة v2.1.3 على قاعدة بيانات بإسم new او ممكن يكونوا على قاعدة بيانات واحدة مع مراعاة بداية اسم الجدول ibf_

2 - قم بتثبيت الاستايل القديم على النسخة القديمة

3 - قم بتثبيت نسخة من الاستايل الافتراضي على النسخة الحديثة

4 - قم بنسخ ال Edit Root Skin Board Header & Footer Wrapper من الاستايل في النسخة القديمة و انسخه كما هو وضعه في ال Edit Root Skin Board Header & Footer Wrapper في الاستايل الافتراضي في النسخة الحديثة ثم قم بالحفظ

5 - قم بنسخ الاستايل شيت من الاستايل في النسخة القديمة ثم قم بلصقه في الاستايل شيت للاستايل الافتراضي في النسخة الحديثة و ضع أسفل منه هذا الجزء الجديد التالي

.rteimage
{
    cursor: hand;
    padding: 1px;
}

.rteImageRaised
{
    border: 1px outset;
    cursor: hand;
    padding: 0px;
}

.rteImageLowered
{
    border: 1px inset;
    cursor: hand;
    padding: 0px;
}

.rteimage:hover
{
    background: #EBEBEB;
    cursor: hand;
}

.rteVertSep
{
    margin: 0 4px 0 4px;
}

.rteBack
{
    background: #D3D3D3;
    border: 1px outset;
    letter-spacing: 0;
    padding: 2px;
}

.rtebottombutton
{
    font-size: 10px;
    border: 1px solid #777;
    border-top: 0px;
    padding: 3px;
    margin: 0px;
    background-color: #EBEBEB;
}

.rtebottombuttonon
{
    font-size: 10px;
    border: 1px solid #777;
    border-top: 0px;
    padding: 3px;
    margin: 0px;
    background-color: #D3D3D3;
}

.rtebuttonbar1
{
    background-image: url(<#IMG_DIR#>/folder_rte_images/rte_tile.gif);
    border: 1px solid gray;
    border-bottom: 0px;
    letter-spacing: 0;
    padding: 2px;
    height: 26px;
}

.rtebuttonbar2
{
    background-image: url(<#IMG_DIR#>/folder_rte_images/rte_tile.gif);
    border: 1px solid gray;
    border-top: 1px solid gray;
    letter-spacing: 0;
    padding: 2px;
    height: 26px;
}

.rtebuttonbar1 tbody tr td,
.rtebuttonbar1 tr td,
.rtebuttonbar2 tbody tr td,
.rtebuttonbar2 tr td,
.rteBack tbody tr td,
.rteBack tr td
{
    padding: 0;
}

.rteDiv
{
    display: block;
    position: relative;
    padding: 0px;
    margin: 0px;
}

.rteiframe
{
    border: 1px solid #777;
    background-color: #FFF;
}

.rteselectbox
{
    font-size: 11px;
}

.dny-edit-title
{
    border: 0px;
    padding: 3px;
    margin: 0px;
    background: #D8EFC7;
    color: #3A4F6C;
}

.tabon
{
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    border-left: 1px solid #999;
    background-color: #FFF;
    padding: 8px;
    padding-bottom: 9px;
    font-size: 10px;
    float: right;
    width: auto;
    margin-top: 3px;
}

.taboff
{
    border-top: 1px solid #777;
    border-right: 1px solid #777;
    border-left: 1px solid #777;
    background-color: #D8EFC7;
    color: #333;
    padding: 8px;
    font-size: 10px;
    float: right;
    width: auto;
    margin-top: 3px;
}

.tabon a:link, 
.tabon a:visited, 
.tabon a:active
{
    text-decoration: none;
    color: #000;
}

.taboff a:link, 
.taboff a:visited, 
.taboff a:active
{
    text-decoration: none;
    color: #333;
}

.mya-back
{
    background: #D8EFC7;
    margin: 1px;
}

.mya-*******
{
    background: #FFF;
    padding: 8px;
    margin: 1px;
    border: 1px solid #777;
}

.iframeshim
{
    position: absolute;
    display: none;
    background: #FFF;
    filter: alpha(opacity=0);
    border: 0px;
    width: auto;
    height: auto;
}

.popupmenu
{
    background: #D8EFC7;
    border: 1px solid #3A4F6C;
    text-align: right;
    font-size: 10px;
    white-space: nowrap;
}

.popupmenu-item
{
    padding: 5px;
    white-space: nowrap;
    border-bottom: 1px solid #000;
}

.popupmenu-item-last
{
    padding: 5px;
    white-space: nowrap;
}

.popmenubutton
{
    width: 120px;
    white-space: nowrap;
    background-color: #D8EFC7;
    border: 1px solid #3A4F6C;
    color: #214308;
    font-weight: bold;
    float: left;
    height: 18px;
    text-align: center;
    margin: 0px;
    font-size: 11px;
    padding: 3px;
}

.popmenubutton a:link, 
.popmenubutton a:visited,
.popupmenu-item a:link, 
.popupmenu-item a:visited,
.popupmenu-item-last a:link, 
.popupmenu-item-last a:visited
{
    color: #214308;
    text-decoration: none;
}

.popmenubutton a:hover, 
.popupmenu-item a:hover, 
.popupmenu-item-last a:hover
{
    color: #214308;
    text-decoration: none;
}

.popupmenu-category
{
    background: transparent url(<#IMG_DIR#>/tile_sub.gif);
    border-top: 1px solid #5176B5;
    border-bottom: 1px solid #5176B5;
    color: #3A4F6C;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0;
    padding: 5px;
}

و الآن سنعمل على القوالب الموجودة تحت All Global HTML

6 - قم بفتح القالب global_board_header و قم بنسخ الجزء المخصص لجداول الصور في الهيدر ثم قم بلصقه أسفل السكربت التالي في القالب global_board_header في الاستايل الافتراضي في النسخة الحديثة

<!--ipb.**********.start-->
******** type="text/**********">
 //<![CDATA[
 var ipb_var_st            = "{ipb.input[st]}";
 var ipb_lang_tpl_q1       = "{ipb.lang[tpl_q1]}";
 var ipb_var_s             = "{ipb.session_id}";
 var ipb_var_phpext        = "{ipb.vars[php_ext]}";
 var ipb_var_base_url      = "{$this->ipsclass->js_base_url}";
 var ipb_var_image_url     = "{ipb.vars[img_url]}";
 var ipb_input_f           = "{ipb.input[f]}";
 var ipb_input_t           = "{ipb.input[t]}";
 var ipb_input_p           = "{ipb.input[p]}";
 var ipb_var_******id      = "{ipb.vars[******_id]}";
 var ipb_var_******_domain = "{ipb.vars[******_domain]}";
 var ipb_var_******_path   = "{ipb.vars[******_path]}";
 var ipb_md5_check         = "{$this->ipsclass->md5_check}";
 var ipb_new_msgs          = {ipb.member[new_msg]};
 var use_enhanced_js       = {$this->ipsclass->can_use_fancy_js};
 var use_charset       = "{ipb.vars[gb_char_set]}";
var ipb_myass_chars_lang = "{ipb.lang[myass_chars]}";
 //]]>
***********
******** type="text/**********" src=jscripts/ipb_global.js>***********
******** type="text/**********" src=jscripts/ips_menu.js>***********
******** type="text/**********" src={ipb.vars[img_url]}/folder_js_skin/ips_menu_html.js>***********
<!--ipb.**********.end-->

وبعد نسخك لجداول الصور اسفل السكربت السابق قم بنسخ السكربت التالي اسفل جداول الصور
[HTML]
<if="ipb.can_use_fancy_js != 0">
******** type="text/**********" src=jscripts/ips_xmlhttprequest.js>***********
******** type="text/**********" src=jscripts/ipb_global_xmlenhanced.js>***********
******** type="text/**********" src=jscripts/dom-drag.js>***********


'[url'. get-myassistant ? '='get-myassistant : '' .'][X][/url]'
{ipb.lang[myass_title]}




{ipb.lang[ajax_loading_msg]} ***********



و الآن سنعمل على القوالب الموجودة تحت Forum Index وهي قوالب تتطلب منك فنية في تطويرها وفقط تقوم بربطها باسماء الكلاسات الخاصة بها في الاستايل شيت كما بالنسخة القديمة وهي القوالب التالية المهمة render_forum_row و القالب PageTop والقالب TableEnd

والآن سنعمل على قوالب Topic View وهي ايضا قوالب تتطلب بعض الفنية في تطويرها وفقط تقوم بربطها باسماء الكلاسات الخاصة بها في الاستايل شيت كما بالنسخة القديمة وهي القوالب التالية المهمة RenderRow والقالب TableFooter والقالب topic_page_top والقالب topic_active_users

كما يمكنك ان تنسخ القالب RenderRow كما هو و تضع أسفل منه السكربت التالي

كود
******** type=text/**********>
//<![CDATA[
if ( ajax_loaded && use_enhanced_js )
{
menu_build_menu( edit-but-{$post[pid]},
new Array( img_item + " <a title={ipb.lang[edit_full_desc]} href={ipb.script_url}act=post&do=edit_post&f={$post[forum_id]}&t={$post[topic_id]}&p={$post[pid]}&st={ipb.input[st]}>{ipb.lang[edit_full_title]}</a>",
img_item + " <a href=# title={ipb.lang[edit_quick_desc]} onclick=return ajax_prep_for_edit({$post[pid]}, event);>{ipb.lang[edit_quick_title]}</a>" ) );
}
//]]>
***********