Hola, muy buenas:
Después de contratar a un artista profesional para el rediseño del logotipo de nuestra web. Nos entregaron el logo en formato jpg y ai (adobe ilustrator). Ahora solo nos falta subirlo a la web de la forma más profesional posible.
Como la imagen jpg estaba en un tamaño muy grande (medidas) con photoshop redujimos la imagen (de manera proporcional) , subimos esta imagen a la web, pero notamos que si hacemos zoom en la pantalla, para ver más grande el logo, la imagen se ve pixelada ( pierde calidad, se distorsiona), lo intentamos también en formato png , queda algo mejor pero continúa el problema. Por último abrimos el archivo con formato ai ( adobe ilustrator ) en ilustrator, y lo convertimos a svg con la idea de subirlo en este formato ( vectorial ), pero parece que prestashop no lo admite o vuelve a transformar la imagen a jpg, ya que al inspeccionar el logo, nos muestra que está en jpg.
Nos gustaría dar con la solución, de manera que si se hace zoom en el navegador, para aumentar el tamaño de la pantalla, el logo continúe viéndose perfecto.
Ahora mismo no está del todo mal, pero intentamos cuidar al máximo cada detalle y transmitir en la web el cariño, esfuerzo y profesionalidad con la que hemos intentado trabajar en cada momento.
Fuera de la web, se puede ampliar el tamaño ( medidas) de la imagen, o reducir y no pierde calidad gráfica.
Gracias, saludos.
URL del sitio: Contenido solo visible a usuarios registrados
Hola
En el caso de PrestaShop para incluír el logo .svg tendrías que hacerlo directamente en los archivos del theme ya que como comprabaste de manera nativa no lo soporta.
Para saber que archivo tocar, depende del theme que estas usando, sin embargo de manera general debes buscar el archivo header.tpl
Saludos.
Gracias por tu respuesta.
He visto el archivo header.tpl, pero no se como subir el logo en svg.
He visto este tutorial: http://antonio-ventura.com/logo-in-svg-format/ , no se si será correcto para mi caso,
o quizás me recomiendas otra manera de hacerlo. Algún otro tutorial, algún vídeo ...
Saludos
Hola Rodrigo,
He revisado el post de Antonio Ventura y aparentemente parece viable (no lo he probado). Su post es de 2014 y muchas cosas han cambiado en PrestaShop desde entonces por lo que si lo pruebas haz primero una copia de seguridad de tu web y específicamente de los archivos a modificar para evitar contratiempos.
Saludos
Buenos días, gracias. He seguido las indicaciones del tutorial, pero como resultado no se ve el logo. Ni en jpg ni en svg. Solo se ve cuando la web está en modo mantenimiento.
Explico algunos detalles y dudas, es posible que notéis algún error de mi parte:
Mi archivo header.tpl , en las líneas a las que hace referencia el tutorial, estaba asÏ:
Y LO HE DEJADO TAL CUAL PONE EL TUTORIAL
CON RESPECTO A LA IMAGEN CON EL LOGO, HE RENOMBRADO AL LOGO, COMO logo.svg y lo he colocado en la carpeta img de la carpeta themes(mi plantilla)
POR ÚLTIMO, he abierto el archivo global.css , y he agregado el código que indica el tutorial, lo he agregado en la parte final del archivo, dejo una copia aquí de como ha quedado esa parte final, incluyendo unas lineas anteriores.
font-size: 17px; padding: 8px 29px 10px; }table#product_comparison .prices-container .old-price { padding: 0 10px; }#habla_window_div #habla_topbar_div { background: #161717 !important; }.label-danger,.label-success { color: #fff; padding: 6px 7px 5px; margin-bottom: 3px; font: 300 12px/1 Arial, Helvetica, sans-serif; border-radius: 0; border: none; }li { list-style-type: none; }ul.step li.step_current,ul.step li.step_current span:after { background: #158423; border-color: #158423; }ul.step li.step_done a:after,ul.step li.step_done.step_done_last a:after,ul.step li.step_done { background: #232323; border-color: #000; color: #5d6a7f; }ul.step a:hover,ul.step a:hover:after { background: #161717 !important; border-color: #161717 !important; }.block .products-block li .products-block-image { background-color: #fff; }.account_creation :nth-child(9) { display: none !important;}.checkbox label { color: #30b0fb!important;}/*************************************************************** EXTRA STYLES - MODIFICACIONES 2017-07-04****************************************************************//******************************* BLOCK GENERAL********************************/@media (max-width:767px) AND (min-width:480px){ #htmlcontent_top ul.htmlcontent-home { margin-top: 0; }}@media (max-width:767px){ .stickUpTop { background: #000; }}/******************************* END BLOCK GENERAL********************************/
#header_logo {
fondo: url (../ img / logo.svg) no-repeat scroll 0 0/100% 100% RGBA (0, 0, 0, 0);
display: inline-block;
anchura: 330px;
altura: 150 píxeles;
}
#header_logo a {
display: block;
altura: 150 píxeles;
overflow: hidden;
text-indent: -34em;
}
#header_logo a: focus {
frontera: medio ninguno;
Esquema: medio ninguno;
}
#header_logo a: active {
frontera: medio ninguno;
Esquema: medio ninguno;
}
Gracias, saludos!
Hola
En el tutorial lo pone como fondo de una etiqueta de link, esto es más complicado, simplemente en código que tienes
Cambia simplemente la ruta:
src="{$logo_url}"
Suponiendo que tu logo esta en la raiz de tu sitio, entonces:
Por la ruta en donde esta tu logo
src="/logo.svg"
Saludos.
Pongo un momento, en modo online la tienda.
Podrías, por favor, indicarme como debería quedar el código.
No logro entender lo que me indicas.
Gracias
Hola
Tal como te indiqué, sólo necesitas cambiar la fuente de la etiqueta img, es decir el atribut src
Sube tu logo .svg dentro de la carpeta img de tu sitio, suponiendo que se llame logo.svg entonces tendrías que usar esta url:
Contenido solo visible a usuarios registrados
Saludos.
Buenas Jhon,
He subido nuevamente el archivo original header.tpl , y modifiqué la ruta al src, dejando el archivo como te lo muestro a continuación. Y sigue sin mostrar el logo.
También probé a ponerlo así tal cual me lo indicas, src="/img/logo.svg" , también lo puse con la ruta absoluta, poniendo la url , y por último con la ruta completa según lo veo cuando accedo desde filezilla :
src"/public_html/themes/theme1142/img/logo.svg"
De ningún modo se muestra el logo.
Con respecto a la modificación en el global.css , probé usando el archivo original y he probado utilizando el archivo modificado como indica el tutorial. Debería utilizar el original?
Hola
Lo que sucede es que estas usando una ruta relativa a la raiz de tu sitio y sin embargo el logo lo has puesto en los archivos del theme, en todo caso puedes usar esta url como parte del src
Contenido solo visible a usuarios registrados
Usa una url no una ruta con public_html, ya que esta carpeta no existe como url.
Saludos.
Hola
Envía mejor tu archivo header.tpl del theme que usas, puedes subirlo en .zip
Habilita tu web temporalmente para revisar la ruta que se genera.
Saludos.
Hola
Te falta el http://, las urls siempre van con http, en tu caso no la has puesto y has usado directamente www
Coloca la url completa
Saludos.
Gracias Jhon! Por fin!! Ahora si se ve el logo en svg. De manera que si se hace zoom en el navegador, ahora no queda pixelado como ocurría con la imagen jpg o png.
Por último, un par de dudas.
1- Quisiera que el logo se vea un poco más grande de lo que se ve ahora. ¿Debería modificar la medida en el código que agregué en el archivo global.css, o desde donde debería hacerlo?
2- Estuve buscando como comprimir el logo.svg , utilicé un compresor online, pero se redujo muy poco, y el archivo logo.svg continúa pesando demasiado, tiene 1,3 MB. Ahora que está funcionando quisiera reemplazarlo por un archivo que pese muchísimo menos y no dejarlo así para que no ralentice la carga de las páginas.
Gracias otra vez ! Saludos.