Marcofbb Noticias y Artículos Webmasters



Publicidad marcored

Adaptar plantilla CSS para PWG

  • 24/01/2011
  • 6:38 pm
  • marcofbb

Hola, el tutorial fue nuevamente actualizado, y se realizó lo mas entendible posible, espero que le sirvan y agrade.

Antes de comenzar, deberan pegar el siguiente codigo en CSS-code sin style tags

lli.nav_element{display: none;} 
li.nav_element a{display: none;} 
h1#title{display: none;} 
h2#title span {display: none;} 
div.header{display: none;} 
li.nav_element{list-style-type: none;} 
li.nav_element{display: none;}

1/9 Descargaremos un diseño a adaptar, recomiendo http://free-css.com, pero en este caso, para seguir los pasos recomendado, les sugiero comenzar con este:
http://www.free-css.com/free-css-templates/page7/envision-1.0.php#bookmarks

Adaptar plantilla css para pwg

2/9 Extraemos todo el contenido del fichero, y así obtendremos una carpeta.

Adaptar plantilla css para pwg

3/9 Ejecutamos el archivo formato .html, con cualquier programa.

Adaptar plantilla css para pwg

4/9 Debemos editar los Links/Enlances/Vinculos del código. Todo lo ROJO, se edita.

Adaptar plantilla css para pwg

5/9 Verificamos el diseño, abriendo el archivo formato .html con cualquier navegador.
Lo ROJO, borrará, y lo AMARILLO se editará.

Adaptar plantilla css para pwg

6/9 Eliminamos todo el contenido, desde el título (El cual no se borra, se modifica), hasta la parte footer.
Lo ROJO, borrará, y lo AMARILLO se editará.

[+] Más info:
En algunas estructuras, cuales diseños contienenen box, el código de ellos van en Texto por debajo de la página, es decir, los boxes y el footer, y arriba el resto.

Adaptar plantilla css para pwg

7/9 Si terminaron, les debería quedar arriba el titulo, el cual se edita, y abajo el pie de la página, que sería llamado footer.

Adaptar plantilla css para pwg

8/9 Abrimos el archivo de formato .css con cualquier programa a disposición, por ejemplo el bloc de notas.
Las imagenes situadas en la carpeta imagenes, las deberemos subir en algun hosting, yo recomiendo e utilizó Xooimage y TinyPic, posteriormente la colocamos en el código.

Cuando finalizaron, deben pegar absolutamente todo el código en CSS-Code sin Style tags.

Adaptar plantilla css para pwg

Tutorial by NesBet

Share

¿Necesitas ayuda? o ¿Asesoramiento webmaster? Registrate en nuestro foro de consultas

Posts Relacionados

Total de Comentarios: 48

Avatar
24/01/2011
7:34 pm

Información Bitacoras.com...

