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

:

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

طريقة إستبدال أزرار المحرر بـ مكتبة Font Awesome مع تلميحات Tooltip
سوف نتناول اليوم شرح لكيفية إستبدال أزرار المحرر السريع والمحرر المتطور بـ مكتبة أيقونات Font Awesome و تلميحات Tooltip How To Replacement...
4 معجبون
قديم2015-04-07, 09:17 AM
المشاركة (1)
الصورة الرمزية WRONG WAY
WRONG WAY
.:: EGY BASMA ::.
.:: IDesign ::.
طريقة إستبدال أزرار المحرر بـ مكتبة 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
قديم2016-12-11, 01:18 PM
المشاركة (2)
الصورة الرمزية FOR SAT
FOR SAT
.:: عـضـو نـشـيـط ::.
KURD4SAT Admin
افتراضيرد: طريقة إستبدال أزرار المحرر بـ مكتبة Font Awesome مع تلميحات Tooltip
قمة في الابداع اخي
لم يبقى موقع ولم ابحث به عن هذا الشرح
*-.-**-.-**-.-**-.-**-.-**-.-**-.-*
تم تطبيق الشرح و النتيجة جيد جداا
لكن بقي ايقونة ( ادخال رابط )؟
ممكن الكود الخاص به
*-.-**-.-**-.-**-.-**-.-**-.-**-.-*
بعد البحث وجدتها ايضا
الانتقال السريع
المواضيع المتشابهه
الموضوعكاتب الموضوعالمنتدىمشاركاتآخر مشاركة
[ HTML ]تغيير كلاسات الـ Font Awesome عند الضغط عليهاWRONG WAYقسم الشروحات الخاصة بـ لغات البرمجة82022-08-09 11:55 PM
[ شـرح ]إضافة كود التنبيهات بدون هاك بإستخدام مكتبة Font AwesomeWRONG WAYقسم تطوير الـ vBulletin32016-12-11 01:06 PM
[ شـرح ]طريقة استخدام ايقونات مكتبة Font Awesome بداخل المواضيع و المشاركاتWRONG WAYقسم تطوير الـ vBulletin02015-08-29 07:25 AM
عبد الفتاح السيسى - يستقبل أعضاء مجلس أمناء مكتبة الأسكندريةWRONG WAYالقسم الإخبارى02015-04-18 10:35 AM
[ شـرح ]شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font AwesomeWRONG WAYقسم تطوير الـ vBulletin02015-03-12 03:17 PM
الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن 07:05 AM .
المواضيع و التعليقات المنشورة لا تعبر عن رأى الإدارة ولا نتحمل مسئولية حيال ذلك "و يتحمل كاتبها مسئولية النشر".
التصميم خاص بالمنتدى ولا نسمح بالإقتباس منه أو طلب تصميم مشابه.