[Tutorial] Social Buttons [Fixed & Deslizantes]
Social Buttons [Fixed & Deslizantes] Buen día comunidad, vengo con un sencillo tutorial para integrar lo que se conoce como Social Buttons (botones ...

Social Buttons [Fixed & Deslizantes]

Buen día comunidad, vengo con un sencillo tutorial para integrar lo que se conoce como Social Buttons (botones de redes sociales) a sus foros con un efecto deslizante agradable, y a su vez éste permanecerá fijo en cualquier parte de sus foros estando así a disposición de cualquier visitante a darle click en el momento que desee, ocupando un espacio mínimo lateral en la página para así no afectar el contenido principal de las páginas de sus foros.

Bien, antes de seguir quiero decirles que el tema se deriva de un tema de soporte que creó storm el cual lo pueden encontrar aquí.

Bien una vez teniendo referencia de dónde surge todo esto, empecemos con el tutorial.

1. Vamos a nuestro ACP y nos ubicamos en la siguiente dirección: ACP >> Estilos y Plantillas >> Plantillas >> (selecciona tu theme) >> Plantillas sin grupo >> headerinclude

Y van a cargar jQuery y jQuery UI respectivamente, les dejo los códigos a agregar:

Código:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js'></script>


IMPORTANTE: Si ya tienes jQuery en tu foro, no hay necesidad de que lo vuelvas a agregar, solo te quedaría agregar jQuery UI.

2. Ahora nos ubicamos en: ACP >> Estilos y Plantillas >> Estilos >> (selecciona tu theme) >> Agregar hoja de estilo

Y llenaremos los campos de la siguiente manera (Nota: Si sabes cómo funciona esto puedes llenar los campos a tu gusto, las especificaciones son para usuarios que no tienen nociones de cómo hacer esto)

Nombre del archivo: socialbuttons.css
Adjunto a: Marcamos Globalmente y en la parte de abajo marcamos Escribir mi propio código

Al haber marcado Escribir mi propio código nos aparecerá un campo de texto grande grande, es allí en donde vamos a pegar el siguiente código:

Código PHP:
.botones-sociales {
positionfixed;
top130px;
width45px;
z-index9999;
}

.
izquierda {
left0;
}

.
derecha{
right0;
}

.
botones-sociales #twitter-btn .social, .botones-sociales #facebook-btn .social, .botones-sociales #google-btn .social, .botones-sociales #rss-btn .social, .botones-sociales #pinterest-btn .social, .botones-sociales #youtube-btn .social {
background-color#33353B;
background-imageurl(images/mas-icons.png);
}

.
izquierda #facebook-btn span {
background-positionright 10px;
}

.
izquierda #twitter-btn span {
background-positionright -35px;
}

.
izquierda #google-btn span {
background-positionright -127px;
}

.
izquierda #rss-btn span {
background-positionright -80px;
}

.
izquierda #pinterest-btn span {
background-positionright -177px;
}

.
izquierda #youtube-btn span {
background-positionright -223px;
}

.
derecha #facebook-btn span {
background-position12px 10px;
}

.
derecha #twitter-btn span {
background-position11px -35px;
}

.
derecha #google-btn span {
background-position10px -127px;
}

.
derecha #rss-btn span {
background-position11px -80px;
}

.
derecha #pinterest-btn span {
background-position11px -177px;
}

.
derecha #youtube-btn span {
background-position11px -223px;
}

.
botones-sociales #facebook-btn:hover .social {
background-color#3B5998;
}

.
botones-sociales #twitter-btn:hover .social {
background-color#62BDB2;
}

.
botones-sociales #google-btn:hover .social {
background-color#DB4A39;
}

.
botones-sociales #rss-btn:hover .social {
background-color#FF8B0F;
}

.
botones-sociales #pinterest-btn:hover .social {
background-color#D43638;
}

.
botones-sociales #youtube-btn:hover .social {
background-color#C4302B;
}

.
botones-sociales a:hover .texto {
displayblock;
}

