¿ Como cambiar el fondo de color ?

r34p3rb0y · 18 Marzo 2013, 22:35 PM

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

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 [Seleccionar]

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

Puntoinfinito · 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<th align="left" valign="top" bgcolor="#FF6600" style="padding-bottom:15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>

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

r34p3rb0y · 18 Marzo 2013, 22:56 PM

Me refiero a algo asi

Gracias .

Puntoinfinito · 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í?

r34p3rb0y · 19 Marzo 2013, 15:28 PM

Pero asi queda como un color solo no ?

Es que no te entiendo como quieres decir .

Puntoinfinito · 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 [Seleccionar]

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 [Seleccionar]

-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 [Seleccionar]

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

O para que quede de manera linear y no horizontal;

Código [Seleccionar]

    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

Eleкtro · 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!

Ori-chan · 19 Marzo 2013, 16:27 PM

Código (lenguaje) [Seleccionar]

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

r34p3rb0y · 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 .

OmarHack · 19 Marzo 2013, 17:42 PM

Así?

Código [Seleccionar]

<!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 [Seleccionar]

<div style="background:url(http://llimg3.tuenti.net/MeZoXwPJXry9oCaKAA) no-repeat; background-size:110%;">
La imagen la subí al server de tuenti.
Un saludo.