1
Fondo para los widgets: PhpBB3 Miér Nov 02, 2011 12:51 am
George Black
Mensajes : 34 
Monedas : 43 Fondo para los Widgets
En este tutorial aprenderan a como poner los widgets de sus foros de tipo RPG. Primero deben tener en cuenta que en esta astucia deben tener la mayor creatividad posible para que asi sus modulos queden de lo mas lujosos y geniales! Continuemos:
1er Paso.
Ocultar los titulos de los widgets.
Para realizar esta accion solo deben colocar el siguiente codigo en su CSS:
- Código:
.module .h3 {
visibility:hidden;
}
2do Paso.
Color de fondo para los widgets.
Si desean que sus widgets tengan un color de fondo y no una imagen agreguen este codigo a su CSS:
Con color
#content-container div#right {
width: 190px;
background-color: #212121;
border-left:0px solid;
-moz-border-radius:40px 40px 40px 40px;
-webkit-border-radius: 40px 40px 40px 40px;
border-radius: 40px 40px 40px 40px;
}
Edicion:
Lo que esta en rojo es el lugar donde se encuentran sus widgets, puede ser right(derecha) o left(izquierda).
Lo que esta en color verde es el ancho de sus widget que tienen en la edicion de los mismos. Para saber su ancho van a esta ruta:
PA > Modulos > Portal & Widgets > Gestion de los Widgets del Foro > Anchura de la columna izq o dcha > Observan la cantidad que sale en pixeles y la ponen en el color verde.
Lo que esta de color indigo es el color de fondo que desees, en google puedes buscar "Colores Hexadecimales" y ahi buscas uno que te agrade.
Y lo que esta en color naranja es el tamaño de la curva que quieres para tus widgets.
2do Paso/2.
Fondo del Widget con imagen.
Para realizar esta accion que es que sus widgets tendran una imagen de fondo toda extravagante o como la deseen crear solo deben agregar este codigo a su CSS:
Con imagen
#content-container div#right {
width: 190px;
background:url('LINK IMAGEN');
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
Editan los datos al igual que el codigo de arriba. El right por el lugar de sus widgets, el width por el ancho de sus widgets, donde dice "Link de la imagen" ponen el link de su imagen y los pixeles de el final los editan a su gusto.
Tutorial creado por George Black
Publicado en Web Design Foro.
01/11/11
Copyright. Todos los derechos reservados.
Publicado en Web Design Foro.
01/11/11
Copyright. Todos los derechos reservados.
Última edición por George Black el Miér Nov 02, 2011 1:32 am, editado 1 vez
