هنا

[caesar]

السلام عليكم و رحمة الله تعالى وبركاته ...

كود css جميل جداً يجعل قالب البوست بت في غاية الروعة ... و دون المساس بالقالب الافتراضي ... حيث الألوان تؤخذ تلقائياً من متغيرات الستايل ..


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



والذي يحدث بعد وضع الكود هو تغير شكل معلومات العضو بجانب الموضوع والمشاركة وتأطيرها بشكل جميل ومنسق وإعطائها شكل كأنها مجوفة



وهذه صورة لقالب البوست بت بعد تركيب الكود




طريقة التركيب ::

إبحث عن قالب additional.css و أضف الكود التالي بآخره

/* Partie droite du postbit_legacy (ombrage non fonctionnelle sous safari - avoir) */ 
.postbitlegacy .postbody, .eventbit .eventdetails .eventbody {
    margin-right:220px;
    -moz-box-shadow: -2px 2px 5px {vb:stylevar shadow_color} inset;
    -webkit-box-shadow: -2px 2px 5px {vb:stylevar shadow_color} inset;
    box-shadow: -2px 2px 5px {vb:stylevar shadow_color} inset;
}

/* Cadre principale qui continet tout les elements */ 
.postbitlegacy .userinfo { 
    background: {vb:stylevar body_background};
    border: {vb:stylevar postbitlite_header_border};
    -moz-border-radius: {vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    border-radius:{vb:stylevar border_radius};
    -moz-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    -webkit-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    margin: 10px 10px 10px 10px;
    width: 180px;
}

/* Zone du pseudonyme */ 
.username_container {
    text-shadow: #819EB2 2px 2px 2px;
}

/* Retrait des ombres dans la popup options du profile membre */ 
.memberaction_body.popupbody {
text-shadow: none;
}

/* Titre d'utilisateur en gras */ 
.usertitle {
    font-weight: bold;
}

/* Centrage pseudo et titre d'utilisateur */ 
.eventbit .userinfo .eventuseravatar, .username_container, .usertitle {
    text-align:center;
    float:none;
}

/* Infos des fields et zone complète des fields*/ 
.postbitlegacy dl.userinfo_extra dd, .postbitlegacy dl.userinfo_extra dd a, .postbitlegacy dl.user_rep dd  {
    background: {vb:stylevar postbit_userinfo_background};
    -moz-border-radius: {vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    font-weight: bold;
    font-style: italic;
}

/* Titrages des fields */ 
.postbitlegacy dl.userinfo_extra dt, .postbitlegacy dl.user_rep dt {
    font-weight: bold;
}

/* Centrage de l'avatar */ 
.postuseravatar {
    border: {vb:stylevar postbitlite_header_border};
    padding: 10px 10px 10px 10px;
    margin:auto;
    text-align: center;
}

/* Taille de l'avatar */ 
.postbitlegacy .userinfo .postuseravatar img, .eventbit userinfo .eventuseravatar img {
    width: 100px;
    height: 100px;
}

/* Contour de l'avatar */ 
.postbitlegacy .userinfo .postuseravatar, .eventbit .userinfo .eventuseravatar {
    float:none;
    width:100px;
    text-align: center;
    margin: 10px auto 10px auto;
    -moz-border-radius: {vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    border-radius:{vb:stylevar border_radius};
    background: {vb:stylevar postbit_userinfo_background};
    -moz-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    -webkit-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
}

/* Contour de la zone des infos du membre */ 
.postbitlegacy .userinfo .userinfo_extra  {
    float:none;
    background: {vb:stylevar postbit_userinfo_background};
    -moz-border-radius: {vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    border-radius:{vb:stylevar border_radius};
    -moz-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    -webkit-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    border: {vb:stylevar postbitlite_header_border};
    padding: 5px 5px 5px 5px;
    width: auto;
    margin: 0px 10px 10px 10px;
}

/* Centrage des icones de communications (msn, icq, etc...) */ 
.postbitlegacy .imlinks {
    text-align: center;
}
/* Icones de communication encadrés avec effets d'ombres */ 
.postbitlegacy .imlinks img {
    background: {vb:stylevar postbit_userinfo_background};
    -moz-border-radius: {vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    border-radius:{vb:stylevar border_radius};
    -moz-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    -webkit-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    border: {vb:stylevar postbitlite_header_border};
    padding: 2px 2px 2px 2px;
} 

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

/* Partie droite du postbit_legacy (ombrage non fonctionnelle sous safari - avoir) */ 
.postbitlegacy .postbody, .eventbit .eventdetails .eventbody {
    margin-right:270px;
    -moz-box-shadow: -2px 2px 5px {vb:stylevar shadow_color} inset;
    -webkit-box-shadow: -2px 2px 5px {vb:stylevar shadow_color} inset;
    box-shadow: -2px 2px 5px {vb:stylevar shadow_color} inset;
}

/* Cadre principale qui continet tout les elements */ 
.postbitlegacy .userinfo { 
    background: {vb:stylevar body_background};
    border: {vb:stylevar postbitlite_header_border};
    -moz-border-radius: {vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    border-radius:{vb:stylevar border_radius};
    -moz-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    -webkit-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    margin: 10px 10px 10px 10px;
    width: 230px;
}

/* Zone du pseudonyme */ 
.username_container {
    text-shadow: #819EB2 2px 2px 2px;
}

/* Retrait des ombres dans la popup options du profile membre */ 
.memberaction_body.popupbody {
text-shadow: none;
}

/* Titre d'utilisateur en gras */ 
.usertitle {
    font-weight: bold;
}

/* Centrage pseudo et titre d'utilisateur */ 
.eventbit .userinfo .eventuseravatar, .username_container, .usertitle {
    text-align:center;
    float:none;
}

/* Infos des fields et zone complète des fields*/ 
.postbitlegacy dl.userinfo_extra dd, .postbitlegacy dl.userinfo_extra dd a, .postbitlegacy dl.user_rep dd  {
    background: {vb:stylevar postbit_userinfo_background};
    -moz-border-radius: {vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    font-weight: bold;
    font-style: italic;
}

/* Titrages des fields */ 
.postbitlegacy dl.userinfo_extra dt, .postbitlegacy dl.user_rep dt {
    font-weight: bold;
}

/* Centrage de l'avatar */ 
.postuseravatar {
    border: {vb:stylevar postbitlite_header_border};
    padding: 10px 10px 10px 10px;
    margin:auto;
    text-align: center;
}

/* Taille de l'avatar */ 
.postbitlegacy .userinfo .postuseravatar img, .eventbit userinfo .eventuseravatar img {
    width: 100px;
    height: 100px;
}

/* Contour de l'avatar */ 
.postbitlegacy .userinfo .postuseravatar, .eventbit .userinfo .eventuseravatar {
    float:none;
    width:100px;
    text-align: center;
    margin: 10px auto 10px auto;
    -moz-border-radius: {vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    border-radius:{vb:stylevar border_radius};
    background: {vb:stylevar postbit_userinfo_background};
    -moz-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    -webkit-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
}

/* Contour de la zone des infos du membre */ 
.postbitlegacy .userinfo .userinfo_extra  {
    float:none;
    background: {vb:stylevar postbit_userinfo_background};
    -moz-border-radius: {vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    border-radius:{vb:stylevar border_radius};
    -moz-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    -webkit-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    border: {vb:stylevar postbitlite_header_border};
    padding: 5px 5px 5px 5px;
    width: auto;
    margin: 0px 10px 10px 10px;
}

/* Centrage des icones de communications (msn, icq, etc...) */ 
.postbitlegacy .imlinks {
    text-align: center;
}
/* Icones de communication encadrés avec effets d'ombres */ 
.postbitlegacy .imlinks img {
    background: {vb:stylevar postbit_userinfo_background};
    -moz-border-radius: {vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    border-radius:{vb:stylevar border_radius};
    -moz-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    -webkit-box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    box-shadow: 2px 2px 2px {vb:stylevar shadow_color};
    border: {vb:stylevar postbitlite_header_border};
    padding: 2px 2px 2px 2px;
} 

واضغط حفظ و مبروك عليكم التجميل


وأي استفسار أنا بالخدمة إنشالله

[Muntader]

كم من جميل هذا الكود؟؟

تسلم ايدك ياوردة على الكود الجميل

ننتظر جديدك بكل حماس

[caesar]

أهلاً وسهلاً بك أخي منتظر شكراً لمرورك وأتمنى أن يكون الكود بحق أعجبك ... بالتوفيق إنشالله

[Samer]

سلمت يداك يل غالي .. هذا ما اسميه عملا متقنا للغاية


تقييمي

[caesar]

شكراً أخي سامر نورت الموضوع بمرورك وشكراً على التقييم ..