طريقة إستبدال أزرار محرر موضوع جديد بـ مكتبة Font Awesome مع تلميحات Tooltip
مثال 
أولا وقبل البدأ في عمل الخطوات التالية يجب أن تكون المكتبة الخاصة بال font awesome مثبتة على موقعك
ولم لم يركبها بعد يمكنك مطالعة الموضوع من الرابط هنا
نبدأ بالتعديل على صندوق المحرر حيث نبحث في القوالب والاستايلات
1- إذهب إلى لوحة تحكم منتداك
كود:
https://www.mydomain.com/vb/admincp
2- الإستايلات والقوالب
3- البحث في القوالب
ابحث عن قالب
كود بلغة HTML:
editor_toolbar_on
نفتحه ونعمل له نسخة احتياطية في ملف WORDاو TXT
ونحذف ما بداخله و نعوضه بالكود التالي
كود بلغة HTML:
$vBeditTemplate[clientscript]
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td id="$editorid" class="vBulletin_editor" width="100%">
<div id="{$editorid}_controls" class="controlbar">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><div class="imagebutton" id="{$editorid}_cmd_removeformat"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[remove_text_formatting]"><span class="NewBBCode fa fa-language" style="color:#c9127c; font-size:15px;"></span></span></div></td>
<if condition="$show['font_bbcode'] OR $show['size_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
</if>
<if condition="$show['font_bbcode']">
<td><div class="imagebutton" id="{$editorid}_popup_fontname" title="$vbphrase[fonts]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="popup_feedback"><div id="{$editorid}_font_out" style="width:91px"> </div></td>
<td class="popup_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
</if>
<if condition="$show['size_bbcode']">
<td><div class="imagebutton" id="{$editorid}_popup_fontsize" title="$vbphrase[sizes]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="popup_feedback"><div id="{$editorid}_size_out" style="width:25px"> </div></td>
<td class="popup_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
</if>
<if condition="$show['color_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_popup_forecolor" title="$vbphrase[colors]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="{$editorid}_color_out"><span class="NewBBCode fa fa-paint-brush" style="color:#c9127c; 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>
<td class="alt_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
</if>
<if condition="$show['wysiwygsmilies']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_popup_smilie" title="$vbphrase[smilies]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><span class="NewBBCode fa fa-smile-o fa-lg" style="color:#c9127c;"></span></td>
<td class="alt_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
</if>
<if condition="$show['attach']">
<td><div class="imagebutton" id="{$editorid}_popup_attach" title="$vbphrase[attachments]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><span class="NewBBCode fa fa-paperclip" style="color:#c9127c; font-size:15px;"></span></td>
<td class="alt_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
</if>
<!--
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_cut"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[cut]"><span class="NewBBCode fa fa-scissors" style="color:#c9127c; font-size:15px;"></span></span></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_copy"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[copy]"><span class="NewBBCode fa fa-files-o" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_paste"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[paste]"><span class="NewBBCode fa fa-clipboard" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
-->
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_undo"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[undo]"><span class="NewBBCode fa fa-undo" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_redo"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[redo]"><span class="NewBBCode fa fa-repeat" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
<td width="100%"> </td>
<if condition="is_browser('ie') AND !is_browser('mac')">
<td><div class="imagebutton" id="{$editorid}_cmd_spelling"><img src="$stylevar[imgdir_editor]/spelling.gif" width="21" height="20" alt="$vbphrase[check_spelling]" /></div></td>
</if>
<td>
<div class="imagebutton" id="{$editorid}_cmd_resize_0_100"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[decrease_size]"><span class="NewBBCode2 fa fa-sort-asc" style=" color:#c9127c; font-size:15px;"></span></span></div>
<div class="imagebutton" id="{$editorid}_cmd_resize_1_100"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[increase_size]"><span class="NewBBCode2 fa fa-sort-desc" style=" color:#c9127c; font-size:15px;"></span></span></div>
</td>
<if condition="$show['wysiwyg_compatible']">
<td><div class="imagebutton" id="{$editorid}_cmd_switchmode"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[switch_editor_mode]"><span class="NewBBCode fa fa-font" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
</if>
</tr>
</table>
<if condition="!$show['basicbbcodeonly']">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<if condition="$show['basic_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_bold"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[bold]"><span class="NewBBCode fa fa-bold" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_italic"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[italic]"><span class="NewBBCode fa fa-italic" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_underline"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[underline]"><span class="NewBBCode fa fa-underline" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
</if>
<if condition="$show['align_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<if condition="$stylevar['textdirection'] == 'ltr'">
<td><div class="imagebutton" id="{$editorid}_cmd_justifyleft"><img src="$stylevar[imgdir_editor]/justifyleft.gif" width="21" height="20" alt="$vbphrase[align_left]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifycenter"><img src="$stylevar[imgdir_editor]/justifycenter.gif" width="21" height="20" alt="$vbphrase[align_center]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifyright"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[align_right]"><span class="NewBBCode fa fa-align-right" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
<else />
<td><div class="imagebutton" id="{$editorid}_cmd_justifyright"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[align_right]"><span class="NewBBCode fa fa-align-right" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifycenter"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[align_center]"><span class="NewBBCode fa fa-align-center" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifyleft"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[align_left]"><span class="NewBBCode fa fa-align-left" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
</if>
</if>
<if condition="$show['align_bbcode'] OR $show['list_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
</if>
<if condition="$show['list_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_insertorderedlist"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[ordered_list]"><span class="NewBBCode fa fa-list-ol" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_insertunorderedlist"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[unordered_list]"><span class="NewBBCode fa fa-list-ul" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
</if>
<if condition="$show['align_bbcode'] OR $show['list_bbcode']">
<if condition="$stylevar['textdirection'] == 'ltr'">
<td><div class="imagebutton" id="{$editorid}_cmd_outdent"><img src="$stylevar[imgdir_editor]/outdent.gif" width="21" height="20" alt="$vbphrase[decrease_indent]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_indent"><img src="$stylevar[imgdir_editor]/indent.gif" width="21" height="20" alt="$vbphrase[increase_indent]" /></div></td>
<else />
<td><div class="imagebutton" id="{$editorid}_cmd_outdent"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[decrease_indent]"><span class="NewBBCode fa fa-indent" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_indent"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[increase_indent]"><span class="NewBBCode fa fa-outdent" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
</if>
</if>
<if condition="$show['url_bbcode'] OR $show['img_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<if condition="$show['url_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_createlink"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[insert_link]"><span class="NewBBCode fa fa-link" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_unlink"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[remove_link]"><span class="NewBBCode fa fa-chain-broken" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_email"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[insert_email_link]"><span class="NewBBCode fa fa-at" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
</if>
<if condition="$show['img_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_insertimage"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[insert_image]"><span class="NewBBCode fa fa-picture-o" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
</if>
</if>
<if condition="$show['quote_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_quote"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[wrap_quote_tags]"><span class="NewBBCode fa fa-quote-right" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
</if>
<if condition="$show['code_bbcode'] OR $show['html_bbcode'] OR $show['php_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<if condition="$show['code_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_code"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[wrap_code_tags]"><span class="NewBBCode fa fa-slack" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
</if>
<if condition="$show['html_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_html"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[wrap_html_tags]"><span class="NewBBCode fa fa-code" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
</if>
<if condition="$show['php_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_php"><span class="simptip-position-top simptip-fade" data-tooltip="$vbphrase[wrap_php_tags]"><span class="NewBBCode fa fa-file-code-o" style=" color:#c9127c; font-size:15px;"></span></span></div></td>
</if>
</if>
<if condition="$vBeditTemplate['extrabuttons'] != '' ">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
$vBeditTemplate[extrabuttons]
</if>
</tr>
</table>
</if>
</div>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr valign="top">
<td class="controlbar">
<textarea name="message" id="{$editorid}_textarea" rows="10" cols="60" style="display:block; width:100%; height:{$editor_height}px" tabindex="1" dir="$stylevar[textdirection]">$newpost[message]</textarea>
</td>
<if condition="$smiliebox"><td class="controlbar" style="width: 20px; margin-right: 10px;">$smiliebox</td></if>
</tr>
</table>
</td>
</tr>
</table>
<input type="hidden" name="wysiwyg" id="{$editorid}_mode" value="$editortype" />
<script type="text/javascript">
<!--
vB_Editor['$editorid'] = new vB_Text_Editor('$editorid', $editortype, '$forumid', '$parsesmilie', undefined, '$ajax_extra');
//-->
</script>
ثم في تعاريف CSS الإضافية/Additional CSS Definitions
كود بلغة HTML:
.NewBBCode{ cursor:pointer; width:21px; height:15px; text-align:center; } .NewBBCode2{ cursor:pointer; width:10px; height:7px; text-align:center; }
لتغيير لون أزرار المحرر
نغير كود اللون في
editor_toolbar_on
حيث نغير
color:#c9127c;
#c9127c الى الكود الذي نريده مثلا لتغيير الى الرمادي نستبدله الى
#696467
وشكراااا على متابعتكم الطيبة
دمتم بود