أكواد مفيده للمبتدئين [لتنسيق الستايلات]

هنا يتم النقاش حول فكرة الستايل الأساسية CSS، وحول طريقتها في phpBB

المشرف: alhitary

صورة العضو الشخصية
مهند قمرة
مشرف سابق
مشرف سابق
مشاركات: 4222
اشترك في: السبت أكتوبر 30, 2004 8:32 pm
مكان: مـصـر [ولي الفخر]

أكواد مفيده للمبتدئين [لتنسيق الستايلات]

مشاركةبواسطة مهند قمرة » السبت سبتمبر 30, 2006 10:35 pm

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

إخواني الأعزاء.....

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

الكـ[1]ــود: الربط مع ملف CSS خارجي

بدلا من الأكواد الكثيرة الموجودة في الصفحات

يوضع بعد وسم الـ <HEAD> في ملف overall_header.tpl

كود: تحديد الكل

<LINK REL=stylesheet TYPE=\"text/css\" HREF=\"filename.css\">




الكـ[2]ــود: إعلان نصي متحرك مع الأعلى

يوضع بعد وسم <BODY> في ملف overall_header.tpl

كود: تحديد الكل

<body onLoad="start()" topmargin="0" leftmargin="0">
<basefont face="Tahoma">
<script language="javascript" type="text/javascript">
function hide()
{
document.all.ban.style.visibility='hidden'
}
function start()
{
banObj=document.all.ban.style
speed=0
step=0
top_space=0
smooth()
}

function smooth()
{
banTop=banObj.pixelTop
sliderTop=eval(document.body.scrollTop+top_space)
//status="pixelTop="+banTop +"scrollTop="+sliderTop

if(Math.abs(sliderTop-banObj.pixelTop)<=1)
   {
   //status=sliderTop-banObj.pixelTop;
   banObj.pixelTop=sliderTop
   }

step=Math.ceil(Math.abs(sliderTop-banObj.pixelTop)/5)


if(banObj.pixelTop > sliderTop)
   {
   //status="up with step="+step
   banObj.pixelTop-=step
   }
else if(banObj.pixelTop < sliderTop)
   {
   //status="down with step="+step
   banObj.pixelTop+=step
   }
//////////

setTimeout("smooth()",speed)   
}

</script>

<div id="ban" style="position:absolute; left:0; top:0; z-index:5; padding-bottom:5px; border:1px solid #999900;  background-color:#ffffff;filter: Alpha(Opacity=85); color:#003366; font-size:12px; width:191; padding:5px; height:4" align="justify">
<p style="margin-top: 0; margin-bottom: 0" align="center">
<a href="http://www.egyeye.tk" style="text-decoration: none">
<span style="font-size: 8pt">منتداك </span>
<span style="font-size: 8pt" lang="en-us">www.egyeye.tk</span></a></p>
<p style="margin-top: 0; margin-bottom: 0" align="center">
<span style="font-size: 8pt" lang="ar-sa">إعلان نصي بالصفحة الرئيسية</span></p>
</div>




الكـ[3]ــود: إضافه بسيطه لشريط المواضيع

هذه الإضافه من أجل [ إيقاف / تشغيل ] الشريط عند وضع الماوس
[غالبا سيكون في ملف last_topics.tpl]

توضع مباشرة بعد وسم

كود: تحديد الكل

<marqee


كود: تحديد الكل

onmouseover="stop()" onmouseout="start()"


ملاحظة: [ يجب مراعاة وضع مسافه بين الكود الموجود والكود المضاف. ]



الكـ[4]ــود: كود لوضع أيقونة بدلا من أيقونة برنامج IE في المتصفح

مثال عليه شاهد شعار الـ phpbbarabia في المتصفح بجوار عنوان الصفحة بدلا من علامة [e] الخاصة بالمتصفح

يوضع بعد <head> في ملف overall_header.tpl

كود: تحديد الكل

<LINK REL="SHORTCUT ICON" HREF="http://yoursite.com/Icon.ico">




الكـ[5]ــود: كود لعدم الإحتفاظ بنسخة من الموقع في ذاكره الجهاز

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

طبعا مافي أحد فهم شيء

المهم الكود موجود للكل

يوضع بعد وسم الـ <HEAD> في ملف overall_header.tpl

كود: تحديد الكل

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">




الكـ[6]ــود: لوضع شكل جديد للماوس في الصفحة
عندك بالجهاز أشكال كثيرة للماوس بإمتداد CUR أو ANI
لكي تستخدمها بالصفحة قم بوضع الكود التالي:

بعد وسم الـ <HEAD> في ملف overall_header.tpl

كود: تحديد الكل

