Texto en categorías solapa imagen

ikku · April 2, 2015

Hola,

Tengo una web en prestashop con un tema variante de default-bootstrap pero que es practicamente lo mismo y tengo un problema al añadir descripción en las categorías, porque se me solapa con la imagen de la misma, ¿hay alguna manera de desplazar la descripción hacia abajo para que quede justo después de la imagen?

Un ejemplo de lo que digo en:

http://keprecio.es/kerastase/

Muchas gracias

clicky · April 2, 2015

Hola prueba este código en "v_53_54f8a2ba562ba42a6d10a7e19283b1c6_all.css"

Con este pequeño cambio pasas el texto a la derecha fuera de la imagen, y la imagen se ve entera. Ántes de ningún cambio recuerda guardar copia de seguridad del fichero que modifiques.

.content_scene_cat p {
  width: 25%;
  margin-top: -10px;
  margin-left: 674px;
  color: black;
}

Edited April 2, 2015 by clicky (see edit history)

ventura · April 2, 2015

Edita el archivo

\themes\tu_tema\category.tpl

Busca esta parte

                    <!-- Category image -->
                    <div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) right center no-repeat; background-size:cover; min-height:{$categorySize.height}px;"{/if}>
                        {if $category->description}
                            <div class="cat_desc">
                            <span class="category-name">
                                {strip}
                                    {$category->name|escape:'html':'UTF-8'}
                                    {if isset($categoryNameComplement)}
                                        {$categoryNameComplement|escape:'html':'UTF-8'}
                                    {/if}
                                {/strip}
                            </span>
                            {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short" class="rte">{$description_short}</div>
                                <div id="category_description_full" class="unvisible rte">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div class="rte">{$category->description}</div>
                            {/if}
                            </div>
                        {/if}
                     </div>
                  {/if}
            </div>
		{/if}

Y dejala asi

                    <!-- Category image -->
                    <div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) right center no-repeat; background-size:cover; min-height:{$categorySize.height}px;"{/if}>
                        {if $category->description}
                            <div class="cat_desc">
                            <span class="category-name">
                                {strip}
                                    {$category->name|escape:'html':'UTF-8'}
                                    {if isset($categoryNameComplement)}
                                        {$categoryNameComplement|escape:'html':'UTF-8'}
                                    {/if}
                                {/strip}
                            </span>
                       
                            </div>
						
                        {/if}
                     </div>
                  {/if}
            </div>
				     {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short" class="rte">{$description_short}</div>
                                <div id="category_description_full" class="unvisible rte">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div class="rte">{$category->description}</div>
                            {/if}
		{/if}

clicky · April 2, 2015

Ventura perdona si me equivoco porque ni de lejos tengo tu experiencia, pero con tu solución lo que se hace es eliminar la descripción de la categoría, verdad? y si quisiera tenerla pero que no le moleste con la foto?

Un saludo

ventura · April 2, 2015

Ventura perdona si me equivoco porque ni de lejos tengo tu experiencia, pero con tu solución lo que se hace es eliminar la descripción de la categoría, verdad? y si quisiera tenerla pero que no le moleste con la foto?

Un saludo

La descripcion sigue apareciendo pero fuera del contenedor de la imagen, es decir aparece debajo de la imagen

ikku · April 2, 2015

Muchas gracias a ambos!, voy a probar y os comento

aixos · April 5, 2015

La imagen a la izquierda y el texto a la derecha ¿como hacerlo? y fuera del contenedor

tendría que quedar así

Edited April 5, 2015 by aixos (see edit history)

ventura · April 5, 2015

Algo asi

    <!-- Category image -->
					<div class="row">
					<div class="col-xs-12 col-sm-12">
<div class="col-xs-12 col-sm-6">
                    <div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) right center no-repeat; background-size:cover; min-height:{$categorySize.height}px;"{/if}>
                        {if $category->description}
                            <div class="cat_desc">
                            <span class="category-name">
                                {strip}
                                    {$category->name|escape:'html':'UTF-8'}
                                    {if isset($categoryNameComplement)}
                                        {$categoryNameComplement|escape:'html':'UTF-8'}
                                    {/if}
                                {/strip}
                            </span>
                       
                            </div>
						
                        {/if}
                     </div>
                  {/if}
            </div>
			</div>
			<div class="col-xs-12 col-sm-6">
				     {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short" class="rte">{$description_short}</div>
                                <div id="category_description_full" class="unvisible rte">{$category->description}</div>
         		 <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div class="rte">{$category->description}</div>
                            {/if}
		{/if}
		</div></div></div>

aixos · April 5, 2015

Ventura, Gracias por tu pronta respuesta

la web de referencia es esta y a ellos les funciona, puedes mirar el codigo aqui con el firebug http://piensoymascotas.com/27-pienso-perros-advance Es así que nos gustaria a nosotros que saliera.

ventura · April 5, 2015

Tendras que editar el tamaño de las imagenes de las categorias con un tamaño cuadrado de 125px

aixos · April 6, 2015

No sale bien , lo que busco es que salga como la imagen adjunta del post 7

Saludos

clicky · April 6, 2015

Con mi solución se me queda así, pero también te digo que entiendo que no es una gran solución. Ya nos comentas cómo lo ves

ventura · April 6, 2015

Tienes que cambiar el tipo de imagen de categoria y poner la de 125px, la medium_default

Edited April 6, 2015 by ventura (see edit history)

aixos · April 6, 2015

En el post 9 , he puesto el enlace y mirando con el Firebug veo esto puesto ".pym_category_image"

<div class="content_scene_cat">
<img class="pym_category_image replace-2x" width="125" height="125" alt="" src="http://media1.piensoymascotas.com/c/5-medium_default/pienso-para-perros.jpg">

y luego esto

.pym_category_image {
    border: 1px solid #d6d4d4;
    float: left;
    margin: 0 33px 5px 0;
}

seguro que la solucion esta por ahí

calpee · June 2, 2015

muchas gracias por la ayuda! funcionó!

rfer2001 · June 4, 2015

Hola Aixos,

¿has podido solucionar algo? El link que pones como ejemplo es exactamente lo que quiero hacer yo también, además de haber adaptado bien el h1. No consigo poner el h1 solo en el título, excluyendo Hay 483 productos.

He estado modificando category.tpl y category.css pero sin resultados. ¿Alguien me puede decir como hacer?

Muchas gracias!

Ros

aixos · June 4, 2015

Hola , No , no lo puede cuadrar bien

Saludos

alexinter16 · June 29, 2015

Hola leyendo este foro y teniendo el mismo problema, logré solucionarlo con los aportes de todos tal como se queria con el ejemplo del post #9.

Se deben seguir los siguientes Pasos.

1- Personailizar Prestashop con css (aplica para prestashop 1.6.0.14)

Para personalizar los estilos de mi tema sin tocar los .css originales debes agregar esta línea:

Al archivo header.tpl ubicado en la carpeta del tema después de la línea : {foreach from=$css_files key=css_uri item=media}.

2- Arreglar la imagen y texto de la categoría:

Reemplazar en el archivo category.tpl (todo el bloque que hay dentro; desde  hasta  con el que escribo a continuación)

{if $category->id_image}

<img class="pym_category_image replace-2x" src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'medium_default')|escape:'html':'UTF-8'}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />

