Jump to content

Solucionado: Color Fondo Con Grado Opacidad

chanis
 Share

Recommended Posts

chanis Newbie

chanis

Posted
Posted (edited)

Buenas noches!

 

Estoy montando una tienda prestashop, y he empezado intentando personalizar la plantilla que viene por defecto.

Hasta el momento, he puesto una foto de fondo, hasta ahí bien.

Luego he puesto la parte central en color naranja, añadiendo después de body lo siguiente:

 

 

#page {

width: 980px;

background-color: #ff9900;

margin: 0 auto 2px auto;

text-align: left

}

 

Ahora me gustaría que no fuera un color sólido, sino con cierta opacidad, que solo afectara al color naranja, y no a toda la página.

Estoy todavía en localhost, así que no puedo enseñaros la tienda. No obstante os anexo la imagen.

 

¿Alguien me podría ayudar? muchas gracias!

Edited by hortusbio (see edit history)
Link to comment
Share on other sites
jmmayoral Newbie

jmmayoral

Posted
Posted

Buenas noches!

 

Estoy montando una tienda prestashop, y he empezado intentando personalizar la plantilla que viene por defecto.

Hasta el momento, he puesto una foto de fondo, hasta ahí bien.

Luego he puesto la parte central en color naranja, añadiendo después de body lo siguiente:

 

 

#page {

width: 980px;

background-color: #ff9900;

margin: 0 auto 2px auto;

text-align: left

}

 

Ahora me gustaría que no fuera un color sólido, sino con cierta opacidad, que solo afectara al color naranja, y no a toda la página.

Estoy todavía en localhost, así que no puedo enseñaros la tienda. No obstante os anexo la imagen.

 

¿Alguien me podría ayudar? muchas gracias!

 

Justo debajo de background color pon

opacity: 0.74;

 

Para darle una opacidad del 74%.

 

Y si me permites un consejo, utiliza colores cálidos (rojos, naranjas, amarillos) para resaltar lo importante y colores fríos (azules, verdes) para los fondos.

Esto no es que me lo invente yo, es lo que según todos los estudios prefieren los consumidores.

 

 

Link to comment
Share on other sites
chanis Newbie

chanis

Posted
  • Author
Posted

Muchísimas gracias!!, tendré en cuenta lo de los colores, no lo dudes.

He añadido opacity: 0.74;, y me pasa una cosa, que la opacidad se produce en toda la página, y no solo en el naranja.

Pego otra vez la imagen.

pruebas2.jpg

Hay alguna manera de conseguir que sólo sea al naranja a lo que se aplique la opacidad?

Gracias de nuevo,

Link to comment
Share on other sites
chanis Newbie

chanis

Posted
  • Author
Posted

Con otros grados de transparencia me sucede lo mismo.

Utilizo el google chrome.

Y con la coma...nada, igual :)

Creo que lo voy a dejar en blanco, como fondo sería mas apropiado que el naranja según tus consejos, y no me lío tanto.

Muchas gracias!!!!

Link to comment
Share on other sites
jaloise Newbie

jaloise

Posted
Posted

Con otros grados de transparencia me sucede lo mismo.

Utilizo el google chrome.

Y con la coma...nada, igual :)

Creo que lo voy a dejar en blanco, como fondo sería mas apropiado que el naranja según tus consejos, y no me lío tanto.

Muchas gracias!!!!

 

Vos queres que ese fondo naranaj medio transparente quede naranja solido?

Link to comment
Share on other sites
chanis Newbie

chanis

Posted
  • Author
Posted

Bueno, en realidad lo que me gustaría es que el grado de opacidad, sea el color que sea, se aplique solo al color.

Lo que me sucede ahora es que la transparencia se aplica a toda la página, incluyendo menú, imágenes, títulos, etc.

Link to comment
Share on other sites
jaloise Newbie

jaloise

Posted
Posted (edited)

Bueno, en realidad lo que me gustaría es que el grado de opacidad, sea el color que sea, se aplique solo al color.

Lo que me sucede ahora es que la transparencia se aplica a toda la página, incluyendo menú, imágenes, títulos, etc.

 

Entonces lo que tu quieres es dejar el paisaje ese verde solido, y lo naranja mas transparente... La imagen esta colocada en el body.. el color en #page? Me equivoco? como esta en el global.css?

Edited by jaloise (see edit history)
Link to comment
Share on other sites
jmmayoral Newbie

jmmayoral

Posted
Posted

La sintaxis es la última que te puse. Es raro que no te funcione.

Prueba este trozo de código y juega con la opacidad.

