/********* Css Grid Code Start ********/
.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; }
.structItem-cell--meta > .pairs.pairs--justified>dd {
float: left; text-align: right; max-width: 100%; }
.structItem-cell--meta dl.pairs.pairs--justified{ float:left; }
.structItem-cell--latest{ margin-bottom:0px !important; }
@media (max-width: 1125px) {
.structItem--thread {max-width: calc(95%) !important; } }
@media (max-width: 650px) {
.structItem-cell--latest{ margin-top: -20px !important;}
.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; font-size: 12px; color:#ababab; }
.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'; }
.structItem-cell--latest{ margin-top: -34px;}
.structItemContainer-group.js-threadList { margin-bottom: 8px; }
.structItem-cell--main .structItem-extraInfo {float: left;margin-left: -8px;}
/********* Css Grid Code End ********/
.structItemContainer-group--sticky .structItem--thread {
background: #fff5e8 !important;
border: 1px solid #f9c479 !important;
}
سلمت يمناك على الدرس و التعديل الجميل أخي @shqawe
ما شاء الله عليك أخي شقاوي
جزاك الله خيرا وبورك فيك على التعديل الرائع
تحياتي لك
ضيف المحتوى في آخر القالب أو أولهالله يجزيك كل خير تعديل مميز
عندي استفسار: هل امسح محتوى extra.less واضيف الجديد
واذا الجواب لا فاين اضيف المحتوى داخل extra.less
للأسف اسماء المواضيع اذا كانت طويله لا يظهرها كامله
.structItem-title{
text-overflow: ellipsis !important;
max-width: 50ch;
overflow: hidden; }
سلام و جزاک الله خیرابسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
جلبنا لكم اليوم طريقة لتغيير صفحة عرض عناوين المواضيع
من هذا الشكل
مشاهدة المرفق 1077
لتكون بهذا الشكل
مشاهدة المرفق 1078
كل ما عليك هو ان تقوم بنسخ الكود التالي ولصقة في قالب extra.less
CSS:/********* Css Grid Code Start ********/ .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; } .structItem-cell--meta > .pairs.pairs--justified>dd { float: left; text-align: right; max-width: 100%; } .structItem-cell--meta dl.pairs.pairs--justified{ float:left; } .structItem-cell--latest{ margin-bottom:0px !important; } @media (max-width: 1125px) { .structItem--thread {max-width: calc(95%) !important; } } @media (max-width: 650px) { .structItem-cell--latest{ margin-top: -20px !important;} .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; font-size: 12px; color:#ababab; } .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'; } .structItem-cell--latest{ margin-top: -34px;} .structItemContainer-group.js-threadList { margin-bottom: 8px; } .structItem-cell--main .structItem-extraInfo {float: left;margin-left: -8px;} /********* Css Grid Code End ********/
واذا اردت ان تكون المواضيع المثبتة بلون مميز عن باقي المواضيع اضف هذا الكود تحت الكود السابق
CSS:.structItemContainer-group--sticky .structItem--thread { background: #fff5e8 !important; border: 1px solid #f9c479 !important; }
ليصبح بالشكل التالي:
مشاهدة المرفق 1080
واستمتع بالتعديل
احترامي وتقديري
اخوكم
شقاوي
/********* Css Grid thread list Start ********/
.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; }
.structItem-cell--meta > .pairs.pairs--justified>dd {
float: left; text-align: right; max-width: 100%; }
.structItem-cell--meta dl.pairs.pairs--justified{ float:left; }
.structItem-cell--latest{ margin-bottom:0px !important; }
@media (max-width: 1125px) {
.structItem--thread {max-width: calc(95%) !important; } }
@media (max-width: 650px) {
.structItem-cell--latest{ margin-top: -20px !important;}
.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; font-size: 12px; color:#ababab; }
.structItem-cell--meta .structItem-minor dt:before , .structItem-cell--meta dt:before{
font-family: "Font Awesome 5 Pro";
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: '\f064'; }
.structItem-cell--latest{ margin-top: -34px;}
.structItemContainer-group.js-threadList { margin-bottom: 8px; }
.structItem-cell--main .structItem-extraInfo {float: left;margin-left: -8px;}
/*colorful pinned threads*/
.structItemContainer-group--sticky .structItem--thread {
background: #fff5e8 !important;
border: 1px solid #f9c479 !important;
}
/********* Css Grid thread list End ********/
السموحة لم استطع تعدیل الموضوع لهذا انجبرت اندب موضوع ثانيسلام و جزاک الله خیرا
هناک بعض ال مشاکل فی الاقونات لاشخاص اللی یسنخدمون زنفورو 2.2
قمت بتعدیلات علی الکود و صار یعمل کویز
كود:/********* Css Grid thread list Start ********/ .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; } .structItem-cell--meta > .pairs.pairs--justified>dd { float: left; text-align: right; max-width: 100%; } .structItem-cell--meta dl.pairs.pairs--justified{ float:left; } .structItem-cell--latest{ margin-bottom:0px !important; } @media (max-width: 1125px) { .structItem--thread {max-width: calc(95%) !important; } } @media (max-width: 650px) { .structItem-cell--latest{ margin-top: -20px !important;} .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; font-size: 12px; color:#ababab; } .structItem-cell--meta .structItem-minor dt:before , .structItem-cell--meta dt:before{ font-family: "Font Awesome 5 Pro"; 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: '\f064'; } .structItem-cell--latest{ margin-top: -34px;} .structItemContainer-group.js-threadList { margin-bottom: 8px; } .structItem-cell--main .structItem-extraInfo {float: left;margin-left: -8px;} /*colorful pinned threads*/ .structItemContainer-group--sticky .structItem--thread { background: #fff5e8 !important; border: 1px solid #f9c479 !important; } /********* Css Grid thread list End ********/
/********* Css Grid thread list Start ********/
.structItem-title{
text-overflow: ellipsis !important;
max-width: 50ch;
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; }
.structItem-cell--meta > .pairs.pairs--justified>dd {
float: left; text-align: right; max-width: 100%; }
.structItem-cell--meta dl.pairs.pairs--justified{ float:left; }
.structItem-cell--latest{ margin-bottom:0px !important; }
@media (max-width: 1125px) {
.structItem--thread {max-width: calc(95%) !important; } }
@media (max-width: 650px) {
.structItem-cell--latest{ margin-top: -20px !important;}
.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; font-size: 12px; color:#ababab; }
.structItem-cell--meta .structItem-minor dt:before , .structItem-cell--meta dt:before{
font-family: "Font Awesome 5 Pro";
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: '\f064'; }
.structItem-cell--latest{ margin-top: -34px;}
.structItemContainer-group.js-threadList { margin-bottom: 8px; }
.structItem-cell--main .structItem-extraInfo {float: left;margin-left: -8px;}
/*colorful pinned threads*/
.structItemContainer-group--sticky .structItem--thread {
background: #fff5e8 !important;
border: 1px solid #f9c479 !important;
}
/********* Css Grid thread list End ********/
ولا يهمك يالغاليالسموحة لم استطع تعدیل الموضوع لهذا انجبرت اندب موضوع ثاني
وضعت تعدیل ثانی اللی مستر شقاوي ذاکرنه في هذه الموضوع :
كود:/********* Css Grid thread list Start ********/ .structItem-title{ text-overflow: ellipsis !important; max-width: 50ch; 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; } .structItem-cell--meta > .pairs.pairs--justified>dd { float: left; text-align: right; max-width: 100%; } .structItem-cell--meta dl.pairs.pairs--justified{ float:left; } .structItem-cell--latest{ margin-bottom:0px !important; } @media (max-width: 1125px) { .structItem--thread {max-width: calc(95%) !important; } } @media (max-width: 650px) { .structItem-cell--latest{ margin-top: -20px !important;} .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; font-size: 12px; color:#ababab; } .structItem-cell--meta .structItem-minor dt:before , .structItem-cell--meta dt:before{ font-family: "Font Awesome 5 Pro"; 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: '\f064'; } .structItem-cell--latest{ margin-top: -34px;} .structItemContainer-group.js-threadList { margin-bottom: 8px; } .structItem-cell--main .structItem-extraInfo {float: left;margin-left: -8px;} /*colorful pinned threads*/ .structItemContainer-group--sticky .structItem--thread { background: #fff5e8 !important; border: 1px solid #f9c479 !important; } /********* Css Grid thread list End ********/
We use cookies and similar technologies for the following purposes:
Do you accept cookies and these technologies?
We use cookies and similar technologies for the following purposes:
Do you accept cookies and these technologies?