{else}

{/if}

<h1 class="page-heading{if (isset($subcategories) && !$products) || (isset($subcategories) && $products) || !isset($subcategories) && $products} product-listing{/if}"><span class="cat-name">{$category->name|escape:'html':'UTF-8'}{if isset($categoryNameComplement)} {$categoryNameComplement|escape:'html':'UTF-8'}{/if}</span></h1>

{if $category->description}

{if Tools::strlen($category->description) > 350}

<div id="category_description_short" class="rte">{$description_short}</div>

<div id="category_description_full" class="unvisible rte">{$category->description}</div>

<a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>

{else}

<div class="rte">{$category->description}</div>

{/if}

</div>

{include file="$tpl_dir./category-count.tpl"}

{/if}

</div>

{/if}

{if isset($subcategories)}

{if (isset($display_subcategories) && $display_subcategories eq 1) || !isset($display_subcategories) }

3 - Añadir al archivo my_style.css

/*imagen de categoria para que no se cruce con texto*/

.pym_category_image {

border: 1px solid #d6d4d4;

float: left;

margin: 5px 33px 5px 0;

}

/*Color descripcion de categoria*/

.content_scene_cat p {

color: #000000;

}

--------------

Saludos desde Colombia y un placer aportar.

apositivo · June 30, 2015

