Imprimir Página - ¿ Como cambiar el fondo de color ?

Título: ¿ Como cambiar el fondo de color ?
Publicado por: r34p3rb0y en 18 Marzo 2013, 22:35 pm

Desde una plantilla, he cambiado el diseño . Y me quedan un par de cosillas.

(http://oi50.tinypic.com/2qdamvb.jpg)

Me gustaria cambiar el naranja, por un naranja fuerte a gradiente un poco mas flojo.

¿ Ahora el color azul, ponerle una imagen propia, o otro color . Pero como se hace ?

El codigo es el siguiente .

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Babies</title>
<body background="C:\Users\Esku\Pictures\28.jpg">
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body> 
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="58%" align="left" valign="top"><table width="60%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" valign="top"><img src="images/f.jpg" alt="" width="455" height="186" border="0" /></td>
          </tr>
          <tr>
            <td align="left" valign="top"><img src="images/f2.jpg" width="455" height="166" alt="" /></td>
          </tr>
        </table></td>
        <td width="42%" align="left" valign="top" bgcolor="#FF0000"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" valign="top"><img src="images/f3.jpg" width="333" height="76" alt="" /></td>
          </tr>
          <tr>
            <td align="left" valign="top"><img src="images/f4.jpg" alt="" width="332" height="243" border="0" usemap="#Map" /></td>
          </tr>
        </table>
          <img src="images/tres.png" width="333" height="34" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <th align="left" valign="top" bgcolor="#FF6600" style="padding-bottom:15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="67%" align="left" valign="top" style="padding-left:21px;"><table width="498" border="0" cellspacing="0" cellpadding="0" style="background-image:url(images/index_11.gif); background-repeat:repeat-x; background-color:#FFFFFF;">
          <tr>
            <td width="247" rowspan="2" align="left" valign="top" style="border-bottom: #F5C14C 1px solid; border-left: #F5C14C 1px solid; border-top: #F5C14C 1px solid; padding-top: 10px; padding-bottom: 12px; font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-style: italic; font-size: 14px; color: #000;"> <p>&nbsp;</p>
              <p>PlayPark es un parque infantil , donde los ni&ntilde;os podran disfrutar de un dia inolvidable </p>
              <p>Celebra tu cumplea&ntilde;os con nosotros.</p>
              <p>Nuestras instalaciones disponen de una zona para los pekes de 0 a 4 a&ntilde;os( y zona para ni&ntilde;os de  4 a&ntilde;os hasta 1,50 cm, con monitora en todo momento.</p>
              <p>Zona de Cafeteria.</p></td>
            <td width="251" align="left" valign="top" style="border-right:#F5C14C 1px solid; border-top:#F5C14C 1px solid;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="left" valign="top" style="padding-left: 20px; padding-top: 28px; font-weight: bold; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 18px; color: #000;"><p><var><strong><em>Telefono</em></strong></var><em><strong> :</strong></em> 680 401 800</p>
                  <p>Localizaci&oacute;n: Poligono Ind. Autopista Avenida Europa, nave 48-Jerez de la Frontera (Cadiz)</p>
                  <p>Abierto de Lunes a Domingo todo el a&ntilde;o de 16:00h a 21:00h</p>
                  <p>Excepto Julio y Agosto de 18:00h a 22:00</p></td>
              </tr>
              <tr>
                <td align="left" valign="top" style="padding-left: 20px; padding-top: 16px; font-weight: bold; font-family: 'Times New Roman', Times, serif; color: #000; font-size: 14;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td height="140" align="left" valign="top">&nbsp;</td>
                  </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td align="right" valign="bottom"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="75%" style="border-bottom:#F5C14C 1px solid;">&nbsp;</td>
                <td width="25%" align="right" valign="bottom"><img src="images/index_53.gif" width="64" height="73" alt="" /></td>
              </tr>
            </table></td>
          </tr>
          
        </table></td>
        <td width="33%" align="left" valign="top"><img src="images/Sin t&iacute;tulo-1.png" width="260" height="265" /></td>
      </tr>
    </table></th>
  </tr>
  <tr>
    <td align="left" valign="top" bgcolor="#FFF2D7" style="background-image:url(images/index_63.gif); background-repeat:repeat-x;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center" valign="top"><pre class="footer"><a href="index.html">Home</a>       ::       <a href="content.html">Baby Cloths</a>       ::       <a href="content.html">Nursery</a>       ::       <a href="content.html">Toys</a>       ::       <a href="contact.html">Contacts</a></pre></td>
      </tr>
      <tr>
        <td align="center" valign="top" class="copyright">Copyright &copy; 2003-2007 Companyname.com. All Rights Reserved.</td>
      </tr>
    </table></td>
  </tr>
</table>
<map name="Map" id="Map">
  <area shape="rect" coords="124,23,214,48" href="index.html" alt="" />
<area shape="rect" coords="122,67,230,90" href="content.html" alt="" />
<area shape="rect" coords="122,107,267,133" href="map.html" alt="" />
<area shape="rect" coords="122,149,210,173" href="fotos.html" alt="" />
<area shape="rect" coords="119,185,258,211" href="contact.html" alt="" />
</map></body>
</html>

Gracias y salu2.

Título: Re: ¿ Como cambiar el fondo de color ?
Publicado por: Puntoinfinito en 18 Marzo 2013, 22:45 pm

Tal vez con el style.css haciamos más... pero de todos modos, sin leer mucho el código:

Citar

Cambia lo subrayado por el color que te guste más en hexadecimal, guiandome por donde has dicho más o menos sería este color: #F58B44

Puedes escojer el tuyo en cualquier herramienta online como por ejemplo http://html-color-codes.info/codigos-de-colores-hexadecimales/ ...

Saludos!! Y prueba a ver si era eso XDD

Título: Re: ¿ Como cambiar el fondo de color ?
Publicado por: r34p3rb0y en 18 Marzo 2013, 22:56 pm

Me refiero a algo asi

(http://oi45.tinypic.com/9tldok.jpg)

Gracias .

Título: Re: ¿ Como cambiar el fondo de color ?
Publicado por: Puntoinfinito en 19 Marzo 2013, 15:03 pm

Pues como te dije, modifica los registros en color hexadecimal por donde te interese...

PD: Veo que utilizas DreamWeaver, no puedes hacerlo desde allí?

Título: Re: ¿ Como cambiar el fondo de color ?
Publicado por: r34p3rb0y en 19 Marzo 2013, 15:28 pm

Pero asi queda como un color solo no ?

Es que no te entiendo como quieres decir .

Título: Re: ¿ Como cambiar el fondo de color ?
Publicado por: Puntoinfinito en 19 Marzo 2013, 15:55 pm

A ver, lo que tu tienes puesto es un color plano, no tiene ningún efecto ni nada, y el que tu quieres es un efecto css de degradados que tu has de crear con CSS... No soy un experto en CSS pero creo que:

Código:

background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

donde...

Código:

-webkit-gradient(tipo , punto inicio, punto final, color inicio, color final, color-stop(porcentaje, color), color-stop(porcentaje, color) ).

con esto ya puedes crear un estilo para crear ese degradado que tu quieres ;)

También podrías hacerlo de tal manera;

Código:

    div {
    background: linear-gradient(to bottom right, #a1e048, #6a942f);
    }

O para que quede de manera linear y no horizontal;

Código:

    div {
    background: #70bf32;
    background: url('linear-gradient.png') 0 0 repeat-x;
    background: -webkit-linear-gradient(#a1e048, #6a942f);
    background: -moz-linear-gradient(#a1e048, #6a942f);
    background: -ms-linear-gradient(#a1e048, #6a942f);
    background: -o-linear-gradient(#a1e048, #6a942f);
    background: linear-gradient(#a1e048, #6a942f);
    }

Puedes mirar más tipos aquí: http://learn.shayhowe.com/html-css/backgrounds-gradients

Saludos

Título: Re: ¿ Como cambiar el fondo de color ?
Publicado por: Eleкtro en 19 Marzo 2013, 16:02 pm

El color naranja de tu htm es eso, un color sólido.

El gradiante no es un color, es un efecto de varios tonos de colores conjuntos, y los estilos (efectos, gradiantes) se hacen manejando CSS, si usas DreamWeaver los estilos de CSS te los hace en 1 segundo casi sin esfuerzo vaya!

Un saludo!

Título: Re: ¿ Como cambiar el fondo de color ?
Publicado por: Ori-chan en 19 Marzo 2013, 16:27 pm

Código

http://css3maker.com/css-gradient.html

Título: Re: ¿ Como cambiar el fondo de color ?
Publicado por: r34p3rb0y en 19 Marzo 2013, 16:49 pm

El fondo azul ya lo cambie desde el css , añadiendo este codigo

body{
padding:0px;
margin:0px;
background-color:#fdffff;
background-image:url(images/1w11.jpg);
background-repeat: no-repeat;
background-attachment: scroll;

Ahora, el color naranja , para darle el efecto gradiente

¿ Que sustituyo ?

<td align="left" valign="top" bgcolor="#ff9900" style="padding-bottom:15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">

Soy bastante torpe en esto de HTML. Es la primera vez que practico .

Título: Re: ¿ Como cambiar el fondo de color ?
Publicado por: OmarHack en 19 Marzo 2013, 17:42 pm

Así?

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Babies</title>
<div style="background:url(http://llimg3.tuenti.net/MeZoXwPJXry9oCaKAA) no-repeat; background-

size:110%;"> 
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="58%" align="left" valign="top"><table width="60%" border="0" cellspacing="0" 

cellpadding="0">
          <tr>
            <td align="left" valign="top"><img src="images/f.jpg" alt="" width="455" height="186" 

border="0" /></td>
          </tr>
          <tr>
            <td align="left" valign="top"><img src="images/f2.jpg" width="455" height="166" alt="" 

/></td>
          </tr>
        </table></td>
        <td width="42%" align="left" valign="top" bgcolor="#FF0000"><table width="100%" border="0" 

cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" valign="top"><img src="images/f3.jpg" width="333" height="76" alt="" 

/></td>
          </tr>
          <tr>
            <td align="left" valign="top"><img src="images/f4.jpg" alt="" width="332" height="243" 

border="0" usemap="#Map" /></td>
          </tr>
        </table>
          <img src="images/tres.png" width="333" height="34" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <th align="left" valign="top" bgcolor="#FF6600" style="padding-bottom:15px;"><table 

width="100%" border="0" cellspacing="0" cellpadding="0<td width="67%" align="left" valign="top" 

style="padding-left:21px;"><table width="498" border="0" cellspacing="0" cellpadding="0" 

style="background-image:url(images/index_11.gif); background-repeat:repeat-x; background-

color:#FFFFFF;">ound-attachment: fixed">
          <tr>
            <td width="247" rowspan="2" align="left" valign="top" style="border-bottom: #F5C14C 1px 

solid; border-left: #F5C14C 1px solid; border-top: #F5C14C 1px solid; padding-top: 10px; padding-

bottom: 12px; font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-style: italic; 

font-size: 14px; color: #000;"> <p>&nbsp;</p>
              <p>PlayPark es un parque infantil , donde los ni&ntilde;os podran disfrutar de un dia 

inolvidable </p>
              <p>Celebra tu cumplea&ntilde;os con nosotros.</p>
              <p>Nuestras instalaciones disponen de una zona para los pekes de 0 a 4 a&ntilde;os( y 

zona para ni&ntilde;os de  4 a&ntilde;os hasta 1,50 cm, con monitora en todo momento.</p>
              <p>Zona de Cafeteria.</p></td>
            <td width="251" align="left" valign="top" style="border-right:#F5C14C 1px solid; 

border-top:#F5C14C 1px solid;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="left" valign="top" style="padding-left: 20px; padding-top: 28px; font-

weight: bold; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 18px; color: 

#000;"><p><var><strong><em>Telefono</em></strong></var><em><strong> :</strong></em> 680 401 800</p>
                  <p>Localizaci&oacute;n: Poligono Ind. Autopista Avenida Europa, nave 48-Jerez de 

la Frontera (Cadiz)</p>
                  <p>Abierto de Lunes a Domingo todo el a&ntilde;o de 16:00h a 21:00h</p>
                  <p>Excepto Julio y Agosto de 18:00h a 22:00</p></td>
              </tr>
              <tr>
                <td align="left" valign="top" style="padding-left: 20px; padding-top: 16px; font-

weight: bold; font-family: 'Times New Roman', Times, serif; color: #000; font-size: 14;"><table 

width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td height="140" align="left" valign="top">&nbsp;</td>
                  </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td align="right" valign="bottom"><table width="100%" border="0" cellspacing="0" 

cellpadding="0">
              <tr>
                <td width="75%" style="border-bottom:#F5C14C 1px solid;">&nbsp;</td>
                <td width="25%" align="right" valign="bottom"><img src="images/index_53.gif" 

width="64" height="73" alt="" /></td>
              </tr>
            </table></td>
          </tr>
          
        </table></td>
        <td width="33%" align="left" valign="top"><img src="images/Sin t&iacute;tulo-1.png" 

width="260" height="265" /></td>
      </tr>
    </table></th>
  </tr>
  <tr>
    <td align="left" valign="top" bgcolor="#FFF2D7" style="background-image:url

(images/index_63.gif); background-repeat:repeat-x;"><table width="100%" border="0" cellspacing="0" 

cellpadding="0">
      <tr>
        <td align="center" valign="top"><pre class="footer"><a href="index.html">Home</a>       ::  

     <a href="content.html">Baby Cloths</a>       ::       <a href="content.html">Nursery</a>       

::       <a href="content.html">Toys</a>       ::       <a 

href="contact.html">Contacts</a></pre></td>
      </tr>
      <tr>
        <td align="center" valign="top" class="copyright">Copyright &copy; 2003-2007 

Companyname.com. All Rights Reserved.</td>
      </tr>
    </table></td>
  </tr>
</table>
<map name="Map" id="Map">
  <area shape="rect" coords="124,23,214,48" href="index.html" alt="" />
<area shape="rect" coords="122,67,230,90" href="content.html" alt="" />
<area shape="rect" coords="122,107,267,133" href="map.html" alt="" />
<area shape="rect" coords="122,149,210,173" href="fotos.html" alt="" />
<area shape="rect" coords="119,185,258,211" href="contact.html" alt="" />
</map></body>
</html>

No se nota el degradado mucho pero igual aprovechas el código xDDD Si vas a aumentar el tamaño de la web (Largo) o reducirlo vas a tener que hacer lo mismo con el porcentaje size.
El código que aumenté es este:

Código:

<div style="background:url(http://llimg3.tuenti.net/MeZoXwPJXry9oCaKAA) no-repeat; background-size:110%;">

La imagen la subí al server de tuenti.
Un saludo.

Título: Re: ¿ Como cambiar el fondo de color ?
Publicado por: r34p3rb0y en 20 Marzo 2013, 00:36 am

Gracias , pero mira como se queda tras pegar ese codigo.

(http://oi50.tinypic.com/5x68w1.jpg)

Título: Re: ¿ Como cambiar el fondo de color ?
Publicado por: OmarHack en 20 Marzo 2013, 00:45 am

Yo lo probé y lo tenía distinto, de todas formas ponle en size 1800 o así a ver que pasa, lo más seguro es que te cubra todo pero apenas se note el degradado. Seguro que alguien del foro sabe hacerlo mucho mejor. En dreaweaver tienes que tener alguna opción para poner el fondo, descarga el fondo que pusiste y pónselo a la web con el dreamweaver a ver que tal.
Un saludo.

Título: Re: ¿ Como cambiar el fondo de color ?
Publicado por: r34p3rb0y en 20 Marzo 2013, 01:35 am

Cita de: OmarHack en 20 Marzo 2013, 00:45 am

Gracias lo probare, ahora el fodno esta bien con ese color, lo unico que quiero cambiar es el naranja ese del medio.

Título: Re: ¿ Como cambiar el fondo de color ?
Publicado por: OmarHack en 20 Marzo 2013, 13:26 pm

Haz una captura de pantalla que no me doy cuenta de cual dices jaja

Título: Re: ¿ Como cambiar el fondo de color ?
Publicado por: r34p3rb0y en 20 Marzo 2013, 15:48 pm

Ahora me refiero a lo de debajo de las bolas, es decir el naranja actual solido, pasarlo a un efecto gradiente .
El fondo ya esta solucionado .

Título: Re: ¿ Como cambiar el fondo de color ?
Publicado por: OmarHack en 20 Marzo 2013, 18:43 pm

¿Puedes subir la web con las imágenes a algún sitio? Si no al no tener yo las imágenes no te puedo ayudar.

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: r34p3rb0y en 18 Marzo 2013, 22:35 pm