Tutoriales MyEgoo Tutoriales MyEgoo

Herramientas

 

Comentarios

Diseño de la web avanzado (CSS)

11 octubre 2008

Aqui vamos a tocar alguna de las propiedades del CSS para personalizar el diseño de tu web. Para ello vamos a "Editar los CSS".

Para poder añadir estos cambios a tu web solo tienes que copiar los códigos que aqui te ponemos y copiarlos en la parte de CSS de tu web, despues pincha el botón de actualizar y listo.

 

Truco 1.

Eliminemos el fondo semitransparente de nuestra web. Si hemos escogido un fondo de pantalla que nos permita eliminar este fondo (que sirve de ayuda a la lectura del texto de la web) podemos eliminarlo. ¿Cómo?

Pega este texto:

En caso de tener la plantilla de columnas (negra o blanca)

#page-wrapper{background-image:none}

Si tienes la plantilla Básica o Digitalfoto, tendrás que poner:

#page{background-color:transparent}

Veamos un ejemplo, supongamos esta web:

myegoo_imagen18-2

Aqui al tener un fondo blanco podemos quitar el fondo negro semitransparente (ojo que el color de nuestras letras no coincida con el del fondo).

Para ello editamos el CSS y tendríamos:

myegoo_imagen19-3

Hemos quitado el fondo semitransparente!!!!

 

Truco 2:

Ahora quitemos el fondo y hagamos que no se publique contenido en la web principal

myegoo_imagen20-3

Aqui no solo hemos quitado el fondo, ademas hemos hecho que el contenido de esta web solo se vea en el menu (para ello vamos a cada funcionalidad y lo seleccionamos de manera que el contenido solo lo veamos en el menu, pero no se muestre en la web principal).

Y copiamos el siguiente CSS:

#page{left:30px;top:20px}
#page-wrapper
{background:none}
.album .item img {width:100px;height:100px}
.album .item{height:150px;width:110px}
#album-preview-title{display:none}
h1{color:auto;line-height:normal}
a{color:auto}
h1 a{font-size:50px;font-family:Georgia;color:#0c0c0c}
h1 a:hover{text-decoration:none}
.album .item .date, #tools{display:none}
#footer{display:none}
#document-description{color:#666}

 

IMPORTANTE!!! Aquí el botón "Admin" de nuestra web ha desaparecido, con lo que para acceder al administrador hay que poner www.elnombredenuestraweb.com/admin

Es decir /admin tras el nombre de la web.

 

TRUCO 3 Plantilla Minimal

La palntilla minimal no tiene los títulos, ¿como puedo hacer para que aparezcan?

Simplemente tenemos que copiar en los CSS este código:

h2{display:block}
.home h2{display:block}

Vemos un ejemplo:

Aqui tenemos una web con la plantilla Minimal sin los títulos:

myegoo_imagen21-2

 

Siguiendo las instrucciones, modicando los CSS, tendríamos lo siguiente:

myegoo_imagen22-5

 

En este caso cada uno de los módulo tiene su título correspondiente.

 

 

 

 

Comentarios

  1. "A mi, que he seguido todos los pasos no se me quita ni lo de admin ni el recuadro semitransparente, alguna idea???

    Muchas gracias por vuestro trabajo!!"

    noe perez alvarez 28 junio 2009 18:21:54
  2. "Noe, ya tienes en el tutorial espeficicado el CSS para cada plantilla, ya que según que plantilla tengas tienes que usar un CSS u otro."

    Equipo MyEgoo 15 julio 2009 19:56:01

Nuevo comentario



  • captcha