supongo que lo habrás revisado mil veces, pero ¿no será un error de sintáxis?

 

 

<html>

<head>

<style type="text/css">

div {

background-color: rgba(195, 200, 0, 0.5);

 

width: 50px;

height: 50px;

}

p {

color: #000;

}

</style>

</head>

<body>

<div>

<p>TEXTO</p>

</div>

</body>

</html>

Link to comment
Share on other sites
chanis Newbie

chanis

Posted
  • Author
Posted

Ya!, efectivamente era un error de sintaxis...algo debía poner mal porque ahora sale perfecto. Así es como ha quedado:

 

 

#page {

width: 980px;

background-color: rgba( 255, 255, 255, 0.80 );

margin: 0 auto 2px auto;

text-align: left

}

 

Muchas gracias por vuestra ayuda!!

Link to comment
Share on other sites
jaloise Newbie

jaloise

Posted
Posted

Ya!, efectivamente era un error de sintaxis...algo debía poner mal porque ahora sale perfecto. Así es como ha quedado:

 

 

#page {

width: 980px;

background-color: rgba( 255, 255, 255, 0.80 );

margin: 0 auto 2px auto;

text-align: left

}

 

Muchas gracias por vuestra ayuda!!

 

Me alegro

 

Saludos.

Link to comment
Share on other sites
jmmayoral Newbie

jmmayoral

Posted
Posted

Ya!, efectivamente era un error de sintaxis...algo debía poner mal porque ahora sale perfecto. Así es como ha quedado:

 

 

#page {

width: 980px;

background-color: rgba( 255, 255, 255, 0.80 );

margin: 0 auto 2px auto;

text-align: left

}

 

Muchas gracias por vuestra ayuda!!

Es que ya me oparecía muy raro, porque yo probaba y probaba... y me funcionaba.

Ese tipo de errores de sintaxis son de los que te puedes pasar horas mirando el código y no verlos :P

Link to comment
Share on other sites
  • 2 weeks later...
asideim Newbie

asideim

Posted
Posted

Buenos días.

Me gustaría cambiar el fondo blanco de mi tienda y poner una imagen que he descargado para que rodee la página central. Mas o menos como la tiene Hortusbio. Me podéis indicar como puedo hacerlo?

Buen fin de semana a todos.

Link to comment
Share on other sites
chanis Newbie

chanis

Posted
  • Author
Posted

Hola asideim!

 

 

Guarda la foto en prestashop/themes/"carpeta de tu tema"/img.

 

Luego tienes que modificar el archivo global.css, que está en prestashop/themes/"carpeta de tu tema"/css/global.css.

 

