| maaidni |
08-02-2018 05:12 PM |
عمل عرض الشبكة في المشاركات Grid layout for Thread
كود CSS بسيط تحتاج إلى وضعه في قالب: النتيجة:
https://i.imgur.com/LxODpul.png
كود:
/* CODE_Css-Grid-Code-Start_MAAIDNI */
.structItem-title{
text-overflow: ellipsis !important;
max-width: 50ch;
white-space: nowrap;
overflow: hidden; }
.structItem--thread{
border-collapse: collapse;
width: 100%;
height: auto;
display: inline-block !important;
margin: 9px 0px 0px 6px;
max-width: 49% !important;
box-sizing: border-box;
vertical-align: top;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); }
.structItem-cell{width:100%;}
@media (max-width: 650px){
.structItem-cell.structItem-cell--meta {
display:none; } }
.structItem-cell--meta{
display: block;
width: auto !important;
margin-top: -13px;
float:left; }
.structItem-cell--latest{
display: block;
width: auto !important;
margin-top: -13px;
margin-bottom: 15px;
float:right; }
.pairs.pairs--justified>dd {
float: left;
text-align: right;
max-width: 100%; }
.structItem-cell--latest{
margin-bottom:0px !important; }
@media (max-width: 1125px) {
.structItem--thread {
max-width: calc(95%) !important; } }
@media (max-width: 650px) {
.structItem--thread {
display: table !important;
max-width: 100% !important;
margin: 5px 5px 5px 0px;
box-shadow: none; } }
@media (max-width: 650px){
.structItem-cell.structItem-cell--latest,.structItem-cell--meta {
float:right !important; }}
.structItem-cell--meta dt{ font-size:0px; }
.structItem-cell--meta dd{ margin-left:18px; }
.structItem-cell--meta .structItem-minor dt:before , .structItem-cell--meta dt:before{
font-family: FontAwesome;
font-size: 12px;
position: absolute;
margin-left: 0px;
color:#ababab;
}
.structItem-cell--meta .structItem-minor dt:before {content: '\f06e '; }
.structItem-cell--meta dt:before {content: '\f112'; }
/* CODE_Css-Grid-Code-End_MAAIDNI */
لتمييز المواضيع المتبثة بلون تاني:
https://i.imgur.com/AfdZfAM.png
أضف الكود أسفله بدلا من الكود الأول في نفس القالب:
كود:
/* CODE_Css-Grid-Code-Start_MAAIDNI */
.structItem-title{
text-overflow: ellipsis !important;
max-width: 50ch;
white-space: nowrap;
overflow: hidden; }
.structItem--thread{
border-collapse: collapse;
width: 100%;
height: auto;
display: inline-block !important;
margin: 9px 0px 0px 6px;
max-width: 49% !important;
box-sizing: border-box;
vertical-align: top;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); }
.structItem-cell{width:100%;}
@media (max-width: 650px){
.structItem-cell.structItem-cell--meta {
display:none; } }
.structItem-cell--meta{
display: block;
width: auto !important;
margin-top: -13px;
float:left; }
.structItem-cell--latest{
display: block;
width: auto !important;
margin-top: -13px;
margin-bottom: 15px;
float:right; }
.pairs.pairs--justified>dd {
float: left;
text-align: right;
max-width: 100%; }
.structItem-cell--latest{
margin-bottom:0px !important; }
@media (max-width: 1125px) {
.structItem--thread {
max-width: calc(95%) !important; } }
@media (max-width: 650px) {
.structItem--thread {
display: table !important;
max-width: 100% !important;
margin: 5px 5px 5px 0px;
box-shadow: none; } }
@media (max-width: 650px){
.structItem-cell.structItem-cell--latest,.structItem-cell--meta {
float:right !important; }}
.structItem-cell--meta dt{ font-size:0px; }
.structItem-cell--meta dd{ margin-left:18px; }
.structItem-cell--meta .structItem-minor dt:before , .structItem-cell--meta dt:before{
font-family: FontAwesome;
font-size: 12px;
position: absolute;
margin-left: 0px;
color:#ababab;
}
.structItem-cell--meta .structItem-minor dt:before {content: '\f06e '; }
.structItem-cell--meta dt:before {content: '\f112'; }
.structItemContainer-group--sticky .structItem--thread {
background: #fff5e8 !important;
border: 1px solid #f9c479 !important;
}
/* CODE_Css-Grid-Code-End_MAAIDNI */
|
