المواضيع الأخيرة
» [تومبيلات] حصريا قالب الاحصائيات index_body احترافي جدا مع تاثيرات رهيبة مجانا للجميع
من طرف دلوعة بكيفي الأحد سبتمبر 24, 2017 10:20 pm

» [تومبيلات] آخر المواضيع بشكل جديد وعصري مع أفضل الأعضاء
من طرف Eslam Love الأحد يونيو 18, 2017 9:40 pm

» أفضل أنميات صيف 2017 | قائمة أنميات صيف 2017
من طرف samih السبت مايو 27, 2017 5:22 pm

» ستايل FAE العصري والإحترافي والمتجاوب مع جميع شاشات العرض لمنتديات أحلى منتدى
من طرف crash101094 الثلاثاء أبريل 04, 2017 1:57 am

» تركيب ستايل
من طرف taher70 الإثنين أكتوبر 17, 2016 7:55 pm

» الموضوع الموحد للإجابة عن استفساراتكم بخصوص ستايل FAE وآخر الإشعارت
من طرف AHMED2INFO الأحد أكتوبر 16, 2016 1:29 am

» [JavaScript] كيفية تغيير رمز @ لمشرفين علبة الدردشة لأحلى منتدى حصريا على بؤرة التطوير
من طرف beto السبت سبتمبر 03, 2016 2:21 am

» طلب تحويل بوابة والتعديل عليها
من طرف Belm assem الأربعاء أغسطس 10, 2016 9:05 pm

» [تومبيلات] قالب topics_list_box لاظهار صورة المواضيع في الأقسام لمنتديات أحلى منتدى - بؤرة التطوير
من طرف D.YouSSef الثلاثاء أغسطس 09, 2016 1:09 pm

» اشياء تفيدك في حياتك اليوميه
من طرف D.YouSSef الثلاثاء أغسطس 09, 2016 12:19 pm

أفضل 10 أعضاء في هذا المنتدى
طاقم المنتدى المتواجد حاليا

[تومبيلات] آخر المواضيع بشكل جديد وعصري مع أفضل الأعضاء

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

avatar
Belm assem
مؤسس المنتدى

مؤسس المنتدى
عدد المساهمات : 24
النقاط : 1102
السٌّمعَة : 0
تاريخ التسجيل : 07/07/2016
معاينة صفحة البيانات الشخصي للعضو http://focus-dev.ahlamountada.com

مُساهمةBelm assem في الجمعة يوليو 08, 2016 6:19 pm

السلام عليكم ورحمة الله وبركاته
أهلا بجميع زوار وأعضاء بؤرة التطوير
أقدم لكم اليوم شرح حول كيفية تطوير شكل آخر المواضيع
( آخر المواضيع والمواضيع النشطة والمواضيع الأكثر مشاهدة و أفضل الأعضاء وأكثر الأعضاء فاتحي المواضيع  )
صورة للقالب :






ننتقل للشرح
أولا نتوجه لقالب overall_header في التومبيلات ونبحث عن هذا الكود ونقوم بحذفه :
الكود:

<div id="{ID_LEFT}">
                     <!-- BEGIN giefmod_index1 -->
                     {giefmod_index1.MODVAR}
                     <!-- BEGIN saut -->
                     <div style="height:{SPACE_ROW}px"></div>
                     <!-- END saut -->
                     <!-- END giefmod_index1 -->
                  </div>

نقوم بنشر القالب ، ثم نتوجه الى قالب index_body
وبعد السطر الأول المتكون من {JAVASCRIPT}
نضع بعده مباشرة التالي :

الكود:

<div id="latestTopics" class="clearfix">
   <div class="borderwrap">
      <div class="maintitle floated clearfix">
         <h2>احصائيات المنتدى</h2>
      </div>
      <div id="c0" class="maincontent">
         <table cellpadding="0" cellspacing="0" class="ipbtable">
         <thead>
         <tr>
            <th class="dropdown" width="30%">
               <noscript>
               أفضل فاتحي المواضيع
               </noscript>
               <div class="titleList noscript" style="display: block;">
                  <select>
                     <option value="topActive">أفضل فاتحي المواضيع</option>
                     <option value="topPosters">أفضل أعضاء المنتدى</option>
                     <option value="topWeek">أفضل الأعضاء في هذا الأسبوع</option>
                     <option value="topMonth">أفضل الأعضاء في هذا الشهر</option>
                  </select>
               </div>
            </th>
            <th class="tabs">
               <div class="titleList">
                 <label class="latestTitle" for="recentTopics">آخر المواضيع</label>
                                          <label class="latestTitle" for="activeTopics">المواضيع النشيطة</label>
                                          <label class="latestTitle" for="viewedTopics">المواضيع الأكثر مشاهدة</label>
               </div>
            </th>
         </tr>
         </thead>
         <tbody>
                          <tr>
         <!-- BEGIN giefmod_index1 -->
          {giefmod_index1.MODVAR}
         <!-- END giefmod_index1 -->
                          </tr>
         </tbody>
         </table>
      </div>
   </div>