.
izquierda .social {
-
moz-transitionbackground-color 0.4s ease-in 0s;
-
webkit-transitionbackground-color 0.4s ease-in 0s;
background-repeatno-repeat;
displayblock;
floatleft;
height43px;
margin-bottom2px;
width43px;
}

.
izquierda .texto {
displaynone;
floatright;
font-size1em;
font-weightbold;
margin11px 40px 11px 0px;
white-spacenowrap;
}

.
derecha .social {
-
moz-transitionbackground-color 0.4s ease-in 0s;
-
webkit-transitionbackground-color 0.4s ease-in 0s;
background-repeatno-repeat;
displayblock;
floatright;
height43px;
margin-bottom2px;
width43px;
}

.
derecha .texto {
displaynone;
floatleft;
font-size80%;
font-weightbold;
margin11px 0 11px 40px;
white-spacenowrap;
}

.
botones-sociales .texto {
color#FFFFFF;


Y finalizamos dando click en Guardar hoja de estilos.

3. Ahora vamos a agregar el código que hará que estos botones aparezcan en nuestro foro, para eso vamos a: ACP >> Estilos y Plantillas >> Plantillas >> cabecera >> header

Y al final pegamos el siguiente código:

Código PHP:
<script type='text/javascript'>
jQuery.noConflict();
jQuery(window).load(function(){
jQuery('.botones-sociales .social').mouseenter(function(){
jQuery(this).stop();
jQuery(this).animate({width:'160'}, 500'easeOutBounce',function(){});
});
jQuery('.botones-sociales .social').mouseleave(function(){
jQuery(this).stop();
jQuery(this).animate({width:'43'}, 500'easeOutBounce',function(){});
});
});
</
script>

<
div class='botones-sociales derecha hidden-phone hidden-tablet'>
<
class='itemsocial' href='url de facebook' id='facebook-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Facebook</span></span></a>
<
class='itemsocial' href='url de twitter' id='twitter-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Twitter</span></span></a>
<
class='itemsocial' href='url de google+' id='google-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Google</span></span></a>
<
class='itemsocial' href='url de pinterest' id='pinterest-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Pinterest</span></span></a>
<
class='itemsocial' href='url de youtube' id='youtube-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Youtube</span></span></a>
<
class='itemsocial' href='url del feed' id='rss-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via RSS</span></span></a>
</
div

Finalizamos guardando los cambios.

4. Y no menos importante y sí siendo el paso más sencillo vamos a agregar la siguiente imagen dentro de nuestra carpeta images de nuestro FTP con el nombre tal cual está.

[attachment=1535]

Finalizamos guardando los cambios y listo, con esto ya deberíamos ver en nuestro index los botones de redes sociales deslizantes cuyo efecto se notará al pasar el cursor del mouse sobre estos.

Datos Adicionales

Pueden utilizar esta barra de botones sociales tanto de lado izquierdo como de lado derecho, para ello solo van a su plantilla header en donde colocaron el código, y buscan esto:

Código PHP:
<div class='botones-sociales derecha hidden-phone hidden-tablet'

Para emplearlo de lado izquierdo, cambiar derecha por izquierda y tendrán los social buttons de lado izquierdo en sus foros, de modo que les quedaría así

Código PHP:
<div class='botones-sociales izquierda hidden-phone hidden-tablet'

Y si notan un problema con la alineación al momento de pasar el cursor del mouse sobre los botones regresar a la plantilla header y jugar con el width de esta línea de código.

Código PHP:
jQuery(this).animate({width:'160'}, 500'easeOutBounce',function(){}); 

recomiendo 210 cuando lo usen de lado izquierdo, de modo que quería así:

Código PHP:
jQuery(this).animate({width:'210'}, 500'easeOutBounce',function(){}); 

Y si luego quieren volverlo a usar de lado derecho, regresar el valor del width a 160.

Vista Previa:
[spoiler]
[Imagen: 2cqe.png]

[Imagen: CMOp6PO.png]

[Imagen: WZXiRyk.png]
[/spoiler]
Espero les haya gustado y si tienen dudas con mucho gusto preguntar, saludos Rolleyes
Última modificación: 20 Feb, 2014, 2:53 pm por Jean Pierre.
(20 Feb, 2014, 1:48 pm)Jean Pierre escribió:
Social Buttons [Fixed & Deslizantes]

Buen día comunidad, vengo con un sencillo tutorial para integrar lo que se conoce como Social Buttons (botones de redes sociales) a sus foros con un efecto deslizante agradable, y a su vez éste permanecerá fijo en cualquier parte de sus foros estando así a disposición de cualquier visitante a darle click en el momento que desee, ocupando un espacio mínimo lateral en la página para así no afectar el contenido principal de las páginas de sus foros.

Bien, antes de seguir quiero decirles que el tema se deriva de un tema de soporte que creó storm el cual lo pueden encontrar aquí.

Bien una vez teniendo referencia de dónde surge todo esto, empecemos con el tutorial.

1. Vamos a nuestro ACP y nos ubicamos en la siguiente dirección: ACP >> Estilos y Plantillas >> Plantillas >> (selecciona tu theme) >> Plantillas sin grupo >> headerinclude

Y van a cargar jQuery y jQuery UI respectivamente, les dejo los códigos a agregar:

Código:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js'></script>


IMPORTANTE: Si ya tienes jQuery en tu foro, no hay necesidad de que lo vuelvas a agregar, solo te quedaría agregar jQuery UI.

2. Ahora nos ubicamos en: ACP >> Estilos y Plantillas >> Estilos >> (selecciona tu theme) >> Agregar hoja de estilo

Y llenaremos los campos de la siguiente manera (Nota: Si sabes cómo funciona esto puedes llenar los campos a tu gusto, las especificaciones son para usuarios que no tienen nociones de cómo hacer esto)

Nombre del archivo: socialbuttons.css
Adjunto a: Marcamos Globalmente y en la parte de abajo marcamos Escribir mi propio código

Al haber marcado Escribir mi propio código nos aparecerá un campo de texto grande grande, es allí en donde vamos a pegar el siguiente código:

Código PHP:
.botones-sociales {
positionfixed;
top130px;
width45px;
z-index9999;
}

.
izquierda {
left0;
}

.
derecha{
right0;
}

.
botones-sociales #twitter-btn .social, .botones-sociales #facebook-btn .social, .botones-sociales #google-btn .social, .botones-sociales #rss-btn .social, .botones-sociales #pinterest-btn .social, .botones-sociales #youtube-btn .social {
background-color#33353B;
background-imageurl(images/mas-icons.png);
}