Busca la etiqueta body{, y sustituye ésto:

 

background-color: white;

 

Por ésto:

 

background-image: url('/../img/nombre de la foto.jpg'); //

background-repeat: no-repeat;

background-position: top center;

background-attachment: scroll;

 

Te recomiento también que leas lo del link que te pongo a continuación, a mí me sirvió para aprender algunas cosillas básicas: ponerla fija, que se desplace, en mosaico....etc.

 

 

http://es.html.net/tutorials/css/lesson3.php

 

Buen fin de semana y espero que te sirva!!

Link to comment
Share on other sites
asideim Newbie

asideim

Posted
Posted

Me ha funcionado bien poniendo la imagen en la misma carpeta del global.css porque cuando la tenia puesta en la carpeta img no me funcionaba.

No se si estaba poniendo bien la ruta

 

url("/ServidoresLocales/Apache/htdocs/PRESTASHOP/themes/default/img/mariA.jpg");

Es posible que me sobre o me falte algo para especificar la ruta correctamente?

Al final para ver como quedaba copie la imagen en la carpeta global y solo tuve que poner como ruta (mariA.jpg) aunque eso no es lo suyo, por lo que te agradeceré me indiques como poner la ruta correctamente.

Pero pasa bien el domingo. No me urge.

Gracias

Link to comment
Share on other sites
chanis Newbie

chanis

Posted
  • Author
Posted

Prueba a poner exáctamente esta ruta:

 

background-image:url('../img/mariA.jpg');

 

Guardando la imagen en default/img, y poniendo a la imagen el nombre mariA, claro.

 

Yo lo tengo así y me funciona.

 

No hay de qué!

Link to comment
Share on other sites
jaloise Newbie

jaloise

Posted
Posted

Me ha funcionado bien poniendo la imagen en la misma carpeta del global.css porque cuando la tenia puesta en la carpeta img no me funcionaba.

No se si estaba poniendo bien la ruta

 

url("/ServidoresLocales/Apache/htdocs/PRESTASHOP/themes/default/img/mariA.jpg");

Es posible que me sobre o me falte algo para especificar la ruta correctamente?

Al final para ver como quedaba copie la imagen en la carpeta global y solo tuve que poner como ruta (mariA.jpg) aunque eso no es lo suyo, por lo que te agradeceré me indiques como poner la ruta correctamente.

Pero pasa bien el domingo. No me urge.

Gracias

 

Te voy a explicar en pocas palabras porque lo que dice hortusbio esta correcto... El te esta dando una ruta que se llama ruta RELATIVA... entonces, cuando lo subas al servidor vaa funcionar porque subes todas las carpetas TAL CUAL.... El css funciona de la siguiente manera:

 

Vos tenes que indicar donde esta imagen partiendo desde el CSS .. Entocnes sabemos que esta en la carpeta DEFAULT/IMG... y el css esta en DEFAULT/CSS... estan dentro de la misma carpeta pero en diferentes subcarpetas... Entonces se pone de la siguiente manera: ../img/mariA.jpg

Esto indica que le esta diciendo al css lo siguiente:

 

Tenes que ir a buscar una imagen que se llama mariA.jpg... Sabes donde se encuentra? en una carpeta que se llama IMG, para esto tenes que salir una carpeta para atras, o sea tenes que volver a DEFAULT esto se hace con los ../ (Esto indica que se tiene que volver una carpeta atras, ../../ esto que se tiene que volver dos carpetas atras)... Entonces el css que hace?? Sale una carpeta ../ y ahi busca la carpeta IMG y ahi busca la imagen indicada..

 

Espero que esta aclaracion te ayude a enter un poco el procedimiento...

  • Like 1
Link to comment
Share on other sites
trajegris Explorer

trajegris

Posted
Posted (edited)

Yo estoy haciendo exactamente lo que decis y no me cambia el fondo. Tengo la version 1520.

 

body{

font:normal 11px/14px Arial, Verdana, sans-serif;

color:#222;

background-image: url('/../img/fondoweb.jpg'); //

background-repeat: no-repeat;

background-position: top center;

background-attachment: scroll;

 

}

 

¿Que estoy haciendo mal?

 

http://www.sex1shop.es

Edited by trajegris (see edit history)
Link to comment
Share on other sites
jaloise Newbie

jaloise

Posted
Posted (edited)

Yo estoy haciendo exactamente lo que decis y no me cambia el fondo. Tengo la version 1520.

 

body{

font:normal 11px/14px Arial, Verdana, sans-serif;

color:#222;

background-image: url('/../img/fondoweb.jpg'); //

background-repeat: no-repeat;

background-position: top center;

background-attachment: scroll;

 

}

 

¿Que estoy haciendo mal?

 

http://www.sex1shop.es

 

Fijate asi:

 

body{
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#222;
background-image: url('../img/fondoweb.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
}

 

y asegurate que la IMG este subida.. porque por lo que veo no lo esta...

Edited by jaloise (see edit history)
Link to comment
Share on other sites
jaloise Newbie

jaloise

Posted
Posted

Nada, no hace nada.

 

Bueno algo mal estas haciendo jajajaja

 

intenta haciendo esto:

 

 

 

body{

font:normal 11px/14px Arial, Verdana, sans-serif;

color:#222;

background-image:url('http://sex1shop.es/themes/default/img/fondoweb.jpg');

background-repeat: no-repeat;

background-position: top center;

background-attachment: scroll;

}

igualemten no pusiste el codigoq ue te pase yo exactamente antes...

 

saludos.

Link to comment
Share on other sites
jaloise Newbie

jaloise

Posted
Posted

El codigo al que te refieres es quitarle://

Lo hice y lo siguiente y nada.

¿que hago?

 

Lo que veo en tu glolba.css es lo siguiente:

 

body{
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#222;
background-image: url('http://home/sex1s185/public_html/themes/default/img/fondoweb.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
}

 

Copia exacatamenet esto:

body{
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#222;
background-image: url('../img/fondoweb.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
}

Link to comment
Share on other sites
trajegris Explorer

trajegris

Posted
Posted

Siiiiiiiiiii, muy bien.

Pero no me abarca todo el ancho de la pantalla, deja dos franjas blancas a los lados y tampoco me cubre la pagina verticalmente.

Otra cosa es si puedo atenuar la intensidad del color.

Mientras tanto , muchas gracias por tu colaboracion.

Link to comment
Share on other sites
jaloise Newbie

jaloise

Posted
Posted

Siiiiiiiiiii, muy bien.

Pero no me abarca todo el ancho de la pantalla, deja dos franjas blancas a los lados y tampoco me cubre la pagina verticalmente.

Otra cosa es si puedo atenuar la intensidad del color.

Mientras tanto , muchas gracias por tu colaboracion.

 

Entonces

 

body{

font:normal 11px/14px Arial, Verdana, sans-serif;

color:#222;

background-image: url('../img/fondoweb.jpg');

background-position: top center;

background-attachment: scroll;

}

Link to comment
Share on other sites
asideim Newbie

asideim

Posted
Posted

Buenas tardes.

Hortus al final lo conseguí y ademas me vino muy bien la guia que me pusiste para que mirase.

Todo muy bien explicado, pero me surge una curiosidad. En tu web tienes una imagen de fondo y luego el interior de la página tiene un color de fondo naranja que era donde tenias los problemas de opacidad ¿recuerdas?

Que hay que hacer para poner un color de fondo en la página manteniendo el fondo de imagen que ya hemos conseguido?

Gracias por tus consejos.

Link to comment
Share on other sites
jaloise Newbie

jaloise

Posted
Posted (edited)

Buenas tardes.

Hortus al final lo conseguí y ademas me vino muy bien la guia que me pusiste para que mirase.

Todo muy bien explicado, pero me surge una curiosidad. En tu web tienes una imagen de fondo y luego el interior de la página tiene un color de fondo naranja que era donde tenias los problemas de opacidad ¿recuerdas?

Que hay que hacer para poner un color de fondo en la página manteniendo el fondo de imagen que ya hemos conseguido?

Gracias por tus consejos.

 

Coomo es tu URL? Igualemnte en la pagina uno... comentario 16 te dicen la respuesta a tu pregunta..

Edited by jaloise (see edit history)
Link to comment
Share on other sites
jaloise Newbie

jaloise

Posted
Posted

Ya!, efectivamente era un error de sintaxis...algo debía poner mal porque ahora sale perfecto. Así es como ha quedado:

 

 

#page {

width: 980px;

background-color: rgba( 255, 255, 255, 0.80 );

margin: 0 auto 2px auto;

text-align: left

}

 

Muchas gracias por vuestra ayuda!!

Link to comment
Share on other sites
asideim Newbie

asideim

Posted
Posted

Hola Jaloise

Supongo que donde debo modificar el fondo es en esta zona,

 

#page {

width: 980px;

background-color: rgba( 255, 255, 255, 0.80 );

margin: 0 auto 2px auto;

text-align: left

}

 

pero no se donde se encuentra. No la veo en el global.css. Me podeis decir donde está esta parte de código???

Gracias.

Link to comment
Share on other sites
jaloise Newbie

jaloise

Posted
Posted

Hola Jaloise

Supongo que donde debo modificar el fondo es en esta zona,

 

#page {

width: 980px;

background-color: rgba( 255, 255, 255, 0.80 );

margin: 0 auto 2px auto;

text-align: left

}

 

pero no se donde se encuentra. No la veo en el global.css. Me podeis decir donde está esta parte de código???

Gracias.

 

debe estar sin nada eso

 

asi

 

#page{

}

 