Si das el tema como solucionado, edita el titulo del tema, editando el primer mensaje, pulsando en editar, y después en "Usar editor completo", añadiendo la palabra "Solucionado" al titulo, esto ayudara, a mantener una mayor organización en el foro.

Si no encuentras como añadir la palabra "Solucionado" al título del tema, aquí tienes una guía: http://www.prestasho...itulo-del-tema/

aixos · June 30, 2015

alexinter16, acabo de probar y no sale lo mismo que post #9

¿puedes poner un ejempo?

alexinter16 · June 30, 2015

Hola aixos,

Visita este link:

para que aprendas y puedas personalizar tu .css

es necesario que se ponga este estilo para que la imagen quede a la izquierda del texto luego de modificar el archivo category.tpl

reemplazando el bloque de codigo que escribí en el post #18

Añadir al archivo my_style.css

/*imagen de categoria para que no se cruce con texto*/

.pym_category_image {

border: 1px solid #d6d4d4;

float: left;

margin: 5px 33px 5px 0;

}

Saludos.

aixos · June 30, 2015

Hola supongo que lo haces de una plantilla duplicada.

de todas forma veo que el archivo tú lo llamas Añadir al archivo my_style.css

y es Añadir al archivo my_styles.css

Edited June 30, 2015 by aixos (see edit history)

feryseg · August 13, 2015

Hola, he realizado una serie de modificaciones en mi tienda, he cambiado el meta título, la meta descripción, la descripción, las palabras clave de cada categoría, y demás para que me encuentren más fácil, pero ya llevo casi 15 días esperando que se reflejen los cambios y nada, sigue apareciendo la descripción que tenía anteriormente... ¿Será que estoy haciendo algo mal?, ¿cuánto tiempo se demoran los cambios en actualizar?. Gracias.

clicky · August 13, 2015

Por favor feryseg lo has hecho mal, lee las normas cuando desconoces un foro nuevo como puede ser éste para ti. Sólo así podrás obtener respuesta y con ella, ayuda. Para tu pregunta debes iniciar un hilo nuevo, no usar uno existente. Un saludo y bienvenido

Eusebio100 · August 18, 2015

Hola, he probado las opciones que se dan en este hilo y todas me han dado problemas. La opción del post 18 en principio parece que funciona, la imagen queda perfectamente posicionada, pero afecta en algo al desplegable de categorías, ya que en dicho desplegable en la columna no permite seleccionar el último nivel de categorías (tengo ps 1.6.0.11).

Finalmente lo he modificado por mi cuenta y creo que es incluso más sencillo que las opciones anteriores, ni siquiera hay que tocar el css. Pongo el bloque completo del archivo category.tpl (desde  hasta  ) por si le sirve a alguien.

Opción 1 (se mantiene el mismo formato que lleva el tema por defecto):

