الويب العربي
صفحة 1 من 2 1 2 >
عرض 40 مشاركات من هذا الموضوع في صفحة واحدة

الويب العربي (http://www.arabwebtalk.com/index.php)
-   نسخة ديموفنف 3 (http://www.arabwebtalk.com/forumdisplay.php?f=151)
-   -   الأخبار المثبتة جاهزة للجميع (http://www.arabwebtalk.com/showthread.php?t=157201)

altaledi 25-05-2011 04:37 PM
الأخبار المثبتة جاهزة للجميع
 
السلام عليكم ورحمة الله وبركاتة .

تحية طيبة للجميع وبعد .

الأخوة الذين يتخوفون من التعديل على القوالب .. قمت بتجهيز القوالب 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}&nbsp;</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}&nbsp;</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 -->
والله ولي التوفيق .

محلولة لخدمات الانترنت 26-05-2011 12:53 AM
مبادر ومبدع كعادتك...وفقك الله اخوي التليدي..

والامر سهل بس الاخوان يبدو انهم لايتبعون الخطوات بشكل صحيح..

...والمحاولة تلو الاخرى هي اساس الاصرار والنجاح..

altaledi 26-05-2011 07:43 AM
إقتباس:
اقتباس من مشاركة محلولة لخدمات الانترنت (المشاركة 796496)
مبادر ومبدع كعادتك...وفقك الله اخوي التليدي..

والامر سهل بس الاخوان يبدو انهم لايتبعون الخطوات بشكل صحيح..

...والمحاولة تلو الاخرى هي اساس الاصرار والنجاح..
بارك الله فيك أخوي .. وشكراً على كلماتك اللطيفة .

أتمنى للجميع الفائدة والتوفيق .

haili 26-05-2011 08:10 AM
روعه وفعلا ماقصرت اخوي


لكن الوان الخلفية كيف نفيرها وبرضه طول العنوان غير ملائم

كذلك الاخبار الهامة اختفت

http://www.hailvb.com/index.php

general shadi 26-05-2011 10:25 AM
ما قصرت بشرح المميز لله لا يهينك واكيد يستفيد الكل من الشرح الوافي

تحياتي

الويب جروب 27-05-2011 01:57 PM
شكرا جزيلا لك

الفنون 27-05-2011 04:34 PM
يعطيك العافيه اخوووي

كيف نجعل خلفية عنوان الخبر باللون الاسود الشفاف

مثال

http://www.hailvb.com/index.php

محلولة لخدمات الانترنت 27-05-2011 04:51 PM
إقتباس:
اقتباس من مشاركة الفنون (المشاركة 796685)
يعطيك العافيه اخوووي

كيف نجعل خلفية عنوان الخبر باللون الاسود الشفاف

مثال

http://www.hailvb.com/index.php


اعتذر عن التدخل.. بموضوع اخوي التليدي :D

هو يظهر تلقائي مالم تقم انت بتغييره...


وشاهد امثله اخرى

http://www.albotoulah.com/


http://saar7.com/


اي بمجرد تركيب له سوف يكون بالشكل هذا..

altaledi 27-05-2011 07:09 PM
إقتباس:
اقتباس من مشاركة محلولة لخدمات الانترنت (المشاركة 796688)
اعتذر عن التدخل.. بموضوع اخوي التليدي :D

هو يظهر تلقائي مالم تقم انت بتغييره...


وشاهد امثله اخرى

http://www.albotoulah.com/


http://saar7.com/


اي بمجرد تركيب له سوف يكون بالشكل هذا..

حلالك اخوي بأي وقت ,

altaledi 27-05-2011 07:10 PM
إقتباس:
اقتباس من مشاركة الفنون (المشاركة 796685)
يعطيك العافيه اخوووي

كيف نجعل خلفية عنوان الخبر باللون الاسود الشفاف

مثال

http://www.hailvb.com/index.php
أخوي في بداية موضوعي ... قلت انه يجب رفع الصور transparent-bg.png إلى مجلد الصور images

لأنها ستكون خلفية للخبر .

haili 30-05-2011 03:05 PM
لكن بالنسبة لمختصر الخبر على يمين الخبر المثبت كيف يتم تغيير لونه

haili 30-05-2011 03:41 PM
إقتباس:
اقتباس من مشاركة haili (المشاركة 797162)
لكن بالنسبة لمختصر الخبر على يمين الخبر المثبت كيف يتم تغيير لونه
تمام انحلت المشكلة يعطيكم العافية

haili 30-05-2011 04:05 PM
لكن لازالت مشكلة الاخبار الهامة

رايـق العتيبي 30-05-2011 06:28 PM
التليدي ماقصرت يابعدي ,,

اخوي

البلوي ( محلوله ....

ماقصرت على المساعده الاولى .. ( وشرحت لي بس والله رفع ضغطي ليش مايضبط معي ,,

بس مسكت غلط بضبطها انا ماضبطت حتى بتطبيق الشرح 100%

تطلع الاخبار جنب بعض تنازليا تحت ..

اتمنى شرح الحل بارك الله فيكم الاثنين المبدعين ..

رايـق العتيبي 02-06-2011 02:54 AM
اخوي التليدي ,,

اخوي محلوله

ممكن احد يرد بارك الله فيكم

محلولة لخدمات الانترنت 02-06-2011 04:23 AM
هلابك..

انا شرحت لك الحل وقتها وضبطتها لك .. . وطلعت تماام..

وش سويت انت علشان تتلخبط..؟

وانا اطلعت على موقعك الان والموقع تمام ولايوجد اي مشكلة بخصوص الاخبار,,

رايـق العتيبي 03-06-2011 11:28 PM
يابعدي انا بركبها على استايل ثاني ,, يالغالي ,, واتبعت نفس الشرح الي قلت لي والي الشركه مضيفته والي التليدي حاطه هنا ..

طلعت نفس المشكله الي حليتها اول ..

altaledi 04-06-2011 08:12 AM
إقتباس:
اقتباس من مشاركة رايـق العتيبي (المشاركة 797791)
يابعدي انا بركبها على استايل ثاني ,, يالغالي ,, واتبعت نفس الشرح الي قلت لي والي الشركه مضيفته والي التليدي حاطه هنا ..

طلعت نفس المشكله الي حليتها اول ..
اخوي اضف محتويات ملف style.txt إلى ملف style.css في نهايته . وستحل المشلكة .

رايـق العتيبي 04-06-2011 09:17 PM
هلا بالكنق ..

التليدي

نعم اضفتها ولاكن لازالت المشكله ,, انا صارت معاي بأستايل اول وحلها اخوي .. محلوله الله يجزاهـ خير والحين نفس المشكله ..

يعني وين الخطاء بتركيبي ..

محمد الحياني 05-06-2011 10:42 PM
يسعدك ربي يالتليدي
ماشاء الله عليك


جميع الأوقات بتوقيت مكة المكرمة. الساعة الآن » 03:28 AM.
صفحة 1 من 2 1 2 >
عرض 40 مشاركات من هذا الموضوع في صفحة واحدة

Powered by vBulletin
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © ArabWebTalk.Com 2004-2012