</div>
<script type="text/javascript">
    //<![CDATA[
    var versionMinor = parseFloat(navigator.appVersion),
        versionMajor = parseInt(versionMinor),
        IE = document.all && !window.opera && 7 > versionMajor,
        IE7 = document.all && !window.opera && 7 <= versionMajor,
        OP = window.opera,
        FF = document.getElementById,
        NS = document.layers;

    function get_item(a, c) {
        if (IE) return c ? window.opener.document.all[a] : document.all[a];
        if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);
        if (NS) return c ? window.opener.document.layers[a] : document.layers[a]
    }
    var current_tooltip;

    function show_tooltip(a, c) {
        var b = get_item("tooltip");
        b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));
        b.style.zIndex = 1000;
        b.style.position = "absolute";
        b.innerHTML = "<p>" + c + "</p>";
        b.style.visibility = "visible";
        a.onmousemove = move_tooltip;
        a.onmouseout = function() {
            b.style.visibility = "hidden"
        };
        a.title = ""
    }
    var offsetxpoint = -60,
        offsetypoint = 20,
        real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
        real_body = document.documentElement ? document.documentElement : document.body;

    function move_tooltip(a) {
        var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
            d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
            b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
            e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
            f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;
        current_tooltip = get_item("tooltip");
        current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";
        current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"
    }
    $("li > a", "#recentTopics_div").mouseover(function() {
        show_tooltip(this, $(this).next().html())
    });
    $("li:contains('[Thùng rác]')", "#recentTopics_div").appendTo("#recentTopics_div > ol");
    $(".titleList.noscript").show();
    $(".latestTitle[for='recentTopics']").addClass("active");
    $("select", ".titleList.noscript").change(function() {
        $(".postersLast").hide();
        $("#" + this.value).show();
    });
    $(".latestTitle").click(function() {
        $(".latestTitle.active").removeClass("active");
        $(this).addClass("active");
    });
    $("a", "#activeTopics_div,#viewedTopics_div").after(function() {
        var tit = this.title;
        var split = tit.lastIndexOf('-');
        this.title = tit.slice(0, split - 1);
        return '<span class="right">' + tit.slice(split + 2) + '</span>';
    }); //]]>
</script>

نضغط سجل وننشر القالب
الآن نتوجه الى تومبيلات   البوابة ونضع القوالب التالي
( القوالب رفعتها لكم على جوجل درايف )


الآن نتوجه الى ورقة css ونضع الأكواد التالي :



الكود:
/* اخر المواضيع - بؤرة التطوير */
#latestTopics input.topicsLast:checked + div.box-content{display:block}
table.ipbtable th{height:33px}
.olList{padding-left:22px;line-height:24px;list-style:none}
.olList li{position:relative;height:24px;width:100%;list-style-type:none;border-bottom:1px dashed #CCC;counter-increment:Zzindex}
.olList li:before{content:counter(Zzindex);display:block;height:17px;background:#EBEBEB;position:absolute;left:-22px;font-size:11px;top:4px;right: 0;border-radius:2px;text-align:center;width:16px;color:#FFF;line-height:16px;z-index:10}
.olList li:after{content:" ";background:#EBEBEB;display:block;width:6px;height:6px;position:absolute;top:9px;right: 13px;left:-9px;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)}
.olList li:nth-child(1):before,ol.olList li:nth-child(1):after{background:red}
.olList li:nth-child(2):before,ol.olList li:nth-child(2):after{background:#FD5405}
.olList li:nth-child(3):before,ol.olList li:nth-child(3):after{background:#FDB55A}
.olList li:nth-child(3) ~ li:before,ol.olList li:nth-child(3) ~ li:after{color:#EC4403;text-shadow:0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF}
.olList li > a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;width:70%;margin-right: 23px;height:inherit}
.olList li > .right{position:absolute;left:0;top:0}
table.ipbtable th.tabs{padding:0 0 0 20px;text-align:left}
th.tabs label{display:inline-block;height:34px;line-height:30px;padding:0 12px;border:1px solid transparent;border-bottom:0 none}
th.tabs label:hover,th.tabs label.active{cursor:pointer;border-color:#DDD;background:#FFF}
.tabs .titleList{margin-bottom:-5px}
#tooltip{background-color:#FFF;border:2px solid #333;color:#131313;max-width:550px;padding:10px}
/* اداة العناوين - بؤرة التطوير */[size=14][/size]
#tooltip{background-color:#FFF;border:2px solid #333;color:#131313;max-width:550px;padding:10px}




والآن نذهب الى عناصر اضافية   ادارة العناصر المستقلة على المنتدى
وندرج العناصر بهذا الشكل :



انتهي ..
تحياتي @Admin


babyou
عضو

عضو
عدد المساهمات : 10
النقاط : 1064
السٌّمعَة : 0
تاريخ التسجيل : 12/07/2016
معاينة صفحة البيانات الشخصي للعضو

مُساهمةbabyou في الثلاثاء يوليو 12, 2016 9:19 pm

شرح ممتاز شكرا لك
MY_ASWAN
عضو

عضو
عدد المساهمات : 6
النقاط : 1052
السٌّمعَة : 1
تاريخ التسجيل : 14/07/2016
معاينة صفحة البيانات الشخصي للعضو

مُساهمةMY_ASWAN في الخميس يوليو 14, 2016 10:06 pm

جزائك الله كل خيرا
ننتظر المزيد من ابداعتك
avatar
ELMasRyy
عضو

عضو
عدد المساهمات : 3
النقاط : 957
السٌّمعَة : 0
تاريخ التسجيل : 28/08/2016
معاينة صفحة البيانات الشخصي للعضو

مُساهمةELMasRyy في الأحد أغسطس 28, 2016 5:29 am

مشكوررر جداً
Eslam Love
عضو

عضو
عدد المساهمات : 1
النقاط : 1047
السٌّمعَة : 0
تاريخ التسجيل : 13/07/2016
معاينة صفحة البيانات الشخصي للعضو

مُساهمةEslam Love في الأحد يونيو 18, 2017 9:40 pm

مشكور

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

للمشاركة انت بحاجه الى تسجيل الدخول او التسجيل

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

التسجيل

انضم الينا لن يستغرق منك الا ثوانى معدودة!


أنشئ حساب جديد

تسجيل الدخول

ليس لديك عضويه ؟ بضع ثوانى فقط لتسجيل حساب


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى