الموضوع: طريقة حفظ أنماط Css بشكل منفصل ( External Sheet )

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

من المعروف انه لحفظ أنماط 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 type="text/css" id="vbulletin_css">
الى ان تصل الى نهايتة </style>



أو يمكنك الإستعانة بالأداة الرائعه Web Developer على متصفح Firefox لجلب كل أوامر css مباشرة ..



2 - ضع كل مانسخته داخل ملف نصي txt فارغ وإحفظة بأي اسمه وبإمتداد css ـ


/*** وفي المرفق تجدوا ملف css يحتوى على كل الأوامر والألوان للإستايل الإفتراضي يمكنكم التعديل عليه مباشرة على اى إستايل جديد ***/


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

• لو وضعت ملف css بمجلد مستقل تماماً وليكن بإسم style ووضعته بمجلد الصور الرئيسي داخل مجلد المنتدى على هذا المسار ..
  
  كود:

  url(vb/images/style/new.css)

  أما مجلد صور الإستايل سيكون داخل مجلد الصور الرئيسي ايضا ومساره هكذا ..
  
  كود:

  url(vb/images/images-style)

  إذن كيف تكون مسارات الصور داخل ملف css لهذا الصورة مثلا ..
  
  كود:

  url(vb/images/images-style/buttons/newthread.gif)

  بهذا الشكل ..
  
  كود:

  url(../images-style/buttons/newthread.gif)

• طيب لو كان ملف css بمجلد مستقل ايضا ولكن هذه المرة موجود مباشرة بمجلد المنتدى الرئيسي بعيداً عن الصور والمسار هكذا ..
  
  كود:

  url(vb/style/new.css)

  ومجلد الصور في نفس مكانة السابق ـ إذن مسار الصور هذه المرة سيتغير الى ..
  
  كود:

  url(../images/images-style/buttons/newthread.gif)

• حالة أخرى وفيها سوف نحفظ ملف css ونضعه مباشرة داخل مجلد صور الإستايل اى كان مكانة ـ ومسارات الصور في هذه الحالة ستكون بالشكل التالي :
  
  كود:

  url(buttons/newthread.gif)

* أتمني تكون وضحت الفكرة جيداً !
وهناك طريقة أخرى لكتابة المسارات داخل ملف css أسهل وهى بكتابه المسار الكامل للصورة متضمنا اسم الموقع ـ ولكنها في نفس الوقت طريقة لا تتناسب إذا كان الإستايل يشترك في إستخدامه أكثر من موقع أو في حالة عرض الإستايل مجاني ..

كود:

url(http://www.yoursite.com/vb/images/images-style/buttons/newthread.gif)

4 - إرجع الى لوحة تحكم المنتدى وإبحث في الإستايل المراد تعديلة عن القالب [headinclude] وافتحه ثم أبحث فيه عن الكود التالي وأحذفة :

كود:

$style[css]

وكانت وظيفته جلب أوامر css من خيارات لوحة التحكم العادية ( css رئيسي )
ونستبدله بالكود التالي ..

كود:

<link href="images/images_style/file.css" rel="stylesheet" type="text/css" />

مع مراعاة تغير المسار على حسب مكان حفظ ملف css داخل مجلد المنتدى كما وضحنا سابقاً

( إختياري ) 5 - أخيراً وحتى نكون جمعنا كل أوامر css في ملف واحد منفصل تبقي خصائص css للمحرر Editor وهو الصندوق التى تظهر به القوائم لإختيار الخط واللون الخ .....

والمنتدى يقوم من تلقاء نفسه بفصل بعض الأوامر من css الخاصة بالمحرر ويضعها في ملف خارجي تجده على المسار

كود:

vb/clientscript/vbulletin_editor.css

ومن ثم يقوم بجلب هذا الملف داخل القالب [editor_clientscript] ـ وبنفس القالب ايضا تجد أوامر css مكتوبة مباشرة داخل الوسم <style>

وما سنقوم به هو نسخ كل ماهو موجود داخل الملف vbulletin_editor.css ووضعهم داخل ملف الإستايل الأساسي المنشأ مسبقاً وبعدها تحذف الكود الذى يقوم بجلبه من داخل القالب وتجده بالشكل التالي :

كود:

<link rel="stylesheet" type="text/css" href="clientscript/vbulletin_editor.css" />

يمكنك الان حذف الملف 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;
}

وهناك شكل آخر للوحات وهى التى تحتوى على حقول مخصصة لوضع الوان الوصلات Links هكذا ..

كود:

.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;
}

Input Fields التعليق المضاف وهو الخاص بالفئات الموجودة اسفلة ولاحظ كيف تتم كتابته + تم تغير الفونت المستخدم وكذلك إضافة حد لحقول الكتابة .


أي أخطاء حدثت أعذرونا فيها ـ وإن كان لدى أحد معلومات إضافيه عن أفضل طرق لربط ملفات css بالمنتدى يخبرنا بالجديد
اتمني لكم الإستفادة وتقبلوا جميعاً التحيه ،،

