الطريقة الصحيحة لحفر جدوال المنتدى المتوافقه مع كل المتصفحات بواسطة الـ css
الطريقة الصحيحة لحفر جدوال المنتدى المتوافقه مع كل المتصفحات بواسطة الـ css
الطريقة الصحيحة لحفر جدوال المنتدى المتوافقه مع كل المتصفحات بواسطة الـ css
الطريقة الصحيحة لحفر جدوال المنتدى المتوافقه مع كل المتصفحات بواسطة الـ css

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

كثيرا مانعانى من شكل حدود المنتدى على المتصفحات الأخرى غير الأكسبلوار وللأسف أغلب مصممي الاستايلات لا تهتم بهذا النقطة حتى المنتديات التطويرة الكبيرة !
مثلا حاول ان تفتح منتدى ترايدنت على متصفح الفايرفوكس وشاهد كيف تظهر حدودة ( مشكلة !! )

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

عما لو شاهدته على الاكسبلوار العادى

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


والسبب في ذلك يرجع ان البعض مازال يستخدم الكود القديم المتهالك لحفر الجدول فى لغه html وهو borderColorDark و borderColorLight والحد border=1
وتجده بالشكل التالي بالجدول ..

كود PHP:
<table class="tborder" cellpadding="0" cellspacing="0" borderColorDark="#FFFFFF" borderColorLight="#8F7D5E" border="1"  width="100%" align="center"
وهذا الكود يلغي كود التحديد القياسي لحدود المنتدى الافتراضيه فى الـ class=tborder والذى بدورة يطلب كود الحد من متغيرات css القياسية
والفاجعه ايضا ان تجد مصمم الاستايل لكي يطبق هذا الحفر بين كل موضوع والثاني اى فى alt1 و alt2 يضع نفس هذا الكود فى متغيرات الاستايل ثم Inner Border Width أو عرض الحدود الداخلي بالكود التالي :

كود:
2" borderColorDark="#FFFFFF" borderColorLight="#10375D" border="1

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

وهذا خطأ كبير لان الامر كان يصلح قديما فى الزمن الجميل وقبل ان تنتشر المتصفحات الجديدة التى تعتمد على الأكواد القياسيه والنمط css فى التصميم ــ فرجاء الان من كل مصمم ان يحذف هذا الكود نهائياً من الاستايل ويرجع هذا الخيار بإعدادات المنتدى للوضع الافتراضي وهو (1 بكسل) ــ

والان لكي نصنع حدود متوافقه مع كل المتصفحات وبطريقه صحيحة سنغير فى إعدادات css للمنتدى ..

- فى حدود الجدوال table border وهو المتغير tborder : لكي تبدو لنا الجدوال محفورة من الخارج واللونين المتناوب الأول والثاني alt1 و alt2 : للفصل بين المواضيع ولكى تبدو لنا الحدود محفورة من الداخل ..

ويمكنكم ان تشاهدوا مثال لحفر الحدود الداخلية بين المواضيع بوضوح في منتدى سوالف فهى تعانى من نفس المشكلة اثناء العرض ع الفايروفوكس !

- ايضا من المتغير vbmenu_control وهو الخاص بالوصلات التى بالنافبار وكذلك الوصلات التحكم بالموضوع كى تبدو لنا محفورة ومعدلة بالشكل التالي :

رجعت ...

إذهب الى الإستايلات والقوالب > التحكم بالإستايل > css رئيسي .......


- لحدود الجدول المحفورة الخارجية ابحث عن ( حدود الجدول ) وضع لون للخلفية مناسب بحيث يكون أغمق قليلاً من لون خلفية صفحة المنتدى لديك ( حسب تلوينك )

وهذا سيمثل الحد الداخلي ..

ثم من ( خواص css إضافية ) اضف الكود التالي وهو الذى يمثل الحد الخارجي

كود:
border: 1px solid #FFFFFF; border-top: 0px;

للفصل بين المواضيع بكود الحفر في المتغيرات alt1 و alt2 إذهب الى اللون المتناوب الأول ثم ( خواص css إضافية ) وضع الكود التالي فيها :

كود:
border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF;

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
رجعت ...

إذهب الى الإستايلات والقوالب > التحكم بالإستايل > css رئيسي .......


- لحدود الجدول المحفورة الخارجية ابحث عن ( حدود الجدول ) وضع لون للخلفية مناسب بحيث يكون أغمق قليلاً من لون خلفية صفحة المنتدى لديك ( حسب تلوينك )

وهذا سيمثل الحد الداخلي ..

ثم من ( خواص css إضافية ) اضف الكود التالي وهو الذى يمثل الحد الخارجي

