تغيير الوان وتنسيق التعليقات في مدونات بلوجر

 

اولا ابحث عن الوسم      

 

      
      ]]></b:skin>
      

وضع فوقه الكود التالي بعد تعديل الالوان كما تريد

      /* تحديد الخطوط والألوان الأساسية */

body, .comments {

    font-family: 'Arial', sans-serif;

    color: #333;

}

/* تحسين مظهر منطقة التعليقات */

.comments {

    background-color: #fafafa;

    border: 1px solid #e0e0e0;

    border-radius: 10px;

    padding: 15px;

    margin-bottom: 20px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

/* تحسين مظهر التعليقات الفردية */

.comment {

    border: 2px solid #1b3a57; /* إطار أزرق غامق */

    border-radius: 10px; /* زوايا مدورة للإطار */

    margin-bottom: 15px;

    padding: 10px;

    background-color: #f4f4f4; /* خلفية رمادية فاتحة */

}

/* تحسين مظهر الردود */

.comment-replies .comment {

    border: 2px solid #b8571a; /* إطار برتقالي غامق */

    background-color: #fdf2e0; /* خلفية فاتحة مع تلميح من البرتقالي */

    font-size: 16px; /* حجم نص الرد */

}

/* تحسين مظهر صورة المؤلف */

.comment-avatar img {

    border-radius: 50%;

    width: 50px;

    height: 50px;

    margin-right: 10px;

    float: left;

}

/* تحسين مظهر معلومات المؤلف */

.comment-author {

    font-weight: bold;

    color: #1b3a57; /* لون أزرق غامق */

    margin-bottom: 5px;

}

/* تحسين مظهر نص التعليق */

.comment-body {

    font-size: 18px; /* زيادة حجم النص الرئيسي */

    line-height: 1.6;

    color: #555;

    margin: 0;

    overflow: hidden;

    padding-left: 60px;

}

/* تحسين مظهر رابط الرد */

.comment-footer a {

    color: #999;

    font-size: 14px;

    text-decoration: none;

    margin-right: 10px;

}

.comment-footer a:hover {

    color: #333;

}

/* تحسين مظهر زر الرد */

.comment-reply-link {

    display: inline-block;

    margin-top: 10px;

    background-color: #b8571a; /* خلفية برتقالية غامقة */

    color: white;

    border-radius: 5px;

    padding: 5px 10px;

    text-decoration: none;

    transition: background-color 0.3s ease;

}

.comment-reply-link:hover {

    background-color: #a33b1c; /* لون أحمر غامق عند التمرير */

}

/* تحسين مظهر التعليقات الفرعية */

.comment-replies {

    border-left: 2px solid #b8571a; /* حدود برتقالية غامقة */

    margin-left: 20px;

    padding-left: 20px;

}

/* تحسين مظهر تاريخ التعليق */

.comment-date {

    color: #999;

    font-size: 14px;

}

  

مولد اكواد الالوان

 

الكود هو عبارة عن مجموعة من تعليمات CSS تهدف إلى تحسين مظهر منطقة التعليقات في موقع الويب. يلعب تصميم التعليقات دورًا كبيرًا في تحسين تجربة المستخدم، إذ يعزز من تفاعل المستخدمين مع المحتوى ويخلق بيئة تفاعلية. 

في البداية، يقوم الكود بتحديد الخط الأساسي المستخدم في الموقع بأكمله وكذلك في منطقة التعليقات. تم اختيار الخط "Arial" ولون النص يكون رمادي غامق (#333)، مما يسهل القراءة ويحافظ على تناسق التصميم.

يتضمن الكود أيضًا تحسينات على مظهر منطقة التعليقات بأكملها من خلال تعيين لون خلفية فاتح (#fafafa) وحدود رمادية فاتحة (#e0e0e0) وزوايا مدورة. تم إضافة تأثير الظل الخفيف لتعزيز العمق البصري وإضفاء مظهر أنيق.

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

عند الرد على التعليقات، يتم استخدام حدود برتقالية غامقة وخلفية فاتحة مع تلميح من البرتقالي، مما يجعل الردود تبرز بشكل مرئي. كما تم تعديل حجم النص ليكون أصغر قليلاً لتحسين التناسق البصري.

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

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

زر الرد يظهر بلون خلفية برتقالي غامق ونص أبيض، ويتحول إلى أحمر غامق عند التمرير فوقه، مما يجعله ملفتًا للانتباه. أما بالنسبة للتعليقات الفرعية، فيتم تمييزها بحدود برتقالية غامقة على اليسار، مما يساعد في فصلها عن التعليقات الأخرى.

أخيرًا، يظهر تاريخ التعليق بلون رمادي فاتح وحجم نص صغير، مما يوفر معلومات إضافية دون التأثير على جمالية التصميم.

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