قسم تطوير الـ vBulletin

:

[ جميع ما هو متعلق بتطوير سكريبت الـ vBulletin من أكواد و هاكات ]

إضافة كود التنبيهات بدون هاك بإستخدام مكتبة Font Awesome
موضوعنا اليوم عن طريقة إضافة التنبيهات بدون إستخدام هاكات بدون إستخدام صور شرح تركيب كود التنبيهات بإستخدام مكتبة Font Awesome لابد...
قديم2015-06-25, 07:31 PM
المشاركة (1)
الصورة الرمزية WRONG WAY
WRONG WAY
.:: EGY BASMA ::.
.:: IDesign ::.
إضافة كود التنبيهات بدون هاك بإستخدام مكتبة Font Awesome
أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية الكرام ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
موضوعنا اليوم عن طريقة إضافة التنبيهات بدون إستخدام هاكات ,, بدون إستخدام صور ,,
شرح تركيب كود التنبيهات بإستخدام مكتبة Font Awesome ,,

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
لابد ان يحتوى موقعك على مكتبة أيقونات Font Awesome
يمكنك الحصول عليها من هذا الموقع ,,
Font Awesome, the iconic font and CSS toolkit
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
نبدأ بطريقة تركيب التنبيهات داخل منتدانا ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
إذا كانت منطقة تسجيل الدخول بالهيدر ,,
1- إذهب إلى لوحة تحكم منتداك ,,
كود:
http://www.yourdomain.com/vb/admincp
2- الإستايلات والقوالب >> التحكم بالإستايلات >> إختر الإستايل الذى تريد العمل عليه ,, >> ثم إضغط على إذهب ,,
إضافة كود التنبيهات بدون هاك بإستخدام مكتبة Font Awesome
3- ناخذ نسخة احتياطية للقالب قبل التعديل ,,
4- فى قالب الهيدر إبحث عن ,,
كود:
<if condition="$show['member']">
أضف تحتها مباشرة هذا الكود ,,
كود بلغة HTML:
<!--Alert Icons By EGY BASMA - 3ashek El7ozn-->
<div class="Member-Alert">
<ul>
<li><!--رسائل خاصة-->
<if condition="$bbuserinfo[pmunread]">
<a rel="nofollow" title="الرسائل الخاصة" href="private.php"><span style="margin-top:2px;" class="fa fa-envelope"></span></a>
<div title="لديك رسائل خاصة جديدة" class="IF-Noti">$bbuserinfo[pmunread]</div>
<else />
<a rel="nofollow" title="الرسائل الخاصة" href="private.php"><span style="margin-top:2px;" class="fa fa-envelope"></span></a>
</if>
</li><!--/رسائل خاصة-->
<li><!--رسائل زوار-->
<if condition="$bbuserinfo[vmunreadcount]">
<a rel="nofollow" title="رسائل الزوار" href="member.php?u=$bbuserinfo[userid]&amp;tab=visitor_messaging"><span style="margin-top:2px;" class="fa fa-comments"></span></a>
<div title="لديك رسائل زوار جديدة" class="IF-Noti">$bbuserinfo[vmunreadcount]</div>
<else />
<a rel="nofollow" title="رسائل الزوار" href="member.php?u=$bbuserinfo[userid]&amp;tab=visitor_messaging"><span style="margin-top:2px;" class="fa fa-comments"></span></a>
</if>
</li><!--/رسائل زوار-->
<li><!--طلبات صداقة-->
<if condition="$bbuserinfo[friendreqcount]">
<a rel="nofollow" title="طلبات الصداقة" href="profile.php?do=buddylist"><span style="margin-top:2px;" class="fa fa-user-plus"></span></a>
<div title="لديك طلبات صداقة جديدة" class="IF-Noti">$bbuserinfo[friendreqcount]</div>
<else />
<a rel="nofollow" title="طلبات الصداقة" href="profile.php?do=buddylist"><span style="margin-top:2px;" class="fa fa-user-plus"></span></a>
</if>
</li><!--/طلبات صداقة-->
<li><!--تعليقات-->
<if condition="$bbuserinfo[pcunreadcount]">
<a rel="nofollow" title="تعليقات على الصور" href="album.php?do=unread"><span style="margin-top:3px;margin-right:1px;" class="fa fa-picture-o"></span></a>
<div  title="لديك تعليقات جديدة على الصور" class="IF-Noti">$bbuserinfo[pcunreadcount]</div>
<else />
<a rel="nofollow" title="تعليقات على الصور" href="album.php?do=unread"><span style="margin-top:3px;margin-right:1px;" class="fa fa-picture-o"></span></a>
</if>
</li><!--/تعليقات-->
<li>
<li><!--الإعجاب-->
<if condition="$vboptions['ls_onoff']">
<if condition="$bbuserinfo[likes_by_ali]"> 
<a rel="nofollow" title="الإعجابات" href="member.php?u=$bbuserinfo[userid]&amp;tab_likes=received#like_share_by_ali"><span style="margin-top:3px;" class="fa fa-thumbs-o-up fa-flip-horizontal"></span></a>
<div title="لديك إعجابات جديدة" class="IF-Noti"> $bbuserinfo[likes_by_ali]</div>
<else />
<a rel="nofollow" title="الإعجابات" href="member.php?u=$bbuserinfo[userid]&amp;tab_likes=received#like_share_by_ali"><span style="margin-top:3px;" class="fa fa-thumbs-o-up fa-flip-horizontal"></span></a>
</if>
</if>
</li><!--/الإعجاب-->
<li><!--التقييم-->
<if condition="$repcount">
<a rel="nofollow" title="التقييم" href="usercp.php"><span style="margin-top:4px;margin-right:1px;" class="fa fa-heart"></span></a>
<div  title="لديك تقييم جديد" class="IF-Noti">$repcount</div>
<else />
<a rel="nofollow" title="التقييم" href="usercp.php"><span style="margin-top:4px;margin-right:1px;" class="fa fa-heart"></span></a>
</if>
</li><!--/التقييم-->
</ul>
</div>
<!--/Alert Icons By EGY BASMA - 3ashek El7ozn-->
5- ثم ضع هذه الأكواد فى تعاريف CSS الإضافية/Additional CSS Definitions ,,
كود:
/*Alert Icons By EGY BASMA - 3ashek El7ozn*/
.Member-Alert{
float:right;
position:absolute;
margin:20px 60px 20px 0;
}
.Member-Alert ul{
float:right;
list-style:none;
}
.Member-Alert li{
float:right;
list-style:none;
padding:0 4px 0 0;
}
.Member-Alert li a{
display:inline-block;
font-size:20px;
width:28px;
height:25px;
border-radius:50%;
padding:1px;
text-align:center;
vertical-align:bottom;
color:#A3B3C5;
margin:0 5px 0 0;
background:#E5EAEE;
box-shadow:0px 0px 0px 3px #D3D6E2;
border:4px solid #A7AEC4;
transition: all 1.5s;
}
.Member-Alert li a:hover{
box-shadow:0 0 0 3px #24356C;
border:4px solid #D2D0D0;
color:#818181;
transition: all 1.5s;
}
.IF-Noti{
position:relative;
background:#FF0000;
border-radius:7px;
color:#FFFFFF;
width:15px;
height:15px;
font-size:10px;
text-align:center;
line-height:14px;
bottom:36px;
right:30px;
padding:0 1px 0 1px;
}
/*Alert Icons By EGY BASMA - 3ashek El7ozn*/
* ملحوظة ,,
اقتباس:
يمكنك التحكم فى مكان ظهور الأيقونات من خلال التحكم فى ,,
كود:
margin:20px 60px 20px 0;
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
أما اذا كانت منطقة تسجيل الدخول بالناف بار ,,
1- إذهب إلى لوحة تحكم منتداك ,,
كود:
http://www.yourdomain.com/vb/admincp
2- الإستايلات والقوالب >> البحث في القوالب >> إختر الإستايل الذى تريد العمل عليه >> ثم أكتب فى مكان البحث اسم القالب كما بالصورة ,,
كود:
navbar
إضافة كود التنبيهات بدون هاك بإستخدام مكتبة Font Awesome
ثم إضغط بحث ,,
3- بعد فتح القالب ناخذ نسخة احتياطية للقالب قبل التعديل ,,
4- بداخل القالب قم بالبحث عن التالى وإحذفه ,,
كود:
    <td class="alt2" nowrap="nowrap">
    <div class="smallfont">
        <strong><phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></strong><br />
        <phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>

        <if condition="$show['notifications']">
            <div><span id="notifications"><a href="usercp.php$session[sessionurl_q]">$vbphrase[your_notifications]:</a> <strong>$notifications_total</strong></span></div>
            <if condition="$show['popups']">
                <script type="text/javascript"> vBmenu.register("notifications"); </script>
            <else />
                <script type="text/javascript" src="clientscript/vbulletin_notifications_nopopups.js?v=$vboptions[simpleversion]"></script>
                <script type="text/javascript"> vBulletin.register_control("vB_Notifications_NoPopups", "notifications");  </script>
            </if>
        <else /><if condition="$show['pmstats']">
            <div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></div>
        </if></if>

        <if condition="$show['pmwarning']"><div><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></div></if>
    </div>
    </td>
