تخصيص تصميم صفحتك

صفحتك في Unylinks قابلة للتصميم بالكامل عبر CSS مخصّص. أي تنسيق تكتبه يُطبَّق داخل صفحتك وحدها ويُعقَّم تلقائياً — فلا يمكن أبداً أن يكسر الموقع أو يؤثّر على صفحات غيرك. اكتب CSS عادي بثقة.

من أين تبدأ؟

افتح لوحة التحكم ← تبويب الثيم ← خانة «CSS مخصّص».
اكتب تنسيقك (أو الصق أحد الأمثلة بالأسفل) ثم احفظ.
افتح صفحتك العامة لترى النتيجة. أو ببساطة اطلب من المساعد عبدالله: «صمّم لي صفحتي» وهو يكتب الـCSS وينفّذه.

القاعدة الذهبية: كل شيء محصور داخل صفحتك

النظام يضيف تلقائياً نطاقاً (.uny-profile) أمام كل مُحدِّد تكتبه. هذا يعني:

تنسيقك يطال صفحتك فقط — لا الموقع ولا لوحة التحكم ولا صفحات المستخدمين الآخرين.
لا تحتاج لكتابة .uny-profile بنفسك — اكتب المُحدِّد العادي فقط والنظام يحصره.
للخلفية واللون المميّز العام، استخدم خيارات الثيم الجاهزة (الألوان/التدرّج) — أوضح وأسهل من CSS.

متعرّفات العناصر (data-uny)

كل عنصر مهم في صفحتك له «اسم ثابت» تستهدفه بـ [data-uny="..."]. هذه الأسماء لا تتغيّر مع تحديثات المنصة، فتصميمك يبقى ثابتاً:

العنصر	المُحدِّد
صورة الغلاف	`[data-uny="banner"]`
الصورة الرمزية	`[data-uny="avatar"]`
الاسم	`[data-uny="name"]`
المعرّف (@username)	`[data-uny="username"]`
شارة التوثيق	`[data-uny="verification-badge"]`
المجال (التصنيف)	`[data-uny="niche"]`
النبذة (البايو)	`[data-uny="bio"]`
زر المتابعة	`[data-uny="follow"]`
حاوية الروابط	`[data-uny="links"]`
زر الرابط الواحد	`[data-uny="link"]`
شريط التنقل السفلي	`[data-uny="nav"]`
قسم الأعمال	`[data-uny="works"]`
قسم الاهتمامات	`[data-uny="interests"]`
قسم الرسائل	`[data-uny="messages"]`

يمكنك أيضاً استهداف العناصر العامة مباشرةً مثل a (الروابط) وimg وh1 — كلها محصورة داخل صفحتك تلقائياً.

أمثلة جاهزة — انسخها وعدّلها

صورة رمزية دائرية مع توهّج ناعم

[data-uny="avatar"] {
  border-radius: 9999px;
  box-shadow: 0 0 0 3px #fff, 0 10px 30px rgba(0,0,0,.45);
}

أزرار روابط بحواف دائرية وحركة عند المرور

[data-uny="link"] {
  border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
[data-uny="link"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
}

اسم أكبر بخط مميّز

[data-uny="name"] {
  font-size: 34px;
  letter-spacing: -.5px;
}

تأثير حركي (نبض خفيف لشارة التوثيق)

@keyframes uny-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
[data-uny="verification-badge"] {
  animation: uny-pulse 2s ease-in-out infinite;
}

المسموح والممنوع

مسموح بحرّية

الألوان، الخطوط، التباعد، الحواف، الظلال، التدرّجات، التحويلات (transform)، الانتقالات (transition)، التصميم المتجاوب (@media)، والحركات (@keyframes).

يتكفّل به النظام

لا داعي لتقلق بشأن الأمان: النظام يتجاهل تلقائياً @import وposition:fixed وأي سكربتات أو محاولات للخروج خارج صفحتك.

الوضع الآمن (لو اختفى شيء)

إذا أخفى تصميمك عنصراً أو ظهرت مشكلة، أضف ?safe=1 إلى رابط صفحتك لمعاينتها بدون الـCSS المخصّص:

https://unylinks.com/username?safe=1

هذا الوضع لك أنت فقط للمعاينة. ولإرجاع التصميم الافتراضي نهائياً: لوحة التحكم ← الثيم ← إعادة تعيين.

دع عبدالله يصمّم لك

إن لم تكن تعرف CSS، فلا مشكلة. افتح المساعد عبدالله من لوحة التحكم واطلب ما تريد بلغتك:

«اجعل أزراري بحواف دائرية وظل ناعم».
«كبّر اسمي وخلّ خلفية الصفحة متدرّجة غامقة».
«صمّم لي صفحة أنيقة بالأبيض والأسود».

سيكتب عبدالله الـCSS المناسب ويطبّقه على صفحتك مباشرةً — وأنت تحفظ أو تعدّل كما يحلو لك.

ابدأ التصميم الآن تصفّح القوالب الجاهزة

الأسئلة الشائعة

هل يمكن أن يكسر تصميمي المخصّص الموقع أو يؤثّر على غيري؟

لا. كل ما تكتبه يُحصر تلقائياً داخل صفحتك (.uny-profile) ويُعقَّم، فلا يطال إلا ملفك الشخصي وحده.

كيف أرجع للتصميم الافتراضي؟

من لوحة التحكم ← تبويب الثيم ← إعادة تعيين. وللمعاينة المؤقتة بدون CSS أضف ?safe=1 إلى رابط صفحتك.

هل أحتاج معرفة بالبرمجة؟

لا. اطلب من المساعد عبدالله أن يصمّم لك بلغتك العادية وهو يكتب الـCSS وينفّذه، أو انسخ أحد الأمثلة الجاهزة في هذه الصفحة.

ما الذي لا يُسمح به؟

يتجاهل النظام تلقائياً @import و position:fixed وأي سكربتات — أمّا الألوان والخطوط والحواف والظلال و@media و@keyframes فكلها مسموحة بحرّية.