|
||||||
| [ صالة ] مناقشات وشروحات عامه صاله خاصه بشروحات مهمه و ايضاً على حل للمشاكل المنتشره والتي يواجهها الكثير |
|
|
LinkBack | أدوات الموضوع | انواع عرض الموضوع |
|
||||||
| [ صالة ] مناقشات وشروحات عامه صاله خاصه بشروحات مهمه و ايضاً على حل للمشاكل المنتشره والتي يواجهها الكثير |
|
|
LinkBack | أدوات الموضوع | انواع عرض الموضوع |
|
#1
09-12-2008, 04:29 AM
|
||||
|
||||
شرح تلوين ستايل واحد بأكثر من لون
أحببت ان أشرح لكم هذه الفكرة وهي تلوين ستايل واحد بأكثر من لون .بحيث تترك للأعضاء باختيار اللون المفضل ..
للمعاينة من هنا لتحميل ستايل Vb.Org-color_beta التجريبي ب7 ألوان للنسخة 3.7.3 من هنا مثال آخر بالصور       
|
|
09-12-2008, 04:31 AM
|
#2 |
|
1- حفظ أنماط css بشكل منفصل أي في ملف خارجي لنستطيع التحكم بها بكل حرية
والطريقة شرحها الاخ كتوم ca2oom بالتفصيل . /*** السلام عليكم ورحمة الله وبركاتة ***/ من المعروف انه لحفظ أنماط css بشكل منفصل أي في ملف خارجي في صفحات المنتدى كنا نتوجة الى : لوحة التحكم => خيارات المنتدى => إعدادات اللغة - الإستايل .. ثم الى الحقل ( تخزين أنماط CSS كملفات؟ ) ونختار "نعم" ويشترط هذا الخيار للتفعيل أعطاء المجلد "vbulletin_css" ترخيص 777 حتى يمكن للمنتدى من الكتابه داخلة وتحديث الملف بعد كل تغيير في إعدادات css من لوحة css رئيسي .. ولكن البعض يخشي من التصريح 777 للقول بأنه غير آمن كما ان ملفات css الناتجة داخله تكون بأسماء عشوائيه مع كل تعديل جديد يحدث على متغيرات css بهذا الشكل : كود:
style-4bb5f638-00049.css style-05bbc47d-00048.css style-6e08ebf7-00057.css style-82ed02cc-00055.css والطريقة التى سنفعلها الان سوف نتمكن بها من تخزين ملف css بشكل منفصل وبأي إسم فريد كما تحب ودون الحاجة الى تفعيل خيار الحفظ من لوحة التحكم وبدون إعطاء أي تصاريح الخطوات : 1 - بعد الإنتهاء من الإستايل ثم ضبط إعدادات css ، إعرض الإستايل على المتصفح وقم بفتح Source الصفحة لتظهر معك بالشكل التالي ..  الى ان تصل الى نهايتة </style>   /*** وفي المرفق تجدوا ملف css يحتوى على كل الأوامر والألوان للإستايل الإفتراضي يمكنكم التعديل عليه مباشرة على اى إستايل جديد ***/ 3 - مسارات الصور ، أمر مهم جدا فبعد حفظ الملف السابق بإمتداد css بداخل مجلد المنتدى او مجلد الصور او اى مكان تريدة داخل مجلد المنتدى الرئيسي لابد ان نراعي كتابة المسارات بطريقة صحيحة ويتوقف المسار ويتغير على حسب مكان حفظ ملف css نفسه وإليكم بعض الأمثلة للتوضيح ..
وهناك طريقة أخرى لكتابة المسارات داخل ملف css أسهل وهى بكتابه المسار الكامل للصورة متضمنا اسم الموقع ـ ولكنها في نفس الوقت طريقة لا تتناسب إذا كان الإستايل يشترك في إستخدامه أكثر من موقع أو في حالة عرض الإستايل مجاني .. 4 - إرجع الى لوحة تحكم المنتدى وإبحث في الإستايل المراد تعديلة عن القالب [headinclude] وافتحه ثم أبحث فيه عن الكود التالي وأحذفة : كود:
$style[css] ونستبدله بالكود التالي .. كود:
<link href="images/images_style/file.css" rel="stylesheet" type="text/css" /> ( إختياري ) 5 - أخيراً وحتى نكون جمعنا كل أوامر css في ملف واحد منفصل تبقي خصائص css للمحرر Editor وهو الصندوق التى تظهر به القوائم لإختيار الخط واللون الخ ..... والمنتدى يقوم من تلقاء نفسه بفصل بعض الأوامر من css الخاصة بالمحرر ويضعها في ملف خارجي تجده على المسار كود:
vb/clientscript/vbulletin_editor.css وما سنقوم به هو نسخ كل ماهو موجود داخل الملف vbulletin_editor.css ووضعهم داخل ملف الإستايل الأساسي المنشأ مسبقاً وبعدها تحذف الكود الذى يقوم بجلبه من داخل القالب وتجده بالشكل التالي : كود:
<link rel="stylesheet" type="text/css" href="clientscript/vbulletin_editor.css" /> ## إنتهي ## مميزات فصل ملف css بشكل مستقل : 1 - يسرع تحميل الصفحات ويقلل الجهد على المنتدى لان الملف يتم تحميلة لمرة واحده فقط داخل جهازك ( وهو في الغالب لن يتعدى 20 كيلو أو أقل ) على عكس لو كانت كل الأوامر ملحقه بكل صفحة بالطريقة العادية Internal 2 - فصلنا بذلك التصميم بالكامل عن المحتوى ولن تحتاج الى تسجيل الدخول الى لوحة التحكم ثم الإنتقال الى css رئيسي لتعديل لون مثلا او خط او خلفيه ـ لان كل هذا يمكنك عمله من الملف الخارجي وتنتهي علاقتك تماماَ بلوحة التحكم عند تعديل التصميم. 3 - الملف الواحد يمكنك إستخدامة لأكثر من إستايل أو للموقع ، وهذه ميزة رائعه جدا وتوفر الكثير من الجهد بدلا من الإنتقال الى css والتلوين من أول وجديد لكل إستايل .. جولة داخل ملف css : الجميع لم يتعود بعد على التعديل من ملف مستقل لان الإعتماد يكون على لوحة css الرئيسيه بلوحة التحكم للوصول المباشر الى مايريد تعديلة ـ وأظن ان الجميع ايضا لا يهتم بمعرفة أسماء الفئات class التى تعرّف على جدول المنتدى مثلاً alt1 هو اللون المتناوب والأول و alt2 هو اللون الثاني و thead هى رؤوس الجدول و tcat هى للأقسام الرئيسية والعناوين و page هى خلفية جسم المنتدى..... الخ من فئات class كثيرة . وللوهلة الأولي عندما تفصلوا التصميم بملف خارجي وعند محاولة التعديل فيه تشعرون بغرابة شديدة "وحوسه" عن ما كنتم معتادين عليه سابقاً ولا تعرف اين الخط الصغير من الوصلات من القوائم وووو... فالأمر كله يحتاج فقط منك الى قليل من التنظيم حتى يمكنك فهم الملف ولمعرفة طريقة التعديل على الملف الخارجي تعالوا نرجع شويه الى لوحة css رئيسي القديمة بالمنتدى لمعرفة أسماء الفئات class المختلفة لكل لوحة او صندوق من هذه الصناديق ، فكل واحد منهم يحتوى على اسم الفئه التابع لها داخل الملف الخارجي بهذا الشكل ..  كود:
textarea, .bginput
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
 كود:
