قديم 2015-04-07, 08:17 AM
المشاركة : ( 1 )
.:: ! HTML PROF ::.
الصورة الرمزية WRONG WAY
WRONG WAY
.:: EGY BASMA ::.
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
مساحة إعلانية
قديم 2016-12-11, 12:18 PM
المشاركة : ( 2 )
Kurd-Sat Admin
الصورة الرمزية FOR SAT
FOR SAT
.:: مـشـرف ::.
افتراضي رد: طريقة إستبدال أزرار المحرر بـ مكتبة Font Awesome مع تلميحات Tooltip
قمة في الابداع اخي
لم يبقى موقع ولم ابحث به عن هذا الشرح
*-.-**-.-**-.-**-.-**-.-**-.-**-.-*
تم تطبيق الشرح و النتيجة جيد جداا
لكن بقي ايقونة ( ادخال رابط )؟
ممكن الكود الخاص به
*-.-**-.-**-.-**-.-**-.-**-.-**-.-*
بعد البحث وجدتها ايضا


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

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