Jump to content

"solucionado"como Configurar La Cantidad De Columnas De Una Categoria

intima
 Share

Recommended Posts

intima Newbie

intima

Posted
Posted (edited)

Hola buenas, tengo una duda.

Quiero hacer las imagenes de mis productos mas grandes al mostrarse en el catalogo de categorias, e intentado modificarlas en preferencias/imagenes y pese a que no tengo completamente claro como hacerlo e conseguido cambiarles la proporción el problema es que se montan unas encima de otras creo yo que al mostrar 4 columnas de las categorías pues se montan para que quepan. Mi problema es como consigo que en las categorias se muestren 3 columnas y asi yo luego cambiar el tamaño de las imagenes a mi gusto si que estas se monten unas encima de otras, que tenga mas espacio al suprimir una columna.

Gracias de antemano :)

Edited by intima (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
intima Newbie

intima

Posted
  • Author
Posted (edited)

category.css de tu plantilla

 

¿Url web chienda?

category.css de tu plantilla

 

¿Url web chienda?

Vale voy a mirar ahi y te digo la url es www.intimatethings.es

Gracias

 

Bueno tengo abierto el archivo category.css y me encuentro con esto:

 

 

 

h1 {display:none;}

 

.resumecat {

background: none repeat scroll 0 0 transparent;

color: #000;

font-size: 11px;

font-weight: normal;

margin: 0;

padding: 0;

text-transform:none;

}

 

.content_scene_cat {

padding:5px;

border:1px solid #e4e4e4;

}

 

.cat_desc {

font-size:12px;

line-height:18px;

}

.cat_desc p {padding:0 10px 5px 10px}

.cat_desc .lnk_more {

padding:0 10px;

color:#000;

background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent;

}

 

 

/*************************************************************************************************

SUB CATEGORIES

************************************************************************************************ */

.inline_list {

list-style-type: none;

margin-top: 1em;

overflow: hidden;

}

body#category #subcategories li {margin: 0 5px;}

body#category #subcategories {clear: both;}

.inline_list li {float: left;text-align: center;}

.inline_list img {display: block;}

.inline_list li .img { margin-right:15px;}

.inline_list li .cat_name { font-weight:bold; font-size:13px; color:#9E9E9E;}

.inline_list li .cat_name:hover { color:#FEA224;}

#category #center_column h1{display:block!important;font-size:15px;}

 

 

no se exactamente que cambiar

Edited by intima (see edit history)
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Hola Intima !

 

Cuanto tiempo sin verte en el foro.

 

Estoy navegando por tu web !

 

Lo primero, ve al fichero:

 

/themes/PRS020047/css/category.css

 

Busca esto:

 

.inline_list li .cat_name { font-weight:bold; font-size:13px; color:#9E9E9E;}

 

Y lo dejas así:

 

.inline_list li .cat_name {
font-weight: bold;
font-size: 13px;
color: #9E9E9E;
clear: both;
display: block;
height:23px;
}

 

Despues en tu caso, ve al fichero:

 

/themes/PRS020047/css/category.css

 

Busca esto:

 

.inline_list li {float: left;text-align: center;}

 

 

Y dejalo asi:

 

.inline_list li {
float: left;
text-align: center;
width: 137px;
}

 

En el mismo fichero, busca esto:

 

body#category #subcategories li {margin: 0 5px;}

 

Y dejalo asi:

 

body#category #subcategories li {
margin: 0px 34px 0px 5px;
}

 

Despues vas a la pestaña Preferencias -> Imagenes, yo te recomendaria crear un nuevo tipo de imagen, depende editar el que tengas ya que es posible que ese mismo tipo de imagen lo estes usando en otra parte de tu tienda.

 

Crea un nuevo tipo de imagen en la pestaña Preferencias -> Imagenes.

 

Establece los siguientes datos en el nuevo tipo de imagen:

 

Nombre: SuperMan

Ancho: 171

Alto: 148

Aplicalo solo a las categorías.

 

Guarda los cambios y despues en la misma pestaña Preferencias -> Imagenes, regenera las miniaturas.

 

Despues ve al fichero:

 

/themes/PRS020047/css/category.tpl

 

Busca esto:

 

{if $subcategory.id_image}
   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
  {else}
   <img src="{$img_cat_dir}default-medium.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
  {/if}

 

Y dejalo asi:

 

{if $subcategory.id_image}
   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'SuperMan')}" alt="" " />
  {else}
   <img src="{$img_cat_dir}default-SuperMan.jpg" alt=""  />
  {/if}

 

Un Saludo

Link to comment
Share on other sites
intima Newbie

intima

Posted
  • Author
Posted

Hola de nuevo :)

