عرض مشاركة واحدة
قديم 03-31-2018, 02:51 PM
المشاركة 6
عابر سبيل
.:: عضو فعال ::.
  • عابر سبيل غير متواجد حالياً
افتراضي رد: شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثانى
لم ينجح الامر اخي لان اللون يتغير نفسه في حالة الاتصال او غير الاتصال





.......انا اردته ان يكون مغاير في حالة اتصاله ويكون بلون معاير في حالة عدم الاتصال
المشكل أنه عامل نفس اسم ال class وهي ribbon لحالتي الاتصال وغير الاتصال

ولحل الاشكال بغير ال ribbon الثانية لحالة غير الاتصال بـــ ribbon2 في القالب الاساسي

واضف هذا الكود الجديد في قالب extra.less


كود بلغة HTML:
.ribbon2 {
   position: absolute;
   right: -5px; top: -5px;
   z-index: 1;
   overflow: hidden;
   width: 75px; height: 75px;
   text-align: left;
}
.ribbon2 span {
   font-size: 10px;
   color: #fff;
   text-transform: uppercase;
   text-align: center;
   font-weight: bold; line-height: 20px;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg); /* Needed for Safari */
   width: 100px; display: block;
   background: #534a5e;
   background: linear-gradient(#9BC90D 0%, #534a5e 100%);
   box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
   position: absolute;
   top: 19px; left: -21px;
}
.ribbon2 span::before {
   content: '';
   position: absolute;
   left: 0px; top: 100%;
   z-index: -1;
   border-left: 3px solid #534a5e;
   border-right: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #534a5e;
}
.ribbon2 span::after {
   content: '';
   position: absolute;
   right: 0%; top: 100%;
   z-index: -1;
   border-right: 3px solid #534a5e;
   border-left: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #534a5e;
}