عيد الاضحى المبارك


مواضيع تهمك

ركن شروحات الزين فورو XENFORO هذا القسم خاص بكل شروحات إستخدام XENFORO وتعديلات القوالب

عمل عرض الشبكة في المشاركات Grid layout for Thread

كود CSS بسيط تحتاج إلى وضعه في قالب: Extra.less النتيجة: https://i.imgur.com/LxODpul.png /* CODE_Css-Grid-Code-Start_MAAIDNI */ .structItem-title{ text-overflow: ellipsis !important; max-width: 50ch;...

احصائياتى

الردود
5

المشاهدات
1207
maaidni
.:: معرب ومطور ومشرف ::.
قسم منتديات XenForo
  • maaidni is a splendid one to beholdmaaidni is a splendid one to beholdmaaidni is a splendid one to beholdmaaidni is a splendid one to beholdmaaidni is a splendid one to beholdmaaidni is a splendid one to beholdmaaidni is a splendid one to behold

  • maaidni غير متواجد حالياً

المشاركات
998

+التقييم
187

تاريخ التسجيل
Oct 2015

الاقامة
المغرب

نظام التشغيل
windows 8.1

رقم العضوية
605
08-02-2018, 05:12 PM
المشاركة 1
08-02-2018, 05:12 PM
المشاركة 1
افتراضي عمل عرض الشبكة في المشاركات Grid layout for Thread
كود CSS بسيط تحتاج إلى وضعه في قالب:
كود:
 Extra.less
النتيجة:



كود:
/* CODE_Css-Grid-Code-Start_MAAIDNI */
.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; }
.pairs.pairs--justified>dd {
    float: left;
    text-align: right;
    max-width: 100%; }
.structItem-cell--latest{
  margin-bottom:0px !important; }
@media (max-width: 1125px) {
  .structItem--thread {
    max-width: calc(95%) !important;   } }
@media (max-width: 650px) {
  .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; }
.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'; }
/* CODE_Css-Grid-Code-End_MAAIDNI */
لتمييز المواضيع المتبثة بلون تاني:



أضف الكود أسفله بدلا من الكود الأول في نفس القالب:

كود:
/* CODE_Css-Grid-Code-Start_MAAIDNI */
.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; }
.pairs.pairs--justified>dd {
    float: left;
    text-align: right;
    max-width: 100%; }
.structItem-cell--latest{
  margin-bottom:0px !important; }
@media (max-width: 1125px) {
  .structItem--thread {
    max-width: calc(95%) !important;   } }
@media (max-width: 650px) {
  .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; }
.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'; }
.structItemContainer-group--sticky .structItem--thread {
    background: #fff5e8 !important;
  border: 1px solid #f9c479 !important;
}
/* CODE_Css-Grid-Code-End_MAAIDNI */


قديم 08-02-2018, 05:55 PM
المشاركة 2
MesterPerfect
.:: كبار شخصيات المنتدى ::.
المنتدى مراقب من خلاله
  • MesterPerfect غير متواجد حالياً
افتراضي رد: عمل عرض الشبكة في المشاركات Grid layout for Thread
بارك الله فيك وجزيت خيرا على ما تقدمه من شرحات رائعة

قديم 08-02-2018, 08:40 PM
المشاركة 3
abo-karim
.:: Administrator ::.
  • abo-karim غير متواجد حالياً
افتراضي رد: عمل عرض الشبكة في المشاركات Grid layout for Thread
اول شى افعله عند دخولى للمنتدى هو البحث عن جديدك

الله يعطيك العافيه ويجزيك عنه خير

قديم 08-02-2018, 10:38 PM
المشاركة 4
maaidni
.:: معرب ومطور ومشرف ::.
قسم منتديات XenForo
  • maaidni غير متواجد حالياً
افتراضي رد: عمل عرض الشبكة في المشاركات Grid layout for Thread
اول شى افعله عند دخولى للمنتدى هو البحث عن جديدك

الله يعطيك العافيه ويجزيك عنه خير
بارك الله فيك أخي تسلم

قديم 08-17-2018, 05:41 PM
المشاركة 5
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت غير متواجد حالياً
افتراضي رد: عمل عرض الشبكة في المشاركات Grid layout for Thread
مشاء الله يادب

يعيط العافية

قديم 08-25-2018, 03:43 PM
المشاركة 6
samzad
.:: عضو مشارك ::.
  • samzad غير متواجد حالياً
افتراضي رد: عمل عرض الشبكة في المشاركات Grid layout for Thread
شكرا لك اخى على الشرح المميز

اضافة رد

العلامات المرجعية

عمل عرض الشبكة في المشاركات Grid layout for Thread


أدوات الموضوع

الانتقال السريع
المواضيع المتشابهه للموضوع: عمل عرض الشبكة في المشاركات Grid layout for Thread
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[XF 2.x Add] : إضافة Quick Reply And Post Thread Button MesterPerfect اضافات الزين فورو XENFORO 3 12-13-2020 06:14 PM
حذف Quick Thread عند كتابة موضوع جديد في الزينفورو 2 maaidni ركن شروحات الزين فورو XENFORO 5 04-13-2019 10:46 PM
[ BBcode] : [شرح]- عمل عرض الشبكة في الموارد Grid layout for XFRM maaidni ركن شروحات الزين فورو XENFORO 5 07-30-2018 02:11 PM
مشكلة في هاكShow Tags on Thread List 0.2 ابو فهد ركن مشاكل وطلبات الزين فورو XENFORO 3 08-08-2017 08:15 PM
مشكله عدد المشاركات تظهر اسفل خانه المشاركات بالاقسام الرئيسية mahmoud.bebo ركن مشاكل تصاميم الاستايلات 13 12-15-2015 01:38 AM




الساعة الآن 02:26 PM
RSS 2.0XML Site MapTAGS SiteInfo SiteRSS FeedMap SectionsvB MapsMap TagSitemap ForumMaps Forum