.
izquierda #facebook-btn span {
background-positionright 10px;
}

.
izquierda #twitter-btn span {
background-positionright -35px;
}

.
izquierda #google-btn span {
background-positionright -127px;
}

.
izquierda #rss-btn span {
background-positionright -80px;
}

.
izquierda #pinterest-btn span {
background-position11px -177px;
}

.
izquierda #youtube-btn span {
background-position11px -223px;
}

.
derecha #facebook-btn span {
background-position12px 10px;
}

.
derecha #twitter-btn span {
background-position11px -35px;
}

.
derecha #google-btn span {
background-position10px -127px;
}

.
derecha #rss-btn span {
background-position11px -80px;
}

.
derecha #pinterest-btn span {
background-position11px -177px;
}

.
derecha #youtube-btn span {
background-position11px -223px;
}

.
botones-sociales #facebook-btn:hover .social {
background-color#3B5998;
}

.
botones-sociales #twitter-btn:hover .social {
background-color#62BDB2;
}

.
botones-sociales #google-btn:hover .social {
background-color#DB4A39;
}

.
botones-sociales #rss-btn:hover .social {
background-color#FF8B0F;
}

.
botones-sociales #pinterest-btn:hover .social {
background-color#D43638;
}

.
botones-sociales #youtube-btn:hover .social {
background-color#C4302B;
}

.
botones-sociales a:hover .texto{
displayblock;
}

.
izquierda .social {
-
moz-transitionbackground-color 0.4s ease-in 0s;
-
webkit-transitionbackground-color 0.4s ease-in 0s;
background-repeatno-repeat;
displayblock;
floatleft;
height43px;
margin-bottom2px;
width43px;}

