الويب العربي - كيفية تطوير الستايلات للتناسب مع نسخة منتداك ,

دي الطريقى لاخونا محمد الله يجزاه خير

حياكم الله إخوتي الكرام

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

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

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

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

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

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

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

=========================================
ملاحظة

اما أنا فأريد اختصار طريقة الاخ محمد شرف ، قم برفع الاستايل القديم 2.1.7 على نسخة منتداك الجديد 2.2 كما هو لكي تقتبس منه التمبلت ونقلها للاستايل 2.2 ، اي لا داعي لتحميل النسخة القديمة ، قم برفع الاستايل مباشرة على 2.2 ، وارفاق التعديلات على استايل الافتراضي الجديد

=========================================
نتابع ..

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

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

كود:



/* -------------------------------- */

/* Experimental                     */

/* -------------------------------- */



.popupmenu,

.popupmenu-new

{

   background: #F0F5FA;

   border: 1px solid #3A4F6C;

   text-align:left;

   font-size:10px;

   white-space:nowrap;

   /*padding:3px 5px 3px 3px;*/

   /*width:300px;*/

}



.popupmenu-item

{

    padding: 5px;

    /*margin-top:4px;*/

    white-space: nowrap;

    border-bottom: 1px solid #C2CFDF;

    color:  #000000;

    font-weight: normal;

}



.popupmenu-item-last

{

    padding: 5px;

    /*margin-top:4px;*/

    white-space: nowrap;

    color:  #000000;

    font-weight: normal;

}



.popmenubutton-new,

.popmenubutton

{

    width:120px;

    white-space:nowrap;

    background-color: #C2CFDF;

    border:1px solid #3A4F6C;

    color: #3A4F6C;

    font-weight:bold;

    float:right;

    height:18px;

    text-align:center;

    margin:0px;

    font-size:11px;

    padding:3px;

}



.popmenubutton-new

{

    float:none;

    width:auto;

    text-align:left;

    height:auto;

    padding:3px;

    font-weight:normal;

    background-color:#EEF2F7;

    background-image: url(1/menu_action_down-padded.gif);

    background-repeat: no-repeat;

    background-position: right;

}



.popmenubutton-new-out

{

    padding:4px;

}



.popupmenu-new

{

    background-color: #DFE6EF;

}





.popmenubutton a:link, 

.popmenubutton a:visited,

.popmenubutton-new a:link, 

.popmenubutton-new a:visited,

.popupmenu-item a:link, 

.popupmenu-item a:visited,

.popupmenu-item-last a:link, 

.popupmenu-item-last a:visited

{ 

    color: #3A4F6C; 

    text-decoration: none;

}



.popmenubutton a:hover,

.popmenubutton-new a:hover,

.popupmenu-item a:hover, 

.popupmenu-item-last a:hover

{ 

    color: #5176B5; 

    text-decoration: none;

}



.popupmenu-category

