مهدي حميد
عضو جديد
طريقة إضافة علامة مائية (Watermark) احترافية لصور منتدى XenForo بدون إضافات
أهلاً بكم زوار وأعضاء موقع شقاوي في هذا الشرح التقني الجديد، سنتعرف على طريقة ذكية وعصرية لحماية حقوق صور منتدانا باستخدام أكواد CSS/LESS فقط. تتميز هذه الطريقة بأنها خفيفة جداً على المتصفح ولا تحتاج لتنصيب إضافات قد ترهق السيرفر.
مميزات هذه الطريقة:
1. الدخول إلى لوحة التحكم:
توجه إلى المظهر (Appearance) > القوالب (Templates) وابحث عن قالب extra.less.
2. إضافة الكود المطور:
قم بنسخ الكود التالي وضعه في أسفل القالب (أو في البداية لضمان الأولوية):
3. الحفظ والمعاينة:
بعد حفظ القالب، قم بعمل تحديث (F5) لأي موضوع يحتوي على صور في منتداك وستلاحظ ظهور العلامة المائية في الزاوية اليمنى السفلية بشكل أنيق واحترافي.
أتمنى أن ينال الشرح إعجابكم. لأي استفسار أو تعديل على الألوان، لا تترددوا بطرحه في الردود.
مودتي، اعداد بواسطة :مهدي حميد.
أهلاً بكم زوار وأعضاء موقع شقاوي في هذا الشرح التقني الجديد، سنتعرف على طريقة ذكية وعصرية لحماية حقوق صور منتدانا باستخدام أكواد CSS/LESS فقط. تتميز هذه الطريقة بأنها خفيفة جداً على المتصفح ولا تحتاج لتنصيب إضافات قد ترهق السيرفر.
مميزات هذه الطريقة:
- تأثير زجاجي ضبابي (Glassmorphism) عصري.
- تظهر تلقائياً على جميع الصور داخل المواضيع.
- تظهر أيضاً عند تكبير الصور (Lightbox).
- متوافقة تماماً مع الهواتف الذكية وتصاميم Modern UI.
1. الدخول إلى لوحة التحكم:
توجه إلى المظهر (Appearance) > القوالب (Templates) وابحث عن قالب extra.less.
2. إضافة الكود المطور:
قم بنسخ الكود التالي وضعه في أسفل القالب (أو في البداية لضمان الأولوية):
CSS:
/* --- كود العلامة المائية المطور لـ Code Net --- */
/* ضبط حاوية الصور */
.bbImageWrapper, .fancybox__content {
position: relative !important;
}
/* إنشاء العلامة المائية بتنسيق Glassmorphism */
.bbImageWrapper::after, .fancybox__content::after {
content: 'xxxxxxx.com' !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;
}بعد حفظ القالب، قم بعمل تحديث (F5) لأي موضوع يحتوي على صور في منتداك وستلاحظ ظهور العلامة المائية في الزاوية اليمنى السفلية بشكل أنيق واحترافي.
أتمنى أن ينال الشرح إعجابكم. لأي استفسار أو تعديل على الألوان، لا تترددوا بطرحه في الردود.
مودتي، اعداد بواسطة :مهدي حميد.
التعديل الأخير بواسطة المشرف:
.