romaissa
10-30-2013, بتوقيت غرينيتش 11:15 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* ط§ظ„طھط¹ط§ظ…ظ„ ظ…ط¹ ط®طµط§ط¦طµ ط§ظ„ظ…ط*ط±ط± ط§ظ„ط¬ط¯ظٹط¯ CKeditor ظپظٹ ط§ظ„ظ†ط³ط® 4.1.4 ظˆظƒط§ظپط© طھظ†ط³ظٹظ‚ط§طھظ‡ (http://www.dzbatna.com/t1881685/)
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
تحية طيبة للجميع
مع ظهور النسخة الجديدة vb 4.1.4
ظهر لنا المحرر الجديد للمواضيع والمشاركات CKeditor
وهو محرر رائع جدا ومميز بكامل محتوياته
وقد كتب الاخوان عدة مواضيع عن كيفية التعامل مع أزرار وأوامر المحرر الجديد
اليوم إن شاء الله سوف نتطرق إلى كيفية تعديل ألوان وخلفيات وأزرار هذا المحرر
عن طريق أكواد CSS الخاصة به
وشرح طريقة بالصور لكل مكان فيه مع توضيح عمل كود code CSS بإضافة وسم توضيحي قبله
طبعا جميع هذه الأكواد سوف نضعها في قالب template additional.css
مصطلحات سوف ندرجها في الأكواد يجب التعرف عليها :
background-color : لون الخلفية
background-image : صورة الخلفية
background-repeat : تكرار صورة الخلفية
repeat : تكرار عمودي وأفقي
repeat-x : تكرار أفقي
repeat-y : تكرار عمودي
transparent : شفاف
border : الحدود
solid : مصمت أو متواصل بدون تقطيع
opacity : درجة الشفافية
hover: عند مرور الماوس
height : الارتفاع
width: العرض
margin: الهامش الخارجي
color: اللون
font: الخط
blod: غامق
font-size: حجم الخط
ويوجد المزيد من أكواد CSS التي يمكنك استخدامها مع المحرر أو غيره
مع العلم أن الشرح طريقة هو لتوضيح هذه الخصائص وأكوادها
ويمكنك عمل نفس الصندوق بواسطة الشرح طريقة المقدم في اخر الموضوع
نبدأ الآن بحول الله وقوته
رمز PHP:
<code style="white-space:nowrap"> <code> /* خصائص الحد الخارجي للمحرر */
.cke_skin_kama
{
background-color: #eeeeee !important;
border:1px #cccccc solid !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/1.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* خلفية جسم المحرر بالكامل من الخارج (body) */
.cke_skin_kama .cke_wrapper
{
background-color: #transparent !important;
font: bold 12pt Arial !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/2.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* خلفية جسم المحرر بالكامل من الداخل (body) */
.cke_skin_kama .cke_editor,
.cke_editor
{
background:#eeeeee url('{vb:stylevar imgdir_misc}/ck/body-in.png') repeat-x !important;
border:1px #FFFFFF solid !important;
font: bold 12pt Arial !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/6.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* خلفية المحرر في حالة استخدام المحرر البسيط */
.texteditor.content .cke_skin_kama,
.texteditor.content .cke_skin_kama textarea.cke_source,
.texteditor textarea {
font: {vb:stylevar content_msg_font} !important;
background-color: #FFFFFF !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/21.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* لون الازرار في الحالة الاعتيادية + زر حفظ واسترجاع */
.cke_skin_kama .cke_button a.cke_off
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons.png') !important;
background-repeat: repeat-x !important;
filter: alpha(opacity=100) !important; /* IE */
opacity: 1.00 !important; /* Safari, Opera and Mozilla */
border: 1px #adadad solid !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/3.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* لون الازرار في حالة مرور الماوس + زر حفظ واسترجاع */
.cke_skin_kama .cke_button a.cke_off:hover
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons-h.png') !important;
background-repeat: repeat-x !important;
filter: alpha(opacity=100) !important; /* IE */
opacity: 1.00 !important; /* Safari, Opera and Mozilla */
border: 1px #adadad solid !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/7.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* لون الازرار في حالة التفعيل */
.cke_skin_kama .cke_button a.cke_on
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons-on.png') !important;
background-repeat: repeat-x !important;
filter: alpha(opacity=100) !important; /* IE */
opacity: 1.00 !important; /* Safari, Opera and Mozilla */
border: 1px #adadad solid !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/8.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* لون الازرار في حالة التفعيل عند مرور الماوس */
.cke_skin_kama .cke_button a.cke_on:hover
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons-h.png') !important;
background-repeat: repeat-x !important;
filter: alpha(opacity=100) !important; /* IE */
opacity: 1.00 !important; /* Safari, Opera and Mozilla */
border: 1px #adadad solid !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/7.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* خلفية مجموعة الأزرار الداخلي */
.cke_skin_kama .cke_browser_gecko .cke_toolbar
{
background: transparent tnone !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/22.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* خصائص حدود الازرار من الخارج */
.cke_skin_kama .cke_toolgroup
{
background-color: #ff0000 !important;
background-image: none !important;
margin:3px !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/23.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* القوائم المنسدلة - الخلفية بالكامل - العنوان فقط */
.cke_skin_kama .cke_rcombo a
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons.png') !important;
background-repeat: repeat !important;
filter: alpha(opacity=100) !important; /* IE */
opacity: 1.00 !important; /* Safari, Opera and Mozilla */
border: 1px #adadad solid !important;
max-hight:24px !important;
margin-top:5px !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/4.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* القوائم المنسدلة - الخلفية بالكامل عند مرور الماوس- العنوان فقط */
.cke_skin_kama .cke_rcombo a:hover
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons-h.png') !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/10.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* نص القوائم المنسدلة - العنوان فقط */
.cke_skin_kama .cke_rcombo .cke_text
{
color: #666666 !important;
background-image: none !important;
font: bold 11px Tahoma !important;
margin-top:2px !important;
}
</code> </code>
+
رمز PHP:
<code style="white-space:nowrap"> <code> /* نص القوائم المنسدلة في حالة الاختيار ومرور والماوس - العنوان فقط */
.cke_skin_kama .cke_rcombo .cke_off a:hover .cke_text,
.cke_skin_kama .cke_rcombo .cke_off a:focus .cke_text,
.cke_skin_kama .cke_rcombo .cke_off a:active .cke_text,
{
background-color: transparent !important;
background-image: none !important;
color: #222222 !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/5.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* القوائم المنسدلة - الأسهم الجانبية */
.cke_skin_kama .cke_rcombo .cke_openbutton
{
background-color: transparent !important;
background-image: none !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/9.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - الجسم بالكامل */
.cke_skin_kama .cke_dialog_body
{
background-color: #cccccc !important;
border: 1px #adadad solid !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/11.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - الجسم الداخلي*/
.cke_skin_kama .cke_dialog_contents
{
background-color: #eeeeee !important;
border: 1px #cdcdcd solid !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/14.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - الهيدر header أو العنوان */
.cke_skin_kama .cke_dialog_title
{
background-image: url('{vb:stylevar imgdir_misc}/ck/popup-header.png') !important;
background-repeat: repeat-x !important;
border: 1px #adadad solid !important;
color: #333333 !important;
padding: 6px 5px 2px 0px !important;
font: bold 15px Arial !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/12.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - القسم السفلي - الفوتر*/
.cke_skin_kama .cke_dialog_footer
{
background-image: url('{vb:stylevar imgdir_misc}/ck/popup-header.png') !important;
background-repeat: repeat-x !important;
border: 1px #adadad solid !important;
color: #333333 !important;
font: bold 15px Arial !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/17.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - خصائص زر إغلاق في الأعلى على اليسار */
.cke_skin_kama .cke_dialog .cke_dialog_body .cke_dialog_close_button
{
position: absolute !important;
top: 10px !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/15.png
ملاحظة :
خلفية زر إغلاق يتم تغييرها من الصورة على هذا المسار :
رمز PHP:
<code style="white-space:nowrap"> <code> clientscript/ckeditor/skins/kama/images/sprites.png
</code> </code>
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - تنسيق زر إلغاء وموافق */
.cke_skin_kama a.cke_dialog_ui_button_cancel,
.cke_skin_kama a.cke_dialog_ui_button_ok
{
border: 1px #CCCCCC solid !important;
}
</code> </code>
+
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - نص زر إلغاء وموافق */
.cke_skin_kama a.cke_dialog_ui_button_cancel span,
.cke_skin_kama a.cke_dialog_ui_button_ok span
{
font: bold 11px Tahoma !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/18.png
ملاحظة :
خلفية زر موافق وإلغاء يتم تغييرها من الصورة على هذا المسار :
رمز PHP:
<code style="white-space:nowrap"> <code> clientscript/ckeditor/skins/kama/images/sprites.png
</code> </code>
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - التبويب العلوي */
.cke_skin_kama a.cke_dialog_tab
{
background:#eeeeee url('{vb:stylevar imgdir_misc}/ck/buttons.png') repeat-x !important;
background-repeat: repeat !important;
border: 1px #adadad solid !important;
color: #333333 !important;
font: bold 11px Tahoma !important;
margin: 1px !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/16.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - التبويب العلوي عند مرور الماوس*/
.cke_skin_kama a:hover.cke_dialog_tab
{
background:#eeeeee url('{vb:stylevar imgdir_misc}/ck/buttons-h.png') repeat-x !important;
background-repeat: repeat !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/19.png
رمز PHP:
<code style="white-space:nowrap"> <code>
/* خصائص القوائم المنسدلة في النوافذ المنبقة */
.cke_panel_grouptitle,
.cke_skin_kama .cke_dialog_ui_input_select
{
background-color: #f7f7f7 !important;
background-image: none !important;
color: #222222 !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/24.png
هكذا انتهينا من أكثر الأماكن شيوعا في محرر CKeditor الجديد بفضل الله سبحانه وتعالى
-------------------------------------------------------------------
الآن نأتي لبعض الإضافات التي يمكنك استخدامها في الصندوق
1- صندوق الابتسامات في الأسفل مع الشكل الحالي كما في الصورة التالية :
http://www.wahtaljouf.com/vip/ckeditor/20.png
طريقة عمل هذا الصندوق هو كالتالي :
أولا يوجد في المرفقات برودكت استورده من لوحة التحكم
ثم توجه الى : الستايل styleات والقوالب - التحكم بالستايل styleات
ومن جوار الستايل style المطلوب اختر : متغيرات الستايل style
ثم اذهب
الان نبحث عن المتغير : editor_smiliebox_smiliesize
ونجعل الحجم 50 ونختار الواحدات px
ونحفظ
ثم نتوجه إلى قالب template editor2.css
ونستبدل محتواه بالمرفق editor2.css
ثم نحفظ
الان نتوجه الى قالب template : editor_smilie
ونستبدل محتواه بالقالب template المرفق editor_smilie
ثم نتوجه إلى الاعدادات - الخيارات
ونختار الاعداد :خيارات واجهة interface إرسال الرسائل والمشاركات
ونضع الاعدادات التالية :
إجمالي الابتسامات في صندوق الابتسامات : 30
عدد الابتسامات بكل سطر من صندوق الابتسامات : 15
تفعيل الابتسامات أسفل محرر الكتابة : نعم
إضافة صندوق الابتسامات في الرد السريع : لا
عدد صفوف الابتسامات : 2
ثم نحفظ
وهكذا سيظهر الصندوق الخاص بالابتسامات مثل ماهو في الصورة السابقة
-------------------------------------------------------------------
2- تعريب النافذة المنبثقة الخاصة بإدراج صورة من رابط URL
لأن تعريب لغة المنتدى forum لايشمل هذه النقطة
وهذه صورته بعد التعريب
http://www.wahtaljouf.com/vip/ckeditor/25.png
الطريقة كالتالي :
يوجد في المرفقات ملف اسمه image.js
نستبدله مع مثيله على هذا المسار
رمز PHP:
<code style="white-space:nowrap"> <code> clientscript/ckeplugins/vbimage/dialogs/image.js
</code> </code>
وهكذا انتهينا من التعريب
-------------------------------------------------------------------
3- لمن يريد شكل صندوق الرد كما هو في الصور السابقة
يوجد في المرفقات مجلد صندوق الرد بداخله التالي :
ملف اسمه : additional
ينسخ محتواه الى القالب template additional.css
ايضا يوجد مجلد للصور اسمه ck
يرفعه بالكامل الى مجلد misc الخاص بالستايل style الذي يريد
تعديل شكل الصندوق فيه
ايضا يوجد صورة اسمها sprites.png
يستبدلها مع الصورة على هذا المسار
رمز PHP:
<code style="white-space:nowrap"> <code> clientscript/ckeditor/skins/kama/images/sprites.png
</code> </code>
في النهاية لا أطلب منكم سوى الدعاء لوالدي ووالدتي
أطال الله في عمرهما ومتعهما بموفور الصحة والعافية
هذا وصلى الله وبارك على خاتم الأنبياء والمرسلين
سيدنا وحبيبنا محمد عليه أفضل الصلاة وأتم التسليم
محبــــــكم / أبو عبدالعزيز ( المـ،،،ـافـر )
منتديات الواحة (http://www.wahtaljouf.com/vb)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif مرفقات الموضوع بالكامل.zip (http://www.traidnt.net/vb/attachments/582266d1308680971-مرفقات-الموضوع-بالكامل.zip) (42.5 كيلوبايت, عدد مرات المشاهدة 335 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
تحية طيبة للجميع
مع ظهور النسخة الجديدة vb 4.1.4
ظهر لنا المحرر الجديد للمواضيع والمشاركات CKeditor
وهو محرر رائع جدا ومميز بكامل محتوياته
وقد كتب الاخوان عدة مواضيع عن كيفية التعامل مع أزرار وأوامر المحرر الجديد
اليوم إن شاء الله سوف نتطرق إلى كيفية تعديل ألوان وخلفيات وأزرار هذا المحرر
عن طريق أكواد CSS الخاصة به
وشرح طريقة بالصور لكل مكان فيه مع توضيح عمل كود code CSS بإضافة وسم توضيحي قبله
طبعا جميع هذه الأكواد سوف نضعها في قالب template additional.css
مصطلحات سوف ندرجها في الأكواد يجب التعرف عليها :
background-color : لون الخلفية
background-image : صورة الخلفية
background-repeat : تكرار صورة الخلفية
repeat : تكرار عمودي وأفقي
repeat-x : تكرار أفقي
repeat-y : تكرار عمودي
transparent : شفاف
border : الحدود
solid : مصمت أو متواصل بدون تقطيع
opacity : درجة الشفافية
hover: عند مرور الماوس
height : الارتفاع
width: العرض
margin: الهامش الخارجي
color: اللون
font: الخط
blod: غامق
font-size: حجم الخط
ويوجد المزيد من أكواد CSS التي يمكنك استخدامها مع المحرر أو غيره
مع العلم أن الشرح طريقة هو لتوضيح هذه الخصائص وأكوادها
ويمكنك عمل نفس الصندوق بواسطة الشرح طريقة المقدم في اخر الموضوع
نبدأ الآن بحول الله وقوته
رمز PHP:
<code style="white-space:nowrap"> <code> /* خصائص الحد الخارجي للمحرر */
.cke_skin_kama
{
background-color: #eeeeee !important;
border:1px #cccccc solid !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/1.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* خلفية جسم المحرر بالكامل من الخارج (body) */
.cke_skin_kama .cke_wrapper
{
background-color: #transparent !important;
font: bold 12pt Arial !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/2.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* خلفية جسم المحرر بالكامل من الداخل (body) */
.cke_skin_kama .cke_editor,
.cke_editor
{
background:#eeeeee url('{vb:stylevar imgdir_misc}/ck/body-in.png') repeat-x !important;
border:1px #FFFFFF solid !important;
font: bold 12pt Arial !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/6.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* خلفية المحرر في حالة استخدام المحرر البسيط */
.texteditor.content .cke_skin_kama,
.texteditor.content .cke_skin_kama textarea.cke_source,
.texteditor textarea {
font: {vb:stylevar content_msg_font} !important;
background-color: #FFFFFF !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/21.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* لون الازرار في الحالة الاعتيادية + زر حفظ واسترجاع */
.cke_skin_kama .cke_button a.cke_off
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons.png') !important;
background-repeat: repeat-x !important;
filter: alpha(opacity=100) !important; /* IE */
opacity: 1.00 !important; /* Safari, Opera and Mozilla */
border: 1px #adadad solid !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/3.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* لون الازرار في حالة مرور الماوس + زر حفظ واسترجاع */
.cke_skin_kama .cke_button a.cke_off:hover
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons-h.png') !important;
background-repeat: repeat-x !important;
filter: alpha(opacity=100) !important; /* IE */
opacity: 1.00 !important; /* Safari, Opera and Mozilla */
border: 1px #adadad solid !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/7.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* لون الازرار في حالة التفعيل */
.cke_skin_kama .cke_button a.cke_on
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons-on.png') !important;
background-repeat: repeat-x !important;
filter: alpha(opacity=100) !important; /* IE */
opacity: 1.00 !important; /* Safari, Opera and Mozilla */
border: 1px #adadad solid !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/8.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* لون الازرار في حالة التفعيل عند مرور الماوس */
.cke_skin_kama .cke_button a.cke_on:hover
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons-h.png') !important;
background-repeat: repeat-x !important;
filter: alpha(opacity=100) !important; /* IE */
opacity: 1.00 !important; /* Safari, Opera and Mozilla */
border: 1px #adadad solid !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/7.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* خلفية مجموعة الأزرار الداخلي */
.cke_skin_kama .cke_browser_gecko .cke_toolbar
{
background: transparent tnone !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/22.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* خصائص حدود الازرار من الخارج */
.cke_skin_kama .cke_toolgroup
{
background-color: #ff0000 !important;
background-image: none !important;
margin:3px !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/23.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* القوائم المنسدلة - الخلفية بالكامل - العنوان فقط */
.cke_skin_kama .cke_rcombo a
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons.png') !important;
background-repeat: repeat !important;
filter: alpha(opacity=100) !important; /* IE */
opacity: 1.00 !important; /* Safari, Opera and Mozilla */
border: 1px #adadad solid !important;
max-hight:24px !important;
margin-top:5px !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/4.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* القوائم المنسدلة - الخلفية بالكامل عند مرور الماوس- العنوان فقط */
.cke_skin_kama .cke_rcombo a:hover
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons-h.png') !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/10.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* نص القوائم المنسدلة - العنوان فقط */
.cke_skin_kama .cke_rcombo .cke_text
{
color: #666666 !important;
background-image: none !important;
font: bold 11px Tahoma !important;
margin-top:2px !important;
}
</code> </code>
+
رمز PHP:
<code style="white-space:nowrap"> <code> /* نص القوائم المنسدلة في حالة الاختيار ومرور والماوس - العنوان فقط */
.cke_skin_kama .cke_rcombo .cke_off a:hover .cke_text,
.cke_skin_kama .cke_rcombo .cke_off a:focus .cke_text,
.cke_skin_kama .cke_rcombo .cke_off a:active .cke_text,
{
background-color: transparent !important;
background-image: none !important;
color: #222222 !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/5.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* القوائم المنسدلة - الأسهم الجانبية */
.cke_skin_kama .cke_rcombo .cke_openbutton
{
background-color: transparent !important;
background-image: none !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/9.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - الجسم بالكامل */
.cke_skin_kama .cke_dialog_body
{
background-color: #cccccc !important;
border: 1px #adadad solid !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/11.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - الجسم الداخلي*/
.cke_skin_kama .cke_dialog_contents
{
background-color: #eeeeee !important;
border: 1px #cdcdcd solid !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/14.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - الهيدر header أو العنوان */
.cke_skin_kama .cke_dialog_title
{
background-image: url('{vb:stylevar imgdir_misc}/ck/popup-header.png') !important;
background-repeat: repeat-x !important;
border: 1px #adadad solid !important;
color: #333333 !important;
padding: 6px 5px 2px 0px !important;
font: bold 15px Arial !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/12.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - القسم السفلي - الفوتر*/
.cke_skin_kama .cke_dialog_footer
{
background-image: url('{vb:stylevar imgdir_misc}/ck/popup-header.png') !important;
background-repeat: repeat-x !important;
border: 1px #adadad solid !important;
color: #333333 !important;
font: bold 15px Arial !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/17.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - خصائص زر إغلاق في الأعلى على اليسار */
.cke_skin_kama .cke_dialog .cke_dialog_body .cke_dialog_close_button
{
position: absolute !important;
top: 10px !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/15.png
ملاحظة :
خلفية زر إغلاق يتم تغييرها من الصورة على هذا المسار :
رمز PHP:
<code style="white-space:nowrap"> <code> clientscript/ckeditor/skins/kama/images/sprites.png
</code> </code>
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - تنسيق زر إلغاء وموافق */
.cke_skin_kama a.cke_dialog_ui_button_cancel,
.cke_skin_kama a.cke_dialog_ui_button_ok
{
border: 1px #CCCCCC solid !important;
}
</code> </code>
+
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - نص زر إلغاء وموافق */
.cke_skin_kama a.cke_dialog_ui_button_cancel span,
.cke_skin_kama a.cke_dialog_ui_button_ok span
{
font: bold 11px Tahoma !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/18.png
ملاحظة :
خلفية زر موافق وإلغاء يتم تغييرها من الصورة على هذا المسار :
رمز PHP:
<code style="white-space:nowrap"> <code> clientscript/ckeditor/skins/kama/images/sprites.png
</code> </code>
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - التبويب العلوي */
.cke_skin_kama a.cke_dialog_tab
{
background:#eeeeee url('{vb:stylevar imgdir_misc}/ck/buttons.png') repeat-x !important;
background-repeat: repeat !important;
border: 1px #adadad solid !important;
color: #333333 !important;
font: bold 11px Tahoma !important;
margin: 1px !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/16.png
رمز PHP:
<code style="white-space:nowrap"> <code> /* النوافذ المنبقة - التبويب العلوي عند مرور الماوس*/
.cke_skin_kama a:hover.cke_dialog_tab
{
background:#eeeeee url('{vb:stylevar imgdir_misc}/ck/buttons-h.png') repeat-x !important;
background-repeat: repeat !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/19.png
رمز PHP:
<code style="white-space:nowrap"> <code>
/* خصائص القوائم المنسدلة في النوافذ المنبقة */
.cke_panel_grouptitle,
.cke_skin_kama .cke_dialog_ui_input_select
{
background-color: #f7f7f7 !important;
background-image: none !important;
color: #222222 !important;
}
</code> </code>
مكانه بالصورة :
http://www.wahtaljouf.com/vip/ckeditor/24.png
هكذا انتهينا من أكثر الأماكن شيوعا في محرر CKeditor الجديد بفضل الله سبحانه وتعالى
-------------------------------------------------------------------
الآن نأتي لبعض الإضافات التي يمكنك استخدامها في الصندوق
1- صندوق الابتسامات في الأسفل مع الشكل الحالي كما في الصورة التالية :
http://www.wahtaljouf.com/vip/ckeditor/20.png
طريقة عمل هذا الصندوق هو كالتالي :
أولا يوجد في المرفقات برودكت استورده من لوحة التحكم
ثم توجه الى : الستايل styleات والقوالب - التحكم بالستايل styleات
ومن جوار الستايل style المطلوب اختر : متغيرات الستايل style
ثم اذهب
الان نبحث عن المتغير : editor_smiliebox_smiliesize
ونجعل الحجم 50 ونختار الواحدات px
ونحفظ
ثم نتوجه إلى قالب template editor2.css
ونستبدل محتواه بالمرفق editor2.css
ثم نحفظ
الان نتوجه الى قالب template : editor_smilie
ونستبدل محتواه بالقالب template المرفق editor_smilie
ثم نتوجه إلى الاعدادات - الخيارات
ونختار الاعداد :خيارات واجهة interface إرسال الرسائل والمشاركات
ونضع الاعدادات التالية :
إجمالي الابتسامات في صندوق الابتسامات : 30
عدد الابتسامات بكل سطر من صندوق الابتسامات : 15
تفعيل الابتسامات أسفل محرر الكتابة : نعم
إضافة صندوق الابتسامات في الرد السريع : لا
عدد صفوف الابتسامات : 2
ثم نحفظ
وهكذا سيظهر الصندوق الخاص بالابتسامات مثل ماهو في الصورة السابقة
-------------------------------------------------------------------
2- تعريب النافذة المنبثقة الخاصة بإدراج صورة من رابط URL
لأن تعريب لغة المنتدى forum لايشمل هذه النقطة
وهذه صورته بعد التعريب
http://www.wahtaljouf.com/vip/ckeditor/25.png
الطريقة كالتالي :
يوجد في المرفقات ملف اسمه image.js
نستبدله مع مثيله على هذا المسار
رمز PHP:
<code style="white-space:nowrap"> <code> clientscript/ckeplugins/vbimage/dialogs/image.js
</code> </code>
وهكذا انتهينا من التعريب
-------------------------------------------------------------------
3- لمن يريد شكل صندوق الرد كما هو في الصور السابقة
يوجد في المرفقات مجلد صندوق الرد بداخله التالي :
ملف اسمه : additional
ينسخ محتواه الى القالب template additional.css
ايضا يوجد مجلد للصور اسمه ck
يرفعه بالكامل الى مجلد misc الخاص بالستايل style الذي يريد
تعديل شكل الصندوق فيه
ايضا يوجد صورة اسمها sprites.png
يستبدلها مع الصورة على هذا المسار
رمز PHP:
<code style="white-space:nowrap"> <code> clientscript/ckeditor/skins/kama/images/sprites.png
</code> </code>
في النهاية لا أطلب منكم سوى الدعاء لوالدي ووالدتي
أطال الله في عمرهما ومتعهما بموفور الصحة والعافية
هذا وصلى الله وبارك على خاتم الأنبياء والمرسلين
سيدنا وحبيبنا محمد عليه أفضل الصلاة وأتم التسليم
محبــــــكم / أبو عبدالعزيز ( المـ،،،ـافـر )
منتديات الواحة (http://www.wahtaljouf.com/vb)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif مرفقات الموضوع بالكامل.zip (http://www.traidnt.net/vb/attachments/582266d1308680971-مرفقات-الموضوع-بالكامل.zip) (42.5 كيلوبايت, عدد مرات المشاهدة 335 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
