المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : شرح إضافة صورة في الإستطلاع


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>

إنتهى الشرح

هيلبرنت
11-13-2016, 09:46 PM
هاااااااااااااااااااااااا اااايل فعلا

ahmed200
11-28-2016, 11:34 AM
هاااااااااااااااااااااااا اااايل فعلا


شاكر مرورك

abo-karim
12-28-2016, 07:28 PM
طرحك جميل اخى