Imagen Mas Grande En Ficha De Artículos Ps 1.5

[ourentec]

Hola de nuevo,

 

estoy ampliando el espacio que ocupa la imagen de artículo en la ficha de producto,

 

este es mi product.css:

 

/* product desc */

 

/* primary_block ***************************************************************************** */

#primary_block {margin-top:15px}

 

/* pb-right-column ***************************************************************************** */

#pb-right-column {

float:left;

width:300px;

}

#pb-right-column #image-block {position:relative;}

#pb-right-column #image-block img {border:0px solid #cdcdcd}

#pb-right-column #image-block #view_full_size {

display:block;

cursor:pointer

}

#pb-right-column #image-block #view_full_size .span_link {

position:absolute;

bottom:10px;

left:32%;

display:block;

padding:0 12px 0 30px;

line-height:20px;

color:#fff;

text-shadow: 0 1px 0 #000;

text-align:center;

text-transform:uppercase;

background-image:url(../img/icon/zoom.png);

background-repeat:no-repeat;

background-position:10px 2px;

background-color : rgb(0,0,0);

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

border-radius:0px;

-moz-border-radius:0px;

-webkit-border-radius:0px;

}

#pb-right-column #image-block #view_full_size .span_link img {

position:relative;

top:3px;

left:-3px;

border:none;

padding-right:2px;

}

 

/* miniatures */

#pb-right-column #views_block {

margin-top:10px;

width:266px

}

 

#thumbs_list {

float: left;

overflow: hidden;

margin-left:4px;

width: 250px

}

#thumbs_list ul#thumbs_list_frame {

list-style-type: none;

padding-left: 0

}

#thumbs_list li {

float: left;

height: 60px;

width: 72px;

cursor: pointer

}

#thumbs_list li img {

margin:0 6px;

border:1px solid #cdcdcd

}

 

span.view_scroll_spacer {

float: left;

height: 16px;

width: 21px

}

#view_scroll_left, #view_scroll_right {

float: left;

margin-top: 20px;

padding:0 4px;

height: 18px;

width: 9px;

text-indent: -3000px;

background: url(../img/thumbs_left.gif) no-repeat center center transparent

}

#view_scroll_right {

margin-left:4px;

background-image: url(../img/thumbs_right.gif)

}

 

.resetimg {padding:10px 0 0 0}

 

/* link list */

#usefull_link_block {

list-style-type:none;

margin-top: 20px

}

#usefull_link_block li {padding:2px 0;}

#usefull_link_block li.print {

padding-left:20px;

background:url(../img/icon/print.gif) no-repeat 0 0;

}

#usefull_link_block li.sendtofriend {

padding-left:20px;

background:url(../img/icon/send_friend.gif) no-repeat 0 0;

}

#usefull_link_block li#left_share_fb{

padding-left:20px;

background:url(../img/icon/picto_fb.png) no-repeat 0 0;

}

 

/* pb-left-column ****************************************************************************** */

#pb-left-column {

float:right;

margin-left:15px;

width:320px

}

#pb-left-column h1 {

padding-bottom:5px;

font-size:14px

}

#pb-left-column #short_description_block {color:#666}

#pb-left-column #short_description_block .buttons_bottom_block {display:none}

 

/* form */

#pb-left-column #buy_block {margin-top:10px}

#buy_block p {padding-bottom:10px}

#pb-left-column #buy_block label {

display:inline-block;

width:125px;

font-weight:bold;

font-size:10px;

text-align:right

}

 

/* short description pack */

.short_description_pack {display:none;}

 

/* color_picker */

#pb-left-column #color_picker p {

padding-bottom:5px;

font-weight:bold

}

#attributes fieldset {padding-bottom:10px;}

#attributes fieldset label {vertical-align:top;}

#attributes .attribute_list {display:inline-block;}

.attribute_list #color_to_pick_list {

list-style-type:none;

width: 125px;

}

.attribute_list #color_to_pick_list li {

float:left;

margin:0 8px 8px 0;

padding:1px;

border:1px solid #ccc

}

.attribute_list #color_to_pick_list li.selected{border:1px solid #000}

.attribute_list #color_to_pick_list a.color_pick{

display:block;

height:15px;

width:15px;

}

 

.product_attributes {

padding:10px 0 0 0;

border-top:1px solid #ccc

}

/* attributes */

#attributes select {

width:120px;

border:1px solid #cdcdcd;

}

 

/* quantity_wanted */

