أكواد النسخة Invision روعة * روعة

أحببت اليوم أن أقدم لكم أكواد خاصة بالنسخة Invision تساعد على زيادة رونق منتداك، وتجعله في قمة الروعة
لن أطيل عليكم وأدخل صلب الموضوع

جميع هذه الأكواد توضع في ورقة CSS :

لوحة الإدارة > مظهر المنتدى > الصور و الألوان > الوان > ورقة تصميم CSS

نبدأ على بركة الله



1- جعل صورة تحت / منتدى / مواضيع / عدد المساهمات / آخر مساهمة / :

الكود :

/*-------------------------you-angel87---------------------------*/
table.ipbtable th {
background: #ffffff url(https://i.servimg.com/u/f86/11/06/04/82/index_12.jpg
) repeat-x;
border-right: 1px dotted #ffffff;
border-bottom: 1px solid #ffffff;
}

https://i.servimg.com/u/f86/11/06/04/82/index_12.jpg هو رابط صورتي فضع مكانه رابط صورتك، في حالة وضع صورة شفافة (GIF أو PNG) يمكنك تغيير لون الخلفية بإدخال كود اللون مكان ffffff# الأولى ، أما كود اللون الثاني فهو المسؤول عن خط الفصل بين : منتدى / مواضيع / عدد المساهمات / آخر مساهمة ، والكود الثالث مسؤول عن لون الظل، كما أن 1px هو حجم الخط فيمكنك التعديل.

صورة توضيحية للكود من منتداي :

http://dc05.arabsh.com/i/01083/udn79fa9370p.jpg

1: الصورة ، 2: الخط الفاصل ، 3: الظل



2- جعل صورة أسفل المنتديات و الفئات :

الكود :

/*--------------------------you-angel87--------------------------*/
table.ipbtable tfoot td {
background: url(http://dc06.arabsh.com/i/01067/del2kfv1u4la.png) repeat-x ;
height:100px;
}

ضع رابط صورتك مكان http://dc06.arabsh.com/i/01067/del2kfv1u4la.png ، كما أن 100px هو العرض، فغيره حسب عرض صورتك
إن كنت تريد ترك مساحة بين الفئات أو المنتديات فاجعل العرض في الكود أكبر من عرض الصورة، مثلا إن كان عرض صورتك 70px فضع في الكود 100px أو 120px

صورة توضيحية :

http://dc04.arabsh.com/i/01083/3dr0cs292vyx.jpg
1: صورة منتداي



3- وضع صورة كخلفية للموضوع و عنوانه ومعلومات العضو والعديد ...

الكود :

/*-----------------------you-angel87----------------------------*/
.post {
background: #ffffff url(http://dc03.arabsh.com/i/01074/up5ystt2f008.jpg) repeat;
border-bottom: 1px solid #ffffff;
}
.post-container {
background: #f4fbd8 url(https://i.servimg.com/u/f81/12/41/19/35/12151312.gif);
border-right:4px groove #ffffff;
}
.post-footer {
background: #e5f981 url(https://i.servimg.com/u/f86/11/06/04/82/index_12.jpg);
border-top: 1px solid #ffffff;
}
.post .post-header {
background: #e5f981 url(https://i.servimg.com/u/f86/11/06/04/82/index_12.jpg);
}
.topic-footer {
background: #f4fbd8 url(https://i.servimg.com/u/f86/11/06/04/82/index_12.jpg);
}

إذا تمعنت في الكود ستجده يحتوي على 5 روابط صور :
1- http://dc03.arabsh.com/i/01074/up5ystt2f008.jpg
https://i.servimg.com/u/f81/12/41/19/35/12151312.gif -2
https://i.servimg.com/u/f86/11/06/04/82/index_12.jpg -3
https://i.servimg.com/u/f86/11/06/04/82/index_12.jpg -4
https://i.servimg.com/u/f86/11/06/04/82/index_12.jpg -5

غيرها بروابط صورك، مع العلم أن :
1 : صورة كخلفية لمعلومات العضو
2 : صورة كخلفية للموضوع
3 : صورة كخلفية لعنوان الموضوع
4 : صورة كخلفية لأزرار /حذف/تعديل/اقتباس/
5 : صورة كخلفية ل « استعرض الموضوع السابق · استعرض الموضوع التالي »
ودائما في حالة وضع صورة شفافة يمكنك تعديل اللون.

صورة توضيحية :


http://dc08.arabsh.com/i/01083/q5i7vukyeudb.jpg



4- كود جعل صورة كخلفية للفئات والمنتديات :

الكود :

/*------------------------------you-angel87--------------*/
table.ipbtable th.formsubtitle,.formsubtitle {
background: #cced24 url(https://i.servimg.com/u/f86/11/06/04/82/index_12.jpg) repeat-x;
}
.row1
{
border:1px solid #FAF0D5;
background-image:url(http://dc02.arabsh.com/i/01060/9rxcalmuo5ae.jpg);
border-collapse: separate;
}
.row2
{
border:1px solid #C9B78C;
background-image:url(http://dc02.arabsh.com/i/01060/pbxb8rqg9n8e.jpg);
}
.row3
{

غير هذين الرابطين وضع مكانهما الصورة المرغوبة
1- http://dc02.arabsh.com/i/01060/9rxcalmuo5ae.jpg
http://dc02.arabsh.com/i/01060/pbxb8rqg9n8e.jpg -2

كما يستحسن أن تكون صورتين متغايرتين

صورة توضيحية :


http://dc05.arabsh.com/i/01083/c8pc6bhs3fhr.jpg



5- كود جعل صورة كخلفية ل متصل باسم :

الكود :

/*------------------you-angel87------------*/
#userlinks {
padding: 0.5em;
font-size: 0.9em;
background: url(https://i.servimg.com/u/f86/11/06/04/82/index_12.jpg) repeat-x;
}

غير هذا الرابط https://i.servimg.com/u/f86/11/06/04/82/index_12.jpg برابط صورتك

صورة توضيحية :


http://dc05.arabsh.com/i/01083/jkovt8otx88g.jpg



6- كود وضع صورة الحقوق محفوظة أسفل المنتدى :

الكود :

#ipbwrapper{
margin: 0 auto 0 auto; /* centers the box, no matter the overall width, also applies a 20px gap at the top and bottom of the board */
text-align: right; /* re_aligns text to left second part of two part MSIE centering workaround */
/* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD -> 1200px is a common fixed resolution size */
width: 1200px;
background: transparent url(http://dc07.arabsh.com/i/01074/746tsxprgast.png) no-repeat bottom center;
padding-bottom: 100px;
}

غير الرابط http://dc07.arabsh.com/i/01074/746tsxprgast.png برابط صورتك
هذا الكود يسمح لك أيضا بتثبيت عرض منتداك، بحيث لا يتغير إذا تغيرت مقاسات الشاشة وذلك بوضع القيمة المناسبة لك
أنا أفضل 1200px لكن إن أردتها أقل فغيرها بما تشاء.
أما 1200px الثانية فهي طول الصورة نفسها، كما أن 100px هو عرضها فلا تنسى تغيير هذه القيم بطول وعرض صورتك

صورة توضيحية :


http://dc03.arabsh.com/i/01083/tbkpgj6bdlp0.jpg



وفي الأخير، أتمنى أن أكون قد وفقت في الشرح ، كما أتمنى أنتنال إعجابكم ...

بانتظار ردودكم العطرة ...