Seleccionar idioma:
Realizar Donación - Mods Premium - Portfolio



Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.
* [TIP]Dar estilo a botones responder, enviar tema, imprimir, mover tema y otros
  Leído 2335 veces
* Viendo el foro
 0 Usuarios y 1 Visitante están viendo este foro.


*
Autor: uge
Ene 25 2013
Bueno hago este tuto que sirve para dar estilo a los botones de responder, agregar encuesta, notificar, marcar como no leído, enviar tema, imprimir, mover tema, eliminar tema, bloquear tema, fijar tema y combinar tema.

Lo hago para que queden igual que este tuto que hice, ya que me lo han pedido varias personas:

http://www.smfpersonal.net/tutoriales-para-tu-web/tipdar-estilo-a-botones-modificar-citar-eliminar-t6657.0.html

Resultado:

*


Index.css del tema que queramos modificar

Buscamos

Código: [Seleccionar]
/* Styles for the standard button lists.
------------------------------------------------------- */

.buttonlist ul
{
z-index: 100;
padding: 5px;
margin: 0 0.2em 5px 0;
}
.buttonlist ul li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
.buttonlist ul li a
{
display: block;
font-size: 0.8em;
color: #000;
background: #e8e8e8 url(../images/theme/menu_gfx.png) no-repeat 0 -60px;
padding: 0 0 0 8px;
margin-left: 12px;
text-transform: uppercase;
cursor: pointer;
}
.buttonlist ul li a:hover
{
background: url(../images/theme/menu_gfx.png) no-repeat 0 0;
color: #fff;
text-decoration: none;
}
.buttonlist ul li a span
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -60px;
display: block;
height: 19px;
line-height: 19px;
padding: 0 8px 0 0;
}
.buttonlist ul li a:hover span
{
background: #fff url(../images/theme/menu_gfx.png) no-repeat 100% 0;
}
/* the active one */
.buttonlist ul li a.active
{
background: #5a6c85 url(../images/theme/menu_gfx.png) no-repeat 0 -90px;
color: #fff;
font-weight: bold;
}
.buttonlist ul li a.active span
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -90px;
}
.buttonlist ul li a.active
{
font-weight: bold;
}
.buttonlist ul li a.active:hover
{
color: #ddf;
}
.align_top ul li a, .align_bottom ul li a
{
margin: 0 12px 0 0;
}

Reemplazamos por:

Código: [Seleccionar]
/* Styles for the standard button lists.
------------------------------------------------------- */

.buttonlist ul
{
z-index: 100;
padding: 5px;
margin: 0 0.2em 5px 0;
}
.buttonlist ul li
{
margin: 1px;
padding: 0;
list-style: none;
float: left;
}
.buttonlist ul li a
{
padding: 0 8px;
display: block;
height: 20px;
line-height: 20px;
float: left;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #A52A2A;
color: #fff;
font-family: arial;
}
.buttonlist ul li a:hover
{
background: #E9967A;
text-decoration: none;
color: #fff;
}
.buttonlist ul li a span
{
padding: 0 8px;
display: block;
height: 20px;
line-height: 20px;
float: left;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #A52A2A;
color: #fff;
font-family: arial;
}
.buttonlist ul li a:hover span
{
background: #E9967A;
text-decoration: none;
color: #fff;
}
/* the active one */
.buttonlist ul li a.active
{
padding: 0 8px;
display: block;
height: 20px;
line-height: 20px;
float: left;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #A52A2A;
color: #fff;
font-family: arial;
}
.buttonlist ul li a.active span
{
padding: 0 8px;
display: block;
height: 20px;
line-height: 20px;
float: left;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #A52A2A;
color: #fff;
font-family: arial;
}
.buttonlist ul li a.active:hover
{
background: #E9967A;
text-decoration: none;
color: #fff;
}
.buttonlist ul li a.active:hover span
{
background: #E9967A;
text-decoration: none;
color: #fff;
}
.align_top ul li a, .align_bottom ul li a
{
margin: 0 12px 0 0;
}

En .buttonlist ul li donde pone margin lo podemos aumentar es decir a 2px, 3 px. Lo que hace es aumentar la distancia que hay entre los botones.

Para cambiar el color de fondo de los botones debemos cambiar .buttonlist ul li a y .buttonlist ul li a span (hay que modificarlo en los dos) donde dice background lo cambiamos para cambiar el fondo de los botones. Y donde dice color lo cambiamos para cambiar el color de las letras de los botones.

Para cambiar el color de fondo de los botones cuando tenemos el ratón encima es en .buttonlist ul li a:hover y .buttonlist ul li a:hover span (hay que modificarlo en los dos) cambiamos donde dice background para cambiar dicho color. Y donde dice color lo cambiamos para cambiar el color de las letras de los botones cuando el ratón está encima del botón.

Para cambiar el color de fondo del botón responder es en .buttonlist ul li a.active y .buttonlist ul li a.active span (hay que modificarlo en los dos) donde dice background cambiaremos el color de fondo del botón responder. Y donde dice color el color de fondo de las letras del botón responder.

Para cambiar el color de fondo del botón responder cuando tenemos el ratón encima es en .buttonlist ul li a.active:hover y .buttonlist ul li a.active:hover span (hay que modificarlo en los dos) cambiamos donde dice background para cambiar el color de fondo del botón responder cuando tenemos encima el ratón. Y donde dice color el color de fondo de las letras del botón responder cuando tenemos encima el ratón.

Un saludo


« Última Modificación: Enero 25, 2013, 07:31:17 pm por uge »



Exelente tutorial muchas gracias por el aporte

Saludos enik...




Tal y como dijo enik excelente tutorial!!

Esto le servira a muchos usuarios que se esten iniciando en la creacion o edicion de themes!

Felicitaciones +10




Excelente y completisimo aporte  amigo!! Buen trabajo lo probare personalmente :)

Saludos!!




gracias uge, se queda perfecto :)




Gran tutorial,este y el de los botones citar,modificar etc etc.A la primera salio todo bien.Muchas gracias.




Otros temas de su interes




Usuario:
Contraseña:
Sesión:
hermes bracelet replica, christian louboutin replica, van cleef and arpels replica, red bottoms replica, cartier love bracelet replica christian louboutin replica, christian louboutin replica, hermes bracelet replica,