Siento decirte que sigo los pasos que me indicas y no veo cambios en la web. Me e asegurado dos veces , todos los pasos que me indicas son correctos por que encuentro en cada archivo el texto que me indicas y lo sustituyo sin problemas, incluso me e fijado que en la ultima parte debe llevar escrito el nombre de la misma configuración nueva de imagen en este caso "SuperMan" hasta ahí todo correcto pero sigo viendo cuatro columnas en las secciones de categorías :(

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Hola de nuevo :)

Siento decirte que sigo los pasos que me indicas y no veo cambios en la web. Me e asegurado dos veces , todos los pasos que me indicas son correctos por que encuentro en cada archivo el texto que me indicas y lo sustituyo sin problemas, incluso me e fijado que en la ultima parte debe llevar escrito el nombre de la misma configuración nueva de imagen en este caso "SuperMan" hasta ahí todo correcto pero sigo viendo cuatro columnas en las secciones de categorías :(

 

Aumenta el width del

 

.inline_list li

 

a

 

150px

 

depende a

 

137px

 

que es como lo has dejado ahora. (Esto recuerda que es en el category.css)

 

PD: Creia que lo querias a 4 columnas y no a 3, por eso te lo deje con el ancho para 4, pero si lo colocas a 137px se te vera a 3 columnas.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Sisi :) estaba haciendo los cambios y sigo viendo 4 columnas. He encontrado y modificado de 137 a 150 en el .inline_list li pero no e encontrado cambios en las columnas. siento decirte :(

 

Yo veo las subcategorías de 3 en 3 aquí: http://www.intimatethings.es/index.php?id_category=12&controller=category&id_lang=4 si no las ves limpia la cache de tu navegador.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Bueno pues vamos a por ello :D

 

 

Actualmente se te ven de 4 en 4 el listado de productos, para que en tu caso particular se vea de 3 en 3..

 

En tu caso particular y predeterminado por tu plantilla ve al fichero:

 

Primero paso.

 

/themes/PRS020047/product-list.tpl

 

Busca esto:

 

{assign var='columnCount' value=4}

 

Y dejalo asi:

 

{assign var='columnCount' value=3}

 

Y fuerza compilación, por que en este caso has modificado un fichero *.tpl

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

2º Paso

 

Una vez hecho eso, ve al fichero:

 

/themes/PRS020047/css/product_list.css

 

Busca esto:

 

ul#in_grid li {
float: left;
text-align: center;
margin: 8px;
width: 165px;
}

 

Y dejalo así:

 

ul#in_grid li {
float: left;
text-align: center;
margin: 8px;
width: 224px;
}

 

Despues ve a la pestaña Preferencias -> Imagenes, edita el "home_default" y cambia las medidas a 200 de ancho por 200 de alto , guarda los cambios.

 

Despues en la misma pestaña Preferencias -> Imagenes, al final del todo regenera las miniaturas.

 

Un Saludo

Link to comment
Share on other sites
intima Newbie

intima

Posted
  • Author
Posted

perdona pero no me encuentra esa busqueda en product_list

este es el codigo :

 

ul#product_list {

list-style-type: none

}

#product_list li {

 

}

#product_list li a {

color: #374853;

text-decoration: none

}

 

 

#product_list li .left_block .compare label {display:none;}

 

#product_list li p.compare input {

vertical-align: text-bottom

}

 

#product_list li .center_block {

float: left;

width: 560px;/* 356 */

margin-left:20px;

 

}

#product_list a.product_img_link {

/*overflow:hidden;

position:relative;

float: left;

display:block;

margin-right: 14px;*/

 

}

#product_list a.product_img_link img {

display: block;

vertical-align: bottom

}

#product_list li span.new {

background: url("../img/new-sale-2.png") no-repeat scroll 0 0 transparent;

color: #FFFFFF;

display: block;

font-size: 0;

height: 47px;

padding: 1px 4px;

position: absolute;

right: -8px;

text-align: center;

text-transform: uppercase;

top: 0;

width: 46px;

}

#product_list li h3 {

