علانات هيلبرنت



اضافات XENFORO هنا يطرح كل ما يخص إضافات XENFORO فقط
احصائياتى

الردود
0

المشاهدات
57
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت 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

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

المشاركات
3,806

+التقييم
310

تاريخ التسجيل
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, '-'}'}" rel="nofollow" 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" 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
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
شرح اضافة ايقونة تظهر بجانب اسم موقعك بالمتصفح لمنتديات الزين فورو -Xenforo هيلبرنت قسم تعديلات القوالب والشروحات XENFORO 2 11-30-2016 09:56 PM
قالب التوقيع الخاص باسكريبت الزين فورو بشكل جديد و حصرى لمنتدى هيلبرنت abo-karim قسم تعديلات القوالب والشروحات XENFORO 3 11-29-2016 02:43 AM
طريقة اضافة لقب اضافي للاعضاء بمنتديات الزين فورو - xenForo هيلبرنت قسم تعديلات القوالب والشروحات XENFORO 0 08-23-2016 10:07 PM
كود اضافة الصورة الرمزية للعضو في النافبار بدون اى هاك هيلبرنت ركن تطوير منتديات vb3.8.0 0 01-24-2016 01:21 AM
شرح طريقة اضافة الصورة الرمزية بمنتدايات XenForo هيلبرنت قسم تعديلات القوالب والشروحات XENFORO 0 11-20-2015 03:10 AM





الساعة الآن 11:36 AM