Si usas la plantilla por default esta en themes/default/css/glabal.css aprox en la linea 41

 

Saludos

Link to comment
Share on other sites
asideim Newbie

asideim

Posted
Posted

PERFECTO Jaloise. Era lo que me faltaba para tener la tienda muy parecida a la tuya, incluso le he puesto el fondo ese naranja.

Además me he guardado bien el tutorial ese que aconsejas sobre los fondos y los colores; muy bien explicado todo por cierto.

 

Sobre el tema ya está todo zanjado. Ahora quiero averiguar como se cambia el texto. Si no soy capaz ya abriré un nuevo tema.

Gracias por todo y que pases un buen día.

Link to comment
Share on other sites
jaloise Newbie

jaloise

Posted
Posted

PERFECTO Jaloise. Era lo que me faltaba para tener la tienda muy parecida a la tuya, incluso le he puesto el fondo ese naranja.

Además me he guardado bien el tutorial ese que aconsejas sobre los fondos y los colores; muy bien explicado todo por cierto.

 

Sobre el tema ya está todo zanjado. Ahora quiero averiguar como se cambia el texto. Si no soy capaz ya abriré un nuevo tema.

Gracias por todo y que pases un buen día.

 

Dale, para consutlas nuevas abre temas nuevos!

 

Un placer ayudarte,

saludos.

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...