padding:0;

font-size:13px;

color:#000;

}

 

 

#product_list li p.product_desc {

overflow: hidden;

padding:0;

line-height:16px;

}

#product_list li p.product_desc,

#product_list li p.product_desc a {

color:#888;

margin-bottom:5px;

text-align:justify;

}

 

#product_list li .right_block {

position:relative;

float: left;

width: 145px;

text-align: right;

}

#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {

display: block;

font-weight: bold;

color: #990000;

text-transform: uppercase

}

#product_list li .discount {

background: none repeat scroll 0 0 #9B0000;

color: #FFFFFF;

font-size: 10px;

font-weight: bold;

margin: 0;

padding: 4px;

text-transform: uppercase;

width:86px;

}

#product_list li .online_only {

float: left;

margin: 0 0 2px;

width: 100%;

}

 

#product_list li .price {

display: block;

margin-bottom: 15px;

font-weight:bold;

font-size: 13px;

color:#A72B2B;

}

#product_list li span.availability {

display:none;

color: #488C40

}

#product_list li .ajax_add_to_cart_button {

font-size:12px;

color:#fff;

}

#product_list #list-view .ajax_add_to_cart_button {

font-size:12px;

color:#fff;

margin:3px 0;

}

 

#product_list #list-view .content_price{margin:5px 0;}

#product_list li .ajax_add_to_cart_button span {

/*display: block;

position: absolute;

top: -1px;

left: -12px;

height: 26px;

width: 26px;

background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent*/

}

#product_list li .lnk_view {

display: block;

margin-top:15px;

padding:0 10px;

border:none;

font-weight:bold;

color:#0088CC;

background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent

}

#product_list li .lnk_view:hover {text-decoration:underline}

/*=====================================================================================*/

ul#in_grid {

list-style-type: none;

overflow: hidden;

}

ul#in_grid li {

float: left;

text-align: center;

margin:8px;

width: 165px;

}

ul#in_grid li div.center_block {

 

}

ul#in_grid li div.top_block {

 

}

ul#in_grid a.product_img_link {

display: inline-block;

overflow: hidden;

position: relative;

text-align: center;

}

ul#in_grid a.product_img_link img {

 

 

 

}

 

#product_list li h3 a {

font-weight:bold;

color:#000;

}

#product_list li h3 a:hover {text-decoration:none; color:#A72B2B;}

 

#product_list li .content_price .price {

font-size: 13px;

margin: 0px!important;

}

.price, .price-shipping, .price-wrapping {

font-weight: bold;

margin-bottom: 6px;

white-space: nowrap;

color:#A72B2B;

font-size:13px;

}

ul#in_grid li .exclusive {

margin: 3px auto;

}

 

ul#in_grid li p.compare {

clear: both;

font-size: 11px;

margin: 5px 0 0;

text-align:center;

padding:0;

}

ul#in_list li p.compare{ font-size: 11px;

margin: 5px 0 0;

text-align:left;

padding:0;}

ul#in_list li {

border-bottom: 1px solid #DCD5CD;

overflow: auto;

padding: 12px 10px;

}

ul#in_list li .left_block {

float: left;

position:relative;

 

}

#list-view ul#in_list li {

border-bottom: 1px solid #eee;

overflow: auto;

padding:12px 0;

}

#list-view ul#in_list li.last_item { border-bottom:none;}

 

ul#in_list a.product_img_link {

float: left;

padding:6px;

}

 

#product_list .compare input{border:none;}

 

#product_list .content_price { margin:5px 0;}

.product_img {

background-color: #FFFFFF;

margin-bottom: 6px;

}

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

perdona pero no me encuentra esa busqueda en product_list

este es el codigo :

 

ul#product_list {

list-style-type: none

}

#product_list li {

 

}

#product_list li a {

color: #374853;

text-decoration: none

}

 

 

#product_list li .left_block .compare label {display:none;}

 

#product_list li p.compare input {

vertical-align: text-bottom

}

 

#product_list li .center_block {

float: left;

width: 560px;/* 356 */

margin-left:20px;

 

}

#product_list a.product_img_link {

/*overflow:hidden;

position:relative;

float: left;

display:block;

margin-right: 14px;*/

 

}

#product_list a.product_img_link img {

display: block;

vertical-align: bottom

}

#product_list li span.new {

background: url("../img/new-sale-2.png") no-repeat scroll 0 0 transparent;

