[Tutorial] Como modificar plantillas Css

Hola!

Aquí os voy a enseñar como modificar una plantilla Css para Css-Design

Lo primero será elegir la plantilla. Yo elegí una bastante sencilla para hacer el tutorial. Vosotros podéis elegir la que queráis, al fin y al cabo todas tienen el mismo sistema.

Mi plantilla es esta de aquí:
http://www.paginawebgratis.es/forum/viewtopic.php?t=54280

PD: Espero que a Nesbet no le importe que le coja la plantilla Es solo porque era una de las mas sencillas.

Bueno vamos a empezar con el codigo de "Texto por encima de la página".

-Primero tenemos que saber cuantos apartados tiene la web. (Por Ejemplo: Home, Contacto, Ayuda, Banners y Foro). Estos serán los apartados que usaré yo para hacer el tutorial.

Ahora copiamos el código de "Texto por encima de la pagina" todo entero y lo pegamos, por ejemplo, en el bloc de notas para que sea más fácil trabajar con el código.

Una vez pegado el código, buscamos la parte que diga "Categoría" (Nota: En esta plantilla el creador puso "Categoría" pero en otra, es posible que eso cambie, solo tenemos que mirar en la vista previa de la plantilla que es lo que pone )

Una vez localizado el apartado "Categoría" (O lo que diga vuestra plantilla) borramos eso y ponemos el título que queramos que se vea encima del menú, Por ejemplo "Navegador".

Justo debajo de eso veremos una lista repetida una debajo de otra. (En esta plantilla dice: <li><a href="#">Link</a></li> Es posible que en vuestra plantilla cambie). Ahora borramos donde pone "Link" y ponemos ahi el primer apartado de nuestra plantilla (En nuestro caso: Home) y hacemos lo mismo con los demás apartados (Contacto, Banners, Foto, etc.). También, donde pone "#" entre comillas, borramos esto: # y ponemos ahí la URL de nuestro apartado (Ej: http://www.tuweb1234.es.tl/Home.htm/) y hacemos lo mismo con las demás.

Si nustra web tiene menos apartados que la plantilla, borramos los apartados que sobren y ya está. Si tiene más,de lo que nos ofrece la plantilla, copiamos y pegamos cada uno de los códigos que se repiten y ponemos los que queramos.

En esta plantilla hay otro apartado que pone: "Categoría" Ahí podemos poner más apartados.

Una vez echo todo esto, buscamos el encabezamiento que ya viene con la plantilla y lo quitamos. Cojemos un encabezamiento que nos guste y ponemos su URL. (En nuestro código lo encontraremos en el apartado: Logo. Veréis que abajo sale una URL, esa es el encabezamiento de la web)

Bueno, con todo esto ya hemos acabado el código "Texto por encima de la página". Ahora solo copiamos todo el código y vamos a "Editar Diseño". Elegimos el diseño "Css-Design" y abajo nos vamos a "Texto por encima de la página" y pegamos el código que hemos modificado.

Ahora vamos al código "Texto por debajo de la página" (En nuestro caso es bastante corto, pero hay plantillas que lo tienen incluso más largo que el código anterior).

En nuestra plantilla solo tendremos que modificar el Copyright (Hay plantillas que tendréis que modificar otro menú aparte, porque tiene varios menús aparte del de "Texto por encima de la página").

En nuestro código nos saldrá esto:
:: Copyright <b>TuWeb</b> 2010 - 2011 :: Estructura: Code-Sucks modificado y adaptado por Nesbet :: Powered by <b>PaginaWebGratis</b> ::

En esta plantilla está indicado donde tienes que poner tu web pero hay plantillas que no lo pone, aunque es muy fácil de localizar. Una vez localizado, ponemos el nombre de nuestra web. Más adelante pone Estructura: Code-Sucks...(Lo que hay en cursiva) Eso lo podemos modificar solo si nos lo dice el creador de la plantilla. Yo ahora no lo voy a preguntar porque no lo modificaré ya que es solo para un turorial y no lo voy a usar.

Hacemos lo mismo que con el otro código. Copiamos el código y lo pegamos en "Texto por debajo de la página".

Y por último el ultimo código "CSS-Code sin style tags". En este código salen todos los colores de los menús, letras, etc. Si nos gustan los colores lo dejamos como está, sino, tenemos que adivinar el codigo del color de lo que queremos cambiar y poner el código del color que queramos.

Por último copiamos el código y lo pegamos en "CSS-Code sin style tags".

¡Y ya está! Nuestra plantilla ya está terminada. No a sido tan difícil ¿Verdad? Alomejor nos lleva un poquito de tiempo hacerla pero no es nada difícil.

No he puesto imegenes porque creo que se entiende bastante bien.

Espero que les sirva de ayuda.

Saludos

Yo crei que era para cualquier plantilla CSS
xD

solo es para plantillas ya hechas ._.

¿Cómo me va a molestar? Para eso la publiqué.

Por eso el título, "para MODIFICAR plantillas", sino sería crear.

Respecto al tutorial, está bastante explicado y detallado, pero siempre no viene nada de mal unas cuentas imágenes, para una mayor comprensión, igualmente muy bueno.

A que te refieres?

Como voy a modificar una plantilla si no esta hecha


Y Gracias Nesbet por dejarme usar el codigo

.

Pero que se aprende con algo que ya esta hecho?

si ya estan los codigos hechos y hasta te dice donde ponerlos

Tampoco se dice "crear" porque crear es cuando tu haces las estructuras (cabezal... box... contenido)


pero bueno buen post


haria falta agregar las imagenes para no confundiir

Por lo que leo no sabes nada, pero se puede aprender mucho, mirá el mensaje que me llegó hoy, consultandome por un diseño mío:



No sabía colocar los links, y este tutorial le va a sevir, ¿eso responde a tu pregunta?

Puede que tengas razón, pero seguro que hay muchos que no lo saben hacer. Yo cuando era nuevo tampoco tenía ni idea. Incluso pensaba: ¿Quien va a querer poner este tipo de menú? Si esta todo en blanco y sale un menú feísimo.(Refiriendome al Css-design)

Y ahora cuando lo pienso me entran ganas de reír pero es igual. Dejémoslo.

Gracias de todas formas.

El titulo del tema se entiende diferente

deberia ser Modificar los apartados de las plantillas


No quiero iniciar discuciones por algo hacy..
.
era como el tema de la imagen de wrestling todos decian que no era nada mala y terminaron quitandola

....Solo es una opinion...