Modificar ebsocial

El objetivo es añadir otra imagen con link en el ebsocial

Vamos al archvio /modules/ebsocial/ebsocial.tpl encotnraremos una estructura asi

<div>
     <ul>
         <li><a></li>
     </ul>
</div>

Lo que aremos acontinuación es copiar la linea de {if $facebook_url …
y la duplicaremos. Ahora tendremosque cabiar el class por otra palabra en mi caso help.

{if $facebook_url != ”}<li><a class=”help” href=”/blog_carlos/{$facebook_url}” target=”_blank” title=”{l s=’Help’ mod=’ebsocial’}”></a></li>  {/if}

Tambien tendremos que indicar el nombre que queremos mostrar al poner el cursor encima, indicandolo en s=” en mi caso Help y por ultimo en href tendremos que indicar la url que queremos que vaya.

Ahora tenemos que localizar el archivo /themes/elation-liquid/css/global.css linea 1637. Aqui encontraremos el css del ebsocial

Ahora lo que aremos es duplicar la linea
#eb-social li a {display:block; width:55px; height:50px; margin: 4px 0 0 4px; background:url(../img/social-icons.png) no-repeat;}

por

#eb-social li a.help {display:block; width:55px; height:50px; margin: 4px 0 0 4px; background:url(../img/social-icons1.png) no-repeat;} 

los cambios son minimo, unicamente le indicado otra imagen y le añadido a.help, para indicarle que solo actue en el nuevo icono. (recordad que help es el nombre del class indicado en el ebsocial.tpl)

Ahora en la parte inferior veremos la linea

#eb-social li a:hover.facebook {background-position:-55px 0;} 

esta hace el efecto -55px 0, si hos fijais en el resto, cada una hace un movimiento diferente. Yo he elejido este, por lo que voy a hacer es duplicarla cambiando el .facebook por .help

#eb-social li a:hover.help {background-position:-55px 0;}

Ahora solo nos falta colocar la imagen en /themes/elation-liquid/img con el nombre indicado en el css.




No hay comentarios


Puedes dejar el primero : )



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.