<style>
body
{
CURSOR: url(http://www.yoursite.com/MOUSE.ANI);
}
</style>




الكـ[7]ــود: لتسجيل الدخول للمنتدى من الموقع

مثل الموجود بالصفحة الرئيسية لموقعنا هذا http://www.phpbbarabia.com

يوضع في الصفحة الرئيسية للموقع، إذا كانت مصممة بالـ HTML.

كود: تحديد الكل

<form method="post" action="http://www.yoursite.com/phpbb/login.php">
<table width="100%" cellpadding="3" cellspacing="1" border="0" class="forumline">
   <tr>
     <td class="catHead" height="28">
        <p align="center">دخول الى المنتدى</td>
   </tr>
   <tr>
     <td class="row1" align="center" valign="middle" height="28"><span class="gensmall">
      اسم المستخدم:
      <input class="post" type="text" name="username" size="10" /><br>
        كلمة السر&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
      <input class="post" type="password" name="password" size="10" /><br>
        دخول الي <input class="text" type="checkbox" name="autologin" />&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="submit" class="mainoption" name="login" value="دخول" />
      </span> </td>
   </tr>
  </table>
</form>




الكـ[8]ــود: لإضافه محرك بحث GOOGLE لموقعك

يوضع في المكان المناسب في ملف index_body.tpl

كود: تحديد الكل

<!--Google Searsh-->
<center>
<FORM method=GET action="http://www.google.com/search" dir="rtl" target="_blank">
<TABLE bgcolor="#FFFFFF"><tr><td>
<p align="center" style="word-spacing: 3; margin-top: 3; margin-bottom: 3">
<border="0" ALT="Google" align="absmiddle">
<INPUT TYPE=text name=q size=31 maxlength=200 value="" style="BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM-COLOR: #330066; BORDER-BOTTOM-STYLE: solid; BORDER-LEFT-COLOR: #330066; BORDER-LEFT-STYLE: solid; BORDER-RIGHT-COLOR: #330066; BORDER-RIGHT-STYLE: solid; BORDER-TOP-COLOR: #330066; BORDER-TOP-STYLE: solid; COLOR: #330066; FONT-FAMILY: Tahoma"></p>
<p align="center" style="margin-top: 0; margin-bottom: 0">
<border="0" ALT="Google" align="absmiddle">&nbsp;<INPUT TYPE=hidden name=hl value="en"><INPUT style="BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM-COLOR: #330066; BORDER-BOTTOM-STYLE: solid; BORDER-LEFT-COLOR: #330066; BORDER-LEFT-STYLE: solid; BORDER-RIGHT-COLOR: #330066; BORDER-RIGHT-STYLE: solid; BORDER-TOP-COLOR: #330066; BORDER-TOP-STYLE: solid; COLOR: #330066; FONT-FAMILY: Tahoma" type=submit name=btnG VALUE="&#1575;&#1604;&#1576;&#1581;&#1579; &#1601;&#1610; &#1580;&#1608;&#1580;&#1604;" >
</td></tr></TABLE>
</FORM>
</center>
<!--Google Searsh-->



الكـ[9]ــود: لوضع خلفية صوتية للصفحة

مابين وسمي <head> ، </head>
في ملف overall_header.tpl

كود: تحديد الكل

<bgsound src="http://www.YourSite.com/SOUND.WAV" loop="0">

بحيث YourSite هو موقعك
SOUND.WAV هو إسم الملف
آخر تعديل بواسطة مهند قمرة في الأربعاء ديسمبر 27, 2006 1:48 am، تم التعديل 7 مرات في المجمل.
سأعود قريبا لعالمي في ارابيا :)
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
صورة




ABo.AzAzI
مشرف سابق
مشرف سابق
مشاركات: 1577
اشترك في: الأربعاء مارس 16, 2005 10:13 pm
مكان: K.s.A

مشاركةبواسطة ABo.AzAzI » الأحد أكتوبر 01, 2006 12:11 am

جزيت الخيرات .... موضوع متميز في جميع نواحيه [مثبت]:D

صورة العضو الشخصية
الكبير اوي
عضو مطرود
عضو مطرود
مشاركات: 661
اشترك في: الأحد يناير 01, 2006 2:24 pm
مكان: مصر

مشاركةبواسطة الكبير اوي » الأحد أكتوبر 01, 2006 1:35 am

عمل رائع ومفيد جدا ، شكرا لك :)

صورة العضو الشخصية
مهند قمرة
مشرف سابق
مشرف سابق
مشاركات: 4222
اشترك في: السبت أكتوبر 30, 2004 8:32 pm
مكان: مـصـر [ولي الفخر]

مشاركةبواسطة مهند قمرة » الأحد أكتوبر 01, 2006 1:59 am

عزيزي الكريم [أبو عزازي] ألف شكر على ردك الكريم وعلى التثبيت

الأخ العزيز [الكبير قوي] ألف شكر على المرور والرد
سأعود قريبا لعالمي في ارابيا :)
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
صورة

Bruce
مشرف سابق
مشرف سابق
مشاركات: 471
اشترك في: الثلاثاء يوليو 05, 2005 10:22 pm
مكان: ليــبــيــا

مشاركةبواسطة Bruce » الأحد أكتوبر 01, 2006 2:19 am

مهند قمرة,

جميل جدا

صورة العضو الشخصية
مهند قمرة
مشرف سابق
مشرف سابق
مشاركات: 4222
اشترك في: السبت أكتوبر 30, 2004 8:32 pm
مكان: مـصـر [ولي الفخر]

مشاركةبواسطة مهند قمرة » الأحد أكتوبر 01, 2006 6:43 am