رمز Code:
border: 1px solid #FFFFFF; border-top: 0px;
نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


- للفصل بين المواضيع بكود الحفر في المتغيرات alt1 و alt2 إذهب الى اللون المتناوب الأول ثم ( خواص css إضافية ) وضع الكود التالي فيها :

رمز Code:
border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF;
نفس الكود كررة مع لون التوزيع الثاني ...



- الوصلات الخاصة بالـ navbar هذا سيتطلب منا الدخول على القالب والتعديل عليه ..

إفتح القالب بالدريم ويفر وابحث فيه الكود التالي :

كود:
<!-- nav buttons bar --> <div align="center"> 	<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%" align="center" style="border-top-width:0px">

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
رجعت ...

إذهب الى الإستايلات والقوالب > التحكم بالإستايل > css رئيسي .......


- لحدود الجدول المحفورة الخارجية ابحث عن ( حدود الجدول ) وضع لون للخلفية مناسب بحيث يكون أغمق قليلاً من لون خلفية صفحة المنتدى لديك ( حسب تلوينك )

وهذا سيمثل الحد الداخلي ..

ثم من ( خواص css إضافية ) اضف الكود التالي وهو الذى يمثل الحد الخارجي

رمز Code:
border: 1px solid #FFFFFF; border-top: 0px;
نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


- للفصل بين المواضيع بكود الحفر في المتغيرات alt1 و alt2 إذهب الى اللون المتناوب الأول ثم ( خواص css إضافية ) وضع الكود التالي فيها :

رمز Code:
border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF;
نفس الكود كررة مع لون التوزيع الثاني ...



- الوصلات الخاصة بالـ navbar هذا سيتطلب منا الدخول على القالب والتعديل عليه ..

إفتح القالب بالدريم ويفر وابحث فيه الكود التالي :

رمز Code:
<!-- nav buttons bar --> <div align="center"> <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%" align="center" style="border-top-width:0px">
وهو بدايه الجدول الخاص بالوصلات ..
ونستبدله بالتالي :


كود:
<!-- nav buttons bar --> <div align="center"> 	<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center" style="border-top-width:0px">

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
رجعت ...

إذهب الى الإستايلات والقوالب > التحكم بالإستايل > css رئيسي .......


- لحدود الجدول المحفورة الخارجية ابحث عن ( حدود الجدول ) وضع لون للخلفية مناسب بحيث يكون أغمق قليلاً من لون خلفية صفحة المنتدى لديك ( حسب تلوينك )

وهذا سيمثل الحد الداخلي ..

ثم من ( خواص css إضافية ) اضف الكود التالي وهو الذى يمثل الحد الخارجي

رمز Code:
border: 1px solid #FFFFFF; border-top: 0px;
نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


- للفصل بين المواضيع بكود الحفر في المتغيرات alt1 و alt2 إذهب الى اللون المتناوب الأول ثم ( خواص css إضافية ) وضع الكود التالي فيها :

رمز Code:
border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF;
نفس الكود كررة مع لون التوزيع الثاني ...



- الوصلات الخاصة بالـ navbar هذا سيتطلب منا الدخول على القالب والتعديل عليه ..

إفتح القالب بالدريم ويفر وابحث فيه الكود التالي :

رمز Code:
<!-- nav buttons bar --> <div align="center"> <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%" align="center" style="border-top-width:0px">
وهو بدايه الجدول الخاص بالوصلات ..
ونستبدله بالتالي :

رمز Code:
<!-- nav buttons bar --> <div align="center"> <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center" style="border-top-width:0px">
وما تم فعله هو تحديد ( cellspacing ) فقط بدلا من القيمة 0
بعدها نذهب ايضا ونبحث علي ( التحكم بالقوائم المنبثقة/Popup Menu Controls ) من css رئيسي ونضيف نفس الكود اللى اضفناه بلون التوزيع الاول والثاني ...

بنفس هذا الكود ايضاً يمكننا وضعه بقائمة الإنبثاق حتى تظهر هى الأخري بحدود داخليه محفورة ..

الطريقة الصحيحة لحفر جدوال المنتدى المتوافقه مع كل المتصفحات بواسطة الـ css
الطريقة الصحيحة لحفر جدوال المنتدى المتوافقه مع كل المتصفحات بواسطة الـ css
الطريقة الصحيحة لحفر جدوال المنتدى المتوافقه مع كل المتصفحات بواسطة الـ css
الطريقة الصحيحة لحفر جدوال المنتدى المتوافقه مع كل المتصفحات بواسطة الـ css