• أعضاء وزوار معهد زين العربية، نود أن نعلمكم أن المعهد سيشهد في الفترة القادمة الكثير من التغيرات سواءا على المستوى الاداري او مستوى الاقسام، لذا نرجو منكم التعاون، وأي ملاحظات او استفسارات يرجى التواصل معنا عبر قسم الشكاوي و الإقتراحات و الطلبات ونشكركم على حسن تفهمكم وتعاونكم ،مع خالص الشكر والتقدير والاحترام من إدارة زين العربية.

تغيير شكل عرض عناوين المواضيع الى شكل تخطيط الشبكة

shqawe

ربي أشرح لي صدري
27 يونيو 2019
3,164
23
2,075
113
K.S.A
www.shqawe.net
بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم

اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،

جلبنا لكم اليوم طريقة لتغيير صفحة عرض عناوين المواضيع

من هذا الشكل

grid-layouts1.jpg


لتكون بهذا الشكل

grid-layouts2.jpg

كل ما عليك هو ان تقوم بنسخ الكود التالي ولصقة في قالب 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;
}

ليصبح بالشكل التالي:

grid-layouts-sticky.jpg

واستمتع بالتعديل

احترامي وتقديري
اخوكم
شقاوي
 
سلمت يمناك على الدرس و التعديل الجميل أخي @shqawe

ويمناك يالغالي @XenArabia والجميل يستاهلونه اهل الجمايل 😘

ما شاء الله عليك أخي شقاوي
جزاك الله خيرا وبورك فيك على التعديل الرائع
تحياتي لك

وجوزيت خيرا ً حبيبي احمد نورت الموضوع

احترامي وتقديري
اخوكم
شقاوي
 
التعديل الأخير بواسطة المشرف:
الله يجزيك كل خير تعديل مميز
عندي استفسار: هل امسح محتوى extra.less واضيف الجديد
واذا الجواب لا فاين اضيف المحتوى داخل extra.less
 
الله يجزيك كل خير تعديل مميز
عندي استفسار: هل امسح محتوى extra.less واضيف الجديد
واذا الجواب لا فاين اضيف المحتوى داخل extra.less
ضيف المحتوى في آخر القالب أو أوله
مش هتفرق يالغالي ☺ ☺
 
بعد الاضافة اصبح
مشاهدة المرفق 3023

ما انقسم لثنتين​

ممكن رابط للمعاينة

للأسف اسماء المواضيع اذا كانت طويله لا يظهرها كامله

اخوي @localhost بالنسبة للمواضيع الي اسمائها طويله استبدل اول كلاس بهذا الكلاس

CSS:
.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

واستمتع بالتعديل

احترامي وتقديري
اخوكم
شقاوي
سلام و جزاک الله خیرا
هناک بعض ال مشاکل فی الاقونات لاشخاص اللی یسنخدمون زنفورو 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 ********/
 
سلام و جزاک الله خیرا
هناک بعض ال مشاکل فی الاقونات لاشخاص اللی یسنخدمون زنفورو 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 ********/
ولا يهمك يالغالي
بوركت على التعديل
سوف أجربه
 

إحصائيات المنتدى

المواضيع
1,539
المشاركات
17,496
الأعضاء
1,100
آخر عضو مسجل
vikjITA
أعلى