Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje03-01-2013, 01:23 (UTC)    
Título del mensaje:

Hola skulldarknight,

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:

Amarillo: .../images_gelb/header.jpg
Azul: .../images_blau/header.jpg
Rojo: .../images_rot/header.jpg
Verde: .../images_gruen/header.jpg
Magenta: .../images_magenta/header.jpg

Vale, mañana mas. Repito buen aporte!



Ultima edición por studiowebbackstage el Mie Ene 02, 2013 10:06 pm; editado 3 veces
Mensaje03-01-2013, 06:50 (UTC)    
Título del mensaje:

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.
Mensaje03-01-2013, 14:29 (UTC)    
Título del mensaje:

** Se puede eliminar este post ** Gracias **


Ultima edición por webmicro el Jue Ene 03, 2013 11:02 am; editado 4 veces
Mensaje03-01-2013, 14:56 (UTC)    
Título del mensaje:

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.

Saludos!
Moderador Design-PWG.
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com
Mensaje03-01-2013, 20:09 (UTC)    
Título del mensaje:

skulldarknight escribió:
las imagenes eran los resultados y bueno pues Aca esta el codigo:

Pega esta parte por encima


Código:
<link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'>

<style type="text/css">
.color table tbody tr td table tbody tr td.cont div {
font-family: 'Aldrich', sans-serif;}

.edit_content_header2{background: url("http://img.webme.com/pic/s/studiowebbackstage/cat_bg.png"); height:55px; }

body div{width 100%;}




.edit_nav_bg{min-width:243px;}

