أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
سوف نتناول اليوم شرح لكيفية إستبدال أزرار المحرر السريع والمحرر المتطور بـ مكتبة أيقونات 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 هكذا ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
نبدأ بشرح التعديل على صندوق المحرر ,,
1- إذهب إلى لوحة تحكم منتداك ,,
2- الإستايلات والقوالب ,,
3- البحث في القوالب ,,
ابحث عن قالب ,,
كما فى الصورة ,,
ثم إضغط عليه دبل كليك ليفتح معك القالب لتبدأ بتحريره ,,
* عليك التركيز فى الخطوات التالية ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
ايحث عن
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
إبحث عن ,,
ثم إستبدله بـ ,,
* فى تعاريف CSS الإضافية/Additional CSS Definitions ,,
اضف ,,
النتيجة ,,
كما يمكنك تطبيق هذا الشرح على المحرر البسيط أو المحرر السريع ,, عن طريق التعديل على قالب ,,
و
كما يمكنك التحكم فى لون الأزرار داخل المحرر عن طريق تعديل ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
دمتم بود ,,
للمعاينة المباشرة ,,
قسم الشكاوى و الإستفسارات - معهد بسمة مصرية | خطوات فى عالم الإبداع
يمكنك الكتابة والرد على المواضيع فى هذا القسم بدون تسجيل ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
سوف نتناول اليوم شرح لكيفية إستبدال أزرار المحرر السريع والمحرر المتطور بـ مكتبة أيقونات 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
3- البحث في القوالب ,,
ابحث عن قالب ,,
كود:
editor_toolbar_on
ثم إضغط عليه دبل كليك ليفتح معك القالب لتبدأ بتحريره ,,
* عليك التركيز فى الخطوات التالية ,,
إبحث عن ,,
كود:
<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>
اضف ,,
كود:
.NewBBCode{ cursor:pointer; width:21px; height:15px; text-align:center; } .NewBBCode2{ cursor:pointer; width:10px; height:7px; text-align:center; }
كما يمكنك تطبيق هذا الشرح على المحرر البسيط أو المحرر السريع ,, عن طريق التعديل على قالب ,,
كود:
showthread_quickreply
كود:
postbit_quickedit
كود:
color:#615D5D;
دمتم بود ,,
للمعاينة المباشرة ,,
قسم الشكاوى و الإستفسارات - معهد بسمة مصرية | خطوات فى عالم الإبداع
يمكنك الكتابة والرد على المواضيع فى هذا القسم بدون تسجيل ,,