-Bruce-, شاكر مرورك الكريم
سأعود قريبا لعالمي في ارابيا :)
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
صورة

صورة العضو الشخصية
الفهد العربي
عضو جديد
عضو جديد
مشاركات: 7
اشترك في: السبت مارس 18, 2006 12:08 pm

مشاركةبواسطة الفهد العربي » الأحد أكتوبر 22, 2006 5:40 am

بااااااارك الله فيك ..
شبكة إبداع الفهد
http://www.ebdaa-f.com

صورة العضو الشخصية
مهند قمرة
مشرف سابق
مشرف سابق
مشاركات: 4222
اشترك في: السبت أكتوبر 30, 2004 8:32 pm
مكان: مـصـر [ولي الفخر]

مشاركةبواسطة مهند قمرة » الأحد أكتوبر 22, 2006 10:26 am

مشكور على مرورك [ الفهد العربي ] :)
سأعود قريبا لعالمي في ارابيا :)
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
صورة

صورة العضو الشخصية
abu abdalah
عضو نشيط
عضو نشيط
مشاركات: 150
اشترك في: السبت يونيو 24, 2006 5:45 am

مشاركةبواسطة abu abdalah » الاثنين نوفمبر 13, 2006 9:08 pm

مشكور حبيبي و الله ما قصرت اشياء كثير لقيت حلها في موضوعك ساعدك الله مثل ما ساعدتني

صورة العضو الشخصية
مهند قمرة
مشرف سابق
مشرف سابق
مشاركات: 4222
اشترك في: السبت أكتوبر 30, 2004 8:32 pm
مكان: مـصـر [ولي الفخر]

مشاركةبواسطة مهند قمرة » الأربعاء نوفمبر 15, 2006 8:14 pm

abu abdalah كتب:مشكور حبيبي و الله ما قصرت اشياء كثير لقيت حلها في موضوعك ساعدك الله مثل ما ساعدتني


ألف شكر على ردك، وبالنسبة لأني ساعدتك [لا، استبعدني من هذا]
وانا ليس إلا شخص يبتغي العلم فقط. وكما أتعلم وأعرف أخبر غيري بما عرفته لأنه يكون محتاجا للمعلومة مثلما كنت أحتاجها. لذلك كل ما يطرأ على ذهن الإنسان ويخبر به غيره لينفعه، كان جزاءه عند الله أفضل وأحسن. [وهذا ما أبحث عنه]
سأعود قريبا لعالمي في ارابيا :)
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
صورة

صورة العضو الشخصية
abu abdalah
عضو نشيط
عضو نشيط
مشاركات: 150
اشترك في: السبت يونيو 24, 2006 5:45 am

مشاركةبواسطة abu abdalah » الخميس نوفمبر 16, 2006 6:27 am

لقاك الله بغيتك اخي الحبيب و جزاك الله خير الجزاء و الجزاء من جنس العمل فان فعلت خيرا فخيرا لك و ان فعلت شرا فشرا لك

و اثابك الله و زاد الله في علمك و نفع بك المسلمين

صورة العضو الشخصية
engineer mohamed
عضو جديد
عضو جديد
مشاركات: 47
اشترك في: الأحد نوفمبر 26, 2006 7:33 pm

مشاركةبواسطة engineer mohamed » السبت ديسمبر 23, 2006 4:22 pm

الاكواد دي
تتحط في انهي ملف

لاني معرفش احطها فين :D

صورة العضو الشخصية
abdullaah
عضو نشيط
عضو نشيط
مشاركات: 161
اشترك في: الأحد فبراير 18, 2007 3:21 pm

مشاركةبواسطة abdullaah » الخميس إبريل 19, 2007 12:47 pm

جزاك الله خيرا موضوع مفيد و جميل
حكم و مواعظ و أمثال اسبوعيه
رأس الحكمه مخافة الله
حب الدنيا رأس كل خطيئه
----------------------------------
مدونة عبدالله1
http://abdullaah.blogspot.com/

موقع المسلم
http://almuslem.110mb.com/news.php
صورة
دعم رسائل
http://rasaael.freeforums.org/index.php
ستايلات هاكات دروس مواقع واجهات و متنوعات
معرض الصور
http://psd.byethost7.com/coppermine/index.php

صورة العضو الشخصية
amoo3sl
عضو فعال
عضو فعال
مشاركات: 441
اشترك في: الجمعة نوفمبر 10, 2006 10:01 am
مكان: مكة

مشاركةبواسطة amoo3sl » الخميس إبريل 19, 2007 3:31 pm

اكثر من رائع

يسلموا او هٌنووووود
أحمد محمد الغزاوي

صورة العضو الشخصية
mido1230
عضو جديد
عضو جديد
مشاركات: 59
اشترك في: السبت فبراير 03, 2007 4:54 pm

مشاركةبواسطة mido1230 » الأربعاء إبريل 25, 2007 9:06 pm

موضوع في غاية الروعة


العودة إلى “[ ×.2.0 ] الاستايلات”

الموجودون الآن

المستخدمون الذين يتصفحون المنتدى الآن: CommonCrawl Bot و 10 زوار