أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية الكرام ,,
*-.-**-.-**-.-**-.-*
اقدم لكم كود لـ احصائيات المنتدى لمستخدمى vBulletin 3.8.7 .
الكود يتمتع بالتوافق مع عرض الشاشات سواء كانت كبيرة او صغيرة ,, باللون الأخضر الفاتح .
مثال على الكود ,,
*-.-**-.-**-.-**-.-*
فى البداية ابحث عن قالب FORUMHOME من لوحة تحكم منتداك ,,
ثم قم بتحديد كل ما بين ,,
كود:
<!-- what's going on box -->
كود:
<!-- end what's going on box -->
احذفه ثم قم باضافة الكود التالى ,,
كود بلغة HTML:
<!--تصميم معهد بسمة مصرية , WRONG WAY--> <div id="EGY-CYP"><span class="Cyp">$vbphrase[whats_going_on]</span> <div class="EGY-Cont"> $template_hook[forumhome_wgo_pos1] <if condition="$show['loggedinusers']"> <a rel="nofollow" href="online.php$session[sessionurl_q]">$vbphrase[currently_active_users]</a>: $totalonline (<phrase 1="$numberregistered" 2="$numberguest">$vbphrase[x_members_and_y_guests]</phrase>) <div class="EGY-Most-Visit"><phrase 1="$recordusers" 2="$recorddate" 3="$recordtime">$vbphrase[most_users_ever_online_was_x_y_at_z]</phrase></div> <div class="Online-Users">$activeusers</div> </if> <hr class="Cyphr" /><div class="HRCYP">إحصائيات $vboptions[bbtitle]</div><hr class="Cyphr" /> $template_hook[forumhome_wgo_pos2] <div class="Forum-Cyp"> <ul> <li class="EGY-Threads">المواضيع : $totalthreads</li> <li class="EGY-Posts">المشاركات : $totalposts</li> <li class="EGY-Users">الأعضاء : $numbermembers</li> <li class="EGY-Users" title="<phrase 1="$vboptions[activememberdays]">$vbphrase[within_the_last_x_days]</phrase>">عدد الأعضاء النشطين : $activemembers</li> </ul> <div class="EGY-N-Mem F-N-Mem">نرحب بالعضو الجديد : <phrase 1="member.php?$session[sessionurl]u=$newuserid" 2="$newusername">$vbphrase[welcome_to_our_newest_member_x]</phrase></div> </div> $template_hook[forumhome_wgo_pos3] <if condition="$show['birthdays']"> <hr class="Cyphr" /><div class="HRCYP">$vbphrase[todays_birthdays]</div><hr class="Cyphr" /> <a rel="nofollow" title="$vbphrase[view_birthdays]" href="calendar.php?$session[sessionurl]do=getday&day=$today&sb=1"><span class="EGY-B-D">$birthdays</span></a> </if> $template_hook[forumhome_wgo_pos4] <if condition="$show['upcomingevents']"> <hr class="Cyphr" /><div class="HRCYP"><if condition="$show['todaysevents']">$vbphrase[todays_events]<else /><phrase 1="$vboptions[showevents]">$vbphrase[upcoming_events_for_the_next_x_days]</phrase></if></div><hr class="Cyphr" /> $upcomingevents </if> </div> </div> <!--/تصميم معهد بسمة مصرية , WRONG WAY-->
واحفظ التغييرات على القالب ثم قم باضافة اكواد الـ CSS فى تعاريف CSS الإضافية/Additional CSS Definitions ,,
*-.-**-.-**-.-**-.-*
كود:
/*تصميم معهد بسمة مصرية - WRONG WAY*/ .Cyp:before{content:"\f080";font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:20px;color:#557E2C;margin:0 5px 0 5px;cursor:pointer;float:right;} .EGY-Threads:before{content:"\f0c9";font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:11px;color:#333333;margin:5px 5px 0 5px;cursor:pointer;float:right;} .EGY-Posts:before{content:"\f086";font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:11px;color:#333333;margin:5px 5px 0 5px;cursor:pointer;float:right;} .EGY-Users:before{content:"\f0c0";font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:11px;color:#333333;margin:5px 5px 0 5px;cursor:pointer;float:right;} .EGY-N-Mem:before{content:"\f007";font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:11px;color:#333333;margin:5px 5px 0 5px;cursor:pointer;float:right;} .EGY-B-D:before{content:"\f1fd";font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:11px;color:#333333;margin:4px 5px 0 -8px;cursor:pointer;float:right;} #EGY-CYP{width:95%;height:auto;background:#D5E9C0;margin:10px auto 10px auto;padding:8px;font-size:11px;border:1px solid #BADC98;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;} .Cyp{font-size:12px;font-weight:bold;text-align:center;color:#557E2C;} .EGY-Cont{width:98%;height:auto;background:#FFFFFF;margin:10px auto 5px auto;padding:8px 0 4px 0;font-family:"Droid Arabic Kufi";font-size:11px;color:#333333;text-align:right;border:1px solid #BABABA;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;} .EGY-Cont a, .EGY-Cont a:link, .EGY-Cont a:visited{color:#058469;margin:0 5px 5px 5px;text-decoration:none;transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;} .EGY-Cont a:hover{color:#1AA6C0;transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;} .EGY-Most-Visit{margin:0 5px 0 5px;font-family:"Droid Arabic Kufi";font-size:11px;color:#333333;text-align:right;} .Online-Users{color:#333333;white-space:normal;margin:0 5px 0 0 ;} hr.Cyphr{width:100%;border:1px dotted #BADC98;margin:5px 0 5px 0;} .HRCYP{font-family:"Droid Arabic Kufi";font-size:12px;font-weight:bold;text-align:right;color:#557E2C;margin:0 5px 0 0;} .Forum-Cyp{width:100%;height:auto;margin:5px;} .Forum-Cyp ul{margin:0px;padding:0px;overflow:hidden;} .Forum-Cyp ul li{float:right;list-style:none;} .F-N-Mem{float:left;margin:-23px 0 0 10px;} /*تصميم معهد بسمة مصرية - WRONG WAY*/
لاحظ ان القالب يتطلب مكتبة ايقونات Font Awesome ,, ويمكنك تحميلها من هنا ,,
Font Awesome, the iconic font and CSS toolkit
*-.-**-.-**-.-**-.-*
و الخط المستخدم هو Droid Arabic Kufi ويمكنك الحصول عليه من هنا ,,
Google Fonts - Droid Arabic Kufi (Arabic)
*-.-**-.-**-.-**-.-*
* ملحوظة :-
لا تقم بالتعديل على الكود فـ إسم المنتدى سيتغير تلقائياً الى اسم منتداك !
والى هنا اكون قد انتهيت من شرح اليوم ,, على ان القاكم فى شرح قادم بـ إذن الله تعالى ,,
دمتم بود ,,
تحياتى للجميع ,,