هيلبرنت | Helpernt

هيلبرنت | Helpernt (https://www.helpernt.com/vb/index.php)
-   ركن تطوير منتديات vb3.8.0 (https://www.helpernt.com/vb/forumdisplay.php?f=99)
-   -   [ vBulletin 3 ] : طريقة إستبدال أزرار محرر موضوع جديد بـ مكتبة Font Awesome مع تلميحات Tooltip (https://www.helpernt.com/vb/showthread.php?t=9533)

hawaadzair 07-04-2019 01:12 PM

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


http://www10.0zz0.com/2013/08/26/01/476095982.gif


مثال
https://6.top4top.net/p_1280nmszl1.png
أولا وقبل البدأ في عمل الخطوات التالية يجب أن تكون المكتبة الخاصة بال 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">&nbsp;</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">&nbsp;</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%">&nbsp;</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


وشكراااا على متابعتكم الطيبة
دمتم بود

هيلبرنت 07-04-2019 02:35 PM

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

هيلبرنت 07-04-2019 02:35 PM

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

Mohamed yasser 07-04-2019 02:44 PM

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

hawaadzair 07-04-2019 04:55 PM

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

المشاركة الأصلية كتبت بواسطة هيلبرنت (المشاركة 31000)
شكرا لك على الطرح المميز اخى

الله يبارك فيك استاذ وشكراااا

hawaadzair 07-04-2019 04:56 PM

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

المشاركة الأصلية كتبت بواسطة hazem (المشاركة 31003)
جميل بارك الله فيك

وفيك بركة اخ حازم وياريت تضيف الاكواد في التحسينات المقبلة للاستايل وشكرااا

UnName 07-04-2019 05:53 PM

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

hawaadzair 07-04-2019 08:15 PM

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

المشاركة الأصلية كتبت بواسطة UnName (المشاركة 31016)
تسلم ايدك بارك الله فيك

الله يحفظك ويبارك فيك

S!L3NT H!LL 07-05-2019 12:34 AM

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

Mighty Dr.Wolf 07-05-2019 02:51 AM

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


الساعة الآن 03:23 PM

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. TranZ By Almuhajir