المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : قالب او كود احصائيات المنتدي 2015 بشكل جديد بآستخدام Font-Awesome و CSS


ابن الاكابر
07-22-2015, 03:14 AM
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاتة
[ اسم الكود ] : قالب او كود احصائيات المنتدي 2015 بشكل جديد بآستخدام Font-Awesome و CSS
[ وصف الكود ] : تغير شكل احصائيات المنتدى الي شكل جمالي و احترافي
[ يتوافق مع اي اصدار ] : يتوافق مع جميع الاصدارات
[ مبرمج الكود ] : ابن الاكابر - مصطفي على





[ صورة للقالب ]





[ طريقة التركيب ]

من لوحة تحكم منتداك

البحث في القوالب ولاستايلات


ابحث عن

FORUMHOME
وابحث بداخلة عن

<!-- what's going on box -->و


<!-- end what's going on box -->
و استبدل ما بينهم بـ الكود التالي




<!-- كود احصائيات المنتدي 2015 - برمجة ابن الاكابر elexlance.com -->

<div class="forum-head">
<span>اللهم صل وسلم وبارك على اشرف الخلق سيدنا محمد</span>
</div>

<div class="activeusers">

<div>$activeusers</div>

<div style="white-space: nowrap"><phrase 1="$recordusers" 2="$recorddate" 3="$recordtime">$vbphrase[most_users_ever_online_was_x_y_at_z]</phrase></div>
</div>

</div>

<div class="forum-online">
<div>إحصائيات الاكسلانس الدولى</div>
</div>

<div class="forum-text">
<table align="center" width="100%">
<tr>
<td class="total-user">
<span class="fa fa-users users"></span>
<div class="total-online">المتواجدون الأن</div>
<div class="total-number">$totalonline</div>
</td>

<td class="total-user">
<span class="fa fa-user users1"></span>
<div class="total-online">الأعضاء</div>
<div class="total-number1">$numbermembers</div>
</td>

<td class="total-user">
<span class="fa fa-file-text users2"></span>
<div class="total-online">المواضيع</div>
<div class="total-number2">$totalthreads</div>
</td>

<td class="total-user">
<span class="fa fa-file-text-o users3"></span>
<div class="total-online">المشاركات</div>
<div class="total-number3">$totalposts</div>
</td>

<td class="total-user">
<span class="fa fa-smile-o users4"></span>
<div class="total-online">نرحب بالعضو الجديد ,</div>
<div class="total-number4">$newusername</div>
</td>
</tr>

</table>
</div>
<br />

<!-- كود احصائيات المنتدي 2015 - برمجة ابن الاكابر elexlance.com -->

ثم اضغط حفظ


ثم في خصائص CSS الاضافية

ضع الكود التالي




.activeusers{
text-align: center;
font: bold 13px/43px "Droid Arabic Kufi",tahoma;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.17);color: ##443D71;
}

.forum-head{
background:url(http://www.upload.elexlance.com/do.php?imgf=1436264308591.png) 0 0 repeat-x;
height: 45px;
width: 100%;
border-radius: 4px;
text-align: center;
font: bold 13px/43px "Droid Arabic Kufi",tahoma;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.17);color: ##443D71;
}

.forum-head a:hover{
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.17);
color: #423D68;
}


.forum-head a{
color: #fff;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.22);
/* Effcts */
transition:all linear 200ms;
-webkit-transition:all linear 200ms;
-moz-transition:all linear 200ms;
-ms-transition:all linear 200ms;
-o-transition:all linear 200ms;
}

.forum-online {
background: url("http://www.upload.elexlance.com/do.php?imgf=1436264308591.png") repeat-x scroll 0px 0px transparent;
height: 30px;
width: 100%;
border-radius: 4px;
text-align: center;
font: bold 13px/30px "Droid Arabic Kufi",tahoma;
margin: 4px auto;
color: #fff;
text-align: center;
}

.forum-online a{
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.17);
color: #393365;
/* Effcts */
transition:all linear 200ms;
-webkit-transition:all linear 200ms;
-moz-transition:all linear 200ms;
-ms-transition:all linear 200ms;
-o-transition:all linear 200ms;
}

.forum-online a:hover{
text-shadow: 0px 1px 0px #555;
color: #fff;
}


.forum-text{
padding: 10px;
background-color: #FFF;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
margin: 10px 0px;
position: relative;
text-align: center;
font-size: 11px;
font-family: "Droid Arabic Kufi",tahoma;
color: #5a5199;
line-height: 21px;
}
.forum-text a{
font-family: tahoma;
font-size: 12px;
font-weight: bold;
}


