Jump to content

Modificar aspecto de las subcategorías

systemcdh
 Share

Recommended Posts

systemcdh Newbie

systemcdh

Posted
Posted

Hola a todos!

He intentado modificar el aspecto de las subcategorías pero no he conseguido lo que quería:

http://www.systemcdh.com/16-control-de-acceso

Yo quiero que me salgan 4 columnas y luego se incrementen las filas en función de las subcategorias que yo inserte. Me gustaria que solamente saliera la imagen y el título debajo de la imagen y que la descripción de la subcategoría solo se viera una vez dentro de esta. He intentado modificar el archivo category.css pero me ha quedado así de mal. Gracias por la ayuda. 

Link to comment
Share on other sites
ventura Community Regular

ventura

Posted
Posted

Para editar el tamaño de la imagen de las categorias desde Preferencias / Imagenes / y editas el tamaño de la imagen asociada a las categorias, luego regeneras miniaturas (solo las imagenes de las categorías)

 

Para el espacio entre las imágenes  dale más width en el 

.inline_list li
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Hola a todos! ¿Como logro poner mas grandes las imágenes, y las categorías mas separadas?. Me esta constando mucho, a ver si me podeis ayudar. Gracias. Os dejo el link: http://www.systemcdh.com/17-sistemas-de-seguiridad

 

Cuidado con editar el tipo

medium_default

en la pestaña Preferencias -> Imagenes, ya que ese tipo esta usado en otras partes de la tienda, para hacer las imagenes mas grandes, mejor crea un tipo llamado:

subcategorias

en la misma pestaña Preferencias -> Imagenes, por ejemplo con las medidas: 

125 ancho
125 alto

guarda los cambios, y dile que se aplique a las categorias, y despues regenera las imagenes de ese tipo, despues en tu fichero:

category.tpl

cambia esto:

<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
                                                {if $subcategory.id_image}
                                                        <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')|escape:'html'}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                                                {else}
                                                        <img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                                                {/if}
</a>

por esto:

<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
                                                {if $subcategory.id_image}
                                                        <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'subcategorias')|escape:'html'}" alt=""  />
                                                {else}
                                                        <img src="{$img_cat_dir}default-subcategorias.jpg" alt=""  />
                                                {/if}
</a>

Despues, veo que has puesto, en tu fichero:

http://www.systemcdh.com/themes/default/css/category.css

Esto:

.inline_list li {
padding: 100px 0;
border-bottom: 1px dotted #ccc;
float: left;
width:89px;
}

Mejor asi:

.inline_list li {
padding: 10px 0px;
border-bottom: 1px dotted #ccc;
float: left;
width: 127px;
margin-right: 8px;
height: 158px;
overflow: hidden;
}

Despues, en el fichero:

category.tpl

cambia  esto:

{foreach from=$subcategories item=subcategory}
                                <li class="clearfix">

por esto

{foreach from=$subcategories item=subcategory name=subcategories}
	   <li class="clearfix {if $smarty.foreach.subcategories.first}first_item{elseif $smarty.foreach.subcategories.last}last_item{/if} {if $smarty.foreach.subcategories.iteration%4 == 0}last_row_item{else}item{/if}">

Ahora, volvemos al fichero:

category.css

y debajo de esto:

.inline_list li {
padding: 10px 0px;
border-bottom: 1px dotted #ccc;
float: left;
width: 127px;
margin-right: 8px;
height: 158px;
overflow: hidden;
}

Agregamos esto:

.inline_list li.last_row_item{
margin-right: 0px;
}

----

 

Por ultimo, en tu fichero:

category.css

Esto que tienes ahora:

.inline_list li .cat_name {
font-weight: bold;
font-size: 13px;
clear: both;
display: block;
}

Dejalo asi:

.inline_list li .cat_name {
font-weight: bold;
font-size: 13px;
clear: both;
display: block;
height: 31px;
overflow: hidden;
}

En resumen, haciendo estos cambios, sobre tu web, quedara como en la siguiente captura:

 

grid.png

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Ah y añado, que supongo no se te olvide comentar esto en tu fichero:
 

/themes/default/category.tpl

  {if $subcategory.description}
                                                <p class="cat_desc">{$subcategory.description}</p>
                                        {/if}

por esto
 

{*

  {if $subcategory.description}
                                                <p class="cat_desc">{$subcategory.description}</p>
                                        {/if}

*}

Para que en caso de que tengas la descripcion de la subcategoria, no se vea, y se vea simplemente el titulo de la categoria con la imagen.
 
Tambien es recomendable, cambiar esto:
 

<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>

por esto:
 

<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|strip_tags:'UTF-8'|truncate:45:'...'}</a>

Lo de 45 lo he puuesto al azar, ya tu calculas como queda mejor, es para recortar el nombre de la subcategoria en la visualizacion y colocarle puntos suspensivos si es muy largo.

Link to comment
Share on other sites
systemcdh Newbie

systemcdh

Posted
  • Author
Posted

Ah y añado, que supongo no se te olvide comentar esto en tu fichero:

 

/themes/default/category.tpl

  {if $subcategory.description}
                                                <p class="cat_desc">{$subcategory.description}</p>
                                        {/if}

por esto

 

{*

  {if $subcategory.description}
                                                <p class="cat_desc">{$subcategory.description}</p>
                                        {/if}

*}

Para que en caso de que tengas la descripcion de la subcategoria, no se vea, y se vea simplemente el titulo de la categoria con la imagen.

 

Tambien es recomendable, cambiar esto:

 

<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>

por esto:

 

<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|strip_tags:'UTF-8'|truncate:45:'...'}</a>

Lo de 45 lo he puuesto al azar, ya tu calculas como queda mejor, es para recortar el nombre de la subcategoria en la visualizacion y colocarle puntos suspensivos si es muy largo.

 

Muchisimas gracias, ya lo tengo pefecto, solamente me queda central el texto de la descripción de las categorías. Gracias otra vez

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Muchisimas gracias, ya lo tengo pefecto, solamente me queda central el texto de la descripción de las categorías. Gracias otra vez

 

Sera el nombre de la subcategoria, no la descripcion, ya que esa la ocultamos.

 

En ese caso, esto que has modificado asi:


.inline_list li .cat_name {
font-weight: bold;
font-size: 13px;
clear: both;
display: block;
height: 31px;
overflow: hidden;
}

hace unos segundos en tu fichero:

themes/default/css/category.css

pues dejalo asi:

.inline_list li .cat_name {
font-weight: bold;
font-size: 13px;
clear: both;
display: block;
height: 31px;
overflow: hidden;
text-align: center;
}
Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...