Valora en Bitacoras.com: Hola, el tutorial fue nuevamente actualizado, y se realizó lo mas entendible posible, espero que le sirvan y agrade. Antes de comenzar, deberan pegar el siguiente codigo en CSS-code sin style tags lli.nav_element{display: no......

Avatar
sergio
14/08/2011
7:40 pm

hola men me podrias ayudar a adpatar una web? porfa!

    Avatar
    14/08/2011
    7:54 pm

    Si, deja la url del template.

    Saludos

Avatar
sergio
14/08/2011
7:45 pm

agregame al msn porfa sergio-lo-v@hotmail.com

Avatar
sergio
14/08/2011
8:42 pm

hola ya te envio el template, estuve editando pero como para adaptar no entiendo mucho ya te paso! GRACIAS

Avatar
sergio
14/08/2011
8:44 pm

http://www.megaupload.com/?d=GWAGSXTF
men ese es el modelo que quiero mas o menos asi como es yo quiesiera q me la adptaras ya estube cerca pero me sale unas cuantas cosas q no lo puedo arreglar mas

Avatar
14/08/2011
8:47 pm

No hay una demo online ?

Avatar
sergio
14/08/2011
8:51 pm

ya busque bastante y hice de todo pero no logro ponerlo el 100 % puedes mirar
http://www.pruebafaby1.es.tl/
las imagenes todabia no la he alsado por eso no sale, asta q el modelo este como quiero no, quisiera tocar eso jaja

Avatar
14/08/2011
8:52 pm

Ahi lo adapto y te paso el código.

Saludos

Avatar
sergio
14/08/2011
8:53 pm

SEEEE sos GRANDEEE GRACIAS DEJA LOS CREDITOS POR EL QUE NO LAS SACOOOO GRACIAAAAAAAAAAAAS!!!

Avatar
sergio
14/08/2011
9:19 pm

men cual es tu pagina en el hosting de .es.tl?

Avatar
sergio
14/08/2011
9:35 pm

y despues??? se puede?

Avatar
14/08/2011
9:51 pm

Mi página es entra-yaa.es.tl pero no la uso nunca,

Ahora en 20 minutos empiezo a adaptarla, es que ando ocupado con otras cosas.

Saludos

Avatar
sergio
14/08/2011
9:52 pm

Ah dale te espero men! quiero emesar a editar ya la web jeje GRACIAS!!!

Avatar
14/08/2011
9:55 pm

Listo ya la adapte, acá tenes el codigo.

Texto por encima de la pagina:
http://sharetext.org/A6AH

Texto por debajo de la pagina:
http://sharetext.org/A6AJ

Css-Code:
http://sharetext.org/A6AM

En cadá pagina tenes que poner este código html con el titulo de la página.
http://sharetext.org/A6AK

Vos tenes que subir todas las imágenes a algun hosting:

- xooimagen.com
- tynipic.com

o el que vos quieras.

Avatar
sergio
14/08/2011
10:00 pm

see GRacias men! se el de las imagenes ya lo se. lo que no entendi muy bien fue el q me dijiste para ponder en cada pagina pero lo voy a probar. no me entra nomas en la pagina de http://www.paginawebgratis.es/ en estos momentos para probarlos!

Avatar
14/08/2011
10:03 pm

De nada, cualquier cosa avísame.

Avatar
sergio
14/08/2011
10:22 pm

Dale GRACIAS ENCERIO TE AGRADEZCO!

Avatar
sergio
14/08/2011
10:25 pm

men no funciona!!! http://pruebafaby1.es.tl/ mira como sale!!

Avatar
sergio
14/08/2011
10:48 pm

men como pudo sacar la informacion de la pagina osea todas las tablas q voy creando me sale en la web

Avatar
14/08/2011
10:59 pm

se saca poniendo lo que dice el tutorial arriba de todo antes del css-code:

lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;

Avatar
sergio
14/08/2011
11:02 pm

si ya lo puse pero no me salio nada cuando puse eso

Avatar
sergio
14/08/2011
11:04 pm

Ya esta ya me salio sos GROSO encerio gracias men idolooo!!!

Avatar
sergio
14/08/2011
11:06 pm

men una ultima cosa revisa esto como puedo adpatar el tamaño?
http://mueblespy.es.tl/Contacto.htm

Avatar
sergio
15/08/2011
12:33 pm

hola men sera q estas conectado para ayudarme en algo!!!

Avatar
sergio
15/08/2011
12:34 pm

hola men sera q estas conectado para ayudarme en algo!!! porfa!

Avatar
15/08/2011
12:36 pm

Ya me estoy llendo para el colegio, deja tu consulta vía privado o vía comentario.

Saludos

Avatar
sergio
15/08/2011
1:11 pm

men lo unico que me falta hacer es adaptar la hoja de texto que viene por defecto en la web. sobre pasa el lado derecho!

Avatar
15/08/2011
4:40 pm

Eso tenes que consultarlo en el foro de PWG

Saludos

Avatar
sergio
15/08/2011
4:44 pm

amigo ese que tenes como ejemplo aqui de ENVISION es casi lo mismo solo falta que la zona donde va el contenido de cada pagina no sea tan ancha

Avatar
15/08/2011
4:49 pm

Solucion:

busca:
form {
margin:10px 15px; padding: 0;
border: 1px solid #eee;
background-color: #FAFAFA;
}

y remplazalo por

form {
margin: 10px 15px;
padding: 0;
border: 1px solid #EEE;
background-color: #FAFAFA;
width: 500px;
}

y saca el center del formulario.

Consejo: Nunca des estilo a tu formulario, dale estilo a las divs, tablas que están dentro de el.

Saludos

Avatar
sergio
15/08/2011
4:52 pm

no amigo igual no sale mira como quedo http://www.pruebafaby1.es.tl/Contactos.htm

Avatar
sergio
15/08/2011
4:54 pm

solo falta colocar hacia la izquierda donde puedo colocarlo en la izquierda??

Avatar
15/08/2011
4:54 pm

Te falto sacar el center, saludos

Avatar
sergio
15/08/2011
4:59 pm

de donde saco el center??

Avatar
15/08/2011
5:00 pm

La verdad ni idea, no uso mas PWG. Pero fijate en el extra si dice algo del center.

Avatar
sergio
15/08/2011
5:12 pm

ya solo eso falta y no se puede mas!! jajaja

Avatar
15/08/2011
5:18 pm

Agrega

.post center{
float:left;
}

Saludos

Avatar
sergio
15/08/2011
5:22 pm

amigo ese soluciono la parte del formulario pero solo en esa pagina en la pagina de inicio http://pruebafaby1.es.tl/ no soluciona

Avatar
15/08/2011
5:28 pm

Es que tambien centraste eso, tenes que darle estilo a las divs auto-generadas por PWG (container,header_container,nav_container, content_container y más) tenes que darle estilo css para que no afecten a las demás.

Saludos

Avatar
sergio
15/08/2011
5:32 pm

AAAAa por diooos no saleeeeee!!!!! no se mas comoooo!!!

Avatar
sergio
15/08/2011
5:40 pm

amigo eso q me explicaste de (container,header_container,nav_container, content_container y más) me podrias ver eso? xq encerio ya no entiendo mas!

Avatar
15/08/2011
5:48 pm

Dejame averiguar al respecto, y te ayudo.

Avatar
sergio
15/08/2011
5:48 pm

dale amigo muchas gracias!!!

Avatar
sergio
16/08/2011
11:34 am

que tal amigo? despues pudiste solucionarme el problema?

Avatar
04/05/2012
3:36 am

eselente aporte men me sirvio de mucho y t qria acer una pregunta como puedo colocar el menu slider del costado q dice articulos populares porq tengo mi web en PWG pero nose como colocarlo saludos...

Avatar
27/08/2014
5:19 am

AMIGO PORFAVOR ADAPTAME ESTA PLANTILLA: http://www.templatemo.com/preview/templatemo_401_sprint SI PUDIERAS ESTA DE ACA: http://www.free-css.com/free-css-templates/page4/night-club#shout TE LO AGRADECERIA UN MONTON. ME LO ENVIAS EN http://www.juegosrst.es.tl

Avatar
27/08/2014
5:23 am

AMIGO ADAPTAME ESTA PLANTILLA PORFA http://www.templatemo.com/preview/templatemo_400_polygon ENVIALA AMI WEB http://www.djristo.es.tl


Enviar Comentario

(*)

(*)