{ 

    background: transparent url(1/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.javascript.start-->

<script type="text/javascript">

//<![CDATA[

var ipb_var_st            = "{$this->ipsclass->input['st']}";

var ipb_lang_tpl_q1       = "{$this->ipsclass->lang['tpl_q1']}";

var ipb_var_s             = "{$this->ipsclass->session_id}";

var ipb_var_phpext        = "{$this->ipsclass->vars['php_ext']}";

var ipb_var_base_url      = "{$this->ipsclass->js_base_url}";

var ipb_var_image_url     = "{$this->ipsclass->vars['img_url']}";

var ipb_input_f           = "{$this->ipsclass->input['f']}";

var ipb_input_t           = "{$this->ipsclass->input['t']}";

var ipb_input_p           = "{$this->ipsclass->input['p']}";

var ipb_var_cookieid      = "{$this->ipsclass->vars['cookie_id']}";

var ipb_var_cookie_domain = "{$this->ipsclass->vars['cookie_domain']}";

var ipb_var_cookie_path   = "{$this->ipsclass->vars['cookie_path']}";

var ipb_md5_check         = "{$this->ipsclass->md5_check}";

var ipb_new_msgs          = {$this->ipsclass->member['new_msg']};

var use_enhanced_js       = {$this->ipsclass->can_use_fancy_js};

var use_charset           = "{$this->ipsclass->vars['gb_char_set']}";

var ipb_myass_chars_lang  = "{$this->ipsclass->lang['myass_chars']}";

var ajax_load_msg           = "{$this->ipsclass->lang['ajax_loading_msg_new']}";

//]]>

</script>

<script type="text/javascript" src='jscripts/ips_ipsclass.js'></script>

<script type="text/javascript" src='jscripts/ipb_global.js'></script>

<script type="text/javascript" src='jscripts/ips_menu.js'></script>

<script type="text/javascript" src='{$this->ipsclass->vars['img_url']}/folder_js_skin/ips_menu_html.js'></script>

<script type="text/javascript" src='cache/lang_cache/{$this->ipsclass->lang_id}/lang_javascript.js'></script>

<script type="text/javascript">

//<![CDATA[

var ipsclass = new ipsclass();

ipsclass.init();

ipsclass.settings['do_linked_resize'] = parseInt( "{$this->ipsclass->vars['resize_linked_img']}" );

ipsclass.settings['resize_percent']   = parseInt( "{$this->ipsclass->vars['resize_img_percent']}" );

//]]>

</script>

<!--ipb.javascript.end-->

وبعد نسخك لجداول الصور اسفل السكربت السابق قم بنسخ السكربت التالي اسفل جداول الصور

كود:

<!--ipb.leftlinks.start-->

        <!--IBF.RULES-->

        <!--ipb.leftlinks.end-->

        <!--ipb.rightlinks.start-->

        <div class='ipb-top-right-link' id="ipb-tl-search"><a href="{$this->ipsclass->base_url}act=Search&amp;f={$this->ipsclass->input['f']}">{$this->ipsclass->lang['tb_search']}</a></div>

        <if="$component_links != """>

            {$component_links}

        </if>

        <div class='popupmenu-new' id='ipb-tl-search_menu' style='display:none;width:210px'>

            <form action="{$this->ipsclass->base_url}act=Search&amp;CODE=01" method="post">

                <input type='hidden' name='forums' id='gbl-search-forums' value='all' /> 

                <input type="text" size="20" name="keywords" id='ipb-tl-search-box' />

                <input class="button" type="image" style='border:0px' src="{$this->ipsclass->vars['img_url']}/login-button.gif" />

                <if="($this->ipsclass->input['act'] == 'sf' OR $this->ipsclass->input['act'] == 'st') AND $this->ipsclass->input['f']">

                    <br /><input type='checkbox' id='gbl-search-checkbox' value='1' onclick='gbl_check_search_box()' checked='checked' /> {$this->ipsclass->lang['gbl_forum_search']}

                </if>

            </form>

            <div style='padding:4px'>

                <a href='{$this->ipsclass->base_url}act=Search'>{$this->ipsclass->lang['gbl_more_search']}</a>

            </div>

        </div>

        <script type="text/javascript">

            ipsmenu.register( "ipb-tl-search", 'document.getElementById("ipb-tl-search-box").focus();' );

            gbl_check_search_box();

            </script>

        <!--ipb.rightlinks.end-->

    </div>

</div>

<if="$this->ipsclass->can_use_fancy_js != 0">

<script type="text/javascript" src='jscripts/ips_xmlhttprequest.js'></script>

<script type="text/javascript" src='jscripts/ipb_global_xmlenhanced.js'></script>

<script type="text/javascript" src='jscripts/dom-drag.js'></script>

<div id='get-myassistant' style='display:none;width:400px;text-align:left;'>

<div class="borderwrap">

<div class='maintitle' id='myass-drag' title='{$this->ipsclass->lang['myass_drag']}'>

  <div style='float:left'><a href='#' onclick='document.getElementById("get-myassistant").style.display="none"'>[X]</a></div>

  <div>{$this->ipsclass->lang['myass_title']}</div>

</div>

<div id='myass-content' style='overflow-x:auto;'></div>

</div>

</div>

<!-- Loading Layer -->

<div id='loading-layer' style='display:none'>

    <div id='loading-layer-shadow'>

       <div id='loading-layer-inner'>

         <img src='style_images/<#IMG_DIR#>/loading_anim.gif' border='0' alt='{$this->ipsclass->lang['ajax_loading_msg']}' />

        <span style='font-weight:bold' id='loading-layer-text'>{$this->ipsclass->lang['ajax_loading_msg']}</span>

        </div>

    </div>

</div>

<!-- / Loading Layer -->

<!-- Msg Layer -->

<div id='ipd-msg-wrapper'>

    <div id='ipd-msg-title'>

        <a href='#' onclick='document.getElementById("ipd-msg-wrapper").style.display="none"; return false;'><img src='style_images/<#IMG_DIR#>/close.png' alt='X' title='Close Window' class='ipd' /></a> &nbsp; <strong>{$this->ipsclass->lang['gbl_sitemsg_header']}</strong>

    </div>

    <div id='ipd-msg-inner'><span style='font-weight:bold' id='ipd-msg-text'></span><div class='pp-tiny-text'>{$this->ipsclass->lang['gbl_auto_close']}</div></div>

</div>

<!-- Msg Layer -->

</if>

<!-- / End board header -->

و من ثم قم بحفظ القالب global_board_header

7 - قم بنسخ القالب global_board_footer من الاستايل في النسخة القديمة ثم قم بلصقه في القالب global_board_header في الاستايل الافتراضي في النسخة الحديثة و ضع اسفل منه السكربت التالي ثم قم بالحفظ

كود:

<script type='text/javascript'>

//<![CDATA[

menu_do_global_init();

show_inline_messages();

// Uncomment this to fix IE png images

// causes page slowdown, and some missing images occasionally

// if ( is_ie )

// {

// ie_fix_png();

// }

<if="$this->ipsclass->member['members_auto_dst'] == 1 AND $this->ipsclass->vars['time_dst_auto_correction'] AND $this->ipsclass->input['_low_act'] == 'idx'">

global_dst_check(parseInt("{$this->ipsclass->member['time_offset']}"),parseInt("{$this->ipsclass->member['dst_in_use']}") );

</if>

//]]>

</script>

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

الان اذا كان استايلك مصمم فعليا على نسخة 2.1.7 الافتراضي ، فإلى هنا استايلك تم ترقيته 99% بنجاح

اما اذا كان هناك تعديلات كبيرة في ملفات صور داخل الاستايل ومصمم كجداول

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

ويمكنكم التوقف هنا طالما لا توجد اخطاء تتوجب التكملة

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

نتابع لمن يريد ،،

8- قم بنسخ القالب start_nav وقم بلصقه كما هو في القالب نفسه في الاستايل الافتراضي في النسخة الحديثة و كذلك الأمر للقالب end_nav و القالب error و القالب error_log_in و القالب Redirect

والآن سنعمل على قوالب Board Index

10 -قم بنسخ القوالب CatHeader_Expanded و القالب ForumRow و القالب end_this_cat و القالب end_all_cats و الصقها كما هي في مواضعها في الاستايل الافتراضي في النسخة الحديثة

11 - بالنسبة لقوالب الاحصائيات جربت انه في بعض الأحيان لا تعمل على الاستايل في النسخة الحديثة كما تعمل في النسخة القديمة و تستلزم بعض الفنية منك في تطويرها ولكن يمكنك تجربة نسخها ايضا كماهي للنسخة الحديثة وهي القوالب التالية الخاصة بالاحصائيات , القالب stats_header و القالب stats_footer و القالب ShowStats و القالب ActiveUsers و القالب birthdays و القالب calendar_events

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

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

ولا تنسوني من صالح دعائكم يا اخوتي الاعزاء - والتحية لعزيزي محمد شرف

الموضوع كتبتة بعجلة ولذلك ليس كاملا ، ولا تنجح الطريقة مع كافة الاستايلات

فانا طرحت هذه الطريقة للتسهيل على من يريدون ترقية استايلاتهم بسرعة اما الترقية الصحيحة فهي العمل على الاستايل من جديد على الاستايل شيت في 2.2.2

ولذلك لا يراجعني احدا في اي نقطة بخصوص هذا الموضوع

تم طرحة للفائدة السريعة فقط ولا أعدكم بان يعود بنجاح كبير في تصفح الاستايلات

وفق اي استايل يجب التأكد من كلاسات الملف الشخصي ، فهي ضروري ومهمة وتابعوها من الاستايل الافتراضي في الاستايل شيت

انتهى الى هنا ،و لي عودة