الويب العربي - كيفية اضافة كلاس جديد لملف الاستايل "الشرح على تغيير خلفية الخبر المثبت"

الويب العربي (http://www.arabwebtalk.com/index.php)

- مجتمع ديموفنف (http://www.arabwebtalk.com/forumdisplay.php?f=73)

كيفية اضافة كلاس جديد لملف الاستايل "الشرح على تغيير خلفية الخبر المثبت"

السلام عليكم ورحمة الله وبركاته

فى احد محاولات عملاء انفنيتي وهو الأستاذ " سلوم 1980 "
لتغيير خلفية لون الخبر المثبت

موضوع استفساره هنا

http://www.arabwebtalk.com/showthread.php?t=114428

تمّ تحديد كود الخبر المثبت فى نموذج الـ ccontent.html

وهذا هو

كود:

<!-- START BLOCK : stknews -->

<div id="xsnazzy">

<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

<div class="xboxcontent">

<div class="rnewstitle">{caption}</div>

<span style='float:left'>&nbsp;{picture}&nbsp;</span><div class="author">&nbsp;&nbsp;{date} م</div><div class="news">&nbsp;{text}&nbsp;

<br><br>

<div id="newsicons"><span style='float:right'><img border="0" src="infimages/newscomment.gif" alt="التعليقات">  {comnum}   |   <img border="0" src="infimages/newssend.gif" alt="إرسال">  {greet}   |   <img border="0" src="infimages/newsviews.gif" alt="الزيارات">  {views}</span><span style='float:left'>{readmore}</span></div>

</div>

</div>

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>

</div>



<!-- END BLOCK : stknews -->

من خلال الكود السابق نستنتج ان هناك 3 كلاسات مسؤول عن تغيير كامل لون الخبر المثبت

أولهم

xboxcontent

وهذا خاص بالأخبار المثبتة وغير متكرر بانفنيتي
وبالتالي بسهولة سنبحث عنه بانفنيتي ونقوم بتغيير لون خلفيته
وهذا هو

كود:

.xboxcontent {

    display:block;

    background:#FFF;

    border:0 solid #D9D9D9;

    border-width:0 1px;

    text-align: justify;

    direction: rtl;

    height: 1%;

}

قمت بتغيير اللون المعلّم عليه بالأحمر

فتم تغيير خلفية الخبر المثبت فقط لأن الكلاس غير متكرر

هكذا

باقي تغيير الجزء المخصص لعنوان الخبر بالأعلى
والمسؤول عنه هذا الكلاس

rnewstitle

والجزء الخاص بالاحصائيات المشاهدات والتعليقات بالأسفل
والمسؤول عنه هذا الكلاس

newsicons

وفيهما تكمن المشكلة

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

بمعنى اذا تم التغيير الفعلي على الكلاس rnewstitle

سيتم تغيير خلفية عناوين الأخبار جميعها المثبتة والغير مثبتة

وهنا وجب تخصيص كلاس جديد للأخبار المثبتة وادراجه في ملف الاستايل
لكي يقوم بتغيير خلفيات الخبر المثبت فقط
وهذه سادرجها بالمشاركة القادمة مستقلة ان شاء الله

للتوضيح

قمت الآن بتغيير مباشر على الكلاسات

rnewstitle

newsicons

لتغيير لون الخلفية من الأبيض للون المراد

فكانت هذه هي النتيجة

ولتغيير لون خلفية الخبر المثبت فقط
مع الابقاء على الأخبار الأخرى كما هى
أو حتى لإعطاء الخبر المثبت خلفيات مختلفة لونها عن خلفيات الأخبار الغير مثبتة
لابد ان نخصص كلاس جديد للخبر المثبت فى ملف الاستايل

فبسهولة قم بالبحث عن الكلاس المسؤول عن تغيير خلفية عنوان الخبر وهو هذا

rnewstitle

سنجده بهذا التكوين

كود:

.rnewstitle {

    background-color: #FFFFFF;

        font: bold 15px 'Times New Roman', arial, verdana, geneva, lucida, 'lucida grande', helvetica, sans-serif;

        text-align: center;

        padding:1px 3px 1px 3px;

        direction: rtl;

}

اللون المعلّم عليه بالأحمر مسؤول عن لون الخفية البيضاء

سنقوم بنسخ نفس الكود ولكن باسم مختلف اسفله مباشرة
وبتعديل لون الخلفية الى ما نريد
انا اخترت له اسم (fnewstitle)
فاصبحا فى ملف الاستايل بهذه الصورة

كود:

.rnewstitle {

    background-color: #FFFFFF;

        font: bold 15px 'Times New Roman', arial, verdana, geneva, lucida, 'lucida grande', helvetica, sans-serif;

        text-align: center;

        padding:1px 3px 1px 3px;

        direction: rtl;

}





.fnewstitle {

    background-color: #A6E2AD;

        font: bold 15px  red 'Times New Roman', arial, verdana, geneva, lucida, 'lucida grande', helvetica, sans-serif;

        text-align: center;

        padding:1px 3px 1px 3px;

        direction: rtl;

}

لاحظ غيرت اسم الكلاس ولون الخلفية
باقي ان نعرّف الكلاس في نموذج الـ ccontent
وهذا بأن نقوم بتغيير هذا السطر الذي يحوي اسم الكلاس الى المسمى الجديد

فمن

كود:

<div class="rnewstitle">{caption}</div>

الى

كود:

<div class="fnewstitle">{caption}</div>

=======================

بنفس الطريقة

قمت بنسخ الكلاس newsicons
وتغيير الاسم ولون الخلفية هكذا

كود:

#newsicons {

        background-color: #FAFAFA;

    font: 8pt 'Microsoft Sans Serif', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;

        border-top: 1px dotted #D0E4ED;

        padding: 3px;

    height: 12px;

    direction: rtl;

    color: #747474;

        text-align: center;

}

#newsficons {

        background-color: #A6E2AD;

    font: 8pt 'Microsoft Sans Serif', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;

        border-top: 1px dotted #D0E4ED;

        padding: 3px;

    height: 12px;

    direction: rtl;

    color: #747474;

        text-align: center;

}

