ضعي الكواد التالي بال CSS

الكود:


.topic-title {
    -moz-border-radius-bottomleft: 15px;
    -moz-border-radius-topright: 15px;
    -webkit-border-radius-bottomleft: 15px;
    -webkit-border-radius-topright: 15px;
    background-image: url(https://i.top4top.io/p_1865t00kh1.png);
    border: 1px solid #f0f0f0;
    border-radius-bottomleft: 15px;
    border-radius-topright: 15px;
    color: #f0f0f0;
    max-height: 290px;
    max-width: 840px;
    overflow: auto;
    padding: 6px;
    text-align: justify;
}




.postprofile {
    background: url(https://i.top4top.io/p_1865t00kh1.png) repeat-x 0 0 #F6F6F6!important;
    border: 1px solid #DDD!important;
    border-radius: 3px;
    margin: 7px!important;
    padding: 60px 3px 3px!important;
    position: relative;
    text-align: center!important;
}
.post-head {
    background-color: rgb(0 0 0 / 0%);
    border-color: #3793ff00;
    border-radius: 3px 3px 0 0;
    border-style: solid;
    border-width: 0 0 1px;
    padding: 18px;
}

.postprofile dd, .postprofile dt { margin:0 }
.postprofile dd { color:#333 }
.postprofile .label span, .postprofile .label {
  font-weight:bold;
}

.postprofile dd { text-align:right}


.postprofile .label {
    float: right;
    text-align: left;
    margin-left: 3px;
    margin-right: -3px;
    width: 50%;
}
first-post-br, hr, hr.dashed {
    border-color: #39C;
}

.postprofile dd img {
  display:block;
  margin:0 auto;
}


.postprofile hr + .label + img, .postprofile hr + .label + img + .label + img {
  display:inline-block;
  margin-left:25%;
}

.postprofile dt + dd img, .postprofile dd:last-child img { display:inline-block }


.postom {
    border-bottom: 1px solid #3793ff;
}


div.post .postprofile:after {
  content:".";
  font-size:0;
  background:#2E3133;
  border-bottom:4px solid #868686;
  height:20px;
  position:absolute;
  top:25px;
  left:0;
  right:0;
  z-index:1;
}
 
div.post.online .postprofile:after { border-color:#84C754 }
 

div.post .postprofile:before {
  content:url('https://i.servimg.com/u/f21/19/33/86/51/offlin10.png');
  position:absolute;
  top:25px;
  left:0;
  right:0;
  z-index:2;
}


div.post.online .postprofile:before {
  content:url('https://i.servimg.com/u/f21/19/33/86/51/online10.png');
}


form[action^="/privmsg"] .postprofile:after, form[action^="/privmsg"] .postprofile:before, .search.post .postprofile:before, .search.post .postprofile:after { display:none }
form[action^="/privmsg"] .postprofile, .search.post .postprofile { padding-top:30px }
.search.post .postprofile dd { text-align:center }



.module .box-content .mod-login-avatar {
  float:none;
  text-align:center;
}


.mod-login-avatar dt, #main-content > div.post .postprofile dt > a, #fa_popup_content > div.post .postprofile dt > a, .postprofile dt > img, .lastpost-avatar, td.avatar-mini img, .avatar, #userAvatar {
  background:#FFF;
  border-radius:100px;
  box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px rgba(0, 0, 0, 0.3);
  display:inline-block;
  height:100px;
  width:100px;
  padding:3px;
  margin:10px 0;
  overflow:hidden;
}


.mod-login-avatar dt > img, #main-content > div.post .postprofile dt img, #fa_popup_content > div.post .postprofile dt img, .lastpost-avatar img, td.avatar-mini img, .avatar img, #userAvatar img {
  border-radius:100px;
  height:100px;
  width:100px;
}

.lastpost-avatar, .lastpost-avatar img, td.avatar-mini img {
  height:34px;
  width:34px;
}

.friend-block { width:65px }
.friend-block .avatar { margin:0 10px }
.avatar, .avatar img {
  height:40px;
  width:40px;
}

.lastpost-avatar {
  padding:2px !important;
  margin:0px 5px 0px 0px;
}

td.avatar-mini img, .avatar {
  padding:1px;
  margin:0;
}

.avatar { margin-top:2px !important }

.lastpost-avatar, .avatar, td.avatar-mini img {
  box-shadow:0px 1px 3px rgba(0, 0, 0, 0.3), 0px -0px 1px rgba(0, 0, 0, 0.3);
}


اذا اردتي ان تظهر الخطوط بين البينات
اذهبي الى لوحة الاداره > الاعضاء والمجموعات > البينات الشخصيه 
واضغطي على تعديل
واختاري عارضه افقيه
+
تم التعديل على الكود
احذفي القديم وضعي مكانه الكود التالي

الكود:


.topic-title {
    -moz-border-radius-bottomleft: 15px;
    -moz-border-radius-topright: 15px;
    -webkit-border-radius-bottomleft: 15px;
    -webkit-border-radius-topright: 15px;
    background-image: url(https://i.top4top.io/p_1865t00kh1.png);
    border: 1px solid #f0f0f0;
    border-radius-bottomleft: 15px;
    border-radius-topright: 15px;
    color: #f0f0f0;
    max-height: 290px;
    max-width: 840px;
    overflow: auto;
    padding: 6px;
    text-align: justify;
}

.post-head {
    background-color: #0000!important;
    border-color: #3793ff00!important;
    border-radius: 3px 3px 0 0;
    border-style: solid;
    border-width: 0 0 1px;
    padding: 18px;
}
.postprofile-avatar img {
    border: 3px solid #FFF;
    border-radius: 0px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 30%), 0 0 1px rgb(0 0 0 / 30%);
    height: 220px;
    width: 150px;
}

.postprofile {
    background: url(https://i.top4top.io/p_1865t00kh1.png) repeat-x 0 0 #F6F6F6!important;
    border: 1px solid #DDD!important;
    border-radius: 3px;
    margin: 7px!important;
    padding: 60px 3px 3px!important;
    position: relative;
    text-align: center!important;
}
.post-head {
    background-color: rgb(0 0 0 / 0%);
    border-color: #3793ff00;
    border-radius: 3px 3px 0 0;
    border-style: solid;
    border-width: 0 0 1px;
    padding: 18px;
}

.postprofile dd, .postprofile dt { margin:0 }
.postprofile dd { color:#333 }
.postprofile .label span, .postprofile .label {
  font-weight:bold;
}

.postprofile dd { text-align:right}


.postprofile .label {
    float: right;
    text-align: left;
    margin-left: 3px;
    margin-right: -3px;
    width: 50%;
}
first-post-br, hr, hr.dashed {
    border-color: #39C;
}

.postprofile dd img {
  display:block;
  margin:0 auto;
}


.postprofile hr + .label + img, .postprofile hr + .label + img + .label + img {
  display:inline-block;
  margin-left:25%;
}

.postprofile dt + dd img, .postprofile dd:last-child img { display:inline-block }


.postom {
    border-bottom: 1px solid #3793ff;
}


div.post .postprofile:after {
  content:".";
  font-size:0;
  background:#2E3133;
  border-bottom:4px solid #868686;
  height:20px;
  position:absolute;
  top:25px;
  left:0;
  right:0;
  z-index:1;
}
 
div.post.online .postprofile:after { border-color:#84C754 }
 

div.post .postprofile:before {
  content:url('https://i.servimg.com/u/f21/19/33/86/51/offlin10.png');
  position:absolute;
  top:25px;
  left:0;
  right:0;
  z-index:2;
}


div.post.online .postprofile:before {
  content:url('https://i.servimg.com/u/f21/19/33/86/51/online10.png');
}


form[action^="/privmsg"] .postprofile:after, form[action^="/privmsg"] .postprofile:before, .search.post .postprofile:before, .search.post .postprofile:after { display:none }
form[action^="/privmsg"] .postprofile, .search.post .postprofile { padding-top:30px }
.search.post .postprofile dd { text-align:center }



.module .box-content .mod-login-avatar {
  float:none;
  text-align:center;
}


.mod-login-avatar dt, #main-content > div.post .postprofile dt > a, #fa_popup_content > div.post .postprofile dt > a, .postprofile dt > img, .lastpost-avatar, td.avatar-mini img, .avatar, #userAvatar {
  background:#FFF;
  border-radius:100px;
  box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px rgba(0, 0, 0, 0.3);
  display:inline-block;
  height:100px;
  width:100px;
  padding:3px;
  margin:10px 0;
  overflow:hidden;
}



.lastpost-avatar, .lastpost-avatar img, td.avatar-mini img {
  height:34px;
  width:34px;
}

.friend-block { width:65px }
.friend-block .avatar { margin:0 10px }
.avatar, .avatar img {
  height:40px;
  width:40px;
}

.lastpost-avatar {
  padding:2px !important;
  margin:0px 5px 0px 0px;
}

td.avatar-mini img, .avatar {
  padding:1px;
  margin:0;
}

.avatar { margin-top:2px !important }

.lastpost-avatar, .avatar, td.avatar-mini img {
  box-shadow:0px 1px 3px rgba(0, 0, 0, 0.3), 0px -0px 1px rgba(0, 0, 0, 0.3);
}