عيد الاضحى المبارك


مواضيع تهمك

اضافات الزين فورو XENFORO هنا يطرح كل ما يخص إضافات XENFORO فقط يمنع منعا باتا وضع هاكات منزوعه

اضافة تأثير على الصورة الرمزية بشكل رائع لمنتدى الزين فورو xenforo

السلام عليكمورحمة الله وبركاته اقدم لكم تأثير الصورة الرمزية خيالية . ان شاء الله تعجبكم لتحميل الكواد...

احصائياتى

الردود
0

المشاهدات
1650
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant future

  • هيلبرنت غير متواجد حالياً

المشاركات
11,551

+التقييم
321

تاريخ التسجيل
Jul 2015

الاقامة
فى الدنيا

نظام التشغيل
windows 8

رقم العضوية
18
08-26-2016, 12:49 PM
المشاركة 1
08-26-2016, 12:49 PM
المشاركة 1
افتراضي اضافة تأثير على الصورة الرمزية بشكل رائع لمنتدى الزين فورو xenforo
السلام عليكمورحمة الله وبركاته
اقدم لكم تأثير الصورة الرمزية خيالية . ان شاء الله تعجبكم






الخطوات

1- إفتح قالب message_user_info استبدال محتويات كامل بهذا الكود

كود:
<xen:require css="message_user_info.css" />

<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">    
<div class="messageUserBlock">
    <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">

                    <div class="imgholder">
                <div class="outer1 circle"></div>
                <div class="outer2 circle"></div>
                <figure>
                <figcaption class="caption"><xen:username user="$user" itemprop="name" rich="true" /></figcaption>
                </figure>
            <xen:avatar user="$user" size="m" img="true" />
            <figcaption class="caption">
                        <!-- slot: message_user_info_text -->
                        </div>
                        </xen:hook>

<xen:if is="!{$isQuickReply}">
    <xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
        <h3 class="userText">

            <xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user, 1, 1}</xen:contentcheck></em></xen:if>
            {xen:helper userBanner, $user, 'wrapped'}
            <!-- slot: message_user_info_text -->
        </h3>
    </xen:hook>
        
    <xen:if hascontent="true">
        <div class="extraUserInfo">
            <xen:contentcheck>
            <xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
                <xen:if is="@messageShowRegisterDate AND {$user.user_id}">
                    <dl class="pairsJustified">
                        <dt>{xen:phrase joined}:</dt>
                        <dd>{xen:date $user.register_date}</dd>
                    </dl>
                </xen:if>
                
                <xen:if is="@messageShowMessageCount AND {$user.user_id}">
                    <dl class="pairsJustified">
                        <dt>{xen:phrase messages}:</dt>
                        <dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed" rel="nofollow">{xen:number $user.message_count}</a></dd>
                    </dl>
                </xen:if>
                
                <xen:if is="@messageShowTotalLikes AND {$user.user_id}">
                    <dl class="pairsJustified">
                        <dt>{xen:phrase likes_received}:</dt>
                        <dd>{xen:number $user.like_count}</dd>
                    </dl>
                </xen:if>
                
                <xen:if is="@messageShowTrophyPoints AND {$user.user_id}">
                    <dl class="pairsJustified">
                        <dt>{xen:phrase trophy_points}:</dt>
                        <dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
                    </dl>
                </xen:if>
            
                <xen:if is="@messageShowGender AND {$user.gender}">
                    <dl class="pairsJustified">
                        <dt>{xen:phrase gender}:</dt>
                        <dd itemprop="gender"><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd>
                    </dl>
                </xen:if>
                
                <xen:if is="@messageShowOccupation AND {$user.occupation}">
                    <dl class="pairsJustified">
                        <dt>{xen:phrase occupation}:</dt>
                        <dd itemprop="role">{xen:string censor, $user.occupation}</dd>
                    </dl>
                </xen:if>
                
                <xen:if is="@messageShowLocation AND {$user.location}">
                    <dl class="pairsJustified">
                        <dt>{xen:phrase location}:</dt>
                        <dd><a href="{xen:link 'misc/location-info', '', 'location={xen:string censor, $user.location, '-'}'}" target="_blank" rel="nofollow" itemprop="address" class="concealed">{xen:string censor, $user.location}</a></dd>
                    </dl>
                </xen:if>
            
                <xen:if is="@messageShowHomepage AND {$user.homepage}">
                    <dl class="pairsJustified">
                        <dt>{xen:phrase home_page}:</dt>
                        <dd><a href="{xen:string censor, $user.homepage, '-'}" rel="nofollow" target="_blank" itemprop="url">{xen:string censor, $user.homepage}</a></dd>
                    </dl>
                </xen:if>
                            
            </xen:hook>            
            <xen:if is="@messageShowCustomFields AND {$user.customFields}">
            <xen:hook name="message_user_info_custom_fields" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
            
                <xen:foreach loop="$userFieldsInfo" key="$fieldId" value="$fieldInfo">
                    <xen:if is="{$fieldInfo.viewable_message}">
                        <xen:if hascontent="true">
                            <dl class="pairsJustified userField_{$fieldId}">
                                <dt>{xen:helper userFieldTitle, $fieldId}:</dt>
                                <dd><xen:contentcheck>{xen:helper userFieldValue, $fieldInfo, $user, {$user.customFields.{$fieldId}}}</xen:contentcheck></dd>
                            </dl>
                        </xen:if>
                    </xen:if>
                </xen:foreach>
                
            </xen:hook>
            </xen:if>
            </xen:contentcheck>
        </div>
    </xen:if>
        