.
izquierda .texto{
displaynone;
floatright;
font-size1em;
font-weightbold;
margin11px 40px 11px 0px;
white-spacenowrap;
}

.
derecha .social {
-
moz-transitionbackground-color 0.4s ease-in 0s;
-
webkit-transitionbackground-color 0.4s ease-in 0s;
background-repeatno-repeat;
displayblock;
floatright;
height43px;
margin-bottom2px;
width43px;}

.
derecha .texto {
displaynone;
floatleft;
font-size80%;
font-weightbold;
margin11px 0 11px 40px;
white-spacenowrap;
}

.
botones-sociales .texto{
color#FFFFFF;


Y finalizamos dando click en Guardar hoja de estilos.

3. Ahora vamos a agregar el código que hará que estos botones aparezcan en nuestro foro, para eso vamos a: ACP >> Estilos y Plantillas >> Plantillas >> cabecera >> header

Y al final pegamos el siguiente código:

Código PHP:
<script type='text/javascript'>
jQuery.noConflict();
jQuery(window).load(function(){
jQuery('.botones-sociales .social').mouseenter(function(){
jQuery(this).stop();
jQuery(this).animate({width:'160'}, 500'easeOutBounce',function(){});
});
jQuery('.botones-sociales .social').mouseleave(function(){
jQuery(this).stop();
jQuery(this).animate({width:'43'}, 500'easeOutBounce',function(){});
});
});
</
script>

<
div class='botones-sociales derecha hidden-phone hidden-tablet'>
<
class='itemsocial' href='url de facebook' id='facebook-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Facebook</span></span></a>
<
class='itemsocial' href='url de twitter' id='twitter-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Twitter</span></span></a>
<
class='itemsocial' href='url de google+' id='google-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Google</span></span></a>
<
class='itemsocial' href='url de pinterest' id='pinterest-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Pinterest</span></span></a>
<
class='itemsocial' href='url de youtube' id='youtube-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Youtube</span></span></a>
<
class='itemsocial' href='url del feed' id='rss-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via RSS</span></span></a>
</
div

Finalizamos guardando los cambios.

4. Y no menos importante y sí siendo el paso más sencillo vamos a agregar la siguiente imagen dentro de nuestra carpeta images de nuestro FTP con el nombre tal cual está.



Finalizamos guardando los cambios y listo, con esto ya deberíamos ver en nuestro index los botones de redes sociales deslizantes cuyo efecto se notará al pasar el cursor del mouse sobre estos.

Vista Previa:
[spoiler]
[Imagen: 2cqe.png]

[Imagen: CMOp6PO.png]

[Imagen: WZXiRyk.png]
[/spoiler]
Espero les haya gustado y si tienen dudas con mucho gusto preguntar, saludos Rolleyes

Como siempre encantadisima con tus trabajos Jean.

Pero tiene un pequeño error cuando pones los iconos en la derecha, si te fijas youtube y pinterest no se expande, se queda el icono quieto, solo se mueve la barra..
Saludossssss y 1 millon de gracias
@Pilar1977 de lado izquierdo querrás decir, porque de lado derecho funciona perfectamente, y pues acabo de ver en tu foro y tienes razón, esos 2 botones no se mueven.

Voy a revisar el código css ya que ahí está el problema, como dije en el tema que antecede este, el código del supuesto "autor" tiene errores y aquí nuevamente se nota, cuando, reescribiré el código CSS para que quede perfecto y actualizaré el tema.

Gracias por avisar c:

Actualizado...

Listo Pilar, puedes copiar nuevamente el código CSS del tema que ya lo actualicé y seguir las nuevas instrucciones que dejé para cuando lo usen de lado izquierdo/derecho en sus foros, ya no hay problema alguno. Smile
Última modificación: 20 Feb, 2014, 2:55 pm por Jean Pierre.
Lo estoy intentando poner, he quitado google+ y pinterest, me queda así el código.

Código PHP:
.botones-sociales {
positionfixed;
top130px;
width45px;
z-index9999;
}

.
izquierda {
left0;
}

.
derecha{
right0;
}

.
botones-sociales #twitter-btn .social, .botones-sociales #facebook-btn .social, .botones-sociales #rss-btn .social, .botones-sociales #youtube-btn .social {
background-color#33353B;
background-imageurl(images/mas-icons.png);
}