#quantity_wanted_p input {

width:50px;

border:1px solid #cdcdcd;

}

 

/* availability_statut */

#availability_statut {padding-bottom:10px;}

#availability_statut span#availability_label {

display:inline-block;

width:125px;

font-weight:bold;

font-size:12px;

text-align:right

}

#availability_statut span#availability_value {

display:inline-block;

padding:1px 5px;

font-weight:bold;

font-size:10px;

color:#fff;

text-transform:uppercase;

background:#9b0000

}

 

/* prices */

.content_prices {

margin-top:10px;

padding-top:10px;

border-top:1px solid #ccc;

text-align:right

}

#buy_block p.price {padding:0}

.discount {display:none}

#buy_block p#old_price {

padding-bottom:15px;

font-size:10px;

text-decoration:line-through

}

.our_price_display {

padding-bottom:10px;

font-weight:bold;

font-size:10px;

line-height:18px;

color:#9b0000

}

#reduction_percent,

#reduction_amount {

display: block;

float: right;

margin-left:10px;

padding: 0 0 0 10px;

font-weight: bold;

font-size: 12px;

color: #fff;

background: url(../img/bg_reduction.png) no-repeat 0 0 transparent

}

#reduction_percent span,

#reduction_amount span {

display: block;

padding: 1px 5px 1px 0;

background: url(../img/bg_reduction.png) no-repeat 100% 0 transparent

}

 

/* online_only */

#buy_block p.online_only {

font-weight:bold;

font-size:11px;

color:#990000;

text-align:left;

text-transform:uppercase

}

 

/* add_to_cart */

.content_prices #add_to_cart {

position:relative;

float:right;

padding:0;

}

.content_prices #add_to_cart .exclusive,

.content_prices #add_to_cart .exclusive_disabled{padding:4px 7px 4px 15px}

*:first-child+html .content_prices #add_to_cart .exclusive{padding:4px 3px 4px 11px}

.content_prices #add_to_cart span {

z-index:10;

display:block;

position:absolute;

top:0;

left:-12px;

height:22px;

width:22px;

}

 

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

 

/* */

.buttons_bottom_block {

clear:both;

padding-top:20px;

}

.buttons_bottom_block #wishlist_button {font-weight:bold;}

 

 

/* SEND TO FRIEND (pop-in) ##################################################################### */

#send_friend_form {}

#send_friend_form h2 {

padding:8px 11px;

font-size:12px;

color:#fff;

text-shadow:0 1px 0 #000;

text-transform:uppercase;

background:#383838

}

 

#send_friend_form .product {margin:20px 10px}

#send_friend_form .product img {

float:left;

margin:0 10px 0 0;

border:1px solid #ccc

}

#send_friend_form .product .product_desc {

float:left;

width: 380px;

}

#send_friend_form .product .product_desc p {

padding:0 10px 0 0;

color:#333

}

#send_friend_form .product .product_desc p.product_name {

font-size:12px;

color:#000

}

 

#send_friend_form .send_friend_form_content {margin:0 10px 20px 10px}

#send_friend_form .form_container {

padding:10px 15px;

border:1px solid #ccc;

background:#eee

}

#send_friend_form .form_container p.intro_form {

padding-bottom:14px;

font-weight:bold;

font-size:13px;

color:#333

}

#send_friend_form .form_container p.txt_required {

padding-bottom:0;

color:#666

 

/* SEND TO FRIEND (pop-in) ##################################################################### */

}

#send_friend_form .form_container .text {padding-bottom:10px}

#send_friend_form .form_container .text label {

display:inline-block;

padding:6px 15px;

width:180px;/* 210 */

font-size:12px;

text-align:right

}

#send_friend_form .form_container .text input {

padding:0 5px;

height:22px;

width:260px;

border:1px solid #ccc;

font-size:12px;

color:#6666

}

#send_friend_form .submit {

margin-top:20px;

padding-bottom:0;

text-align:right

}

 

/* PACK ##################################################################### */

#blockpack {

margin-top:20px;

padding-top:20px;

border-top:1px dotted #999

}

 

/* PERSONNALISATION ##################################################################### */

.customization_block {}

.customization_block p.infoCustomizable {

margin:10px 0 20px;

padding:0 0 0 20px;

background:url(../img/icon/infos.gif) no-repeat 0 0 transparent

}

 

ul#uploadable_files,

ul#text_fields {list-style-type:none}

.customizableProductsFile,

