[ استفسار ] استفسار في قالب العضو

[BLEACH]

السلام عليكم ورحمة الله وبركات



ازاي اعمل frame
حول الصورة ويتغير مثلا عند كل مستوي معين
ارجو الافاده
وكيف اتحكم في الاطار ده وف اي قالب موجود
وشكرا مقدما

 

[shqawe]

السلام عليكم ورحمة الله وبركات

مشاهدة المرفق 6353

ازاي اعمل frame
حول الصورة ويتغير مثلا عند كل مستوي معين
ارجو الافاده
وكيف اتحكم في الاطار ده وف اي قالب موجود
وشكرا مقدما

وعليكم السلام ورحمة الله وبركاته

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

.message-avatar .avatar{
    border: 1px solid #000;
}

اما بخصوص يتغير عند كل مستوى معين ﻻ اعلم ماذا تقصد هل تقصد ان كل مجموعة يكون لها اطار معين ام ماذا

اما بخصوص في قالب يكون التعديل على هذه المنطقة فالقالب هو message_macros

احترامي وتقديري
اخوك
شقاوي

 

[iAhmedDh]

وعليكم السلام ورحمة الله وبركاته


بعد رؤية موضوعك وتسهيل الأستاذ شقاوي للحل، أردت المحاولة بتطبيق هذا الشرح على الزن فورو

لعلي أنجح فأستفيد وأفيد...

ولكن واجهتني مشكلة،

مشاهدة المرفق Screen_Recording_٢٠٢٣١١٢٢_١٣٤٧٥٨_Chrome.mp4

لعل الأستاذ تركي يساعدنا، حاولت أن أستدعي الأفتار ليكون داخل الدائرة البيضاء ولكن لم أنجح.

هذا الكود الذي استخدمته

.message-avatar .avatar{
    border: solid 5px black;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.message-avatar .avatar::before{
    content: '';
    position:absolute;
    inset: -5px 40px;
    background: linear-gradient(315deg, #00ccff, #d400d4);
    transition: 0.5s;
    animation: t7rik 4s linear infinite;
}

.message-avatar .avatar:hover::before{
    inset: -10px 0px;
}

.message-avatar .avatar::after {
    content: '';
    position:absolute;
    inset: 6px;
    border-radius: 50%;
    background: #fff;
}

@keyframes t7rik {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

 

[iAhmedDh]

السّلام عليكم ورحمة الله وبركاته

مرحبًا مرة أخرى...

الحمد لله استطعت تضبيط الكود بتعديل بسيط جدًا

مشاهدة المرفق Screen_Recording_٢٠٢٣١١٢٤_٠٣٥٣٠٠_Chrome.mp4

.message-avatar{
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.message-avatar::before{
    content: '';
    position:absolute;
    inset: 0px 58px;
    background: linear-gradient(315deg, #00ccff, #d400d4);
    transition: 0.5s;
    animation: t7rik 4s linear infinite;
}

.message-avatar:hover::before{
    inset: -10px -10px;
}

.message-avatar::after {
    content: '';
    position:absolute;
    inset: 6px;
    border-radius: 50%;
}

@keyframes t7rik {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

ربما تستفيد منه...

 

[shqawe]

رائعة الحركة اخوي @iAhmedDh

ولكن ليتك افردت لها موضوع خاص في قسم تعديلات قوالب Xenforo ليستفيد الجميع

تعديلات قوالب XenForo و التعديلات الجمالية

ستجد بهذا القسم دروس خاصة بتعديلات قوالب Xenforo و كذلك مختلف الأكواد التي تضفي جمالية على السكربت وتعتمد على قالب Extra.less

xenarabia.com

 

[عبدو.شنوي]

السلام عليكم
قمت بتضبيط بسيط على الكود ان شاء الله يعجبكم

.message-avatar .avatar{
    border: 1px solid #FF0000;
}


.message-avatar{
    border-radius: 100%;
    overflow: hidden;
    position: relative;
}

.message-avatar::before{
    content: '';
    position:absolute;
    inset: 1px 1px;
    background: linear-gradient(315deg, #00ccff, #d400d4);
    transition: 0.2s;
    animation: t7rik 5s linear infinite;
}

.message-avatar:hover::before{
    inset: 1px 3px;
}

.message-avatar::after {
    content: '';
    position:absolute;
    inset: 1px;
    border-radius: 1%;
}

@keyframes t7rik {
    70% {transform: rotate(0deg);}
    30% {transform: rotate(360deg);}
}

 

[عبدو.شنوي]

أو هذا الكود يشتغل بمرور الماوس

.message-avatar .avatar{
    border: 1px solid #FF0000;
}


.message-avatar{
    border-radius: 100%;
    overflow: hidden;
    position: relative;
}

.message-avatar::before{
    content: '';
    position:absolute;
    inset: 15px 75px;
    background: linear-gradient(315deg, #00ccff, #d400d4);
    transition: 0.2s;
    animation: t7rik 5s linear infinite;
}

.message-avatar:hover::before{
    inset: -10px 10px;
}

.message-avatar::after {
    content: '';
    position:absolute;
    inset: 6px;
    border-radius: 50%;
}

@keyframes t7rik {
    15% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}