.
izquierda #facebook-btn span {
background-positionright 10px;
}

.
izquierda #twitter-btn span {
background-positionright -35px;
}

.
izquierda #youtube-btn span {
background-positionright -223px;
}

.
izquierda #rss-btn span {
background-positionright -80px;
}

.
derecha #facebook-btn span {
background-position12px 10px;
}

.
derecha #twitter-btn span {
background-position11px -35px;
}

.
derecha #youtube-btn span {
background-position11px -223px;
}

.
derecha #rss-btn span {
background-position11px -80px;
}

.
derecha #youtube-btn span {
background-position11px -223px;
}

.
botones-sociales #facebook-btn:hover .social {
background-color#3B5998;
}

.
botones-sociales #twitter-btn:hover .social {
background-color#62BDB2;
}

.
botones-sociales #youtube-btn:hover .social {
background-color#C4302B;
}

.
botones-sociales #rss-btn:hover .social {
background-color#FF8B0F;
}

.
botones-sociales #youtube-btn:hover .social {
background-color#C4302B;
}

.
botones-sociales a:hover .texto {
displayblock;
}

.
izquierda .social {
-
moz-transitionbackground-color 0.4s ease-in 0s;
-
webkit-transitionbackground-color 0.4s ease-in 0s;
background-repeatno-repeat;
displayblock;
floatleft;
height43px;
margin-bottom2px;
width43px;
}

.
izquierda .texto {
displaynone;
floatright;
font-size1em;
font-weightbold;
margin11px 40px 11px 0px;
white-spacenowrap;
}

.
derecha .social {
-
moz-transitionbackground-color 0.4s ease-in 0s;
-
webkit-transitionbackground-color 0.4s ease-in 0s;
background-repeatno-repeat;
displayblock;
floatright;
height43px;
margin-bottom2px;
width43px;
}

.
derecha .texto {
displaynone;
floatleft;
font-size80%;
font-weightbold;
margin11px 0 11px 40px;
white-spacenowrap;
}

.
botones-sociales .texto {
color#FFFFFF;


Código PHP:
<script type='text/javascript'>
jQuery.noConflict();
jQuery(window).load(function(){
jQuery('.botones-sociales .social').mouseenter(function(){
jQuery(this).stop();
jQuery(this).animate({width:'160'}, 500'easeOutBounce',function(){});
});
jQuery('.botones-sociales .social').mouseleave(function(){
jQuery(this).stop();
jQuery(this).animate({width:'43'}, 500'easeOutBounce',function(){});
});
});
</
script>

<
div class='botones-sociales derecha hidden-phone hidden-tablet'>
<
class='itemsocial' href='' id='facebook-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Facebook</span></span></a>
<
class='itemsocial' href='' id='twitter-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Twitter</span></span></a>
<
class='itemsocial' href='' id='youtube-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Youtube</span></span></a>
<
class='itemsocial' href='' id='rss-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via RSS</span></span></a>
</
div

Algo hice mal...
Última modificación: 20 Feb, 2014, 3:27 pm por storm.
(20 Feb, 2014, 3:26 pm)storm escribió: Lo estoy intentando poner, he quitado google+ y pinterest, me queda así el código.

Código PHP:
.botones-sociales {
positionfixed;
top130px;
width45px;
z-index9999;
}

.
izquierda {
left0;
}

.
derecha{
right0;
}

.
botones-sociales #twitter-btn .social, .botones-sociales #facebook-btn .social, .botones-sociales #rss-btn .social, .botones-sociales #youtube-btn .social {
background-color#33353B;
background-imageurl(images/mas-icons.png);
}

.
izquierda #facebook-btn span {
background-positionright 10px;
}

.
izquierda #twitter-btn span {
background-positionright -35px;
}

.
izquierda #youtube-btn span {
background-positionright -223px;
}

