كود جعل بيانات العضو بشكل جميل

هل من رد

الشكل مثير للاهتمام
نرجو من الخبراء افادتنا بالكود ..

اسف علي التأخير
ضعي الكود التالي في ورقة الـ CSS

الكود:

.post-author-details {
    display: block;
    position: relative;
    margin: 90px 0;
    text-align: right;
    background: url(https://mrkzgulfup.com/uploads/155271928270992.gif) repeat-y;
    width: 200px;
    padding-right: 20px;
}
.post-author-details:before {
    content: '';
    background: url(https://mrkzgulfup.com/uploads/155271928268681.gif);
    display: block;
    height: 90px;
    width: 200px;
    position: absolute;
    top: -90px;
    right: 2px;
}
.post-author-details:after {
    content: '';
    background: url(https://mrkzgulfup.com/uploads/155271928272313.gif) no-repeat;
    display: block;
    height: 90px;
    position: absolute;
    width: 200px;
    right: 1px;
}


الكود لا يعمل معي ..

الكود يعمل علي نسخه الاخيرة و هي نسخه الاخت queen 

فالكود يختلف من نسخه لنسخه و تصميم لتصميم علي حسب التكويد يا @MostWanted

فهمت .. أنا أستخدم النسخة الثانية ..

تفضل كود خاص بنسختك @MostWanted

كود الاخ MostWanted:

بارك الله فيك
الكود يعمل الآن لكن فيه خلل :



يظهر فراغ بين الخلفية و الفوتر

ضع الكود في المنتدي لكي افحص الكود مباشرةً من منتداك

تم التركيب :

http://www.theb3st.com

الكود المستخدم :

الكود:

/*------------بيانات شخصية-------------------*/


.postdetails.poster-profile {
    display: block;
    position: relative;
    margin: 130px 0;
    background: url(http://www.m5zn.com/newuploads/2019/03/25/jpg//ff1ec6a6ac4e028.jpg) repeat-y;
    width: 220px;
    padding-right: 2px;
    border: unset !important;
  text-align: center;
}
.postdetails.poster-profile:before {
    content: '';
    background: url(http://www.m5zn.com/newuploads/2019/03/25/png//a608378f3c19473.png);
    display: block;
    height: 153px;
    width: 220px;
    position: absolute;
    top: -126px;
    right: 2px;
}
.postdetails.poster-profile:after {
    content: '';
    background: url(http://www.m5zn.com/newuploads/2019/03/25/png//6ed952095c50412.png) no-repeat;
    display: block;
    height: 132px;
    position: absolute;
    width: 220px;
    right: 2px;
}



جرب الكود التالي

الكود:

/*------------بيانات شخصية-------------------*/
.postdetails.poster-profile:before {
    content: '';
    background: url(http://www.m5zn.com/newuploads/2019/03/25/png//a608378f3c19473.png);
    display: block;
    height: 153px;
    width: 220px;
    position: absolute;
    top: -153px;
    right: 2px;
}
.postdetails.poster-profile {
    display: block;
    position: relative;
    margin: 145px 0;
    background: url(http://www.m5zn.com/newuploads/2019/03/25/jpg//ff1ec6a6ac4e028.jpg) repeat-y;
    width: 220px;
    padding-right: 2px;
    border: unset !important;
    text-align: center;
}
.postdetails.poster-profile:after {
    content: '';
    background: url(http://www.m5zn.com/newuploads/2019/03/25/png//6ed952095c50412.png) no-repeat;
    display: block;
    height: 132px;
    position: absolute;
    width: 220px;
    right: 2px;
    bottom: -132px;
}

يعمل و بشكل مثالي
شكرا جزيلا لك