تومبيلات الغاء ازرار كتابة موضوع وجعلها نصية واضافة تاثير 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;
    <!-- 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

تكبير الصورة معاينة الأبعاد الأصلية.

https://2img.net/h/oi61.tinypic.com/mb7d5y.jpg
وهذا تاثير اخر بكود css يجعل الزرين بخلفية ووتتغير الخلفية بشكل انسيابي
الكود css

الكود:

.topic_en {
margin-left: 15px;
 
background-image:
 
url([url=http://i21.servimg.com/u/f21/16/46/77/76/uo_ouo19.png]http://i21.servimg.com/u/f21/16/46/77/76/uo_ouo19.png[/url]);
 
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([url=http://i21.servimg.com/u/f21/16/46/77/76/uo_ouo19.png]http://i21.servimg.com/u/f21/16/46/77/76/uo_ouo19.png[/url]);
 
background-repeat: no-repeat;
 
background-position: 0px -37px;
 
font-family: Sans-serif;
font-size: 18px;
text-align: center;
}

صورة للتوضيح

تكبير الصورة معاينة الأبعاد الأصلية.

https://2img.net/h/oi59.tinypic.com/5lnrip.gif
دمتم بخير