<else />
<td class="alt2" nowrap="nowrap" style="padding:0px">
[/HTML]
5- نقوم بإضافة الكود التالى مكان الذى حذفناه ,,
كود بلغة HTML:
<!--Alert Icons By EGY BASMA - 3ashek El7ozn-->
<div class="Member-Alert">
<ul>
<li><!--رسائل خاصة-->
<if condition="$bbuserinfo[pmunread]">
<a rel="nofollow" title="الرسائل الخاصة" href="private.php"><span style="margin-top:2px;" class="fa fa-envelope"></span></a>
<div title="لديك رسائل خاصة جديدة" class="IF-Noti">$bbuserinfo[pmunread]</div>
<else />
<a rel="nofollow" title="الرسائل الخاصة" href="private.php"><span style="margin-top:2px;" class="fa fa-envelope"></span></a>
</if>
</li><!--/رسائل خاصة-->
<li><!--رسائل زوار-->
<if condition="$bbuserinfo[vmunreadcount]">
<a rel="nofollow" title="رسائل الزوار" href="member.php?u=$bbuserinfo[userid]&amp;tab=visitor_messaging"><span style="margin-top:2px;" class="fa fa-comments"></span></a>
<div title="لديك رسائل زوار جديدة" class="IF-Noti">$bbuserinfo[vmunreadcount]</div>
<else />
<a rel="nofollow" title="رسائل الزوار" href="member.php?u=$bbuserinfo[userid]&amp;tab=visitor_messaging"><span style="margin-top:2px;" class="fa fa-comments"></span></a>
</if>
</li><!--/رسائل زوار-->
<li><!--طلبات صداقة-->
<if condition="$bbuserinfo[friendreqcount]">
<a rel="nofollow" title="طلبات الصداقة" href="profile.php?do=buddylist"><span style="margin-top:2px;" class="fa fa-user-plus"></span></a>
<div title="لديك طلبات صداقة جديدة" class="IF-Noti">$bbuserinfo[friendreqcount]</div>
<else />
<a rel="nofollow" title="طلبات الصداقة" href="profile.php?do=buddylist"><span style="margin-top:2px;" class="fa fa-user-plus"></span></a>
</if>
</li><!--/طلبات صداقة-->
<li><!--تعليقات-->
<if condition="$bbuserinfo[pcunreadcount]">
<a rel="nofollow" title="تعليقات على الصور" href="album.php?do=unread"><span style="margin-top:3px;margin-right:1px;" class="fa fa-picture-o"></span></a>
<div  title="لديك تعليقات جديدة على الصور" class="IF-Noti">$bbuserinfo[pcunreadcount]</div>
<else />
<a rel="nofollow" title="تعليقات على الصور" href="album.php?do=unread"><span style="margin-top:3px;margin-right:1px;" class="fa fa-picture-o"></span></a>
</if>
</li><!--/تعليقات-->
<li>
<li><!--الإعجاب-->
<if condition="$vboptions['ls_onoff']">
<if condition="$bbuserinfo[likes_by_ali]"> 
<a rel="nofollow" title="الإعجابات" href="member.php?u=$bbuserinfo[userid]&amp;tab_likes=received#like_share_by_ali"><span style="margin-top:3px;" class="fa fa-thumbs-o-up fa-flip-horizontal"></span></a>
<div title="لديك إعجابات جديدة" class="IF-Noti"> $bbuserinfo[likes_by_ali]</div>
<else />
<a rel="nofollow" title="الإعجابات" href="member.php?u=$bbuserinfo[userid]&amp;tab_likes=received#like_share_by_ali"><span style="margin-top:3px;" class="fa fa-thumbs-o-up fa-flip-horizontal"></span></a>
</if>
</if>
</li><!--/الإعجاب-->
<li><!--التقييم-->
<if condition="$repcount">
<a rel="nofollow" title="التقييم" href="usercp.php"><span style="margin-top:4px;margin-right:1px;" class="fa fa-heart"></span></a>
<div  title="لديك تقييم جديد" class="IF-Noti">$repcount</div>
<else />
<a rel="nofollow" title="التقييم" href="usercp.php"><span style="margin-top:4px;margin-right:1px;" class="fa fa-heart"></span></a>
</if>
</li><!--/التقييم-->
</ul>
</div>
<!--/Alert Icons By EGY BASMA - 3ashek El7ozn-->
5- ثم ضع هذه الأكواد فى تعاريف CSS الإضافية/Additional CSS Definitions ,,
كود:
/*Alert Icons By EGY BASMA - 3ashek El7ozn*/
.Member-Alert{
float:right;
position:absolute;
margin:20px 60px 20px 0;
}
.Member-Alert ul{
float:right;
list-style:none;
}
.Member-Alert li{
float:right;
list-style:none;
padding:0 4px 0 0;
}
.Member-Alert li a{
display:inline-block;
font-size:20px;
width:28px;
height:25px;
border-radius:50%;
padding:1px;
text-align:center;
vertical-align:bottom;
color:#A3B3C5;
margin:0 5px 0 0;
background:#E5EAEE;
box-shadow:0px 0px 0px 3px #D3D6E2;
border:4px solid #A7AEC4;
transition: all 1.5s;
}
.Member-Alert li a:hover{
box-shadow:0 0 0 3px #24356C;
border:4px solid #D2D0D0;
color:#818181;
transition: all 1.5s;
}
.IF-Noti{
position:relative;
background:#FF0000;
border-radius:7px;
color:#FFFFFF;
width:15px;
height:15px;
font-size:10px;
text-align:center;
line-height:14px;
bottom:36px;
right:30px;
padding:0 1px 0 1px;
}
/*Alert Icons By EGY BASMA - 3ashek El7ozn*/
* ملحوظة ,,
اقتباس:
يمكنك التحكم فى مكان ظهور الأيقونات من خلال التحكم فى ,,
كود:
margin:20px 60px 20px 0;
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
وإلى هنا نكون قد وصلنا إلى نهاية موضوعنا اليوم ,,
دمتم بود ,,
إضافة كود التنبيهات بدون هاك بإستخدام مكتبة Font Awesome
قديم2015-06-26, 04:54 PM
المشاركة (2)
3saltoot
3saltoot
.:: عـضـو جـديـد ::.
افتراضيرد: إضافة كود التنبيهات بدون هاك بإستخدام مكتبة Font Awesome
بارك الله فيك ،،،
مبدع
قديم2015-06-26, 05:28 PM
المشاركة (3)
الصورة الرمزية WRONG WAY
WRONG WAY
.:: EGY BASMA ::.
.:: IDesign ::.
Postرد: إضافة كود التنبيهات بدون هاك بإستخدام مكتبة Font Awesome
بارك الله فيك ،،،
مبدع
شرفنى مرورك يا غالى
قديم2016-12-11, 01:06 PM
المشاركة (4)
الصورة الرمزية FOR SAT
FOR SAT
.:: عـضـو نـشـيـط ::.
KURD4SAT Admin
افتراضيرد: إضافة كود التنبيهات بدون هاك بإستخدام مكتبة Font Awesome
أبدااااااااااع
أدوات الموضوع
انواع عرض الموضوع
العرض المتطورالعرض المتطور
الانتقال السريع
المواضيع المتشابهه
الموضوعكاتب الموضوعالمنتدىمشاركاتآخر مشاركة
[ HTML ]تغيير كلاسات الـ Font Awesome عند الضغط عليهاWRONG WAYقسم الشروحات الخاصة بـ لغات البرمجة82022-08-09 11:55 PM
[ شـرح ]طريقة إستبدال أزرار المحرر بـ مكتبة Font Awesome مع تلميحات TooltipWRONG WAYقسم تطوير الـ vBulletin12016-12-11 01:18 PM
[ شـرح ]طريقة استخدام ايقونات مكتبة Font Awesome بداخل المواضيع و المشاركاتWRONG WAYقسم تطوير الـ vBulletin02015-08-29 07:25 AM
[ شـرح ]إضافة Acronym Tag أو Abbr Tag بدون إستخدام VBSEOWRONG WAYقسم تطوير الـ vBulletin02015-06-05 09:22 AM
[ شـرح ]شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font AwesomeWRONG WAYقسم تطوير الـ vBulletin02015-03-12 03:17 PM
الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن 03:09 AM .
المواضيع و التعليقات المنشورة لا تعبر عن رأى الإدارة ولا نتحمل مسئولية حيال ذلك "و يتحمل كاتبها مسئولية النشر".
التصميم خاص بالمنتدى ولا نسمح بالإقتباس منه أو طلب تصميم مشابه.