بسمة مصرية

مساحة إعلانية


بسمة مصرية

قديم 2015-04-07, 09:17 AM المشاركة : ( 1
.:: ! HTML PROF ::.
WRONG WAY
.:: EGY BASMA ::.
الصورة الرمزية WRONG WAY

Technical Support

غير متواجد
Post طريقة إستبدال أزرار المحرر بـ مكتبة Font Awesome مع تلميحات Tooltip

طريقة إستبدال أزرار المحرر بـ مكتبة Font Awesome مع تلميحات Tooltip
أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
سوف نتناول اليوم شرح لكيفية إستبدال أزرار المحرر السريع والمحرر المتطور بـ مكتبة أيقونات Font Awesome و تلميحات Tooltip ,,
How To Replacement vBulletin Editor Buttons By Font Awesome Icons and data-tooltip
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
نبدأ بسم الله الرحمن الرحيم ,,
أساسيات تلزمك قبل تطبيق الشرح ,,
تحميل ملف المكتبة المستخدمة فى الشرح من هنا ,,
Download Font Awesome - The iconic font and CSS toolkit
الملف المستخدم فى الشرح الذى يحتوى على تلميحات الـ Tooltip ,,
Download From Here
يمكنك رفعه اينما تريد وليكن داخل مجلد clientscript داخل مجلد منتداك ,, مع تعريف مساره واضافته فى قالب الـ headinclude هكذا ,,
كود:
<link rel="stylesheet" href="clientscript/simptip.css" type="text/css" media="screen" />
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
نبدأ بشرح التعديل على صندوق المحرر ,,
1- إذهب إلى لوحة تحكم منتداك ,,
كود:
http://www.mydomain.com/vb/admincp
2- الإستايلات والقوالب ,,
3- البحث في القوالب ,,
ابحث عن قالب ,,
كود:
editor_toolbar_on
كما فى الصورة ,,
طريقة إستبدال أزرار المحرر بـ مكتبة Font Awesome مع تلميحات Tooltip
ثم إضغط عليه دبل كليك ليفتح معك القالب لتبدأ بتحريره ,,
طريقة إستبدال أزرار المحرر بـ مكتبة Font Awesome مع تلميحات Tooltip
* عليك التركيز فى الخطوات التالية ,,
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/removeformat.gif" width="21" height="20" alt="$vbphrase[remove_text_formatting]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[remove_text_formatting]"><span class="NewBBCode fa fa-language" style="color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<td id="{$editorid}_color_out"><img src="$stylevar[imgdir_editor]/color.gif" width="21" height="16" alt="" /><br /><img src="$vboptions[cleargifurl]" id="{$editorid}_color_bar" alt="" style="background-color:black" width="21" height="4" /></td>
ثم إستبدله بـ ,,
كود:
<td id="{$editorid}_color_out"><span class="NewBBCode fa fa-paint-brush" style="color:#615D5D; font-size:15px; padding-bottom:2px;"></span><br /><img src="$vboptions[cleargifurl]" id="{$editorid}_color_bar" alt="" style="background-color:#615D5D" width="21" height="4" /></td>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/smilie.gif" alt="" width="21" height="20" />
ثم إستبدله بـ ,,
كود:
<span class="NewBBCode fa fa-smile-o fa-lg" style="color:#615D5D;"></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/cut.gif" width="21" height="20" alt="$vbphrase[cut]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[cut]"><span class="NewBBCode fa fa-scissors" style="color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/copy.gif" width="21" height="20" alt="$vbphrase[copy]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[copy]"><span class="NewBBCode fa fa-files-o" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/paste.gif" width="21" height="20" alt="$vbphrase[paste]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[paste]"><span class="NewBBCode fa fa-clipboard" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/undo.gif" width="21" height="20" alt="$vbphrase[undo]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[undo]"><span class="NewBBCode fa fa-undo" style=" color:#615D5D; font-size:15px;"></span></span>
ايحث عن
كود:
<img src="$stylevar[imgdir_editor]/redo.gif" width="21" height="20" alt="$vbphrase[redo]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[redo]"><span class="NewBBCode fa fa-repeat" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/bold.gif" width="21" height="20" alt="$vbphrase[bold]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[bold]"><span class="NewBBCode fa fa-bold" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/italic.gif" width="21" height="20" alt="$vbphrase[italic]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[italic]"><span class="NewBBCode fa fa-italic" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/underline.gif" width="21" height="20" alt="$vbphrase[underline]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[underline]"><span class="NewBBCode fa fa-underline" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/justifyright.gif" width="21" height="20" alt="$vbphrase[align_right]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[align_right]"><span class="NewBBCode fa fa-align-right" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/justifyright.gif" width="21" height="20" alt="$vbphrase[align_right]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[align_right]"><span class="NewBBCode fa fa-align-right" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/justifycenter.gif" width="21" height="20" alt="$vbphrase[align_center]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[align_center]"><span class="NewBBCode fa fa-align-center" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/justifyleft.gif" width="21" height="20" alt="$vbphrase[align_left]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[align_left]"><span class="NewBBCode fa fa-align-left" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/insertorderedlist.gif" width="21" height="20" alt="$vbphrase[ordered_list]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[ordered_list]"><span class="NewBBCode fa fa-list-ol" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/insertunorderedlist.gif" width="21" height="20" alt="$vbphrase[unordered_list]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[unordered_list]"><span class="NewBBCode fa fa-list-ul" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/indent.gif" width="21" height="20" alt="$vbphrase[decrease_indent]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[decrease_indent]"><span class="NewBBCode fa fa-indent" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/outdent.gif" width="21" height="20" alt="$vbphrase[increase_indent]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[increase_indent]"><span class="NewBBCode fa fa-outdent" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/createlink.gif" width="21" height="20" alt="$vbphrase[insert_link]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[insert_link]"><span class="NewBBCode fa fa-link" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/unlink.gif" width="21" height="20" alt="$vbphrase[remove_link]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[remove_link]"><span class="NewBBCode fa fa-chain-broken" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/email.gif" width="21" height="20" alt="$vbphrase[insert_email_link]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[insert_email_link]"><span class="NewBBCode fa fa-at" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/insertimage.gif" width="21" height="20" alt="$vbphrase[insert_image]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[insert_image]"><span class="NewBBCode fa fa-picture-o" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/quote.gif" width="21" height="20" alt="$vbphrase[wrap_quote_tags]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[wrap_quote_tags]"><span class="NewBBCode fa fa-quote-right" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/code.gif" width="21" height="20" alt="$vbphrase[wrap_code_tags]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[wrap_code_tags]"><span class="NewBBCode fa fa-slack" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/html.gif"  width="21" height="20" alt="$vbphrase[wrap_html_tags]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[wrap_html_tags]"><span class="NewBBCode fa fa-code" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/php.gif" width="21" height="20" alt="$vbphrase[wrap_php_tags]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[wrap_php_tags]"><span class="NewBBCode fa fa-file-code-o" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/resize_0.gif" width="21" height="9" alt="$vbphrase[decrease_size]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[decrease_size]"><span class="NewBBCode2 fa fa-sort-asc" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/resize_1.gif" width="21" height="9" alt="$vbphrase[increase_size]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[increase_size]"><span class="NewBBCode2 fa fa-sort-desc" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/switchmode.gif" width="21" height="20" alt="$vbphrase[switch_editor_mode]" />
ثم إستبدله بـ ,,
كود:
<span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[switch_editor_mode]"><span class="NewBBCode fa fa-font" style=" color:#615D5D; font-size:15px;"></span></span>
إبحث عن ,,
كود:
<img src="$stylevar[imgdir_editor]/attach.gif" alt="" width="21" height="20" />
ثم إستبدله بـ ,,
كود:
<span class="NewBBCode fa fa-paperclip" style="color:#615D5D; font-size:15px;"></span>
* فى تعاريف CSS الإضافية/Additional CSS Definitions ,,
اضف ,,
كود:
.NewBBCode{
cursor:pointer;
width:21px;
height:15px;
text-align:center;
}
.NewBBCode2{
cursor:pointer;
width:10px;
height:7px;
text-align:center;
}
النتيجة ,,
طريقة إستبدال أزرار المحرر بـ مكتبة Font Awesome مع تلميحات Tooltip
طريقة إستبدال أزرار المحرر بـ مكتبة Font Awesome مع تلميحات Tooltip
كما يمكنك تطبيق هذا الشرح على المحرر البسيط أو المحرر السريع ,, عن طريق التعديل على قالب ,,
كود:
showthread_quickreply
و
كود:
postbit_quickedit
كما يمكنك التحكم فى لون الأزرار داخل المحرر عن طريق تعديل ,,
كود:
color:#615D5D;
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
دمتم بود ,,
للمعاينة المباشرة ,,
قسم الشكاوى و الإستفسارات - معهد بسمة مصرية | خطوات فى عالم الإبداع
يمكنك الكتابة والرد على المواضيع فى هذا القسم بدون تسجيل ,,
طريقة إستبدال أزرار المحرر بـ مكتبة Font Awesome مع تلميحات Tooltip

الـمـصـدر : معهد بسمة مصرية - مـن : قسم تطوير الـ vBulletin - كـاتـب الـمـوضـوع : WRONG WAY

مـن مـواضـيع WRONG WAY
آبل تكشف عن هاتفى آى فون وجهاز آيباد عملاق
فيس بوك تطلق Signal لمساعدة الصحفيين على جمع الأخبار
فشل كاميرات المراقبة لديوان محافظة الوادى الجديد
استئناف محاكمة مرسي و10 آخرين في التخابر مع قطر
ناسا تتسبب فى سخرية 1,2 مليون متابع لها على تويتر
مقتل 3 من أنصار بيت المقدس جنوب الشيخ زويد
تعزيزات أمنية قبل محاكمة مرسى فى التخابر
Apple تتخلى عن مخرج السماعات فى هاتف 7 I phone القادم لصالح السُمك
أدوبى تطلق أول محرر فيديو لمنصة أندرويد
إعادة سيارة استولى عليها مسلحون بحمولتها ببنى سويف
 

الكلمات الدلالية (Tags)
أزرار, awesome, مكتبة, المحرر, تلميحات, font, tooltip, إستبدال, طريقة

مواضيع ذات صلة بـ قسم تطوير الـ vBulletin



أدوات الموضوع
انواع عرض الموضوع

الانتقال السريع

المواضيع المتشابهه
الموضوع
[ شـرح ] شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome
وجه مدينة القاهرة في مكتبة القاهرة الأحد
11 طريقة لتجعل المرأة سعيدة وتبتسم من قلبها


الساعة الآن 04:18 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2016, vBulletin Solutions, Inc
هذا الموقع يتسخدم منتجات Weblanca.com
المواضيع و التعليقات المنشورة لا تعبر عن رأى الإدارة ولا نتحمل أي مسئولية حيال ذلك
HTML MAP XML RSS 2.0 RSS