تغير الازرار فى صندوق اضافة المواضيع

آخر تحديث: 2026-10-21 · الكاتب الأصلي: alhitary

مرجع تاريخي: هذا الدرس من مكتبة phpBBArabia القديمة ويحتاج التحقق من توافق خطواته مع إصدارات phpBB الحديثة.

أحبتي

أقدم لكم درس بسيط وسهل عن كيفية تغيير أزرار المحرر الإفتراضي إلى صور

الإصدار : [3.0.6]

==============

الأستايل : subsilver2

==============

عند الإنتهاء من عمل الدرس , ستكون النتيجة كالآتي :

أولاً : –[ ملفات مضافه ]– ( بالمرفق أدناه )

styles/subsilver2/theme/images/editor

ملاحظة : قوم بإضافة المجلد editor في المرفق إلى مجلد الصور في الثيم , أيضاً يمكنك تغير المسار إلى مسار آخر تريده ولكن يجب عليك تغيير المسار في الخطوة الاخيرة من هذا الدرس.

ثانياً : –[ الخطوات ]–

–[ افتح ]–

styles/subsilver2/template/posting_buttons.html

–[ ابحث عن ]–

–[ استبدل بـ ]–

–[ افتح ]–

styles/subsilver2/template/theme/stylesheet.css

–[ ابحث عن ]–

.memberdata {
        BORDER-RIGHT: #6a581c 1px dotted; 
		BORDER-TOP: #6a581c 1px dotted; 
		BORDER-LEFT: #6a581c 1px dotted; 
		COLOR: #000000; 
		BORDER-BOTTOM: #6a581c 1px dotted; 
		BACKGROUND-COLOR: #fffffd;
}

–[ أضيف قبل ]–

/* BBCode photos
 ------------ */
.bt1 {
        background-image: url('./images/editor/text_bold.gif');
}

.bt2 {
        background-image: url('./images/editor/text_italic.gif');
}

.bt3 {
        background-image: url('./images/editor/strike.gif');
}

.bt4 {
        background-image: url('./images/editor/quote.gif');
}

.bt5 {
        background-image: url('./images/editor/code.gif');
}

.bt6 {
        background-image: url('./images/editor/text_list_bullets.gif');
}

.bt7 {
        background-image: url('./images/editor/text_list_numbers.gif');
}

.bt8 {
        background-image: url('./images/editor/list_item.gif');
}

.bt9 {
        background-image: url('./images/editor/photo.gif');
}

.bt10 {
        background-image: url('./images/editor/link_add.png');
}

.bt11 {
        background-image: url('./images/editor/flash.gif');
}

تكملة الشرح من الكاتب الأصلي

الجزء 2

==============
الاستايل : البروسيلفر
==============

أولاً : –[ ملفات مضافه ]– ( بالمرفق أدناه )

styles/prosilver/theme/images/editor
styles/prosilver/template/theme/imagebbcode.css

ملاحظة : قوم بإضافة المجلد editor في المرفق إلى مجلد الصور في الثيم , أيضاً يمكنك تغير المسار إلى مسار آخر تريده ولكن يجب عليك تغيير المسار في الخطوة الاخيرة من هذا الدرس.

ثانياً : –[ الخطوات ]–

–[ افتح ]–

styles/prosilver/template/posting_buttons.html

–[ ابحث عن ]–

كود: تحديد الكل

–[ استبدل بـ ]–

كود: تحديد الكل

–[ افتح ]–

styles/prosilver/theme/colours.css

–[ في آخر الملف أضف ]–

كود: تحديد الكل

/* BBCode photos
------------ */
input.bt1 {
        background-image: url("{T_THEME_PATH}/images/editor/text_bold.gif");
}

input.bt2 {
        background-image: url("{T_THEME_PATH}/images/editor/text_italic.gif");
}

input.bt3 {
        background-image: url("{T_THEME_PATH}/images/editor/strike.gif");
}

input.bt4 {
        background-image: url("{T_THEME_PATH}/images/editor/quote.gif");
}

input.bt5 {
        background-image: url("{T_THEME_PATH}/images/editor/code.gif");
}

input.bt6 {
        background-image: url("{T_THEME_PATH}/images/editor/text_list_bullets.gif");
}

input.bt7 {
        background-image: url("{T_THEME_PATH}/images/editor/text_list_numbers.gif");
}

input.bt8 {
        background-image: url("{T_THEME_PATH}/images/editor/list_item.gif");
}

input.bt9 {
        background-image: url("{T_THEME_PATH}/images/editor/photo.gif");
}

input.bt10 {
        background-image: url("{T_THEME_PATH}/images/editor/link_add.png");
}

input.bt11 {
        background-image: url("{T_THEME_PATH}/images/editor/flash.gif");
}

–[ افتح ]–

styles/prosilver/theme/forms.css

–[ في آخر الملف أضف ]–

كود: تحديد الكل

input.bt1, input.bt2, input.bt3, input.bt4, input.bt5, input.bt6, input.bt7, input.bt8, input.bt9, input.bt10, input.bt11 {
	padding-top: 1px;
	padding-bottom: 1px;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #000;
	background: #FAFAFA none no-repeat top;
}

–[ افتح ]–

styles/prosilver/theme/tweaks.css

–[ في آخر الملف أضف ]–

كود: تحديد الكل

* html input.bt1, * html input.bt2, * html input.bt3, * html input.bt4, * html input.bt5, * html input.bt6, * html input.bt7, * html input.bt8, * html input.bt9, * html input.bt10, * html input.bt11 {
	padding-bottom: 0;
	margin-bottom: 1px;
}