<!-- Category image -->
                    {if $category->level_depth > 2}
                       <div class="content_scene_cat_bg" style="vertical-align:middle;">
                         {if $category->id_image}
                           <img style=" float:left; margin-right:35px;" src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'medium_default')|escape:'html':'UTF-8'}" alt="{$category->name|escape:'html':'UTF-8'}" />
                         {/if}
                    {else}
                           <div class="content_scene_cat_bg">
                         {if $category->id_image}
                           <img style=" float:left; margin-right:35px; margin-top:-15px;" src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}" alt="{$category->name|escape:'html':'UTF-8'}" />
                         {/if}
                    {/if}
                        {if $category->description}
                            <div class="cat_desc">
                            <span class="category-name">
                                {strip}
                                    {$category->name|escape:'html':'UTF-8'}
                                    {if isset($categoryNameComplement)}
                                        {$categoryNameComplement|escape:'html':'UTF-8'}
                                    {/if}
                                {/strip}
                            </span>
                            {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short" class="rte">{$description_short}</div>
                                <div id="category_description_full" class="unvisible rte">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div class="rte" style="padding-top:15px; padding-bottom:15px;">{$category->description}</div>
                            {/if}
                            </div>
                                <div style="height:30px;"></div>
                        {/if}
                     </div>
                  {/if}
            </div>
		{/if}
		<h1 class="page-heading{if (isset($subcategories) && !$products) || (isset($subcategories) && $products) || !isset($subcategories) && $products} product-listing{/if}"><span class="cat-name">{$category->name|escape:'html':'UTF-8'}{if isset($categoryNameComplement)} {$categoryNameComplement|escape:'html':'UTF-8'}{/if}</span>{include file="$tpl_dir./category-count.tpl"}</h1>
		{if isset($subcategories)}
        {if (isset($display_subcategories) && $display_subcategories eq 1) || !isset($display_subcategories) }
		<!-- Subcategories -->

Opción 2 (encabezado h1 y contador de productos dentro del bloque de la imagen):

<!-- Category image -->
                    {if $category->level_depth > 2}
                       <div class="content_scene_cat_bg" style="vertical-align:middle;">
                         {if $category->id_image}
                           <img style=" float:left; margin-right:35px;" src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'medium_default')|escape:'html':'UTF-8'}" alt="{$category->name|escape:'html':'UTF-8'}" />
                         {/if}
                    {else}
                           <div class="content_scene_cat_bg">
                         {if $category->id_image}
                           <img style=" float:left; margin-right:35px; margin-top:-15px;" src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}" alt="{$category->name|escape:'html':'UTF-8'}" />
                         {/if}
                    {/if}
                        {if $category->description}
                            <div class="cat_desc">
                            <h1 style="font-weight:600; font-size:42px; line-height:50px; font-family:'Open Sans',sans-serif; color:#002a00;">
                                {strip}
                                    {$category->name|escape:'html':'UTF-8'}
                                    {if isset($categoryNameComplement)}
                                        {$categoryNameComplement|escape:'html':'UTF-8'}
                                    {/if}
                                {/strip}
                            </h1>
                            {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short" class="rte">{$description_short}</div>
                                <div id="category_description_full" class="unvisible rte">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div class="rte" style="padding-top:10px; padding-bottom:15px;">{$category->description}</div>
                            {/if}
                            <span style="color:#333;">{include file="$tpl_dir./category-count.tpl"}</span>
                            </div>                                
                        {/if}
                     </div>
                  {/if}
            </div>
		{/if}		
		{if isset($subcategories)}
        {if (isset($display_subcategories) && $display_subcategories eq 1) || !isset($display_subcategories) }
		<!-- Subcategories -->

- En preferencias/imágenes: Cambiar tamaño de category_default a 185×185 y regenerar miniaturas (puede ser un tamaño diferente, aunque puede que sea necesario reajustar los mágenes).

- Para poner la imagen en el lado derecho cambiar float:left; margin-right:35px; por float:right; margin-right:5px; .

- Como dije antes no es necesario tocar el CSS.

Texto en categorías solapa imagen

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in