.customizableProductsText{

margin-bottom:20px;

padding-bottom:10px;

border-bottom:1px dotted #ccc;

}

.customizationUploadLine {padding-bottom:10px}

.customizationUploadLine label {

display:inline-block;

width:150px;

vertical-align:top

}

.customizationUploadLine textarea {

height:50px;

width:300px;

border:1px solid #ccc

}

#customizedDatas {

float:right;

}

.accessories_block div ul li a {

display:inline-block

}

 

este el apartado dentro del global.css:

 

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

PRODUCT PAGE

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

 

/* BLOCK idTabs ******************************************************************************** */

.idTabs {

list-style-type: none;

margin-top: 20px;

padding:0 5px;

border-bottom: 8px solid #f7b900

}

ul.idTabs li {

float: left;

margin-right: 1px

}

.idTabs a {

display:block;

padding:10px 10px 7px 10px;

font-weight:bold;

text-decoration:none;

color:#fff;

background:#000

}

.idTabs .selected {

color:#000;

background: url(../img/bg_li_idTabs.png) repeat-x 0 0

}

 

#more_info_sheets {padding-top:10px}

#more_info_sheets ul,

#more_info_sheets ol,

#more_info_sheets dl {margin-left:20px}

#more_info_sheets em {font-style:italic}

 

#more_info_sheets .product_desc{

margin-top:5px

}

 

#more_info_sheets .product_desc .product_image{

float:left

}

 

#more_info_sheets .product_desc .block_description{

float:left;

margin-left:10px;

width:420px

}

#more_info_sheets .product_desc .clear_product_desc{

clear:both;

height:0px;

line-height:0px

}

 

/* Make sure lists are correctly displayed in tinyMCE BO edition mode too */

#short_description_content ul,

#short_description_content ol,

#short_description_content dl,

#tinymce ul,

#tinymce ol,

#tinymce dl {margin-left:20px}

 

.block_hidden_only_for_screen {display:none}

 

 

 

 

y así se ve ahoa la ficha:

 

http://www.migueldel...oduct&id_lang=4

 

la intención es que la imagen ocupe la mayoria del espacio pero al alterar los anchos de las secciones la descuadra pero no da más espacio a la imagen,

 

 

agradecido de antemano por dedicar vuestro tiempo a leer este post,

 

Un saludo.

Edited February 21, 2013 by ourentec (see edit history)

[lagoa]

yo tengo el mismo problema! a ver si alguien dice algo!

[scorsese]

Buenos días.

 

Si nos pones la url de la pagina podemos verlo mejor.

 

Un s2ludo.

[lagoa]

me parece que el tamaño de la imagen lo cambias en tu back office, en preferencias, imagenes tienes que cambiar el tamaño de la large default y listo!

[lagoa]

Mi problema ahora es que me tapa toda la descripción que tenía del artículo, justo a la izquierda de la imagen, se me ha solapado y no consigo arreglarlo

¿alguien sabe que tengo que hacer?

[Sergio Ruiz]

Mi problema ahora es que me tapa toda la descripción que tenía del artículo, justo a la izquierda de la imagen, se me ha solapado y no consigo arreglarlo

¿alguien sabe que tengo que hacer?

 

¿Url chienda web?

[lagoa]

Pues está en local, así que no se como a ver si la ves!:

http://lagoa.loading.es/prestashop/es/home/26-cabecero-reina.html

[nadie]

Pues está en local, así que no se como a ver si la ves!:

http://lagoa.loading...cero-reina.html

 

Hola !

 

Estoy viendo tu web.

 

Te digo lo que tienes puesto en tu web y te digo como puedes dejarlo a modo de prueba..

 

Ve al fichero:

 

/themes/default/css/product.css

 

Busca esto:

 

#pb-right-column {
float:left;
width:250px;
}

 

Y dejalo por ejemplo así:

 

#pb-right-column {
float: left;
width: 391px;
}

 

Despues en el mismo fichero, busca esto:

 

#pb-left-column {
float: right;
margin-left: 400px;
width: 250px;
}

 

Y prueba dejarlo así:

 

#pb-left-column {
float: right;
width: 354px;
}

[lagoa]

Gracias Nadie! ya lo he cambiado y ahora sale cada columna en su sitio, no se solapan! pero no consigo alinearlas, es decir la imagen me sale a la izquierda, los textos a la derecha pero uno arriba y otro abajo! ¿me puedes ayudar con esto?