.
izquierda #rss-btn span {
background-positionright -80px;
}

.
derecha #facebook-btn span {
background-position12px 10px;
}

.
derecha #twitter-btn span {
background-position11px -35px;
}

.
derecha #youtube-btn span {
background-position11px -223px;
}

.
derecha #rss-btn span {
background-position11px -80px;
}

.
derecha #youtube-btn span {
background-position11px -223px;
}

.
botones-sociales #facebook-btn:hover .social {
background-color#3B5998;
}

.
botones-sociales #twitter-btn:hover .social {
background-color#62BDB2;
}

.
botones-sociales #youtube-btn:hover .social {
background-color#C4302B;
}

.
botones-sociales #rss-btn:hover .social {
background-color#FF8B0F;
}

.
botones-sociales #youtube-btn:hover .social {
background-color#C4302B;
}

.
botones-sociales a:hover .texto {
displayblock;
}

.
izquierda .social {
-
moz-transitionbackground-color 0.4s ease-in 0s;
-
webkit-transitionbackground-color 0.4s ease-in 0s;
background-repeatno-repeat;
displayblock;
floatleft;
height43px;
margin-bottom2px;
width43px;
}

.
izquierda .texto {
displaynone;
floatright;
font-size1em;
font-weightbold;
margin11px 40px 11px 0px;
white-spacenowrap;
}

.
derecha .social {
-
moz-transitionbackground-color 0.4s ease-in 0s;
-
webkit-transitionbackground-color 0.4s ease-in 0s;
background-repeatno-repeat;
displayblock;
floatright;
height43px;
margin-bottom2px;
width43px;
}

.
derecha .texto {
displaynone;
floatleft;
font-size80%;
font-weightbold;
margin11px 0 11px 40px;
white-spacenowrap;
}

.
botones-sociales .texto {
color#FFFFFF;


Código PHP:
<script type='text/javascript'>
jQuery.noConflict();
jQuery(window).load(function(){
jQuery('.botones-sociales .social').mouseenter(function(){
jQuery(this).stop();
jQuery(this).animate({width:'160'}, 500'easeOutBounce',function(){});
});
jQuery('.botones-sociales .social').mouseleave(function(){
jQuery(this).stop();
jQuery(this).animate({width:'43'}, 500'easeOutBounce',function(){});
});
});
</
script>

<
div class='botones-sociales derecha hidden-phone hidden-tablet'>
<
class='itemsocial' href='' id='facebook-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Facebook</span></span></a>
<
class='itemsocial' href='' id='twitter-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Twitter</span></span></a>
<
class='itemsocial' href='' id='youtube-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Youtube</span></span></a>
<
class='itemsocial' href='' id='rss-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via RSS</span></span></a>
</
div

Algo hice mal...

Pero cuál es el problema? deja un foto de cómo se ve el error que te sucede para más o menos tener una idea de cuál es tu problema y así te ayudo Smile
Me da error, me sale esto:
Última modificación: 20 Feb, 2014, 4:35 pm por storm.
@storm no veo que hayas agregado los estilos a tu foro, estás seguro de haber añadido el código CSS ??
Joder lo he puesto en plantillas no en estilo, voy a cambiarlo y te digo.
- - - Actualizado - - -
Me sale así:
Última modificación: 20 Feb, 2014, 4:34 pm por storm.
(20 Feb, 2014, 3:58 pm)storm escribió: Joder lo he puesto en plantillas no en estilo, voy a cambiarlo y te digo.
- - - Actualizado - - -
Me sale así:
[Imagen: 21mu6gg.png]

Sí, ya veo, lo he notado ahorita que entré a tu foro, pero es porque la imagen que subiste mas-icons.png son de dimensiones pequeñas, no subiste la imagen original que dejé en el tema sino una redimensionada con menor tamaño, sube la original y reemplaza por el que tienes actualmente.

Luego de eso tendría que ver cómo se ve para darte las ediciones de código CSS en ciertos puntos para una buena alineación.
Y cómo descargo la imagen de forma correcta, yo le doy botón derecho, guardar imagen como..
Se hace de otra forma?¿