Parece un magnífico aporte. SI efectivamente vale para todos los anchos de pantalla es genial!
Es tarde, mañana lo probaré. Tengo cuatro anchos de pantalla y revisaré en los cuatro.
A TUS PREGUNTAS
Mi navegador principal es Mozilla Firefox versión 17.0.1 (actualizo cada vez que sale release nuevo) pero pruebo en I.E.8 y el 9, en Google Chrome, Opera y Safari.
Para mi gusto, Mozilla el mejor.
Mi editor (si tengo dudas de que el código pueda traer caracteres indeseados) es el block de notas. Por lo general, con código propio, uso el Araneae 5.0.0 en castellano. No es para tirar cohetes, pero trata directamente las tildes y las eñes de forma compatible con el editor FCK de PWG.
Mientras no me dé problemas, uso el editor FCK de PWG, pero si me da problemas, edito en PWG el HTML, lo copio, lo pego al block de notas y de ahí, lo paso a Araneae en hoja nueva de HTML.
Eso garantiza que el código pasa limpio como HTML y solo como HTML.
El código lo trabajo en local host, lo pruebo y si funciona lo paso desde mi Araneae a PWG (con copy/paste) al lugar en donde haya que colocarlo.
Y bueno,e so es todo.
Mi versión me funciona como quería gracias a tu ayuda y a la ayuda de buzzdungeon.
Tu versión, como hoy es tarde y me caigo de sueño, la probaré mañana. (Tiene muy buena pinta).
Lo que no he visto en tus explicaciones, es si el texto dentro del contenido del bloque izquierdo, sale al nuevo ancho o se queda en el antiguo. Resolví eso en mi versión, gracias a buzzdungeon.
DUDAS
Una regunta. ¿Tus cambios valen para solo el color amarillo o valdrían tambien para los demás colores de la plantilla. automatizando de alguna manera que se haya seleccionado un color u otro ?
La diferencia es que cada una de las imagenes a sustituir, o a referirse a ellas, aunque se llaman igual, están en carpeta distinta, según el color seleccionado:
EJEMPLO
URL de la imagen del banner según el color:
SI efectivamente vale para todos los anchos de pantalla es genial!
en menores de 2000 no luce bien
Lo que no he visto en tus explicaciones, es si el texto dentro del contenido del bloque izquierdo, sale al nuevo ancho o se queda en el antiguo. Resolví eso en mi versión, gracias a buzzdungeon.
EL que yot e doy se queda perfecto si el contenidoe s grande no afecta no crece el contenedor alos lados y no sale la barra de desplazamiento abajo
Una regunta. ¿Tus cambios valen para solo el color amarillo o valdrían tambien para los demás colores de la plantilla. automatizando de alguna manera que se haya seleccionado un color u otro ?
Si estube pensando en esto y me quede pensando xD tratare de buscar una alternatiba nunca me habia preguntado si estoe s posible de alguna manera automaticamente lo voy revizar porque de ser posible s ve perfecto
...
Busca y prueba el "Notepad ++" abeces el block de notas no guarda bien cosas como cuando trabajaba en php era un lio que arruinaba todo el notepad teayudamucho y te los distingue por colores entre otras cosas es ligero y rapido.
Por favor NO hagan de este post un forochat o tendre que cerrar el tema. Recueden que esta seccion es de ayuda asique solo contesten si tienen o dicen la respuesta que ayude al usuario.
<div class="copy" id="ferchi">
Copyright de la pagina</div>
No edites nada pruebalo tal cual lo pongo driectamente en pwg.
Probado tal cual en PWG. Funciona casi todo pero dá algunos pequeños problemas:
PROBLEMAS QUE PODRAN ARREGLARSE
1º - Si pones borde a IFRAMES, el extra mapa se corta por la derecha justo a causa del borde.
2º - En pantallas de ancho mayor a 1280px p.e. 1366 no se ajusta a 100%, se ajusta a 1280px y deja un espacio a la derecha.
3º - Si haces "control -" varias veces, se va escalando a menor hacia la zquierda, toda la web excepto la publicidad superior de PWG, la linea de cpontador de visitas y la linea inferior de PWG que dice: => ¿Desea una página web gratis? Pues, haz clic aquí! <=
CAMBIOS MINIMOS
Me he permitido posteriormente cambiar el borde de IFRAMES a 0px y cambiar el color de borde de iframes y de borde del CopyRight al mismo que la plantilla en color amarillo: #FF9400
Esto para los otros colores de la plantilla tambien habría que cambiarlo.
Bueno, eso es todo lo que he visto. Por lo demás enhorabuena. Así mismo ya casi se puede usar la plantilla ampliada por todo el que la quiera.
Nos falta esto mismo en los demás colores
Ultima edición por studiowebbackstage el Jue Ene 03, 2013 4:16 pm; editado 1 vez
Hola
Para la publicidad es un horror pero pues bueno la ponen ya que
estaria en centrar el cuadro de arriba de publicidad agregando esto
table{margin-left:auto;margin-right:auto}
(lo agrege mas abajo)
y quitando un <center que no sirve mucho ahora
Los cambios son que la web estara "centrada siempre" (estructuras de la pagina)
pero tendras un espaciado horrible del lado izquierdo por el header que se corta la imagen
por tanto lo que hize para que esto no ocurra es mandar todo al lado izquierdo para que solo se siga moviendo el lado derecho y no se vea mal del lado izquierdo
teoria que resulto correcta mas sin embargo al ser todas tablas me oculto la de las paginas de navegacion y resulto horrible
por tanto solo movi el header a la izquierda y todo lo demas que no sea el header debera estar centrado
pero el header sale cortado del lado derecho
no era lo justo asi que lo volvi a modificar
y destroze todo en mi mente y quedo perfecto solucione todos los problemas del header r.r
porque menciono todo esto? es para que veas quees un lio ajustar la resolucion para todos ya que en unos quedaba bien el header en especial el de 1024 pero en otros no pero buscare si con porcentajes se pudiera lograr algo ajustable automaticamente
el codigo completo y actual seria asii...
Quita el codigo solamente del de por encima de la pagina y reemplazalo por este codigo ya va completo con lo que te mencione:
Es mas facil dejar publicidad y lineas de abajo sin centrar, o sea, alineado a la izquierda. Eso hace que no se descuadre al "escalar/desescala"r. Además evita lo que dices del margen horrible a la izquierda. Que en pantallas de resolución mayor a 1280px quede un margen a la derecha tampoco es tan grave. Si se puede arreglar bien, si no se puede o se complica, creo que ahí lo dejamos y sería preferible seguir con los otros colores.
Lo digo por el resto de usuarios de PWG. A mi el amarillo para lo que quiero me va bien.
Otra cosa: la line.png para sustituir la line.gif de PWG, NO EXISTE en mi host
Por si fuese necesario tirar de ella, he vuelto a subir a mi host, la linea de puntos ampliada a 771px, aunque nose use, es mejor dispòner de ella por si acaso. La URL es la que era:
http://img.webme.com/pic/s/studiowebbackstage/line.png
Saludos y gracias por la paliza que te estás dando con este proyecto.
Ultima edición por studiowebbackstage el Jue Ene 03, 2013 6:51 pm; editado 2 veces
Hola en el codigo si solucione el problema del espacio que quedaba en el header
el diseño se ve bien entre la 1280px
Otra cosa: la line.png para sustituir la line.gif de PWG, NO EXISTE en mi host
Esta ya esta substuida de .gif a .png y esta en 772px en realidad esta parte es la mas importante para el contenido ya que es por desirlo de alguna forma "los huesos" que hacen que el contenedor del contenido (valgame la rebuznancia ) se vea de ese tamaño
hasta podrias hacerla mas pequeña creo que si le cambiamos en esta parte
lo cambiamos por repeat puedes hacer la imagen de un solo punto y automaticamente se repetiria hasta alcanzar el tamaño de 772 pixeles
no lo eh probado
las imagenes mientras mas pequeñas mejor asi consumen menos espacio y ganan velocidad aunque ene ste caso la imagen es diminuta asi que no afecta en nada si se quita o deja como esta...
seguire probando para que el contenedor que ahora esta centrado pueda hacerse al 100% para todas als resoluciones
Hola en el codigo si solucione el problema del espacio que quedaba en el header
el diseño se ve bien entre la 1280px
Otra cosa: la line.png para sustituir la line.gif de PWG, NO EXISTE en mi host
Esta ya esta substuida de .gif a .png y esta en 772px en realidad esta parte es la mas importante para el contenido ya que es por desirlo de alguna forma "los huesos" que hacen que el contenedor del contenido (valgame la rebuznancia ) se vea de ese tamaño
hasta podrias hacerla mas pequeña creo que si le cambiamos en esta parte
lo cambiamos por repeat puedes hacer la imagen de un solo punto y automaticamente se repetiria hasta alcanzar el tamaño de 772 pixeles
no lo eh probado
las imagenes mientras mas pequeñas mejor asi consumen menos espacio y ganan velocidad aunque ene ste caso la imagen es diminuta asi que no afecta en nada si se quita o deja como esta...
seguire probando para que el contenedor que ahora esta centrado pueda hacerse al 100% para todas als resoluciones
Vale, he probado tu último code tal cual COPY/PASTE a mi texto por encima de página y funciona bien.
Solo que al escalar/desescalar el banner ocupa el 100% de la pantalla y se escala/desescala todo lo demás... PERO EN CONJUNTO. (Puede valer)
Te pongo captura de lo que te dije del ancho del borde de los IFRAME.
Se corta en el lado derecho del cuerpo principal (bloque izquierdo de la web.
Mi solución: Tocar CSS y poner border: 0px;
Otra posible solución: Colocar un porcentaje al cuerpo de 90% ò 95% para que en todo el contenido de las páginas quede un margen pequeño a la derecha suficiente para que nada se corte.
Ultima edición por studiowebbackstage el Jue Ene 03, 2013 7:15 pm; editado 3 veces
y lo segundoe s otra modificacion para que la pagine quede un poco mas arriba, no tiene nada que ver con el iframe pero se me ocurrio me gusto como se ve y la agregue c:
y lo segundoe s otra modificacion para que la pagine quede un poco mas arriba, no tiene nada que ver con el iframe pero se me ocurrio me gusto como se ve y la agregue c:
PROBADO
Lo del Iframe funciona, el problema es que el extra "mapa" toma el 100% del width del cuerpo, por tanto si se quiere ajustar, hay que hacerlo en el extra y no tocando mas tu código. Bueno, por mi hasta aquí ya vale. Funciona!
CAMBIOS QUE HICE POR MIS PREFERENCIAS A LA SOLUCION
- Me gusta mas la opción con "línea de puntos" que la de "líneas negras". Para eso he usado el (aporte de buzzdungeon)
- Prefiero toda la plantilla ajustada a la izquierda con un margen de 5px
- Prefiero la publicidad de PWG ajustada a la izquierda, se escala y desescala en consonancia a toda la plantilla.
- La fuente, el capitalizado y la sombra del tipo de letra del Header (creo que habría que dejarlo "<!-- COMENTADO -->" en el CSS para facilitar que cada cual use el que quiera; pero yo partiría de alguna fuente común en internet como "Verdana, Arial, Tahoma" o la propia de la plantilla original ColourFul de PWG
- Si se encuadra el borde del párrafo copyright, de la publicidad y de los iframes, es mejor (opino) en el mismo color que el de la plantilla, en cada una de sus versiones. Para la versión en amarillo el color es: #FF9400. Pero bueno, como se dice: ¡Para gustos los colores ! Esto es cosmética. Cada cual podrá hacer sus ajustes.
-El problema del header1 y el header2LO HE SOLUCIONADO subiendo una imagen "transparente" que sustituye al header1 Es ésta:
Además he cambiado el órden de presentación, o sea, la imágen header.jpg en el class id=header1 y la imágen head-bg.png en el class id=header2. Esto arregla el problema del descuadre en el "escalado/desescalado". No gustaba que el header1 y el header2, cuando se desescala el web a menos de Control+0, ocupasen el 100% del ancho de pantalla. Creo que afeaba.
Se consigue colocando este código en Texto por encima de página:
Código:
<!-- ===================================== -->
<!-- DESDE AQUI TEXTO POR ENCIMA DE PAGINA -->
<!-- ===================================== -->
<!-- // AGRADECIMIENTOS a skulldarknight y a buzzdungeon
cuyos aportes has sido aprovechados para componer
esta solución, ampliada en su bloque izquierdo
para el color amarillo de la plantilla Colourful
de PWG. En breve expandiremos la solución para el
resto de colores disponoible. Gracias por usarlo.
//-->
<!-- ==================================================== -->
<!-- DESDE AQUI: MI TEXTO POR ENCIMA DE PAGINA (OPCIONAL) -->
<!-- ==================================================== -->
<!-- ======================= -->
<!-- DESDE AQUI: CODIGO HTML -->
<!-- ======================= -->
<!-- =========================================================== -->
<!-- HTML DESDE AQUI (OPCIONAL): ALINEAR LA WEB CENTRADA AL 100% -->
<!-- =========================================================== -->
<!-- =========================================================== -->
<!-- HTML HASTA AQUI (OPCIONAL): ALINEAR LA WEB CENTRADA AL 100% -->
<!-- =========================================================== -->
<!-- ======================================================= -->
<!-- HTML - DESDE AQUI (OPCIONAL): TOP BANNER EN EL HOMEPAGE -->
<!-- ======================================================= -->
<!--<a href="AQUI pon la URL de tu HOME PAGE">
<img border="0" src="AQUI pon la URL de tu banner personal" width="1250px" height="Aqui el alto de tu baner personalpx">
</a>-->
<!-- ======================================================= -->
<!-- HTML - DESDE AQUI (OPCIONAL): TOP BANNER EN EL HOMEPAGE -->
<!-- ======================================================= -->
<!-- ======================= -->
<!-- HASTA AQUI: CODIGO HTML -->
<!-- ======================= -->
<!-- ==================================================== -->
<!-- HASTA AQUI: MI TEXTO POR ENCIMA DE PAGINA (OPCIONAL) -->
<!-- ==================================================== -->
<!-- ===================================== -->
<!-- HASTA AQUI TEXTO POR ENCIMA DE PAGINA -->
<!-- ===================================== -->
[code]
[b]Para el campo de CopyRight propongo:[/b]
[/code]
<div align="center">
<span style="font-size: xx-small;"><span style="font-family: Verdana;"><span style="color: rgb(255, 255, 255);">
Tu copyright ... tu aviso legal... </span></span></span></div>
ALTERNATIVAS A LO MAS IMPORTANTE
1 -Si se puede solucionar lo del header1 y header2 de otra forma, (hice pruebas y no veo como), sería mejor solucionarlo; en caso contrario, me quedo con mi truco de la imagen transparente y el cambio de colocación header1-header2.
RECAPITULANDO ¿QUE FALTA?
1 - Expandir la solución a los demás colores (Me pongo YA MISMO a ampliar las imágenes base de los demás colores para subirlas y que queden disponibles)
2 - Ver si se puede automatizar con CSS o SCRIPTS o COMO SEA que las imagenes de cada color se tomen según el color elegido. <= Importante ¿Como se consigue esto ?
3 - Tutorial de la solución
4 - Publicar el aporte donde PWG nos diga, si es que les parece útil para los demás usuarios.
A por ello man! que "ya está casi"
EL TEMA ESTA RESUELTO PARA TODOS LOS COLORES DE LA PLANTILLA COLOURFUL.
Las cookies son pequeños fragmentos de información de texto que nosotros o nuestros socios, almacenamos sobre usted de forma local por medio de su navegador.
Puede evitar el uso de cookies en cualquier momento a través de la configuración de su navegador.
Usamos las siguientes cookies que cumplen con el GDPR:
- Cookies esenciales: son absolutamente necesarias para que el sitio web sea completamente funcional.
- Cookies opcionales: son opcionales y nos ayudan a mejorar el sitio web, por ej. analizando el comportamiento de uso del sitio web sin identificarle personalmente.
Puede encontrar más información en nuestra sección de protección de datos/privacidad.