ahmed200
11-13-2016, 02:23 PM
هذا سوف يعطيك نموذجا أساسيا لإضافة الصور إلى الجانب الأيسر من صناديق الإستطلاع.
لكن يمكنك فقط استخدام صورة واحدة للموقع بأكمله
مثال
http://up.traidnt.net/img/1ts1ha.png (http://ct.pe/pjiC)
إفتح لوحة تحكم الإدارة وابحث عن قالب poll_block
ابحث عن هذا الكود
<div class="pollContent">
أضف بعده هذا الكود
<div class="custom_pollImage"></div>
حفظ..
ثم إفتح قالب extra.css وأضف هذا الكود
.custom_pollImage {
background: url("linktoyourimage") no-repeat;
width: 150px;
height: 150px;
position: absolute;
left: -200px;
}
هذا الكود يتحكم في الرابط ،الطول والعرض للصورة.
كذلك يتحكم في مكان الصورة يمينا أو يساراً
لا انصح في زيادة طول الصورة أكثر من 150 هذا يؤثر على التصميم خصوصاً في الإستطلاعات الصغيرة
إذا كنت تريد أن تكون الصورة مختلفة في كل قسم،أضف هذا الكود في نفس القالب extra.css
.nodeX .custom_pollImage {
background: url("linktoyourimage") no-repeat;
width: 150px;
height: 150px;
position: absolute;
left: -200px;
}
حرف X يعني رقم القسم
لإزالة علامة السؤال الذي عادة ما يظهر على يسار عنوان الإستطلاع, أضف هذا الكود
.pollBlock .questionMark {
display: none;
}
إذا كنت تريد أن يكون قالب الإستطلاع وكل التغييرات متوافقة مع جميع أحجام الشاشات،
أضف هذا الكود في نفس القالب extra.css
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth) {
.custom_pollImage {
display: none;
}
}
@media (max-width:@maxResponsiveMediumWidth) {
.custom_pollImage {
display:none;
}
}
@media (max-width:@maxResponsiveNarrowWidth) {
.custom_pollImage {
display:none ;
}
}
</xen:if>
إنتهى الشرح
لكن يمكنك فقط استخدام صورة واحدة للموقع بأكمله
مثال
http://up.traidnt.net/img/1ts1ha.png (http://ct.pe/pjiC)
إفتح لوحة تحكم الإدارة وابحث عن قالب poll_block
ابحث عن هذا الكود
<div class="pollContent">
أضف بعده هذا الكود
<div class="custom_pollImage"></div>
حفظ..
ثم إفتح قالب extra.css وأضف هذا الكود
.custom_pollImage {
background: url("linktoyourimage") no-repeat;
width: 150px;
height: 150px;
position: absolute;
left: -200px;
}
هذا الكود يتحكم في الرابط ،الطول والعرض للصورة.
كذلك يتحكم في مكان الصورة يمينا أو يساراً
لا انصح في زيادة طول الصورة أكثر من 150 هذا يؤثر على التصميم خصوصاً في الإستطلاعات الصغيرة
إذا كنت تريد أن تكون الصورة مختلفة في كل قسم،أضف هذا الكود في نفس القالب extra.css
.nodeX .custom_pollImage {
background: url("linktoyourimage") no-repeat;
width: 150px;
height: 150px;
position: absolute;
left: -200px;
}
حرف X يعني رقم القسم
لإزالة علامة السؤال الذي عادة ما يظهر على يسار عنوان الإستطلاع, أضف هذا الكود
.pollBlock .questionMark {
display: none;
}
إذا كنت تريد أن يكون قالب الإستطلاع وكل التغييرات متوافقة مع جميع أحجام الشاشات،
أضف هذا الكود في نفس القالب extra.css
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth) {
.custom_pollImage {
display: none;
}
}
@media (max-width:@maxResponsiveMediumWidth) {
.custom_pollImage {
display:none;
}
}
@media (max-width:@maxResponsiveNarrowWidth) {
.custom_pollImage {
display:none ;
}
}
</xen:if>
إنتهى الشرح