1- أول شيء ادخل داخل مجلد templates
2- وبعدين اختار اسم المجلد اللي انت مثبته كإستايل للسكربت مثلا يعني المجلد الموجد تلقائيا مع السكرت وهو مجل اسمه onarcade
3- الحين ادخل داخل المجدل onarcade وبتلاقي مجلد اسمه images بتشوف جدامك صور كالتالي
header.jpg footer.png topbar.png topbar2.png
طبعا معروف صورة الهيدر تغيرها على راحتك لانها تكون فوق السكربت
والفوتر يكون تحت السكربت وانت تصممه على راحتك
طيب topbar.png هذا يكون لأقسام السكربت مثل قائمة الأعضاء ، أخبار المركز والقائمة الموجودة على اليمين
topbar2 هذي الصورة تكون لأقسام السكربت اللي فيها الألعاب اللي تكون بالنص طبعا يعني لما تضيف قسم وتسميه قسم ألعاب الأطفال هذا القسم يكون لونه على لون هذي الصورة
طيب بعد ما عدلت على الصور وسويت صور على راحتك
الحين ارجع وشوف هذا الملف اللي اسمه style.css هذا هو اهم ستايل انت لازم تعدل عليه عشان يتوافق مع الوان الصور اللي سويتها
وانا بشرح لك الحين بالضبط هذا الاستايل
شوووووف وركز لما تفتح الاستايل بتلاقي اول شي جدامك هذا الكود
body {
background-color: #79a2bf;
margin: 0px;
padding: 0px;
font-size: 11px;
font-family: Ms sans serif;
text-align: Right;
}
طبع الكود هذا يكون لجسم الصفحة مثل الخلفية الخط الموجود وحجم الخط وأهم شيء تغيره هو هذا الكود background-color: #79a2bf
لانه يعطيك خلفية الصفحة شنو اللون اللي تبيه يكون خلفية للسكربت
الحين الكود اللي وراه
input, textarea {
background-color: #ffffff;
border: 1px solid #456880;
font-family: Ms sans serif;
font-size: 12px;
margin: 2px;
padding: 2px;
}
تشوف لما تدخل السكربت يقول لك ادخل اسم المستخدم وكلمة السر
شفت المكان اللي تدخل فيه اسمك وكلمتك السرية
هذا الكود يغير لك لون الصندوقين اللي تدخل فيه اسم المستخدم وكلمة السر
وطبعا + الخط وحجم الخط
أما هذا الكود
a:link {
color: #03243c;
text-decoration: Underline;
}
a:visited {
color: #03243c;
text-decoration: Underline;
}
a:hover {
color: #03243c;
text-decoration: None;
}
.main {
width: 790px;
padding: 0px;
}
.top {
padding: 0px;
text-align: Center;
background-color: #03243c;
height: 24px;
}
.top-left {
color: #ffffff;
font-family: Ms sans serif;
font-size: 11px;
margin-left: 10px;
margin-top: 5px;
text-align: Right;
float: Right;
}
.top-right {
color: #ffffff;
font-family: Ms sans serif;
font-size: 11px;
margin-right: 10px;
margin-top: 5px;
text-align: Right;
float: Right;
}
.top-link:link {
color: #ffffff;
text-decoration: None;
}
.top-link:visited {
color: #ffffff;
text-decoration: None;
}
.top-link:hover {
color: #ffffff;
text-decoration: Underline;
}
مختص طبعا في الكلام الموجود في الأقسام تبيها يمين ولا يسار ولا بالنص ولا على راحتك
+ + + + لا تنسى بالإضافة إلى هذا الكود مستخدم للروااااااااااااااابط ولون الروابط ولون الرابط بعد ما تضغط عليه ولون الرابط بعد ما تأشر عليه بالماوس
هذا الكود
.header {
background-image: Url(images/header.jpg);
height: 103px;
}
هو كود الهيدر يعني الصورة اللي حطيتها فوق ومثلا اسمها m.sokar.jpg تروح وتحطها مكان كلمة header.jpg بالإضافة إلى عرض الصورة اللي انت حاطها كهيدر
هذا الكود
.header-menu {
color: #ffffff;
font-family: Ms sans serif;
font-size: 10px;
font-weight: Bold;
margin-right: 10px;
margin-top: 73px;
text-align: Right;
float: Right;
}
هو مختص في الأقسام الموجودة فوووووق على الهيدر شنو تبي لونها وشنو تبي حجمها والخط وغيرها
انت اختار وحط على راحتك
وهذا الكود اللي تحته على طول
.header-link:link {
color: #ffffff;
text-decoration: None;
}
.header-link:visited {
color: #ffffff;
text-decoration: None;
}
.header-link:hover {
color: #ff6347;
text-decoration: None;
}
نفس الحجي هذا الكود للرواااااااابط شنو لون بعد ما تضغط على الرابط وشنو لونه لما تمرر الماوس فوقه وشنو لونه قبل ما تضغط على الرابط عدل فيها على كيفك
هذاااااااااااااا الكود
.content {
background-color: #ffffff;
border-left: 1px solid #456880;
border-right: 1px solid #456880;
}
هو أهم كووود لانه يعطيك لون الخلفية داخل الأقسام اللي انت مسويها بالإضافة إلى الأقسام اللي موجودة على اليمين واليسار
واخليك انت تجرب على باقي الأكوااااااااااد لانه والله تعبت وانا اطبع
اخوي نصيحة عشان تعرف كل كود وشنو يسوي اهم شي تسويه تغير اللون وتشوف بالسكربت شنو اللي تغير عندك وراح تعرف شلون الاستايل ماشي معاك
تحياتي لك
وسامحني على القصووووور
