السلام عليكم ورحمة الله وبركاتة .
تحية طيبة للجميع وبعد .
الأخوة الذين يتخوفون من التعديل على القوالب .. قمت بتجهيز القوالب index.htm + servcontent.htm لإضافة الأخبار المثبتة الجديدة على الرابط .
http://www.arabwebtalk.com/showthread.php?t=156705
ملاحظة مهمة قبل البدء بالعمل : يوجد تعارض بين الطريقة الجديد للأخبار المثبتة و التابات في الصورة التالية
( في حال عمل الأخبار المثبتة لن تعمل التابات التالية بالطريقة المطلوبة )
الآن نبدأ العمل .
أول خطوة يجب عملها هو الآتي :
تحميل الملف التالي :-
stickynews_dim3.0.0
مالذي تحتاجه من الملف
1 : الصورة transparent-bg.png قم برفعها لمجلد images في مجلد الإستايل الذي تريد التعديل عليه .
2- ملف news.php الموجود داخل مجلد modules قم برفعه إلى مجلد modules في موقعك .
3- مجلد featured ومحتوياته التي في مجلد scripts ارفعها إلى مجلد scripts في موقعك .
إذا أنتهيت من عمل السابق اكمل قراءة الموضوع . إذا لم تعملها أغلق الصفحة
الآن في مجلد images في الإستايل يوجد style.css قم بفتحه وأضف في آخرهـ الكود الـ css التالي :-
كود:
/*-------- Featured [BEGIN] --------*/
#featuredcontent{
width:99%;
padding:2px;
background:#FFFFFF;
border:1px solid #B3C7D0;
margin:auto;
height:329px;
}
#featured{
position:relative;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; right:560px;
list-style:none;
padding:0; margin:0;
width:380px;
}
#featured ul.ui-tabs-nav li{
font-size:12px;
color:#666666;
}
#featured img{
border:1px solid #FFFFFF;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
.sec {
height:21px;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Tahoma, Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:61px;
color:#2F3F48;
background:#D1DDDE;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#83B0C5;
color:#FFFFFF;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#83B0C5;
color:#FFFFFF;
}
#featured .ui-tabs-panel{
width:555px;
height:327px;
background:#FFFFFF;
position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:248px;
right:2px;
height:80px;
background: url('transparent-bg.png');
-webkit-border-top-right-radius:0px;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Tahoma; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
/*-------- Featured [END] --------*/
بعد أن تضيف الـ css وترفعه إلى مجلد Images تقوم بالآتي :-
1- تستبدل الكود التالي بـ index.htm من لوحة التحكم
كود:
<!-- INCLUDE BLOCK : header -->
<script type="text/javascript" src="{script_url}/scripts/news.js"></script>
<script type="text/javascript" src="{script_url}/scripts/featured/jquery-ui.min.js" ></script>
<!-- START BLOCK : stickynews -->
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
<div id="featuredcontent">
<div id="featured" style="float:{lang_left};">
<ul class="ui-tabs-nav">
<!-- START BLOCK : stknews -->
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-{id}">
<div>
<div class="sec">
<span class="xsmallfont" style="float:{lang_left};">{name}</span>
<span class="xsmallfont" style="float:{lang_right};"><img src="{img_dir}/buttons/comments.gif" alt="{phrase_comments}" title="{phrase_comments}" /> {comnum} | <img src="{img_dir}/buttons/emailed.gif" alt="{phrase_emailed}" title="{phrase_emailed}" /> {greet} | <img src="{img_dir}/buttons/views.gif" alt="{phrase_views}" title="{phrase_views}" /> {views}</span>
<br /></div>
<img alt="{alt}" src="contents/newsth/{id}.{ext}" width="82" height="53" class="img" style="float:{lang_left}; margin:3px 2px 2px 2px;" />
<div class="largfont"><a href="#fragment-{id}"><b>{alt}</b></a></div>
</div>
</li>
<!-- END BLOCK : stknews -->
</ul>
<!-- START BLOCK : stknewsb -->
<div id="fragment-{id}" class="ui-tabs-panel" style="">
<img alt="{alt}" src="contents/newsm/{id}.{ext}" width="555" height="327" />
<div class="info" >
<p align="center">{secondcaption}</p>
<h2 align="center">{caption}</h2>
<p>{text} {readmore} </p>
</div>
</div>
<!-- END BLOCK : stknewsb -->
</div>
</div>
<br />
<!-- END BLOCK : stickynews -->
<table width="100%" valign="top">
<tr>
<td rowspan="2" valign="top" width="{style_menuwidth}">
<!-- INCLUDE BLOCK : menucontent -->
</td>
<td width="100%" colspan="2" valign="top" height="1">
<!-- START BLOCK : welc_msg -->
<div class="module-title">{phrase_welc_msg}</div>
<div id="contents" class="justify">{welc_msg}</div>
<br/>
<!-- END BLOCK : welc_msg -->
<!-- START BLOCK : stickydownloads -->
<br/>
<table width="100%">
<tr>
<td valign="top" width="100%">
<div class="module-title" style="margin-top:-1px;">{phrase_featured_downloads}</div>
<!-- START BLOCK : stkdownloads -->
<div id="contents">
<div>
<div class="darkcontent xsmallfont"><span style='float:{lang_right};'>{date} </span><span style="cursor:{cursor};" title="{name}" onclick="window.location.href='{catlink}'">{name}</span></div>
<span style='float:{lang_right};margin-{lang_left}:2px;'><img alt="{alt}" src="contents/downloadsth/{id}.{ext}" /></span>
<span class="largfont"><b>{caption}</b></span> {updated}<br />
<img alt="" src="{img_dir}/arrow.gif" /> <span class="alert">{phrase_description} :</span> {shortdesc}
<!-- START BLOCK : stkdownloadsincl -->
<div class="smallfont">
<img alt="" src="{img_dir}/arrow.gif" /> <span class="alert">{field} :</span> {data}
</div>
<!-- END BLOCK : stkdownloadsincl -->
<br />
<div class="smallfont">
<span style='float:{lang_right};'>{readmore} </span>
<img src="{img_dir}/buttons/comments.gif" alt="{phrase_comments}" title="{phrase_comments}" /> {comnum} | <img src="{img_dir}/buttons/emailed.gif" alt="{phrase_emailed}" title="{phrase_emailed}" /> {greet} | <img src="{img_dir}/buttons/views.gif" alt="{phrase_views}" title="{phrase_views}" /> {views} | <img src="{img_dir}/buttons/downloads.gif" alt="{phrase_downloaded}" title="{phrase_downloaded}" /> {downloads}
</div>
</div>
</div>
<!-- END BLOCK : stkdownloads -->
</td>
</tr>
</table>
<!-- END BLOCK : stickydownloads -->
<!-- START BLOCK : bodybanners -->
<br/>
<table width="100%" align="center" cellpadding="1">
<tr>
<!-- START BLOCK : bodybanner -->
<td align="center"{colspan}>{banner}</td>
{tr}
<!-- END BLOCK : bodybanner -->
</tr>
</table>
<!-- END BLOCK : bodybanners -->
</td>
</tr>
<tr>
<td valign="top" width="{style_cwidth}">
<!-- INCLUDE BLOCK : ccontent -->
</td>
<td valign="top" width="{style_servwidth}">
<!-- INCLUDE BLOCK : servcontent -->
</td>
</tr>
</table>
<!-- INCLUDE BLOCK : footer -->
2- تستبدل الكود التالي بـ servcontent.htm من لوحة التحكم
كود:
<br/>
<script type="text/javascript" src="{script_url}/scripts/news.js"></script>
<!-- START BLOCK : importantnews -->
<script type="text/javascript">
$(function() {
$(".importantnews").jCarouselLite({
vertical: true,
hoverPause:true,
visible: 3,
auto:3000,
speed:500,
btnNext: ".nextimp",
btnPrev: ".previmp",
circular: true,
mouseWheel: true
});
});
</script>
<div class="module-title">{phrase_important_news}</div>
<div id="contents">
<div style="width:200px">
<div id="importantnews">
<div class="importantnews">
<ul>
<!-- START BLOCK : impnews -->
<li>
<div class="largfont">
<span style='float:{lang_left};margin-{lang_right}:2px;padding-top:0px'><img alt="{alt}" src="contents/newsth/{id}.{ext}" width="50" height="50" class="img" /></span>
<span class="smallfont">{caption}</span>
</div>
</li>
<!-- END BLOCK : impnews -->
</ul>
</div>
<div align="center">
<input type="image" src="{img_dir}/buttons/up.png" class="previmp" title="{phrase_prev}" />
<input type="image" src="{img_dir}/buttons/down.png" class="nextimp" title="{phrase_next}" />
</div>
</div>
</div>
</div>
<br/>
<!-- END BLOCK : importantnews -->
<!-- START BLOCK : importantdownloads -->
<div class="module-title">{phrase_important_downloads}</div>
<!-- START BLOCK : impdownloads -->
<div id="contents">
<div align="center">{caption}<br />{picture}</div>
</div>
<!-- END BLOCK : impdownloads -->
<br />
<!-- END BLOCK : importantdownloads -->
<!-- START BLOCK : updateddownloads -->
<div class="module-title">{phrase_updated_downloads}</div>
<div id="contents">
<div id="updateddownloads" style="overflow:hidden;">
<!-- START BLOCK : upddownloads -->
<div>{caption}</div>
<!-- END BLOCK : upddownloads -->
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#updateddownloads").rotator({ms : 3000, n:1, autoHeight:true});
});
</script>
<br />
<!-- END BLOCK : updateddownloads -->
<!-- START BLOCK : articlenewsbl -->
<div class="module-title">{phrase_latest} {phrase_articles}</div>
<!-- START BLOCK : articlenewsbls -->
<div id="contents">
<table width="100%"><tr><td colspan="2" class="darkcontent" align="center">{author}</td></tr><tr><td>{authorpic}</td><td><a title="{caption}" href="{action}">{caption}</a></td></tr></table>
</div>
<!-- END BLOCK : articlenewsbls -->
</div>
<br />
<!-- END BLOCK : articlenewsbl -->
<!-- START BLOCK : supplements -->
<div class="module-title">{name}</div>
<div id="contents">
<!-- START BLOCK : supplement -->
<div class="lightrow"><span style='float:{lang_left};margin-{lang_right}:2px'>{picture}</span>
<!-- START BLOCK : rewriteonsupnwsit -->
<a href="news-action-show-id-{id}.htm">
<!-- END BLOCK : rewriteonsupnwsit -->
<!-- START BLOCK : rewriteoffsupnwsit -->
<a href="news.php?action=show&id={id}">
<!-- END BLOCK : rewriteoffsupnwsit -->
{caption}
</a></div>
<!-- END BLOCK : supplement -->
</div>
<br />
<!-- END BLOCK : supplements -->
<!-- START BLOCK : lextrablocks -->
<div class="module-title"><span class="smallfont">{extrablockname}</span></div>
<div id="contents">
{extracont}
<div id="extradiv{blockid}" style="position:relative;">
<div id="extradiv{blockid}status" style="position:relative; display:none">
<div id="extradiv{blockid}procces" style="margin:5px 5px 5px 5px"></div>
</div>
<span id="extracont{blockid}">{moreless}</span>
</div>
</div>
<br />
<!-- END BLOCK : lextrablocks -->
<!-- START BLOCK : newlightnewsbl -->
<div class="module-title">{phrase_lightnews}</div>
<div id="contents" class="justify">
<div id="lightnews" style="overflow:hidden;">
<!-- START BLOCK : newlightnews -->
<div>{newlightnews}</div>
<!-- END BLOCK : newlightnews -->
</div>
</div>
<br />
<script type="text/javascript">
$(document).ready(function() {
$("#lightnews").rotator({ms : 9000, n:1, autoHeight:true});
});
</script>
<!-- END BLOCK : newlightnewsbl -->
<!-- START BLOCK : newdownloadsbl -->
<div id="blocktable">
<div class="darktitle"><img src="{img_dir}/title_arrow.gif" />{phrase_downloads}</div>
<!-- START BLOCK : rewriteondownloads -->
<div class="lightcontent"><a href="downloads-action-show-id-{id}.htm">{rectitle}</a></div>
<!-- END BLOCK : rewriteondownloads -->
<!-- START BLOCK : rewriteoffdownloads -->
<div class="lightcontent"><a href="downloads.php?action=show&id={id}">{rectitle}</a></div>
<!-- END BLOCK : rewriteoffdownloads -->
</div>
<br />
<!-- END BLOCK : newdownloadsbl -->
<!-- START BLOCK : newlighteventsbl -->
<div class="module-title">{phrase_lightevents}</div>
<div id="contents" class="justify">
<div id="lightevents" style="overflow:hidden;">
<!-- START BLOCK : newlightevents -->
<div>{newlightevents}</div>
<!-- END BLOCK : newlightevents -->
</div>
</div>
<br />
<script type="text/javascript">
$(document).ready(function() {
$("#lightevents").rotator({ms : 10000, n:1, autoHeight:true});
});
</script>
<!-- END BLOCK : newlighteventsbl -->
<!-- START BLOCK : newstatbl -->
<div class="module-title">{phrase_statistics}</div>
<div id="contents">
<!-- START BLOCK : newstat -->
<div><img src={img_dir}/arrow.gif>{mod}<span style="float:{lang_right};margin-{lang_right}: 20px;" /> {newstat}</span></div>
<!-- END BLOCK : newstat -->
</div>
<br />
<!-- END BLOCK : newstatbl -->
<!-- START BLOCK : servicebanners -->
<table align="center" cellpadding="1">
<tr>
<!-- START BLOCK : servicebanner -->
<td align="center">{banner}</td>
{tr}
<!-- END BLOCK : servicebanner -->
</tr>
</table>
<br />
<!-- END BLOCK : servicebanners -->
<!-- START BLOCK : serviceblocks -->
<!-- START BLOCK : serviceblockhead -->
<div class="module-title">{title}</div>
<!-- END BLOCK : serviceblockhead -->
<!-- START BLOCK : serviceblockheadpic -->
<img class="img" src="contents/block/{pic}" />
<!-- END BLOCK : serviceblockheadpic -->
<div id="contents">{cont}</div>
<br />
<!-- END BLOCK : serviceblocks -->
<!-- START BLOCK : sextrablocks -->
<div class="module-title">{extrablockname}</div>
<div id="contents">
{extracont}
<div id="extradiv{blockid}" style="position:relative;">
<div id="extradiv{blockid}status" style="position:relative; display:none">
<div id="extradiv{blockid}procces" style="margin:5px 5px 5px 5px"></div>
</div>
<span id="extracont{blockid}">{moreless}</span>
</div>
</div>
<br />
<!-- END BLOCK : sextrablocks -->
<!-- START BLOCK : weather -->
<div id="weatherdiv" style="position:relative; display:none">
<div id="weatherdivstatus" style="position:relative; display:none"><div id="weatherdivprocces"></div></div>
<span id="weathercont"></span></div>
<script type="text/javascript" language="javascript">
function doreq(){
var wthe = document.wetherform;
var zipc = wthe.zip.options[wthe.zip.selectedIndex].value;
makeRequest('weather.php?action=show&display=cd&zip='+encodeURIComponent(zipc),'GET','','weatherdiv','weathercont','');
}
document.onload= makeRequest('weather.php?action=getcitys','GET','','weatherdiv','weathercont','');
</script>
<!-- END BLOCK : weather -->
والله ولي التوفيق .
الأخبار المثبتة جاهزة للجميع
النمط المتتابع
