[ITDCXA] 📘 لیول 1 - لیکچر 5: سٹائلز اور اپئیرنس - لوگو اور برانڈنگ

 📘 لیول 1 - لیکچر 5: سٹائلز اور اپئیرنس - لوگو اور برانڈنگ

📅 تاریخ اجراء: 15 دسمبر 2025
🎯 لیول: 1 - Fundamentals Administrator
⏰ تخمینی وقت: 30-45 منٹ

📝 تعارف
🎨 سٹائلز اور اپئیرنس سے پہلی ملاقات!
آپ کے فورم کا ظاہری حسن صارفین کے پہلے تاثر کو متاثر کرتا ہے۔ XenForo کا طاقتور سٹائل سسٹم آپ کو اپنے فورم کی ظاہری شکل کو آسانی سے اپنی مرضی کے مطابق ڈھالنے کی صلاحیت دیتا ہے۔

💡 سٹائل سسٹم کی خصوصیات:

• مکمل ریسپانسیو ڈیزائن

• آن دی فنڈ ایڈیٹنگ

• کسٹم رنگ اور فونٹس

• لوگو اور برانڈنگ کنٹرول

🎯 اس لیکچر کے اہم نکات
✅ ہم کیا سیکھیں گے:
سٹائل مینجمنٹ کا بنیادی تصور
ڈیفالٹ سٹائل میں تبدیلیاں
لوگو اور برانڈنگ سیٹ اپ
رنگ اور فونٹ کنفیگریشن

🛠️ عملی کام:
اپنے فورم کا لوگو تبدیل کرنا
رنگ سکیم میں تبدیلیاں
سٹائل پراپرٹیز کی ترتیب

---

🏠 سٹائل مینجمنٹ کا بنیادی تصور

📊 سٹائل ہائرکی:

text

ماسٹر سٹائل (سب سے اوپر)
    ↳ ڈیفالٹ سٹائل
    ↳ چائلڈ سٹائلز (اختیاری)

💡 سٹائل کی اقسام:

• ماسٹر سٹائل: تمام سٹائلز کی بنیاد

• ڈیفالٹ سٹائل: بنیادی استعمال کے لیے

• چائلڈ سٹائلز: مخصوص تبدیلیوں کے لیے

🔧 عملی Steps: سٹائل مینجمنٹ

🔸 سٹیپ 1: سٹائلز تک رسائی

text

ایڈمن پینل → اپئیرنس → سٹائلز

[سٹائلز مینجمنٹ انٹرفیس]

📍 مقام: سٹائلز کے مرکزی ڈیش بورڈ پر
🎯 مقصد: سٹائل مینجمنٹ کا نظارہ دکھانا
📐 سائز: میڈیم (600x400px)

🔸 سٹیپ 2: ڈیفالٹ سٹائل کی ترتیبات

text

سٹائلز کی فہرست → "ڈیفالٹ سٹائل" → "سٹائل پراپرٹیز"

بنیادی سٹائل پراپرٹیز:

• 🎨 رنگ سکیم

• 📝 فونٹ سیٹنگز

• 🖼️ لوگو اور امیجز

• 📱 ریسپانسیو ڈیزائن

---

🖼️ لوگو اور برانڈنگ سیٹ اپ

🔸 سٹیپ 1: لوگو تبدیل کرنا

text

سٹائل پراپرٹیز → "ہیڈر اور نیویگیشن" → "لوگو"

لوگو کی ضروریات:

• سائز: 200x50 پکسلز (تجویز کردہ)

• فارمیٹ: PNG یا JPG

• رنگ: پس منظر کے مطابق

• معیار: ہائی ریزولوشن

لوگو اپلوڈ کے Steps:

1. "اپلوڈ امیج" بٹن پر کلک کریں

2. اپنا لوگو فائل منتخب کریں

3. "سیو پراپرٹیز" پر کلک کریں

4. تبدیلی کو فوری طور پر دیکھیں

[لوگو اپلوڈ انٹرفیس]

📍 مقام: لوگو تبدیل کرتے وقت
🎯 مقصد: اپلوڈ پروسیس دکھانا
📐 سائز: میڈیم (600x400px)

🔸 سٹیپ 2: فیوریکن آئیکن تبدیل کرنا

text

سٹائل پراپرٹیز → "پیج سٹائل" → "فیوریکن آئیکن"

فیوریکن کی ضروریات:

• سائز: 16x16 یا 32x32 پکسلز

• فارمیٹ: ICO یا PNG

• رنگ: سادہ اور واضح

---

🎨 رنگ اور فونٹ تبدیلیاں

🔸 سٹیپ 1: بنیادی رنگ سکیم

text

سٹائل پراپرٹیز → "کالرز" → "پرائمری ایکسنٹ"

اہم رنگ کے علاقے:

• پرائمری ایکسنٹ: بنیادی رنگ

• کنٹینٹ بیک گراؤنڈ: مواد کا پس منظر

• ٹیکسٹ کالر: تحریر کا رنگ

• لنکس کالر: روابط کا رنگ

🔸 سٹیپ 2: فونٹ سیٹنگز

text

سٹائل پراپرٹیز → "ٹائپوگرافی" → "بنیادی فونٹ فیملی"

فونٹ کنفیگریشن:

• فونٹ فیملی: Arial, Tahoma, Urdu Nastaleeq

• فونٹ سائز: 14px (تجویز کردہ)

• لائن ہائٹ: 1.5 (پڑھنے میں آسانی)

اردو فونٹس کے لیے تجاویز:

• "Urdu Nastaleeq" برائے بہتر ظاہری شکل

• "Jameel Noori Nastaleeq" برائے رسم الخط

• "Alvi Lahori Nastaleeq" برائے عنوانات

[رنگ اور فونٹ سیٹنگز]

📍 مقام: سٹائل پراپرٹیز ایڈٹ کرتے وقت
🎯 مقصد: کنفیگریشن آپشنز دکھانا
📐 سائز: میڈیم (600x400px)

---

🛠️ عملی Steps: مکمل برانڈنگ تبدیلی

نمونہ برانڈنگ سیٹ اپ:

1. لوگو: اپنی ویب سائٹ کا لوگو

2. رنگ سکیم: نیلا اور سفید

3. فونٹس: Tahoma برائے انگریزی، Nastaleeq برائے اردو

4. فیوریکن: چھوٹا لوگو آئیکن

🔸 سٹیپ 3: تبدیلیوں کا جائزہ

text

فرنٹ اینڈ پر جائیں اور تبدیلیاں دیکھیں

چیک لسٹ:

• ✅ لوگو صحیح ظاہر ہو رہا ہے

• ✅ رنگ ہم آہنگ ہیں

• ✅ فونٹس صاف نظر آ رہے ہیں

• ✅ ڈیزائن ریسپانسیو ہے

---

📱 ریسپانسیو ڈیزائن سیٹنگز

🔸 سٹیپ 1: موبائل ویو سیٹنگز

text

سٹائل پراپرٹیز → "ریسپانسیو ڈیزائن" → "موبائل بریک پوائنٹ"

اہم موبائل سیٹنگز:

• 📱 موبائل لوگو

• 📱 موبائل مینو

• 📱 موبائل فونٹ سائز

• 📱 موبائل رنگ سکیم

🔸 سٹیپ 2: ٹیبلٹ سیٹنگز

text

سٹائل پراپرٹیز → "ریسپانسیو ڈیزائن" → "ٹیبلٹ بریک پوائنٹ"

ٹیبلٹ کے لیے تجاویز:

• درمیانے سائز کے فونٹس

• بٹنز کا مناسب سائز

• نیویگیشن میں آسانی

---

📋 اسائنمنٹ
🎯 مقصد:
اپنے فورم کی ظاہری شکل کو اپنی مرضی کے مطابق ڈھالیں۔

✅ کامیابی کے معیار:

• لوگو تبدیل کریں

• رنگ سکیم میں تبدیلی کریں

• فونٹ سیٹنگز ایڈجسٹ کریں

• موبائل ڈیزائن چیک کریں

🛠️ مطلوبہ کام:

1. اپنا کسٹم لوگو اپلوڈ کریں

2. پرائمری رنگ تبدیل کریں

3. فونٹ فیملی ایڈجسٹ کریں

4. موبائل ویو چیک کریں

📸 مطلوبہ اسکرین شاٹس:

1. نیا لوگو والا ہوم پیج

2. رنگ تبدیلی کے بعد کا نظارہ

3. موبائل ویو کا اسکرین شاٹ

4. سٹائل پراپرٹیز سیٹنگز

---

⚠️ عام مسائل اور حل

❌ مسئلہ: "لوگو ظاہر نہیں ہو رہا"

text

حل:
1. فائل permissions چیک کریں
2. فائل سائز اور فارمیٹ چیک کریں
3. کیش کلئیر کریں

❌ مسئلہ: "رنگ تبدیلی کام نہیں کر رہی"

text

حل:
1. سٹائل پراپرٹیز محفوظ کریں
2. براؤزر کیش کلئیر کریں
3. چائلڈ سٹائلز چیک کریں

❌ مسئلہ: "موبائل ویو میں مسئلہ"

text

حل:
1. ریسپانسیو سیٹنگز چیک کریں
2. موبائل بریک پوائنٹ ایڈجسٹ کریں
3. مختلف ڈیوائسز پر ٹیسٹ کریں

---

💡 بہترین مشقیں

🎯 ڈیزائن تجاویز:

• رنگوں کا ہم آہنگ سیٹ استعمال کریں

• لوگو کو سادہ اور یاد رکھنے والا بنائیں

• فونٹس پڑھنے میں آسان ہوں

• موبائل صارفین کو ترجیح دیں

🔧 تکنیکی تجاویز:

• تبدیلیاں کرنے سے پہلے بیک اپ لیں

• چائلڈ سٹائلز استعمال کریں

• مختلف براؤزرز میں ٹیسٹ کریں

• صارفین سے فیڈبیک لیں

---

🎊 اختتامیہ

مبارک ہو! اب آپ XenForo میں سٹائلز اور اپئیرنس مینجمنٹ کے بنیادی اصولوں سے واقف ہیں۔ آپ نے سیکھا ہے:

✅ سٹائل مینجمنٹ کا بنیادی تصور
✅ لوگو اور برانڈنگ سیٹ اپ
✅ رنگ اور فونٹ تبدیلیاں
✅ ریسپانسیو ڈیزائن سیٹنگز

اگلے لیکچر میں ہم سیکھیں گے:

• بنیادی سیکیورٹی سیٹنگز

• ایڈمنسٹریٹر سیکیورٹی

• ڈیٹا پروٹیکشن اور بیک اپ

📢 یاد رکھیں: "اچھا ڈیزائن صارفین کو متاثر کرتا ہے!"

---

🏷️ ہیش ٹیگز

text

#سٹائلز #برانڈنگ #لیول1 #لیکچر5
#XenForoڈیزائن #ITDarasgahسرٹیفائیڈ
#فورماپئیرنس #XenForoایڈمنسٹریٹر

🔔 اگلا لیکچر: "بنیادی سیکیورٹی - ڈیٹا پروٹیکشن اور بیک اپ"
📅 اگلی تاریخ: 22 دسمبر 2025

"اللہ تعالیٰ خوبصورتی کو پسند کرتا ہے"

• حدیث مبارکہ

🎯 اب عملی کام شروع کریں اور اپنے فورم کی ظاہری شکل کو بہتر بنائیں!