وايضا نذهب لكود الـ ccontent

ونقوم بتغيير اسم الكلاس في الخبر المثبت الى الجديد

فمن

كود:

<div id="newsicons"><span style='float:right'><img border="0" src="infimages/newscomment.gif" alt="التعليقات">  {comnum}   |   <img border="0" src="infimages/newssend.gif" alt="إرسال">  {greet}   |   <img border="0" src="infimages/newsviews.gif" alt="الزيارات">  {views}</span><span style='float:left'>{readmore}</span></div>

</div>

الى

كود:

<div id="newsficons"><span style='float:right'><img border="0" src="infimages/newscomment.gif" alt="التعليقات">  {comnum}   |   <img border="0" src="infimages/newssend.gif" alt="إرسال">  {greet}   |   <img border="0" src="infimages/newsviews.gif" alt="الزيارات">  {views}</span><span style='float:left'>{readmore}</span></div>

</div>

فكانت النتيجة النهائية

هى انه تمّ التعديل على الخبر المثبت فقط

وبقيت الأخبار الغير مثبتة بدون تغيير وهذا ما أردنا

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

فالفكرة واحدة عند الرغبة فى اضافة اى كلاس جديد او مختلف وربطه بنماذج الاستايل

امنياتي للجميع بالتوفيق

أطيب تحية

مبدعة كعادتك دكتورنا الفاضلة / نجلاء

تم تطبيق الخطوات كما في الشرح الميسر

وتم التعديل بالشكل المطلوب

ولا أملك إلا أن أقول

زادك الله رفعة فوق رفعه

تحياتي

معلومة قيمة ومفيدة

شكرا لك من الاعماق

استاذي الكريم " سلوم 1980 "

الحمد لله انها ضبطت معك وتمّ لك ما تريد

واشكرك على دعائك الجميل

ولا املك الاّ أن اقول " آآمين " واياك والجميع

اطيب تحية

إقتباس:

اقتباس من مشاركة alshakicom (المشاركة 638219)

معلومة قيمة ومفيدة

شكرا لك من الاعماق

العفو استاذي الكريم

والحمد لله ان المعلومة مفيدة

وبحسب تجربتي فهي ستفيد فى العديد من القوالب التي تحمل كلاسات مشتركة في اكثر من نموذج بانفنتي ان شاء الله

تحيتي وتقديري لك

الأخت نجلاء

فتحت ccontent.html ولكني لم أجد هذا

إقتباس:

.xboxcontent {
display:block;
background:#FFF;
border:0 solid #D9D9D9;
border-width:0 1px;
text-align: justify;
direction: rtl;
height: 1%;
}

لأقوم بتغييره ...!

..

إقتباس:

اقتباس من مشاركة m7mdi (المشاركة 645429)

الأخت نجلاء

فتحت ccontent.html ولكني لم أجد هذا

لأقوم بتغييره ...!

..

السلام عليكم ورحمة الله وبركاته

الكود استاذي موجود بداخل ملف style.css الموجود بداخل مجلد images

والموجود بدوره بداخل مجلد الاستايل الذي تعمل عليه

تستطيع ان تصل اليهم عن طريق الاف تي بي بداخل مجلد styles ضمن المجلدات الرئيسية لانفنيتي

أطيب تحية

هالشي طرأ ببالي قبل فترة وكنت ناوي اشاورك في الامر يا د.نجلاء

لكن الحمد لله نزلتي الشرح قبل ما استفسر عنه

مبدعه يا دكتورتنا .. والله لا يحرمنا

يسلمووووووووو دكتورة

العفو للجميع واتمنى يكون مفيد للكثيرين فى التعديل على الاستايلات

اطيب تحية

شكرا لكم بارك الله في جهودك

تم التعديل عبى صحيفة حدث الإلكترونية والله الموفق
شكرا د. نجلاء وجميع الأخوة

إدارة صحيفة حدث الإلكترونية
hadth.org
يهمنا زيارتكم لصحيفتكم وإعطاءنا رأيكم بالتغييرات التي أحدثناها من واقع دروس الويب العربي

كان عندنا مبدع وراح وهو أخونا محمد نور وفقه الله ، وأبدلنا الله بغيره .

اخجلتم تواضعنا جميعا :)

امنياتي لكم بكل توفيق

ودمتم مبدعين جميعا

الأخت نجلاء

يعطيكي العافيه

الأخت نجلاء

مشكور والشكر موصول للاخ سلوم 1980

تقديري واحترامي

كل عام وانتم بألف خير

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