img[src="http://theme.webme.com/designs/colourful/images_gelb/line.gif"] { background-image:url(http://img.webme.com/pic/s/studiowebbackstage/line.png);background-repeat:no-repeat;height:0px;width:0px;padding-left:772px;}

.color table tbody tr td table tbody tr td.cont div{
overflow: hidden;
padding-left: 7px;
padding-top: 7px;
min-width: 99%;
font-size: 105%;
-webkit-font-smoothing: antialiased;}

.copy{width: 231px;
min-height:25px;
background-color: #000;
border: 6px solid #F79F81;
color:#fff;
text-align:center;
padding-top:10px;
padding-bottom:2px;
position: relative; left: -3px;top: -10px;}

.headline{padding:13px 5px; text-align:center;}
.headline strong{position: relative; left: -7px; }

.headline strong{position: relative; left: -7px; }


.edit_content_header table tbody tr .headline strong{text-transform:uppercase;}
.edit_content_header table tbody tr td.headline{position: relative; left: -7px; min-width: 185px; }

.edit_header2 table tbody tr td{padding-top: 20px;min-width: 615px;min-height: 150px;}

.color table tbody tr td table tbody tr td table tbody tr td table tbody{text-align:left;}

.edit_rechts_header{width: 223px;}

.edit_nav_header{width: 243px;}

.edit_content_header table tbody tr td.headline{text-align: center;}

.edit_header2 table tbody tr td font{
text-transform:capitalize;
line-height:200%;
text-shadow: 1px 1px 2px #000;
letter-spacing: 5px;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00B6EF, 0 0 30px #00B6EF, 0 0 40px #00B6EF, 0 0 50px #00B6EF, 0 0 75px #00B6EF;}

td.edit_header2 {
   background-image:url(http://img.webme.com/pic/s/studiowebbackstage/header.png);
   background-repeat:no-repeat;
   width: 100%;
   height: 141px; }

td.edit_content_header {
   background-image:url(http://img.webme.com/pic/s/studiowebbackstage/cont_head_bg.png);
   background-repeat:repeat;
   width: 671px;
   height: 36px; }
td iframe{border: 6px solid #F79F81;}
 </style>

<center id="centrarribayabajo" >
<div class="color" id="ferchi">



esta por debajo:
Código:
</div>



esto en el campo de copyright
Código:
<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
Mensaje03-01-2013, 22:27 (UTC)    
Título del mensaje:

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:

Código:
<link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'>

<style type="text/css">
.color table tbody tr td table tbody tr td.cont div {
font-family: 'Aldrich', sans-serif;}

table{margin-left:auto;margin-right:auto}

.color table tbody tr td.edit_header1 table{float:left;  }

.color{text-align:center;}

.edit_content_header2{background: url("http://img.webme.com/pic/s/studiowebbackstage/cat_bg.png"); height:55px; }

body div{width 100%;}

.edit_nav_bg{min-width:243px;}

img[src="http://theme.webme.com/designs/colourful/images_gelb/line.gif"] { background-image:url(http://img.webme.com/pic/s/studiowebbackstage/line.png);background-repeat:no-repeat;height:0px;width:0px;padding-left:772px;}

.color table tbody tr td table tbody tr td table tbody{min-width: 99%;}

.color table tbody tr td table tbody tr td.cont div{
overflow: hidden;
padding-left: 7px;
padding-top: 7px;
min-width: 99%;
font-size: 105%;
-webkit-font-smoothing: antialiased;}

.copy{width: 231px;
min-height:25px;
background-color: #000;
border: 6px solid #F79F81;
color:#fff;
text-align:center;
padding-top:10px;
padding-bottom:2px;
position: relative; left: -3px;top: -10px;}

.headline{padding:13px 5px; text-align:center;}
.headline strong{position: relative; left: -7px; }

.headline strong{position: relative; left: -7px; }

.edit_content_header table tbody tr .headline strong{text-transform:uppercase;}
.edit_content_header table tbody tr td.headline{position: relative; left: -7px; min-width: 185px; }

.edit_header2 table tbody tr td{padding-top: 20px;min-width: 615px;min-height: 150px;}

.color table tbody tr td table tbody tr td table tbody tr td table tbody{text-align:left;}

.edit_rechts_header{width: 223px;}

.edit_nav_header{width: 243px;}

.edit_content_header table tbody tr td.headline{text-align: center;}

.edit_header2 table tbody tr td font{
text-transform:capitalize;
line-height:200%;
text-shadow: 1px 1px 2px #000;
letter-spacing: 5px;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00B6EF, 0 0 30px #00B6EF, 0 0 40px #00B6EF, 0 0 50px #00B6EF, 0 0 75px #00B6EF;}

td.edit_header2 {
   background-image:url(http://img.webme.com/pic/s/studiowebbackstage/header.png);
   background-repeat:no-repeat;
   width: 100%;
   height: 141px; }

td.edit_content_header {
   background-image:url(http://img.webme.com/pic/s/studiowebbackstage/cont_head_bg.png);
   background-repeat:repeat;
   width: 671px;
   height: 36px; }
td iframe{border: 6px solid #F79F81;}
 </style>
<div class="color" id="ferchi">



por ahora voy probando lo del contenido que se ajuste a todas o la mayoria de resoluciones porquees un lio aqui con puras tablas basicas iguales

Aunque no creo que te pueda ayudar mas en lo de las resoluciones porque ahi muchos topes

lo del extra que mencionaste no se nunca lo eh usado apenas hasta hace unos dias lo acaban de reparar despues de años

es lo malo del servicio pero se hace lo que se puede haber que resulta

El codigo que te di tambien centra la cantidad de visitas y el texto de la publicidad de negritas de abajo
Mensaje03-01-2013, 22:41 (UTC)    
Título del mensaje:

Ok lo paso y lo pruebo.

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
Mensaje03-01-2013, 23:01 (UTC)    
Título del mensaje:

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


img[src="http://theme.webme.com/designs/colourful/images_gelb/line.gif"] { background-image:url(http://img.webme.com/pic/s/studiowebbackstage/line.png);background-repeat:no-repeat;height:0px;width:0px;padding-left:772px;}

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
Mensaje03-01-2013, 23:10 (UTC)    
Título del mensaje:

skulldarknight escribió:
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


img[src="http://theme.webme.com/designs/colourful/images_gelb/line.gif"] { background-image:url(http://img.webme.com/pic/s/studiowebbackstage/line.png);background-repeat:no-repeat;height:0px;width:0px;padding-left:772px;}

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
Mensaje03-01-2013, 23:40 (UTC)    
Título del mensaje:

Pega esto antes de:

</style>

lo primero dice que el mapa quede desde 738 px

Código:
.cont div iframe { min-width: 738px;width: 90%;}

.color{position: relative; top: -15px;}


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:
Mensaje04-01-2013, 15:12 (UTC)    
Título del mensaje:

Editado: Lean abajo del todo. GRACIAS



Cita:


skulldarknight escribió:
Pega esto antes de:

</style>

lo primero dice que el mapa quede desde 738 px

Código:
.cont div iframe { min-width: 738px;width: 90%;}

.color{position: relative; top: -15px;}


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 header2 LO 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.

MI MEJOR VERSION DE MOMENTO
Ver ejemplo http://www.studiowebbackstage.es.tl

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: CODIGO CSS -->
   <!-- ====================== -->

        <!-- ============================ -->
        <!-- DESDE AQUI: CAMBIO DE ESTILO -->
        <!-- ============================ -->
         <style type="text/css">
            <!--
           body { font-family:Verdana; font-size:12px; text-decoration:none; margin: 0% 0% 0% 0%; }
           .headline { font-family:Verdana; font-size:12x; font-style:none; color:white; text-decoration:none; }
           .cont, TD { font-family:Verdana; font-size:12px; font-style:none; color:#818181; text-decoration:none; }
           a { font-family: Verdana; color:#0000FF; text-decoration: none;   font-size:12px}
           a:visited { font-family: Verdana; color:#0000FF; text-decoration: none;   font-size:12px}
           a:hover { font-family: Verdana; color#0000FF; text-decoration: none; color: #FF0000; font-size:12px}
            #webme_footer_textlink_dont_hide
           {
            color: ;
            background-color: ;
            }
            //-->
         </style>
        <!-- ============================ -->
        <!-- HASTA AQUI: CAMBIO DE ESTILO -->
        <!-- ============================ -->

        <!-- ======================================== -->
        <!-- DESDE AQUI: Ensanchar objetos FULL COLOR -->
        <!-- ======================================== -->
         <style type="text/css">
            <!--
            td.edit_header1 {
               background-image:url(http://img.webme.com/pic/s/studiowebbackstage/head_bg.png);
               background-repeat:no-repeat;
               width: 230px;
               height: 141px; }
            td.edit_header2 {
               background-image:url(http://theme.webme.com/designs/colourful/images_gelb/header.jpg);
               background-color:;
               background-repeat:no-repeat;
               width: 1250px
               height: 141px; }

            td.edit_content_header {
               background-image:url(http://theme.webme.com/designs/colourful/images_gelb/cont_head_bg.gif);
               background-color:;
               background-repeat:no-repeat; }

            td.edit_content_header {
               background-image:url(http://img.webme.com/pic/s/studiowebbackstage/cont_head_bg.png);
               background-repeat:no-repeat;
               width: 771px;
               height: 36px; }
            -->
         </style>
            <!-- ================================= -->
            <!-- DESDE AQUI: Aporte de buzzdungeon -->
            <!-- ================================= -->
               <style type="text/css">
                  <!--
                  .cont>div[style="width: 510; overflow: auto;"]
                  {
                  width:760px!important;
                  }
                  //-->
               </style>         
            <!-- ================================= -->
            <!-- HASTA AQUI: Aporte de buzzdungeon -->
            <!-- ================================= -->
        <!-- ======================================== -->
        <!-- HASTA AQUI: Ensanchar objetos FULL COLOR -->
        <!-- ======================================== -->
       
        <!-- =================================================== -->
        <!-- DESDE AQUI ESCALAR IMAGEN line.gif DE 521px a 771px -->
        <!-- =================================================== -->
         <style type="text/css">
            <!--
            img[src="http://theme.webme.com/designs/colourful/images_gelb/line.gif"]
            {
            background-repeat:no-repeat;height:3px;width:771px;padding-left:0px;
            }
            //-->
         </style>
        <!-- =================================================== -->
        <!-- HASTA AQUI ESCALAR IMAGEN line.gif DE 521px a 771px -->
        <!-- =================================================== -->

        <!-- ======================================= -->
        <!-- DESDE AQUI: Sustituir objetos COLOURFUL -->
        <!-- ======================================= -->
        <style type="text/css">
            <!--
            td.edit_header1 {
               background-image:url(http://img.webme.com/pic/s/studiowebbackstage/header.png);
               background-repeat:no-repeat;
               width: 100%;
            height: 141px; }
            
            td.edit_header2 {
               background-image:url(http://img.webme.com/pic/s/studiowebbackstage/head_bg.png);
               background-repeat:no-repeat;
               width: 230px;
               height: 141px; }

            td.edit_content_header {
               background-image:url(http://img.webme.com/pic/s/studiowebbackstage/cont_head_bg.png);
               background-color:;
               background-repeat:no-repeat;
               width: 771px;
               height: 36px; }
            //-->
         </style>
        <!-- ======================================= -->
        <!-- HASTA AQUI: Sustituir objetos COLOURFUL -->
        <!-- ======================================= -->
        <!-- ================================================= -->
        <!-- DESDE AQUI: TEXTO POR ENCIMA DE PAGINA (ADAPTADO) -->
        <!-- ================================================= -->
         <style type="text/css">
            <!--
               .edit_content_header2
               {
               background: url("http://img.webme.com/pic/s/studiowebbackstage/cat_bg.png"); width=1250px; height:55px;
               }
               body div
               {
               width 100%;
               }
               body
               {
               padding-left: 10px;
               padding-right: 10px;
               }
               .edit_nav_bg
               {
               width:243px;
               }
               .color table tbody tr td  table
               {
               width:100%;
               }
               .edit_rechts_header
               {
               width: 220px;
               }
               .edit_nav_header
               {
               width: 243px;
               }
               .edit_content_header table tbody tr td.headline
               {
               text-align: left;
               }
               .edit_header2 table tbody tr td font
               {
               text-shadow: 1px 1px 2px #000;
               letter-spacing: 2px;
               text-shadow: 0 0 5px #ffff, 0 0 10px #ffff, 0 0 15px #ffff, 0 0 20px #00B6EF, 0 0 30px #00B6EF, 0 0 40px #00B6EF, 0 0 50px #00B6EF, 0 0 75px #00B6EF;
               }
            //-->
         </style>      
        <!-- ================================================= -->
        <!-- HASTA AQUI: TEXTO POR ENCIMA DE PAGINA (ADAPTADO) -->
        <!-- ================================================= -->
       
        <!-- ==================================================== -->
        <!-- DESDE AQUI: MI TEXTO POR ENCIMA DE PAGINA (OPCIONAL) -->
        <!-- ==================================================== -->
       
           <!-- ===================================================== -->
           <!-- CSS - DESDE AQUI (OPCIONAL): Aplicar Sombra a OBJETOS -->
           <!-- ===================================================== -->
            <style type="text/css">
               <!--
               #sombra
               {
               box-shadow: 2px 2px 5px #999;
               }
               //-->
            </style>
           <!-- ===================================================== -->
           <!-- CSS - HASTA AQUI (OPCIONAL): Aplicar Sombra a OBJETOS -->
           <!-- ===================================================== -->

   <!-- ====================== -->
   <!-- HASTA AQUI: CODIGO CSS -->
   <!-- ====================== -->

            <!-- ======================= -->
            <!-- DESDE AQUI: CODIGO HTML -->
            <!-- ======================= -->         
      
               <!-- =========================================================== -->
               <!-- HTML DESDE AQUI (OPCIONAL): ALINEAR LA WEB CENTRADA AL 100% -->
               <!-- =========================================================== -->

                  <div style="width 100%px; margin-left: auto; margin-right: auto; align: center;">

               <!-- =========================================================== -->
               <!-- 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.

Puse el aporte en el foro: Acerca de códigos

Aqui el enlace al aporte

O bien enla web:

Aquí el enlace al aporte en web

Gracias a los que colaboraron o se interesaron por el tema. Si nadie tiene nada mas que comentar, por mi parte se puede cerrar este tema.

Saludos.


Ultima edición por studiowebbackstage el Dom Ene 06, 2013 11:25 am; editado 13 veces
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group