مبـــــــــــــــــــــــــــــــــدع ياكتوم

الله يعطيك ألف عافية يابطل

انا من المتابعين لمواضيعك واصل يابطل : )

صراحة ما أدري وش أقول لك ..
أظن دعوة لك راح تكون كويسة ..
الله يوفقك ويصلحك ويهديك وجزاك الله خير ..

أشكركم أخواني

أتمنى لكم الإستفادة ـ ولو تم الفصل صدقوني هاتكتشفوا ميزات كثيرة جدا وسهولة في التعديل خاصة لمحترفي css :nice:

تحيتي ,,

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

أحسنت وشرح مميز وموضوع يستحق التثبيت.

موفق

العفو ـ وأشكرك أستاذنا العندليب

شهادة أعتز بها :app:

تحيتي ،،

ما شاء الله ..
شرح رائع أخي الكريم ..

شرح مميز اخوى جزاك الله عليه خير

المشاركة الأصلية كتبت بواسطة مُجَاهِد

ما شاء الله ..
شرح رائع أخي الكريم ..

المشاركة الأصلية كتبت بواسطة arabic-files.net

شرح مميز اخوى جزاك الله عليه خير

عفواً أخواني ومشكورين على المرور

لم أتوقع أن تقوم الإدارة بتثبيت الموضوع الان وذلك بعد مده طويلة من تقديمة
شكراً

هذا الموضوع له علاقة وثيقة بالسؤال المطروح هنا ..والنتيجة مضمونه على جميع الإستايلات
http://www.swalif.net/softs/swalif44/softs207177/

الله يجزيك كل الخير اخي الفاضل موضوع اكثر من رائع موفق

سلمت يمناك يا صحبي

شرح وطريقه ولا اروع

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

تستاهل يالطيب

بارك الله فيك

أخي الكريم ca2oom

انا طبقت الشرح بالكامل ولك كل الشرح

وكانت امور المنتدى تمام والتصفح سريع

......................................................

عندي التباس بتطبيق الجزء الخامس من الشرح

5 - أخيراً وحتى نكون جمعنا كل أوامر css في ملف واحد منفصل تبقي خصائص css للمحرر Editor وهو الصندوق التى تظهر به القوائم لإختيار الخط واللون الخ .....

والمنتدى يقوم من تلقاء نفسه بفصل بعض الأوامر من css الخاصة بالمحرر ويضعها في ملف خارجي تجده على المسار

كود:
vb/clientscript/vbulletin_editor.cssومن ثم يقوم بجلب هذا الملف داخل القالب [editor_clientscript] ـ وبنفس القالب ايضا تجد أوامر css مكتوبة مباشرة داخل الوسم <style>

وما سنقوم به هو نسخ كل ماهو موجود داخل الملف vbulletin_editor.css ووضعهم داخل ملف الإستايل الأساسي المنشأ مسبقاً وبعدها تحذف الكود الذى يقوم بجلبه من داخل القالب وتجده بالشكل التالي :

كود:
<link rel="stylesheet" type="text/css" href="clientscript/vbulletin_editor.css" />يمكنك الان حذف الملف vbulletin_editor.css من دون خوف ..

مع انني قراءته اكثر من 4 مرات :con2:


ارجو منك توضيح هذا الجزء اكثر ....

وكل الشكر لك على هذا الشرح الرائع

ahmed-samara
dr-php
ادهم وجدي
ابن الجزيره

عفواً أخوان ولكم التحيه

المشاركة الأصلية كتبت بواسطة سوريا سات

عندي التباس بتطبيق الجزء الخامس من الشرح

مع انني قراءته اكثر من 4 مرات :con2:

ارجو منك توضيح هذا الجزء اكثر ....

وكل الشكر لك على هذا الشرح الرائع

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



حيث ان المنتدى من تلقاء نفسه ستجده يحتوى على الملف vbulletin_editor.css داخل المسار المشار اليه سابقاً ليقوم بعرضة فقط مع كل ظهور للمحرر عند كتابة رد جديد أو موضوع !

ومافعلناه إننا دمجنا هذه الأكواد مع الملف الإساسي لتعرض مرة واحده بدل من ان يعرضها المنتدى كل مرة مع المحرر ..

وتستطيع ان تميزها لو شاهدت اكواد css أثناء كتابة رد جديد ستشاهد

كود:

/*======================================================================*\
|| #################################################################### ||
|| # vBulletin 3.6.8
|| # ---------------------------------------------------------------- # ||
|| # All code in this file is ©2000-2007 Jelsoft Enterprises Ltd.     # ||
|| # This file may not be redistributed in whole or significant part. # ||
|| # ---------------- VBULLETIN IS NOT FREE SOFTWARE ---------------- # ||
|| # http://www.vbulletin.com | http://www.vbulletin.com/license.html # ||
|| #################################################################### ||
\*======================================================================*/

الى ... النهاية ...