[د.نجلاء نور الدين]

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

فى احد محاولات عملاء انفنيتي وهو الأستاذ " سلوم 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]

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

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

[د.نجلاء نور الدين]

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

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

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

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

اطيب تحية

[د.نجلاء نور الدين]

إقتباس: اقتباس من مشاركة alshakicom      معلومة قيمة ومفيدة شكرا لك من الاعماق

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

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

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


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

[m7mdi]

الأخت نجلاء

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

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

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


..

[د.نجلاء نور الدين]

إقتباس: اقتباس من مشاركة m7mdi      الأخت نجلاء فتحت ccontent.html ولكني لم أجد هذا لأقوم بتغييره ...! ..

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

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

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


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


أطيب تحية

[عبدالسلام العنزي]

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


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


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

[m7mdi]

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

[د.نجلاء نور الدين]

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

اطيب تحية

[dawwas]

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

[ابو نايف197]

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

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

[athari]

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

[د.نجلاء نور الدين]

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

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

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

[صدى نجد]

الأخت نجلاء

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

[خالد الغنامي]

الأخت نجلاء


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


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

[ww.net]

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

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