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


مواضيع تهمك

ركن شروحات الزين فورو XENFORO هذا القسم خاص بكل شروحات إستخدام XENFORO وتعديلات القوالب

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

السلام عليكم ورحمه الله وبركاته اليوم راح نتعلم كيفية عمل تاثير عى الصورة الشخصية فى الموضوع لـ الزين فورو :...

احصائياتى

الردود
4

المشاهدات
1675
mahwos
.:: عضو مشارك ::.
  • mahwos is an unknown quantity at this point

  • mahwos غير متواجد حالياً

المشاركات
34

+التقييم
9

تاريخ التسجيل
Nov 2017

الاقامة
مصر

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

رقم العضوية
1468
11-24-2017, 07:06 AM
المشاركة 1
11-24-2017, 07:06 AM
المشاركة 1
Alert2 شرح عمل تأثير على الصورة الشخصية فى xenforo
السلام عليكم ورحمه الله وبركاته
اليوم راح نتعلم كيفية عمل تاثير عى الصورة الشخصية فى الموضوع لـ الزين فورو
[توافق الكود]: تم تجربته على جميع نسخ الزين فورو وصولا الى XF1.5.14

اليكم الصورة


طريقة العمل

ابحث فى القوالب عن 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>
ومبروك عليك


التعديل الأخير تم بواسطة هيلبرنت ; 11-25-2017 الساعة 01:21 AM
قديم 11-24-2017, 08:27 AM
المشاركة 2
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت غير متواجد حالياً
افتراضي رد: شرح عمل تأثير على الصورة الشخصية فىxenforo
مشاء الله كود جميل.
والاجمل هو طريقتك للشرح تستخدم نفس اسلوب معهدنا وهذا ما نريده من الجميع ان يكون المعهد به اسلوب موحد فى الكتابه.

اشكر ياغالى

قديم 11-24-2017, 09:46 AM
المشاركة 3
mahwos
.:: عضو مشارك ::.
  • mahwos غير متواجد حالياً
افتراضي رد: شرح عمل تأثير على الصورة الشخصية فىxenforo
مشاء الله كود جميل.
والاجمل هو طريقتك للشرح تستخدم نفس اسلوب معهدنا وهذا ما نريده من الجميع ان يكون المعهد به اسلوب موحد فى الكتابه.

اشكر ياغالى
اولا شكرا اخى الغالى على مرورك الكريم
+
اسلوب معهد هيلبر اجمل طريقة للشرح البسيط

اعتز بكم فى دعم المنتديات مجانا

قديم 11-25-2017, 01:37 AM
المشاركة 4
abo-karim
.:: Administrator ::.
  • abo-karim غير متواجد حالياً
افتراضي رد: شرح عمل تأثير على الصورة الشخصية فى xenforo
والله الطريقة اعجبتنى وعليه

قمنا بوضع الدرس فى رئيسية المنتدى

احسنت اخى

قديم 11-27-2017, 09:37 PM
المشاركة 5
mahwos
.:: عضو مشارك ::.
  • mahwos غير متواجد حالياً
افتراضي رد: شرح عمل تأثير على الصورة الشخصية فى xenforo
والله الطريقة اعجبتنى وعليه

قمنا بوضع الدرس فى رئيسية المنتدى

احسنت اخى
شكرا لمرورك الكريم اخى
ابو كريم فخر موضيعى هو انكم
تمرون عليها مرور لكرام
هذا شرف لان يوضع احد موضيعى على الرئسية ووممنون اخى العزيز

اضافة رد

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

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


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

الانتقال السريع
المواضيع المتشابهه للموضوع: شرح عمل تأثير على الصورة الشخصية فى xenforo
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
اضافة تأثير وميض على الصورة الرمزية للاعضاء - زين فورو ahmedkhalifa ركن شروحات الزين فورو XENFORO 1 05-13-2020 06:20 PM
[ BBcode] : إضافة تأثير على الصورة الرمزية عند تمرير الماوس xenforo 2 maaidni ركن شروحات الزين فورو XENFORO 3 11-14-2018 11:57 AM
اضافة تأثير على الصورة الرمزية بشكل رائع لمنتدى الزين فورو xenforo هيلبرنت اضافات الزين فورو XENFORO 0 08-26-2016 12:49 PM
كيفية إضافة فيديو قصير مكان الصورة الشخصية على حساب فيس بوك Oussama Kllay ركن مواقع التواصل الإجتماعي 1 10-10-2015 10:14 PM
فيس بوك يُطلق ميّزة الصورة الشخصية المؤقتة هيلبرنت ركن اخر الاخبار التقنية 0 10-03-2015 12:19 AM




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