ان كنت استفدت من محتوى المنتدى فاضغط على الاعلانات..

تومبلايت الغاء ازرار كتابة موضوع وجعلها نصية واضافة تاثير css

  افضل مساهمة1
تومبيلات الغاء ازرار كتابة موضوع وجعلها نصية واضافة تاثير css

تومبيلات الغاء ازرار كتابة موضوع وجعلها نصية واضافة تاثير css

السلام عليكم ورحمة الله وبركاته

اقدم اليوم حاجة جديدة وهي الغاء صور ازرار الكتابة ( كتابة موضوع جديد - اضافة رد )

وجعلها ازرار نصية مع اضافة تاثيرات عليها بتقنية css

او نفتح قالب viewtopic_body

ونبحث عن ,,

الكود:
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>&nbsp;&nbsp;&nbsp;
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->

ونستبدله بــ

الكود:
        <!-- BEGIN switch_user_authpost -->
         <tr>   <div class="topic_en"><a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="topic_1">موضوع جديد</a>
        <!-- END switch_user_authpost -->
</div>      </tr>
        <!-- BEGIN switch_user_authreply -->
        <div class="topic_en"><a href="{U_POST_REPLY_TOPIC}"rel="nofollow" class="topic_1">أضافة رد</a>
        <!-- END switch_user_authreply -->
          </div>      

ثم مرة اخرى نكرر نفس الاستبدال بالقالب لانه مكرر مرتين

ثم حفظ ثم نشر

ثم بورقة css نضع الكود الاتي

الكود:


.topic_en {

margin-left: 15px;
  
background: #00a1cb;

height: 37px;
  
width: 129px;
  
float: right;
  
font-family: Sans-serif;

font-size: 18px;

text-align: center;

transition: all 0.3s ease 0s;

-webkit-transition:300ms;

border:none!important;
  
border-radius:3px;

color:#FFF!important;

padding:5px 10px!important;

}


.topic_en:hover  {

background: #0190b5;
 
height: 37px;
  
width: 129px;
  
float: right;
  
font-family: Sans-serif;

font-size: 18px;

text-align: center;

transition: all 0.3s ease 0s;

-webkit-transition:300ms;

border:none!important;
  
border-radius:3px;

color:#FFF!important;

padding:5px 10px!important;
 
}

صورة للعملية بعد تعديل بالقالب ووضع الكود بورقة css



http://i61.tinypic.com/mb7d5y.jpg

وهذا تاثير اخر بكود css يجعل الزرين بخلفية ووتتغير الخلفية بشكل انسيابي

الكود css

الكود:


.topic_en {

margin-left: 15px;
  
background-image: url(http://i21.servimg.com/u/f21/16/46/77/76/uo_ouo19.png);
  
background-repeat: no-repeat;
  
height: 37px;
  
width: 129px;
  
float: right;
  
font-family: Sans-serif;

font-size: 18px;

text-align: center;

}


.topic_en:hover  {

background-image: url(http://i21.servimg.com/u/f21/16/46/77/76/uo_ouo19.png);
  
background-repeat: no-repeat;
  
background-position: 0px -37px;
 
font-family: Sans-serif;

font-size: 18px;

text-align: center;

}

صورة للتوضيح



http://i59.tinypic.com/5lnrip.gif

دمتم بخير


m13
  افضل مساهمة2
يعطيك آلف عافيه ع هالموضوع
وسلمت الآنامل المتألقه 
  افضل مساهمة3
مجهود روعه
تسلمي ي جوري
  افضل مساهمة4
منور الموضوع


m13
  افضل مساهمة5
شكرا ع الكود الاكثر من رائع


  افضل مساهمة6
شششكرآ على الكود #بلآك
  


  افضل مساهمة7
كالعادة ابداع رائع 
وطرح يستحق المتابعة
شكراً لك 
بانتظار الجديد القادم
دمت بكل خير
لاتستطيع الرد على المواضيع في هذا المنتدى