شرح عمل تأثير على الصورة الشخصية فىXENFORO

شرح عمل تأثير على الصورة الشخصية فىXENFORO

السلام عليكم اليوم راح نتعلم كيفية عمل تاثير 

عى الصورة الشخصية فى الموضوع لـ الزين فورو 

اليكم الصورة 

طريقة العمل 

ابحث فى القوالب عن 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 */ 

وبعدها

استبدل 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:if $user.isOnline, online}">

    <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>

 

  <xen:avatar user="$user" size="m" img="true" />

 

  <!-- 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:username user="$user" itemprop="name" rich="true" />

       <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} AND ({$fieldInfo.display_group} != 'contact' OR {$user.allow_view_identities} == 'everyone' OR ({$user.allow_view_identities} == 'members' AND {$visitor.user_id}))">

             <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>

ومبروك عليك