.total-user{
background-color: #F5F5F5;
padding: 10px;
border: 1px solid #EAEAEA;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.04);

transition:all linear 200ms;
-webkit-transition:all linear 200ms;
-moz-transition:all linear 200ms;
-ms-transition:all linear 200ms;
-o-transition:all linear 200ms;

}
.total-user:hover{
background-color: #fff;
}



.total-online{
border-bottom: 1px solid rgba(224, 224, 224, 0.31);
padding-bottom: 15px;
padding-top: 11px;
font-family: "Droid Arabic Kufi",tahoma;
font-size: 13px;
font-weight: bold;
text-align: center;
color: #9C9C9C;
text-shadow: 0px 1px 0px #fff;
}

.users{
font-size: 33px !important;
text-align: center;
color: #36A9B7;
text-shadow: 0px 1px 0px #fff;
}
.users1{
font-size: 33px !important;
text-align: center;
color: #838383;
text-shadow: 0px 1px 0px #fff;
}
.users2{
font-size: 33px !important;
text-align: center;
color: #EFB176;
text-shadow: 0px 1px 0px #fff;
}
.users3{
font-size: 33px !important;
text-align: center;
color: #EFB176;
text-shadow: 0px 1px 0px #fff;
}
.users4{
font-size: 33px !important;
text-align: center;
color: #87FF89;
text-shadow: 0px 1px 0px #fff;
}
.total-number{
border-bottom: 1px solid rgba(224, 224, 224, 0.31);
padding-bottom: 11px;
padding-top: 11px;
font-family: "Droid Arabic Kufi",tahoma;
font-size: 13px;
font-weight: bold;
text-align: center;
color: #36A9B7;
text-shadow: 0px 1px 0px #fff;
}
.total-number1{
border-bottom: 1px solid rgba(224, 224, 224, 0.31);
padding-bottom: 11px;
padding-top: 11px;
font-family: "Droid Arabic Kufi",tahoma;
font-size: 13px;
font-weight: bold;
text-align: center;
color: #838383;
text-shadow: 0px 1px 0px #fff;
}
.total-number2{
border-bottom: 1px solid rgba(224, 224, 224, 0.31);
padding-bottom: 11px;
padding-top: 11px;
font-family: "Droid Arabic Kufi",tahoma;
font-size: 13px;
font-weight: bold;
text-align: center;
color: #EFB176;
text-shadow: 0px 1px 0px #fff;
}
.total-number3{
border-bottom: 1px solid rgba(224, 224, 224, 0.31);
padding-bottom: 11px;
padding-top: 11px;
font-family: "Droid Arabic Kufi",tahoma;
font-size: 13px;
font-weight: bold;
text-align: center;
color: #EFB176;
text-shadow: 0px 1px 0px #fff;
}
.total-number4{
border-bottom: 1px solid rgba(224, 224, 224, 0.31);
padding-bottom: 11px;
padding-top: 11px;
font-family: "Droid Arabic Kufi",tahoma;
font-size: 13px;
font-weight: bold;
text-align: center;
color: #87FF89;
text-shadow: 0px 1px 0px #fff;
}




و اضغط حفظ

و روح رئيسية المنتدي و شوف الاحصائيات الجديدة


والف مبروك عليك


الرجاء عند نقل الموضوع ذكر المصدر و عدم نزع الحقوق

فهذا العمل مجاني فلا داعي لفعل ذلك

abo-karim
07-22-2015, 03:03 PM
ايه الشغل العالى ده 10/10

ابن الاكابر
07-22-2015, 06:14 PM
من بعض ما عندكم يا ابو كريم :p


وهذا اقل شيئ يمكنني تقديمة لك


نورت الموضوع بمرورك العطر ;)

abo-karim
07-22-2015, 06:45 PM
من بعض ما عندكم يا ابو كريم :p


وهذا اقل شيئ يمكنني تقديمة لك


نورت الموضوع بمرورك العطر ;)


ياباشا انت مبدع مافيش كلام

Pharaoh
08-14-2015, 09:00 PM
مبدع من يومك .

ابن الاكابر
10-09-2015, 02:04 PM
مبدع من يومك .

شكرـآ لمرورك العطر
نورت الموضوع اخي الكريم ♥

سينشي كودو
01-05-2016, 10:17 AM
مشكوروو جدا .. تحياتي

Yahia
03-07-2016, 06:46 AM
اخي هل تسمح بارفاق الصورة لو سمحت

khairosoft
05-16-2016, 12:31 AM
اخي هل تسمح بارفاق الصورة لو سمحت
اليك المعاينة من منتداي وشكرا للاخ الذي وضع الشريط

http://www.m5zn.com/newuploads/2016/05/15/jpg//d8567e2c5ce32d2.jpg