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 modificar, citar, eliminar
  Leído 2464 veces
* Viendo el foro
 0 Usuarios y 1 Visitante están viendo este foro.


*
Autor: uge
Ene 22 2013
Os traigo una modificación muy sencilla que realicé para mi foro para dar estilo a los botones de modificar, citar... El código no es mío, yo lo saqué de un tema de smf.

Para que os hagáis una idea quedará así:



Abrimos el index.css de nuestro tema

Buscamos:

Código: [Seleccionar]
ul.quickbuttons
{
margin: 0.9em 11px 0 0;
clear: right;
float: right;
text-align: right;
font: bold 0.85em arial, sans-serif;
}
ul.quickbuttons li
{
float: left;
display: inline;
margin: 0 0 0 11px;
}
ul.quickbuttons li a
{
padding: 0 0 0 20px;
display: block;
height: 20px;
line-height: 18px;
float: left;
}
ul.quickbuttons a:hover
{
color: #a70;
}
ul.quickbuttons li.quote_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 0;
}
ul.quickbuttons li.remove_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -30px;
}
ul.quickbuttons li.modify_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -60px;
}
ul.quickbuttons li.approve_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -90px;
}
ul.quickbuttons li.restore_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -120px;
}
ul.quickbuttons li.split_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -150px;
}
ul.quickbuttons li.reply_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -180px;
}
ul.quickbuttons li.reply_all_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -180px;
}
ul.quickbuttons li.notify_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -210px;
}


Reemplazamos por:

Código: [Seleccionar]
ul.quickbuttons
{
margin: 0.9em 0 0 0;
clear: right;
float: right;
text-align: right;
}
ul.quickbuttons li
{
float: left;
display: inline;
margin: 0 0 0 2px;
}
ul.quickbuttons 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;
}
ul.quickbuttons a:hover
{
background: #E9967A;
text-decoration: none;
color: #fff;
}

En la parte de ul.quickbuttons li a :
-Background: es el color de fondo del botón
-Color: el color de la letra que dice modificar, citar...
-Font-family: la fuente de la letra

En la parte de ul.quickbuttons a:hover
-Background: es el color de fondo que tendrá el botón cuando pongamos el ratón encima del botón.
-Color: el color de la letra del botón cuando pongamos el ratón encima del botón.

Saludos, espero que os guste.



Exelente tema amigo, solo como detalle aclara que estas usando css3 y en exploradores viejos no tomara los bordes redondeados.

Saludos enik...




Excelente amigo un detallito mas para personalizar a nuestros foros, en los personal modificare el color y fuente para mi foro por algo un poco mas azulado (el color "oficial" de mi foro)


Saludos y gracias.




Muy buen, tutu. Saludos colega




se queda muy bien :)

muchas gracias, gran tutorial




Una pregunta, se podrían aplicar estos estilos a los botones de?
Responder
Notificar
Enviar tema
Imprimir

Muchas gracias




Si y de hecho es muy facil todos mis themes los tienen personalizados.

Saludos enik...



uge

Aquí tenéis un tuto para dar estos estilos a los botones Responder, notificar, enviar tema, imprimir como comentaba nuestro amigo foropimiento.

http://www.smfpersonal.net/tutoriales-para-tu-web/tipdar-estilo-a-botones-responder-enviar-tema-imprimir-mover-tema-y-otros-t6667.0.html#msg44529




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,