شرح اضافة علامه مائية على الصور بحقوق المنتدى - الزين فورو

[codeNET]

طريقة إضافة علامة مائية (Watermark) احترافية لصور منتدى XenForo بدون إضافات

---

أهلاً بكم زوار وأعضاء كود نت. في هذا الشرح التقني الجديد، سنتعرف على طريقة ذكية وعصرية لحماية حقوق صور منتدانا باستخدام أكواد CSS/LESS فقط. تتميز هذه الطريقة بأنها خفيفة جداً على المتصفح ولا تحتاج لتنصيب إضافات قد ترهق السيرفر.
مميزات هذه الطريقة:

• تأثير زجاجي ضبابي (Glassmorphism) عصري.
• تظهر تلقائياً على جميع الصور داخل المواضيع.
• تظهر أيضاً عند تكبير الصور (Lightbox).
• متوافقة تماماً مع الهواتف الذكية وتصاميم Modern UI.

خطوات التطبيق:
1. الدخول إلى لوحة التحكم:
توجه إلى المظهر (Appearance) > القوالب (Templates) وابحث عن قالب extra.less.
2. إضافة الكود المطور:
قم بنسخ الكود التالي وضعه في أسفل القالب (أو في البداية لضمان الأولوية):

/* --- كود العلامة المائية المطور لـ Code Net --- */
/* ضبط حاوية الصور */
.bbImageWrapper, .fancybox__content {
position: relative !important;
}
/* إنشاء العلامة المائية بتنسيق Glassmorphism */
.bbImageWrapper::after, .fancybox__content::after {
content: 'codenet.net' !important; /* استبدل هذا بنطاق موقعك */
position: absolute !important;
bottom: 15px !important;
right: 15px !important;
display: block !important;
/* الألوان والخلفية الضبابية */
background: rgba(0, 82, 204, 0.7) !important;
color: #ffffff !important;
backdrop-filter: blur(5px) !important;
-webkit-backdrop-filter: blur(5px) !important;
/* الخط والحواف */
padding: 6px 15px !important;
border-radius: 8px !important;
font-size: 12px !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
/* لضمان الظهور فوق الصورة دائماً */
z-index: 100 !important;
pointer-events: none !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

3. الحفظ والمعاينة:
بعد حفظ القالب، قم بعمل تحديث (F5) لأي موضوع يحتوي على صور في منتداك وستلاحظ ظهور العلامة المائية في الزاوية اليمنى السفلية بشكل أنيق واحترافي.

ملاحظة لمطوري كود نت: تم استخدام خاصية pointer-events: none; لضمان عدم إعاقة العلامة المائية للمستخدم عند محاولة الضغط على الصورة أو حفظها، فهي تعمل كطبقة بصرية فقط.

---

أتمنى أن ينال الشرح إعجابكم. لأي استفسار أو تعديل على الألوان، لا تترددوا بطرحه في الردود.
مودتي، فريق تطوير كود نت.