| maaidni |
07-27-2018 01:44 PM |
[شرح]- عمل عرض الشبكة في الموارد Grid layout for XFRM
السلام عليكم، لا شك أنك ترغب في الحصول على عرض الشبكة في الموارد ، مثل إضافة TH] NODE] .
رابط الإضافة:
كود:
https://www.themehouse.com/xenforo/2/addons/nodes
لكن هنا سنستخدم كود CSS بسيط يجب عليك وضعه في واللذي سوف يغنيك عن الإضافة برمتها.
صورة قبل التعديل:
https://i.imgur.com/wIci9BK.png
صورة بعد التعديل:
https://i.imgur.com/hitD4AU.png
كود:
/* CODE_GRID-XFRM_MAAIDNI */
.structItem--resource {
background-color: white !important;
border-collapse: collapse;
padding: 0px;
width: 100%;
min-height: 138px;
height: 138px;
height: auto;
display: inline-block !important;
margin: 9px 0px 0px 6px;
max-width: 49% !important;
max-height: 162px;
box-sizing: border-box;
vertical-align: top;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.structItem-cell--iconExpanded .structItem-iconContainer .avatar {
width: 96px;
height: 96px;
font-size: 57.6px;
margin-left: 3px;
}
.structItem--resource .structItem-cell--main {
width: 100%;
height: 112px;
}
.structItem--resource .structItem-cell--resourceMeta {
display: block;
width: auto !important;
margin-top: -13px;
margin-bottom: 15px;
}
span.avatar.avatar--s.avatar--separated.structItem-secondaryIcon {
display: none;
}
.structItem--resource .ratingStarsRow--justified {
border-bottom: 1px solid #dfdfdf;
margin-bottom: 2px;
padding-bottom: 2px;
}
.pairs.pairs--justified>dd {
float: left;
text-align: right;
max-width: 100%;
}
.structItem--resource .structItem-metaItem--lastUpdate {
float: right;
}
.structItem--resource .structItem-metaItem--downloads {
float: left;
}
.structItem-cell.structItem-cell--icon.structItem-cell--iconExpanded {
width: 120px;
}
div[data-type="resource"] .structItemContainer {
background-color: #f5f5f5;
}
@media (max-width: 1125px) {
.structItem--resource {
max-width: calc(95%) !important;
}
}
@media (max-width: 650px) {
.structItem--resource {
display: table !important;
max-width: 100% !important;
margin: 5px 5px 5px 0px;
box-shadow: none;
}
}
/* CODE_GRID-XFRM_MAAIDNI */
ملاحظة: إذا كان لديك استايل أسود استخدم الكود أسفله
كود:
/* CODE_GRID-XFRM_MAAIDNI */
.structItem--resource {
background-color: Gris anthracite !important;
border-collapse: collapse;
padding: 0px;
width: 100%;
min-height: 138px;
height: 138px;
height: auto;
display: inline-block !important;
margin: 9px 0px 0px 6px;
max-width: 49% !important;
max-height: 162px;
box-sizing: border-box;
vertical-align: top;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.structItem-cell--iconExpanded .structItem-iconContainer .avatar {
width: 96px;
height: 96px;
font-size: 57.6px;
margin-left: 3px;
}
.structItem--resource .structItem-cell--main {
width: 100%;
height: 112px;
}
.structItem--resource .structItem-cell--resourceMeta {
display: block;
width: auto !important;
margin-top: -13px;
margin-bottom: 15px;
}
span.avatar.avatar--s.avatar--separated.structItem-secondaryIcon {
display: none;
}
.structItem--resource .ratingStarsRow--justified {
border-bottom: 1px solid #FFFF00;
margin-bottom: 2px;
padding-bottom: 2px;
}
.pairs.pairs--justified>dd {
float: left;
text-align: right;
max-width: 100%;
}
.structItem--resource .structItem-metaItem--lastUpdate {
float: right;
}
.structItem--resource .structItem-metaItem--downloads {
float: left;
}
.structItem-cell.structItem-cell--icon.structItem-cell--iconExpanded {
width: 120px;
}
div[data-type="resource"] .structItemContainer {
background-color: #303030;
}
@media (max-width: 1125px) {
.structItem--resource {
max-width: calc(95%) !important;
}
}
@media (max-width: 650px) {
.structItem--resource {
display: table !important;
max-width: 100% !important;
margin: 5px 5px 5px 0px;
box-shadow: none;
}
}
/* CODE_GRID-XFRM_MAAIDNI */
|
