مساحة اعلانية


الملاحظات

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

الردود
4

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

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

المشاركات
23

+التقييم
3

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

الاقامة
مصر

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

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

اليكم الصورة

تأثير الصورة الشخصية xenforo Video_2017-11-23_175

طريقة العمل

ابحث فى القوالب عن 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
هيلبرنت
.:: رفيق درب ::.
تاريخ الإنضمام : Jul 2015
رقم العضوية : 18
المشاركات: 5,334
  • هيلبرنت غير متواجد حالياً
افتراضي رد: شرح عمل تأثير على الصورة الشخصية فىxenforo
مشاء الله كود جميل.
والاجمل هو طريقتك للشرح تستخدم نفس اسلوب معهدنا وهذا ما نريده من الجميع ان يكون المعهد به اسلوب موحد فى الكتابه.

اشكر ياغالى

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

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

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

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

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

احسنت اخى

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

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

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

اضافة رد

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

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


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

الانتقال السريع

المواضيع المتشابهه للموضوع: شرح عمل تأثير على الصورة الشخصية فى xenforo
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
لا يوجد التوقيع فى البيانات الشخصية للعضو ! رحلات تايلاند ركن مشاكل وطلبات الزين فورو XENFORO 5 09-26-2016 02:32 PM
اضافة تأثير على الصورة الرمزية بشكل رائع لمنتدى الزين فورو 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
درس تجمد الصور و تأثير تجمد الصورة بالفوتشوب ahmed دروس التصميم والجرافيكس 0 08-28-2015 02:40 PM





الساعة الآن 10:03 PM