</xen:if>

    <span class="arrow"><span></span></span>
</div>
</div>


2- إفتح قالب EXTRA.css وأضف الكود التالى في اخره

كود:
/*FX effect avatar Body */
.imgholder {

    height: 81px;
    margin: 44px 30px;

}


/* thumbnails style */
.imgholder img{
    position:absolute;
    left:0;
    top:0;
    width:120px;
    height:120px;
    z-index:5;
    border-radius:100px;
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    opacity:0.3;
    filter: alpha(opacity = 30);
    box-shadow:0 0 5px #000;
    -moz-box-shadow:0 0 5px #000;
    -webkit-box-shadow:0 0 5px #000;
    
    transform: scale(0.5,0.5);
    -ms-transform: scale(0.5,0.5);
    -moz-transform: scale(0.5,0.5);
    -webkit-transform: scale(0.5,0.5);
    
    transition: 
        opacity 1s,
        transform 1s ease-in-out 0.3s;
    -moz-transition: 
        opacity 1s,
        -moz-transform 1s ease-in-out 0.3s;
    -webkit-transition: 
        opacity 1s,
        -webkit-transform 1s ease-in-out 0.3s;
}
.imgholder:hover img{
    opacity:1;
    filter: alpha(opacity = 100);
    transform: scale(1,1);
    -ms-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
}

