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

مشاهدة النسخة كاملة : [ شـرح ] طريقة إستبدال أزرار المحرر بـ مكتبة Font Awesome مع تلميحات Tooltip


WRONG WAY
2015-04-07, 09:17 AM
http://b.top4top.net/p_3420gfcf1.png

أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية (http://egybasma.com/forum) ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
سوف نتناول اليوم شرح لكيفية إستبدال أزرار المحرر السريع والمحرر المتطور بـ مكتبة أيقونات 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 (http://fortawesome.github.io/Font-Awesome/)
الملف المستخدم فى الشرح الذى يحتوى على تلميحات الـ Tooltip ,,
Download From Here (http://j.gs/C56C)
يمكنك رفعه اينما تريد وليكن داخل مجلد clientscript داخل مجلد منتداك ,, مع تعريف مساره واضافته فى قالب الـ headinclude هكذا ,,
<link rel="stylesheet" href="clientscript/simptip.css" type="text/css" media="screen" />*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
نبدأ بشرح التعديل على صندوق المحرر ,,
1- إذهب إلى لوحة تحكم منتداك ,,
http://www.mydomain.com/vb/admincp2- الإستايلات والقوالب ,,
3- البحث في القوالب ,,
ابحث عن قالب ,,
editor_toolbar_onكما فى الصورة ,,
https://f.top4top.net/p_1091tgdyt1.png
ثم إضغط عليه دبل كليك ليفتح معك القالب لتبدأ بتحريره ,,
https://b.top4top.net/p_10916iqi71.png
* عليك التركيز فى الخطوات التالية ,,
إبحث عن ,,
<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;
}
النتيجة ,,
http://store2.up-00.com/2015-04/1428388418241.png
http://store2.up-00.com/2015-04/1428385814491.png
كما يمكنك تطبيق هذا الشرح على المحرر البسيط أو المحرر السريع ,, عن طريق التعديل على قالب ,,
showthread_quickreply
و
postbit_quickedit
كما يمكنك التحكم فى لون الأزرار داخل المحرر عن طريق تعديل ,,
color:#615D5D;*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
دمتم بود ,,
للمعاينة المباشرة ,,
قسم الشكاوى و الإستفسارات - معهد بسمة مصرية | خطوات فى عالم الإبداع (http://www.egybasma.com/forum/forumdisplay.php?f=48)
يمكنك الكتابة والرد على المواضيع فى هذا القسم بدون تسجيل ,,
http://c.top4top.net/p_3429vifo2.png

FOR SAT
2016-12-11, 01:18 PM
قمة في الابداع اخي
لم يبقى موقع ولم ابحث به عن هذا الشرح :Angel:
*-.-**-.-**-.-**-.-**-.-**-.-**-.-*
تم تطبيق الشرح و النتيجة جيد جداا
لكن بقي ايقونة ( ادخال رابط )؟
ممكن الكود الخاص به
*-.-**-.-**-.-**-.-**-.-**-.-**-.-*
بعد البحث وجدتها ايضا :BigSmile: