Topic: Stylus تخصيص اشكال المواقع انماط بيتكوين توك CSS (Read 200 times)

هذا الشكل يشبة بشكل كبير الشكل الذي ذكرته في هذا الموضوع ----> https://bitcointalksearch.org/topic/--5158287
فقط تصميم الموقع الجديد يبدو اكثر حداثة.

اكثر ما يزعجني بهذا المنتدى هو طريقة عرض الصور والافاتار لذلك اقوم باخفاء الصور ولكن لو  كان التعديل ليحول شكل الصور الي دائري بجانب اسم المستخدم  سيكون الشكل اكثر جمالا.
بالاضافة لعدم دعم  خاصية الوضع الليللي  ---- الثيم الاسود مقبول بهذه الحالة

عموما تصميم المنتدي القديم مقبول وهذه الثيمات ستجدد نظرة البعض, شكرا لمشاركتها.

 ------------------> محجوز ---------------------<
ساجرب بعض الثيمات هنا

قائمة ببعض انماط منتدى bitcointalk

---

تغير شكل الاقتباس شجري

---

النتيجة


الكود: https://pastebin.com/TzRFzRGB

المشاكل حالياً :
- لعدم وجود خاصية بـ css تسمح بتحديد العنصر الاخ قبل العنصر الحالي تعذر اضافة تأثير مرور الماوس بشكل كامل
- لايطبق بصفحة البحث

---

تغير ايقونات الاقتباس و التعديل و الحذف

---

النتيجة:


الكود:  https://pastebin.com/DRB7RiSa
المشاكل حالياً: صغر مساحة النقر

---

تحويل شكل ردود المواضيع كمربعات

---

الكود:  https://pastebin.com/6UgTbnJF
المشاكل حالياً:

---

اخفاء تكرار عنوان الموضوع و تغير لون الفواصل hr

---

النتيجة:


الكود:  https://pastebin.com/k9n7my7T
المشاكل حالياً:

---

تحويل الصور الشخصية من مربعه لدائرية اقتراح hugeblack

---

النتيجة:


الكود:  https://pastebin.com/zTnFPz2t - الخصائص من Epochtalk
المشاكل حالياً: اقتصاص بعض الصور , غير معلوم تأثير الغاء خاصية overflow من الديف الحاوي للصورة!



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

بسم الله الرحمن الرحيم
السلام عليكم كيف الحال جميعاً

الموضوع: [خارج الموضوع] تخصيص اشكال و تصميم المواقع , انماط بيتكوين توك باستخدام اضافة Stylus

بعض الاحيان تحتاج تغير تصميم , شكل , نوع خط مواقعك المفضله تتوفر اضافات بالمتصفحات تمكنك من تخصيص و تغير قواعد css ^ـ[2]
من بين هذه الاضافات اضافة Stylus ^ـ[3] موقع الاضافة https://add0n.com/stylus.html مستودع الاضافة بـ github  ـ: https://github.com/openstyles/stylus

تتوفر لمختلف المتصفحات حمل الاضافة بحسب متصفحك من موقعهم الرسمي

طريقة استخدام الاضافة
بعد تثبيت الاضافة انقر على ايقونة الاضافة انتقل الى "إدارة الانماط المثبتة" او ما يقابله ان كنت تستخدم المتصفح بلغة غير العربية
تظهر نافذه باليمين الانماط المثبتة لديك اذا اردنا انشاء نمط جديد لاحد المواقع باليسار > "كتابة نمط جديد" كما بالصورة: https://i.ibb.co/7XkF9vk/image.png

بعد ذلك تظهر النافذة التالية: https://i.ibb.co/5F9CQJ6/image.png باعلى اليمين مكان كتابة اكواد css بالاسفل مجموعة المواقع و الروابط الواجب تطبيق هذه الاكواد عليها
فمثلاً بالصورة يتم تطبيق الاكواد اعلاه على اي رابط يبداء بـ * https://bitcointalk.org (* اي رابط بعده) اي بكامل الموقع تستطيع اضافة مواقع و روابط آخرى لتطبيق نفس الاكواد

باعلى اليسار اكتب اسم للنمط انقر على حفظ ليتم حفظ النمط بالاضافة ما دامت الاضافة مفعله و زرت احد المواقع او الروابط المستخدمه تظهر ارقام بجانب الاضافة للدلاله على توفر اكواد css بالاضافة ستطبق بالموقع مثل بالصورة: https://i.ibb.co/m6fz06d/image.png لاحظ وجود مربع اختيار بجانب كل نمط يمكنك من الغاء تفعيل النمط وقت ماتشاء و اعادة تفعيلة مره آخرى..

userstyles
تريد انماط css جاهزه ؟ https://userstyles.org/ يتوفر على العديد من الانماط لاغلب المواقع يعتبر كمتجر تستطيع من خلال نفس الاضافة البحث عن الاكواد المتوفرة للمواقع


ساضيف انماط css قمت بعملها بالسابق لمنتدى bitcointalk للتغير فقط كتسلية او للتجربة و ممكن للتعلم


ان اردت شرح اكثر عن الاضافة: https://github.com/openstyles/stylus/wiki/Usercss

* ملاحظة: لست متأكد من عمل الاكواد اعلاه فقط مثال و من الممكن ان لا يعمل لابد ان تكون الخطوط المثبته بجهازك! ان كان هدفك فقط تغير الخط تستطيع تغير نوع الخط الافتراضي من الاعدادت باغلب المتصفحات دون الحاجة لهذه الاضافة

---

مصطلحات:
[1] html : لغة هيكلة المواقع بها يتم تحديد اي نص فقرة و اي نص عنوان نموذج ادخال , زر ... الخ
[2] CSS : لغة تنسيق هيكلة المواقع و اضافة الوان و تنسيقات و تصاميم لاظهار هذه العناصر بالشكل المطلوب
[3] من الافضل استخدام اضافة stylus بدل اضافة Stylish لان الاخيره لا تحترم خصوصية المستخدمين و تقوم بسرقه تاريخ تصفحك حسب المقال "Stylish" browser extension steals all your internet history الشكر موصول لـ TryNinja لاضافة التنبيه