.imgholder figcaption{
    position:absolute;
    left:48px; 
    top:40%;
    width:185px;
    color:#004E87;
    font-weight:bold;
    text-shadow:-1px -1px 0 #fff;
    z-index:4;
    
    transition: 
        top 0.5s ease-out;
    -moz-transition: 
        top 0.5s ease-out;
    -webkit-transition: 
        top 0.5s ease-out;
}
.imgholder:hover figcaption{
    top:20%;
}
/* decorations style */
.imgholder .circle{
    position:absolute;
    border-radius:100px;
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
}
.imgholder .outer1{
    top:-8px;
    left:-8px;
    width:120px;
    height:120px;
    z-index:2;
    
    border:8px solid;
    border-color:#DEEBFC;
    box-shadow:0 0 3px #AFD3FF;
    -moz-ox-shadow:0 0 3px #AFD3FF;
    -webkit-box-shadow:0 0 3px #AFD3FF;
    
    background: #ffffff;
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
    background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
    background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
    background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
    
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -moz-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg);
    
    transition: 
        transform 1.8s ease-in-out,
        box-shadow 1s ease-out,
        border-color 1.5s;
    -moz-transition: 
        -moz-transform 1.8s ease-in-out,
        -moz-box-shadow 1s ease-out,
        border-color 1.5s;
    -webkit-transition: 
        -webkit-transform 1.8s ease-in-out,
        -webkit-box-shadow 1s ease-out,
        border-color 1.5s;
}
.imgholder:hover .outer1{
    border-color:#0088EA #7FC9FF #0088EA #7FC9FF;
    box-shadow:0 0 10px #0285E2;
    -moz-box-shadow:0 0 10px #0285E2;
    -webkit-box-shadow:0 0 10px #0285E2;
    transform:rotate(-10deg);
    -ms-transform:rotate(-10deg);
    -moz-transform:rotate(-10deg); 
    -webkit-transform:rotate(-10deg);
}
                
                
                
 .imgholder .outer2{
    top:-18px;
    left:-18px;
    width:136px;
    height:136px;
    z-index:1;
    
    border:10px solid;
    border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
    box-shadow:0 0 20px #8EB9FF;
    -moz-box-shadow:0 0 20px #8EB9FF;
    -webkit-box-shadow:0 0 20px #8EB9FF;
    opacity:0;
    filter: alpha(opacity = 0);
    
    transform: scale(1.3,1.3) rotate(180deg);
    -ms-transform: scale(1.3,1.3) rotate(180deg);
    -moz-transform: scale(1.3,1.3) rotate(180deg);
    -webkit-transform: scale(1.3,1.3) rotate(180deg);
        
    transition: 
        opacity 0.5s,
        transform 0.7s ease-out;
    -moz-transition: 
        opacity 0.5s,
        -moz-transform 0.7s ease-out;
    -webkit-transition: 
        opacity 0.5s,
        -webkit-transform 0.7s ease-out;
}               
                               
.imgholder:hover .outer2{
    opacity:0.9;
    filter: alpha(opacity = 90);
    transform: scale(1,1) rotate(-10deg);
    -ms-transform: scale(1,1) rotate(-10deg);
    -moz-transform: scale(1,1) rotate(-10deg);
    -webkit-transform: scale(1,1) rotate(-10deg);
}

    

.imgholder figcaption {
    color: #004E87;
    font-weight: bold;
    left: 7px;
    position: absolute;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0), -1px -1px 0 #FFFFFF;
    top: 153px;
    transition: top 0.5s ease-out 0s;
    width: 185px;
    z-index: 4;
}

/*FX effect avatar Body */


لتحميل الكواد منقصلة

اضغط هنا


اضافة رد

العلامات المرجعية

اضافة تأثير على الصورة الرمزية بشكل رائع لمنتدى الزين فورو xenforo


أدوات الموضوع

الانتقال السريع
المواضيع المتشابهه للموضوع: اضافة تأثير على الصورة الرمزية بشكل رائع لمنتدى الزين فورو xenforo
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
اضافة تأثير وميض على الصورة الرمزية للاعضاء - زين فورو ahmedkhalifa ركن شروحات الزين فورو XENFORO 1 05-13-2020 06:20 PM
[ شرح ] : شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثانى 14SAT ركن شروحات الزين فورو XENFORO 25 01-18-2019 10:35 PM
[ BBcode] : إضافة تأثير على الصورة الرمزية عند تمرير الماوس xenforo 2 maaidni ركن شروحات الزين فورو XENFORO 3 11-14-2018 11:57 AM
خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 1 الزين فورو الجيل الاول azert120 ركن مشاكل وطلبات الزين فورو XENFORO 3 07-26-2018 10:57 PM
قالب التوقيع الخاص باسكريبت الزين فورو بشكل جديد و حصرى لمنتدى هيلبرنت abo-karim ركن شروحات الزين فورو XENFORO 6 06-13-2018 07:08 PM




الساعة الآن 08:44 AM
RSS 2.0XML Site MapTAGS SiteInfo SiteRSS FeedMap SectionsvB MapsMap TagSitemap ForumMaps Forum