الملاحظات

ركن تطوير منتديات vb3.8.0 القسم خاص بتطوير منتديات الجيل الثالث ويمنع منعاً باتاً.. كتابة اي موضوع يهتم بمشاكل المنتديات (( يمنع وضع نسخ vBulletin ))

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

طريقة إستبدال أزرار محرر موضوع جديد بـ مكتبة Font Awesome مع تلميحات Tooltip " width="6" height="20" alt="" /></td> $vBeditTemplate </if> </tr> </table> </if> </div> <table cellpadding="0"...

احصائياتى

الردود
12

المشاهدات
142
aymen
.:: عضو مشارك ::.
  • aymen is a jewel in the roughaymen is a jewel in the roughaymen is a jewel in the roughaymen is a jewel in the rough

  • aymen غير متواجد حالياً

المشاركات
73

+التقييم
62

تاريخ التسجيل
Nov 2018

الاقامة
الجزائر

نظام التشغيل
windows 8.1

رقم العضوية
1849
07-04-2019, 01:12 PM
المشاركة 1
07-04-2019, 01:12 PM
المشاركة 1
new طريقة إستبدال أزرار محرر موضوع جديد بـ مكتبة Font Awesome مع تلميحات Tooltip
طريقة إستبدال أزرار محرر موضوع جديد بـ مكتبة 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">&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
المشاركة 2
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت غير متواجد حالياً
افتراضي رد: طريقة إستبدال أزرار محرر موضوع جديد بـ مكتبة Font Awesome مع تلميحات Tooltip
شكرا لك على الطرح المميز اخى

قديم 07-04-2019, 02:35 PM
المشاركة 3
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت غير متواجد حالياً
افتراضي رد: طريقة إستبدال أزرار محرر موضوع جديد بـ مكتبة Font Awesome مع تلميحات Tooltip
تم تقييمك .

قديم 07-04-2019, 02:44 PM
المشاركة 4
Mohamed yasser
مشرف قسم تطوير المواقع
.:: مطور لغة PHP ::.
  • Mohamed yasser غير متواجد حالياً
افتراضي رد: طريقة إستبدال أزرار محرر موضوع جديد بـ مكتبة Font Awesome مع تلميحات Tooltip
جميل بارك الله فيك

قديم 07-04-2019, 04:55 PM
المشاركة 5
aymen
.:: عضو مشارك ::.
  • aymen غير متواجد حالياً
افتراضي رد: طريقة إستبدال أزرار محرر موضوع جديد بـ مكتبة Font Awesome مع تلميحات Tooltip
الله يبارك فيك استاذ وشكراااا

قديم 07-04-2019, 04:56 PM
المشاركة 6
aymen
.:: عضو مشارك ::.
  • aymen غير متواجد حالياً
افتراضي رد: طريقة إستبدال أزرار محرر موضوع جديد بـ مكتبة Font Awesome مع تلميحات Tooltip
وفيك بركة اخ حازم وياريت تضيف الاكواد في التحسينات المقبلة للاستايل وشكرااا

قديم 07-04-2019, 05:53 PM
المشاركة 7
UnName
مشرف قسم تطوير المنتديات
.:: مطور منتديات الـ vBulletin ::.
  • UnName غير متواجد حالياً
افتراضي رد: طريقة إستبدال أزرار محرر موضوع جديد بـ مكتبة Font Awesome مع تلميحات Tooltip
تسلم ايدك بارك الله فيك

قديم 07-04-2019, 08:15 PM
المشاركة 8
aymen
.:: عضو مشارك ::.
  • aymen غير متواجد حالياً
افتراضي رد: طريقة إستبدال أزرار محرر موضوع جديد بـ مكتبة Font Awesome مع تلميحات Tooltip
الله يحفظك ويبارك فيك

قديم 07-05-2019, 12:34 AM
المشاركة 9
S!L3NT H!LL
.:: كبار الشخصيات ::.
صاحب موقع الصاعقة العربية
  • S!L3NT H!LL غير متواجد حالياً
افتراضي رد: طريقة إستبدال أزرار محرر موضوع جديد بـ مكتبة Font Awesome مع تلميحات Tooltip
عاشت ايدك يالطيب ما قصرت

قديم 07-05-2019, 02:51 AM
المشاركة 10
Mighty Dr.Wolf
.:: عضو مبدع ::.
  • Mighty Dr.Wolf غير متواجد حالياً
افتراضي رد: طريقة إستبدال أزرار محرر موضوع جديد بـ مكتبة Font Awesome مع تلميحات Tooltip
شكرا لك على الشرح المميز
موضوع مميز وطرح جدا جميل
بارك الله بكم
تقبل تحيتي

اضافة رد

العلامات المرجعية

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


أدوات الموضوع

الانتقال السريع

المواضيع المتشابهه للموضوع: طريقة إستبدال أزرار محرر موضوع جديد بـ مكتبة Font Awesome مع تلميحات Tooltip
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[ vBulletin 3 ] : طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع هيلبرنت ركن تطوير منتديات vb3.8.0 3 03-25-2019 08:53 PM
[XF 2.x] : شرح طريقة إضافة ايقونات مكتبة الخطوط Font Awesome للنافبار الزين فورو 2 نسيت النوم ركن شروحات الزين فورو XENFORO 7 11-13-2018 08:38 PM
طريقة استخدام ايقونات مكتبة Font Awesome بداخل صندوق المواضيع و المشاركات محمد الزلوعي ركن مشاكل وطلبات المنتديات 7 03-20-2018 10:12 PM
[ شرح ] : طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo هيلبرنت ركن شروحات الزين فورو XENFORO 5 09-21-2017 05:27 PM
شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome هيلبرنت ركن تطوير منتديات vb3.8.0 4 01-19-2016 12:28 PM




الساعة الآن 08:04 AM
Powered by vBulletin® Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
RSS 2.0XML Site MapTAGS SiteInfo SiteRSS FeedMap SectionsvB MapsMap TagSitemap ForumMaps Forum