color: #FFFFFF;

display: block;

font-size: 0;

height: 47px;

padding: 1px 4px;

position: absolute;

right: -8px;

text-align: center;

text-transform: uppercase;

top: 0;

width: 46px;

}

#product_list li h3 {

padding:0;

font-size:13px;

color:#000;

}

 

 

#product_list li p.product_desc {

overflow: hidden;

padding:0;

line-height:16px;

}

#product_list li p.product_desc,

#product_list li p.product_desc a {

color:#888;

margin-bottom:5px;

text-align:justify;

}

 

#product_list li .right_block {

position:relative;

float: left;

width: 145px;

text-align: right;

}

#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {

display: block;

font-weight: bold;

color: #990000;

text-transform: uppercase

}

#product_list li .discount {

background: none repeat scroll 0 0 #9B0000;

color: #FFFFFF;

font-size: 10px;

font-weight: bold;

margin: 0;

padding: 4px;

text-transform: uppercase;

width:86px;

}

#product_list li .online_only {

float: left;

margin: 0 0 2px;

width: 100%;

}

 

#product_list li .price {

display: block;

margin-bottom: 15px;

font-weight:bold;

font-size: 13px;

color:#A72B2B;

}

#product_list li span.availability {

display:none;

color: #488C40

}

#product_list li .ajax_add_to_cart_button {

font-size:12px;

color:#fff;

}

#product_list #list-view .ajax_add_to_cart_button {

font-size:12px;

color:#fff;

margin:3px 0;

}

 

#product_list #list-view .content_price{margin:5px 0;}

#product_list li .ajax_add_to_cart_button span {

/*display: block;

position: absolute;

top: -1px;

left: -12px;

height: 26px;

width: 26px;

background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent*/

}

#product_list li .lnk_view {

display: block;

margin-top:15px;

padding:0 10px;

border:none;

font-weight:bold;

color:#0088CC;

background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent

}

#product_list li .lnk_view:hover {text-decoration:underline}

/*=====================================================================================*/

ul#in_grid {

list-style-type: none;

overflow: hidden;

}

ul#in_grid li {

float: left;

text-align: center;

margin:8px;

width: 165px;

}

ul#in_grid li div.center_block {

 

}

ul#in_grid li div.top_block {

 

}

ul#in_grid a.product_img_link {

display: inline-block;

overflow: hidden;

position: relative;

text-align: center;

}

ul#in_grid a.product_img_link img {

 

 

 

}

 

#product_list li h3 a {

font-weight:bold;

color:#000;

}

#product_list li h3 a:hover {text-decoration:none; color:#A72B2B;}

 

#product_list li .content_price .price {

font-size: 13px;

margin: 0px!important;

}

.price, .price-shipping, .price-wrapping {

font-weight: bold;

margin-bottom: 6px;

white-space: nowrap;

color:#A72B2B;

font-size:13px;

}

ul#in_grid li .exclusive {

margin: 3px auto;

}

 

ul#in_grid li p.compare {

clear: both;

font-size: 11px;

margin: 5px 0 0;

text-align:center;

padding:0;

}

ul#in_list li p.compare{ font-size: 11px;

margin: 5px 0 0;

text-align:left;

padding:0;}

ul#in_list li {

border-bottom: 1px solid #DCD5CD;

overflow: auto;

padding: 12px 10px;

}

ul#in_list li .left_block {

float: left;

position:relative;

 

}

#list-view ul#in_list li {

border-bottom: 1px solid #eee;

overflow: auto;

padding:12px 0;

}

#list-view ul#in_list li.last_item { border-bottom:none;}

 

ul#in_list a.product_img_link {

float: left;

padding:6px;

}

 

#product_list .compare input{border:none;}

 

#product_list .content_price { margin:5px 0;}

.product_img {

background-color: #FFFFFF;

margin-bottom: 6px;

}

 

En el codigo que me has pegado si tienes el

 

ul#in_grid li

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

:D :D :DPerfectoooo ahora si, muchisimas gracias por todas las molestias de verdad, no te imaginas lo que me has ayudado :)

edito el mensaje como solucionado y de nuevo gracias y una saludo

 

 

 

 

Un placer ayudarte y servirte!

 

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.

 

Un saludo y recuerda que estaremos en el foro, para guiarte por este mundo oscuro y tenebroso.

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