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

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

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
1,765
مستوى التفاعل
1,531
النقاط
113
الإقامة
K.S.A
بسم الله الرحمن الرحيم

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

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

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

من هذا الشكل

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

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

احترامي وتقديري
اخوكم
شقاوي
 

Wolf Knight

عضو فعال
[ عُملاء زين العَربية ]
إنضم
28 يناير 2019
المشاركات
349
مستوى التفاعل
215
النقاط
43
تعديل جميل ..
تسلم ايدك اخوي تركي
لك كل الود
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
1,765
مستوى التفاعل
1,531
النقاط
113
الإقامة
K.S.A
حياك اخوي @SAEED M SALLAM نورت الموضوع

احترامي وتقديري
اخوك
شقاوي
 

XenArabia

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
4,116
مستوى التفاعل
2,556
النقاط
113
العمر
37
الإقامة
المغرب
الموقع الالكتروني
سلمت يمناك على الدرس و التعديل الجميل أخي @shqawe
 

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
1,568
مستوى التفاعل
1,192
النقاط
113
العمر
21
الإقامة
sohag, Egypt
الموقع الالكتروني
ما شاء الله عليك أخي شقاوي
جزاك الله خيرا وبورك فيك على التعديل الرائع
تحياتي لك
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
1,765
مستوى التفاعل
1,531
النقاط
113
الإقامة
K.S.A
سلمت يمناك على الدرس و التعديل الجميل أخي @shqawe

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

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

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

احترامي وتقديري
اخوكم
شقاوي
 
التعديل الأخير بواسطة المشرف:

ireepaircom

عضو فعال
[ عُملاء زين العَربية ]
إنضم
12 مارس 2020
المشاركات
163
مستوى التفاعل
30
النقاط
28
ابداع ماشاء الله
 

ابو ابراهيم

:: الأعضاء ::
إنضم
28 يناير 2019
المشاركات
16
مستوى التفاعل
13
النقاط
3
الإقامة
القاهرة
الموقع الالكتروني
تعديل جميل تشكر عليه

ملاحظة : المواضيع المثبتة لازم تكون زوجي
 

al-jod

:: الأعضاء ::
إنضم
10 نوفمبر 2019
المشاركات
134
مستوى التفاعل
40
النقاط
28
العمر
39
الإقامة
فلسطين
الله يجزيك كل خير تعديل مميز
عندي استفسار: هل امسح محتوى extra.less واضيف الجديد
واذا الجواب لا فاين اضيف المحتوى داخل extra.less
 

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
1,568
مستوى التفاعل
1,192
النقاط
113
العمر
21
الإقامة
sohag, Egypt
الموقع الالكتروني
الله يجزيك كل خير تعديل مميز
عندي استفسار: هل امسح محتوى extra.less واضيف الجديد
واذا الجواب لا فاين اضيف المحتوى داخل extra.less
ضيف المحتوى في آخر القالب أو أوله
مش هتفرق يالغالي ☺ ☺
 

al-jod

:: الأعضاء ::
إنضم
10 نوفمبر 2019
المشاركات
134
مستوى التفاعل
40
النقاط
28
العمر
39
الإقامة
فلسطين
بعد الاضافة اصبح
-١٦١٣٤٢.png

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

localhost

:: الأعضاء ::
إنضم
16 فبراير 2019
المشاركات
37
مستوى التفاعل
7
النقاط
8
للأسف اسماء المواضيع اذا كانت طويله لا يظهرها كامله
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
1,765
مستوى التفاعل
1,531
النقاط
113
الإقامة
K.S.A
بعد الاضافة اصبح
مشاهدة المرفق 3023

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

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

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

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

CSS:
.structItem-title{
    text-overflow: ellipsis !important;
    max-width: 50ch;
    overflow: hidden; }

وراح تظهر معك المواضيع بدون مشاكل باذن الله

احترامي وتقديري
اخوكم
شقاوي
 

Mohammad Mz

:: الأعضاء ::
إنضم
23 سبتمبر 2020
المشاركات
44
مستوى التفاعل
14
النقاط
8
بسم الله الرحمن الرحيم

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

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

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

من هذا الشكل

مشاهدة المرفق 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 ********/
 

Mohammad Mz

:: الأعضاء ::
إنضم
23 سبتمبر 2020
المشاركات
44
مستوى التفاعل
14
النقاط
8
سلام و جزاک الله خیرا
هناک بعض ال مشاکل فی الاقونات لاشخاص اللی یسنخدمون زنفورو 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 ********/
 

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
1,568
مستوى التفاعل
1,192
النقاط
113
العمر
21
الإقامة
sohag, Egypt
الموقع الالكتروني
السموحة لم استطع تعدیل الموضوع لهذا انجبرت اندب موضوع ثاني

وضعت تعدیل ثانی اللی مستر شقاوي ذاکرنه في هذه الموضوع :
كود:
/********* 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,321
المشاركات
12,949
الأعضاء
502
آخر عضو مسجل
pinky
أعلى