.thead
{
background: #5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link, .thead_alink
{
color: #FFFFFF;
}
.thead a:visited, .thead_avisited
{
color: #FFFFFF;
}
.thead a:hover, .thead a:active, .thead_ahover
{
color: #FFFF00;
}
كود:
/* Input Fields
********************************/
textarea, .bginput {
font: bold 12pt Arial;
border: 1px solid #eaeaea;
}
أي أخطاء حدثت أعذرونا فيها ـ وإن كان لدى أحد معلومات إضافيه عن أفضل طرق لربط ملفات css بالمنتدى يخبرنا بالجديد اتمني لكم الإستفادة وتقبلوا جميعاً التحيه |
|
|
|
|
09-12-2008, 04:32 AM
|
#3 |
|
بعدما تم ايضاح طريقة حفظ ملفات css بشكل منفصل
وكذلك ايضاح الطرق المختلفة لتعديل الروابط وكذلك ايضاح أهم الفئات والاكواد و الالوان في الستايل ندخل مرحة التطبيق المرحلة الاولى : نبدأ بتكوين 7 ملفات css بألوان مختلفة .و أتقانها يعتمد على شطارتك في لغة css نضعها مثلا بهذا المسار مثلا كود PHP:
ربط ملفات css بالجافا سكريبت التي تعرف ب stylesheetswitcher نرفع ملف الجافا styleswitch.js من هذا الموقع http://www.dynamicdrive.com/dynamici...etswitcher.htm او حمل من هنا كليك يمين ..حفظ باسم[/URL] نحفظه في هذا المسار مثلا كود PHP:
لوحة تحكم المنتدى / التحكم بالستايلات / القوالب الشائعة في قالب headinclude ابحث عن كود:
$style[css] كود:
<link rel="stylesheet" type="text/css" href="images/colorstyle/7.css" title="default"/> <link rel="alternate stylesheet" type="text/css" media="screen" title="style-1" href="images/colorstyle/1.css"/> <link rel="alternate stylesheet" type="text/css" media="screen" title="style-2" href="images/colorstyle/2.css"/> <link rel="alternate stylesheet" type="text/css" media="screen" title="style-3" href="images/colorstyle/3.css"/> <link rel="alternate stylesheet" type="text/css" media="screen" title="style-4" href="images/colorstyle/4.css"/> <link rel="alternate stylesheet" type="text/css" media="screen" title="style-5" href="images/colorstyle/5.css"/> <link rel="alternate stylesheet" type="text/css" media="screen" title="style-6" href="images/colorstyle/6.css"/> <link rel="alternate stylesheet" type="text/css" media="screen" title="style-7" href="images/colorstyle/7.css"/> كود:
<script type="text/javascript" src="images/colorstyle/styleswitch.js?v=$vboptions[simpleversion]"></script> انتهينا من تعريف ملفات css وملف الجافا للستايل |
|
|
|
|
|
09-12-2008, 04:32 AM
|
#4 |
|
بقي لنا وصع خيار تلوين للأعضاء .
لدينا خيار اضافته في اي قالب مناسب لتضمن ظهور وشكل أفضل القوالب مثل header navbar footer أو يكنكم استغلال أحد قوالب مكان الاعلان الفارغة ad_header_logo ad_header_end ad_navbar_below ad_footer_end ad_footer_start ولدينا أشكال مختلف لادراج الخيار (صور) او (قائمة منسدلة) او (أزرار راديو) او (كتابة) مثال وضع خيار الصور  كود:
<!---خيار الصور بداية هاك تغيير الألوان -->
<b> <font color="#FF0000">اختر لون صفحتك</font></b> :
<a href="javascript:chooseStyle('style-1',60)">
<img src="images/colorstyle/Turquoise.gif" alt="تركواز" width="12" height="12" border="0"/></a>
<a href="javascript:chooseStyle('style-2', 60)">
<img src="images/colorstyle/Violet.gif" alt="بنفسجي" width="12" height="12" border="0"/></a>
<a href="javascript:chooseStyle('style-3',60)">
<img src="images/colorstyle/Pink.gif" alt="وردي" width="12" height="12" border="0"/></a>
<a href="javascript:chooseStyle('style-4',60)">
<img src="images/colorstyle/Red.gif" alt="احمر " width="12" height="12" border="0"/></a>
<a href="javascript:chooseStyle('style-5',60)">
<img src="images/colorstyle/Brown.gif" alt="بني" width="12" height="12" border="0"/></a>
<a href="javascript:chooseStyle('style-6',60)">
<img src="images/colorstyle/Green.gif" alt="اخضر" width="12" height="12" border="0"/></a>
<a href="javascript:chooseStyle('style-7',60)">
<img src="images/colorstyle/Default.gif" alt="إفتراضي" width="12" height="12" border="0"/></a>
<!--خيار الصور-نهاية هاك تغيير الألوان -->
 كود:
<!--خيار أزرار راديو بداية هاك تغيير الألوان --> <b> <font color="#FF0000">اختر لون صفحتك</font></b> : <form id="switchform"> <input type="radio" name="choice" value="none" onClick="chooseStyle(this.value, 60)">أزرق افتراضي<br /> <input type="radio" name="choice" value="style-1" onClick="chooseStyle(this.value, 60)">تركواز<br /> <input type="radio" name="choice" value="style-2" onClick="chooseStyle(this.value, 60)">بنفسجي<br /> <input type="radio" name="choice" value="style-3" onClick="chooseStyle(this.value, 60)">وردي<br /> <input type="radio" name="choice" value="style-4" onClick="chooseStyle(this.value, 60)">احمر<br /> <input type="radio" name="choice" value="style-5" onClick="chooseStyle(this.value, 60)">بني<br /> <input type="radio" name="choice" value="style-6" onClick="chooseStyle(this.value, 60)">اخضر<br /> </form> <!--خيار أزرار راديو نهاية هاك تغيير الألوان -->  كود:
<!-- خيار قائمة منسدلة بداية هاك تغيير الألوان --> <form id="switchform"> <select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)"> <option value="none" selected="selected">أزرق افتراضي</option> <option value="style-1">تركواز</option> <option value="style-2">بنفسجي</option> <option value="style-3">وردي</option> <option value="style-4">أحمر</option> <option value="style-5">بني</option> <option value="style-6">أخضر</option> </select> </form> <!-- خيار قائمة منسدلة نهاية هاك تغيير الألوان -->  كود:
<!--خيارالكتابة بداية هاك تغيير الألوان -->
<b> <font color="#FF0000">اختر لون صفحتك</font></b> :
<a href="javascript:chooseStyle('style-7',60)" checked="checked">أزرق</a>|
<a href="javascript:chooseStyle('style-1',60)">تركواز</a>|
<a href="javascript:chooseStyle('style-2', 60)">بنفسجي</a>|
<a href="javascript:chooseStyle('style-3',60)">وردي</a>|
<a href="javascript:chooseStyle('style-4',60)">احمر </a>|
<a href="javascript:chooseStyle('style-5',60)">بني</a>|
<a href="javascript:chooseStyle('style-6',60)">اخضر</a>
<!--خيارالكتابة نهاية هاك تغيير الألوان -->
|
|
|
|
|
| مواقع النشر (المفضلة) |
| الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
|
|
المواضيع المتشابهه
|
||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| درس تلوين الحروف بالتدرج الحركي | THE PUNISHER | [ صالة ] دروس في عــالم التصميــم | 1 | 12-21-2011 02:42 PM |
| شرح نقل موقع من سيرفر لسيرفر اخر بأكثر من طريقة | beethost.net | [ صالة ] تطوير الإستضافه و السيرفرات | 0 | 02-13-2010 12:55 AM |
| طلب شرح تلوين العناوين | heavenheaven | [ صالة ] طلبــــــات المواقع والمنتديات | 2 | 04-19-2009 12:37 AM |
| حمل هاكات نسخ 3.7.0 واعلى بأكثر من 240 هاك برابط واحد | Just Smile | [ صالة ] تطوير منتديـــــ vb3.7.X ــات | 2 | 09-11-2008 04:20 PM |
العرض العادي
