بسمة مصرية

بسمة مصرية

تسجيل عضوية جديدةنسيت كلمة المرور

جميع الحقوق محفوظة - Egybasma.com
قديم 2015-04-07, 08:17 AM المشاركة : ( 1 )
.:: ! HTML PROF ::.
WRONG WAY
.:: EGY BASMA ::.
الصورة الرمزية WRONG WAY

Technical Support
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
خالد حنفي وزير التموين الخبز يباع للمواطن بإيصال لأول مرة
اتصالات مكثفة مع السلطات السودانية للإفراج عن الصيادين
إصابة مجند وإتلاف سيارة شرطة فى مظاهرة ببني سويف
HTC تكشف رسميا عن الهاتف One M9 Plus
Alcatel تطلق هاتفها OneTouch Flash فى 20 أكتوبر الحالى
الخميس 19/4/2015 استئناف محاكمة محمد الظواهري في تكوين تنظيم ارهابى
طريقة معرفة عدد رسائلك مع أصدقاء على واتس آب
حملة أمنية من مديرية أمن سوهاج - إزالت 34 حالة تعد على الأراضي الزراعية
حدث فى مثل هذا اليوم ( 26 رمضان )
ضبط مجموعة من الاسلحة لدى سائق توكتوك متجهاً الى كفر الشيخ !
مساحة إعلانية
قديم 2016-12-11, 12:18 PM المشاركة : ( 2 )
Kurd-Sat Admin
FOR SAT
.:: مـشـرف ::.
الصورة الرمزية FOR SAT

مـشـرف الـمـنـتـدى الـعـامـ
افتراضي رد: طريقة إستبدال أزرار المحرر بـ مكتبة Font Awesome مع تلميحات Tooltip
قمة في الابداع اخي
لم يبقى موقع ولم ابحث به عن هذا الشرح
*-.-**-.-**-.-**-.-**-.-**-.-**-.-*
تم تطبيق الشرح و النتيجة جيد جداا
لكن بقي ايقونة ( ادخال رابط )؟
ممكن الكود الخاص به
*-.-**-.-**-.-**-.-**-.-**-.-**-.-*
بعد البحث وجدتها ايضا

الكلمات الدلالية (Tags)
أزرار, awesome, مكتبة, المحرر, تلميحات, font, tooltip, إستبدال, طريقة
طريقة إستبدال أزرار المحرر بـ مكتبة Font Awesome مع تلميحات Tooltip

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

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

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


الساعة الآن 08:59 AM.


Powered by vBulletin® Version 3.8.7 Copyright ©2000 - 2017, vBulletin Solutions, Inc
Like, Share System By Weblanca.com
HTMLMAPXMLRSS 2.0RSS