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

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

thread_prefix_desc.10

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
1,501
مستوى التفاعل
1,282
النقاط
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
المشاركات
318
مستوى التفاعل
192
النقاط
43
تعديل جميل ..
تسلم ايدك اخوي تركي
لك كل الود
 

shqawe

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

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

XenArabia

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

MesterPerfect

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

shqawe

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

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

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

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

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

ireepaircom

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

ابو ابراهيم

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

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

al-jod

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

MesterPerfect

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

al-jod

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

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

localhost

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

shqawe

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

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

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

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

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

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

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

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

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة زين العربية .

التعليقات المنشورة لا تعبر عن رأي معهد زين العربية ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

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

المواضيع
1,201
المشاركات
10,961
الأعضاء
465
آخر عضو مسجل
roxana
أعلى