Avisos
Vaciar todo
Página 3 / 3
Anterior
Hola. Me gustaría poner el catálogo de mi tienda igual que este: http://www.opticamediterranea.com/productos/category/1/monturas-y-cristales.html y la página del producto también como lo tiene esta web: http://www.opticamediterranea.com/productos/details/42/1/monturas-y-cristales/be-happy-26.html ¿Que debo hacer?
P.D.: Uso la misma plantilla (ja_sulfur)
Gracias.
Respondido : 27/07/2011 9:07 pm
Hola h3r0,
Si quieres centrar en texto sobre la imagen tal como muestro en la imagen:
Debes añadir en el estilo siguiente en el archivo "mooPrompt.css" (VirtueMart):
.browseProductContainer {
padding: 3px;
text-align: center;
vertical-align: top;
width: 100%;
}
La siguiente etiqueta:
text-align: center;
No olvides realizar una copia de seguridad del archivo antes de realizar los cambios. Debes tener en cuenta que se centra en función del div y no de la imagen por lo que debes centrar también la imagen que actualmente no lo esta como puedes ver en la captura:
Saludos
Respondido : 11/08/2011 11:07 pm
Hola gnumax, gracias por tu ayuda. ¿Como centro las imagenes tambien?
Respondido : 11/08/2011 11:46 pm
Hola h3r0,
Tendría que ver el archivo de estilos CSS que afecta para ver cual estilo se encarga de las imágenes ya que por código solo veo que un div carga un float:left pero no veo de donde viene.
Adjunta el archivo de estilos correspondiente para verlo.
Saludos
Respondido : 12/08/2011 12:35 am
Hola gnumax, en el archivo "mooPrompt.css" no aparece lo que comentas, pero con la pista que me has dado he mirado en el theme.css y he dado con la tecla para centrar el texto. Ahora lo que no se es como centrar las imagenes también. Adjunto el theme.css . Gracias.
/**
* Main CSS file for the "default" theme for VirtueMart
* @copyright 2006-2008 soeren
* @license GNU/GPL
*
*/
/* General Shop Styles here please */
.addtocart_button, .notify_button {
text-align:center;
background-position:bottom left;
width:160px;height:30px;
cursor:pointer;
border: none;
font-weight:bold;
font-family:inherit;
vertical-align: middle;
overflow:hidden;
}
.addtocart_button {
background: url( 'images/add-to-cart_blue.gif' ) no-repeat center transparent;
}
.notify_button {
background: url( 'images/notify_blue.gif' ) no-repeat center transparent;
}
.addtocart_button_module {
text-align:center;
background-position:bottom left;
width:160px;height:30px;
cursor:pointer;
color: #000000;
border: none;
font-weight:bold;
font-family:inherit;
background: url( 'images/transparent.gif' ) no-repeat center transparent;
vertical-align: middle;
overflow:hidden;
}
input.addtocart_button_module:hover {
color: #333333;
}
.addtocart_form {
width: 100%;
display: inline;
white-space: nowrap;
}
/* The quantity box beneath the "add to cart" button */
.quantity_box {
vertical-align: middle;
}
.quantity_box_button {
width:10px;
vertical-align:middle;
height:10px;
background-repeat: no-repeat;
background-position: center;
border:1px solid #000;
}
.quantity_box_button_down {
background-image: url(images/down_small.gif);
}
.quantity_box_button_up {
background-image: url(images/up_small.gif);
}
.continue_link, .checkout_link {
margin: 2px;
padding: 2px 0px 2px 40px;
vertical-align: middle;
font-weight: bold;
font-size: 1.4em;
width: 40%;
}
.checkout_link {
margin-left: 40px;
background: url( 'images/forward.png' ) no-repeat left;
}
.continue_link {
background: url( 'images/back.png' ) no-repeat left;
}
.next_page {
background: url( 'images/next_16x16.png' ) no-repeat right;
padding-right: 30px;
line-height: 20px;
float: right;
width: auto;
}
.previous_page {
background: url( 'images/previous_16x16.png' ) no-repeat left;
padding-left: 30px;
line-height: 20px;
float: left;
width: auto;
}
/* This is the text box informing customers about your returns policy */
.legalinfo {
background: #d3d3d3;
border: 2px solid gray;
margin: 10px;
padding: 0px 0px 10px 10px;
}
div.pathway {
margin-bottom: 1em;
}
div.pathway img {
padding: 0 2px;
}
/* The PDF, Email and Print buttons */
div.buttons_heading {
margin:10px;
width:10%;
float:right;
}
.productPrice {
font-weight:bold;
white-space: nowrap;
}
.product-Old-Price {
color:red;
text-decoration:line-through;
}
/** BROWSE PRODUCTS STYLES **/
.browseProductContainer {
width:100%;
padding: 3px 3px 3px 3px;
vertical-align: top;
text-align: center;
}
.browseProductTitle {
font-size: 16px;
font-weight: bold;
padding: 3px;
margin-top: 3px;
width: 30%;
float: left;
}
.browseProductImageContainer {
float: left;
width: auto;
margin: 3px;
}
.browseProductDetailsContainer {
float: left;
width: 70%;
}
.browseProductDescription {
margin-top: 40px;
width:50%;
}
.browsePriceContainer {
float: left;
margin: 5px;
width:20%;
}
.browseAddToCartContainer {
width:30%;
text-align:center
}
.browseRatingContainer {
float: left;
width:25%;
margin: 3px;
white-space: nowrap;
}
/** Flypage Styles **/
.thumbnailListContainer {
text-align: center;
width: 200px;
height: 200px;
overflow: auto;
}
/*
General Form Styling
*/
.formLabel {
float:left;
width:30%;
text-align:right;
font-weight: bold;
margin: 2px;
white-space: nowrap;
clear: left;
vertical-align: middle;
margin-top: 8px;
}
#agreed_div {
white-space: normal;
}
.formField {
float:left;
width:60%;
margin: 2px;
vertical-align: middle;
margin-top: 8px;
}
.missing {
color:red;
font-weight:bold;
}
/**
* Administration Styles
*/
.adminListHeader {
float:left; height: 48px; background-repeat: no-repeat;
text-align: left; font-size: 18px; font-weight: bold;
padding-left: 80px;
}
.labelcell {
margin-left: auto;
font-weight: bold;
vertical-align: top;
width: 30%;
}
table.adminform td.labelcell {
text-align: right;
}
.iconcell {
vertical-align: top;
width: 5%;
}
.shop_error, .shop_warning, .shop_info, .shop_debug, .shop_critical, .shop_tip {
background-color:#FAFAD2;
color:black;
background-position:left 5px;
background-repeat:no-repeat;
border-color:#AACCAA;
border-style:dotted none;
border-width:1px 0pt;
font-weight: 900;
margin:1pt 1pt 1em 1em;
padding:0.5em 1em 1.5em 48px;
}
.shop_error {
background-image: url( images/error.gif );
}
.shop_warning {
background-image: url( images/warning.png );
}
.shop_info, .shop_tip {
background-image: url( images/info.png );
}
.shop_debug {
background-image: url( images/log_debug.png );
}
.shop_critical {
font-weight: bold;
background-image: url( images/log_critical.png );
}
/**
* Addtocart detail Styles
*/
.vmCartContainer { /* Cart Container */
width: auto;
float: left;
background: #ADD8E6;
border: 1px solid #000;
padding: 3px;
}
.vmCartChildHeading { /* Header for the cart */
font-size: 14px;
font-weight: bold;
padding-bottom: 3px;
text-align: left;
}
.vmCartChild { /* Container for the Child Product */
vertical-align: middle;
border: 1px solid #000;
padding-left: 2px;
padding-right: 2px;
margin-bottom: 2px;
float:left;
}
.vmChildDetail { /* Child Detail, description , attributes ,price, quantity etc */
vertical-align: middle;
margin-top: 6px;
}
.vmCartChildElement { /* Individual element styling */
width: 100%;
vertical-align: middle ;
height: 25px;
text-align: left;
}
.vmCartAttributes { /* Attributes Div*/
margin-top:8px;
width:100%;
}
.vmAttribChildDetail { /* Product Attributes Styling */
}
.vmMultiple {
height:35px;
}
.vmChildType { /* Product type div*/
width: 100%;
}
.vmClearDetail { /*Clear the divs afer child types*/
clear: both;
}
.vmClearAttribs { /*Clear the divs before the attributes*/
clear:both;
}
.vmRowOne { /* Odd Row One styling */
background: #d3d3d3;
}
.vmRowTwo { /* Even Row Styling */
background: white;
}
/* Link Details for link to child*/
.vmChildDetail a, .vmChildDetail a:link {
font-size : 11px;
color : #000000;
text-decoration : none;
font-weight : bold;
}
.vmChildDetail a:hover {
font-size : 11px;
color : #333333;
text-decoration : none;
font-weight : bold;
}
/* Styling for the form elements to enable correct Line Up */
.inputboxquantity {
margin-top: 3px;
vertical-align: middle;
}
.availabilityHeader {
text-decoration:underline;
font-weight:bold;
}
.inputboxattrib {
float: left;
margin-top: 0px;
vertical-align: middle;
margin-bottom: 2px;
}
.quantitycheckbox {
margin-top: 6px;
vertical-align: middle;
}
/**
* Addtocart detail Styles for placing attributes beside product_types
*/
.vmCartContainer_2up { /* Cart Container */
width: 100%;
float: left;
background: #ADD8E6;
border: 1px solid #000;
padding: 3px;
}
.vmCartChildHeading_2up { /* Header for the cart */
font-size: 14px;
font-weight: bold;
padding-bottom: 3px;
text-align: left;
}
.vmCartChild_2up { /* Container for the Child Product */
vertical-align: middle;
border: 1px solid #000;
padding-left: 2px;
padding-right: 2px;
margin-bottom: 2px;
float:left;
}
.vmChildDetail_2up { /* Child Detail, description , attributes ,price, quantity etc */
vertical-align: middle;
margin-top: 6px;
}
.vmCartChildElement_2up { /* Individual element styling */
width: 100%;
vertical-align: middle ;
height: 25px;
text-align: left;
}
.vmCartAttributes_2up { /* Attributes Div*/
float: left;
padding: 0px 5px 5px 5px;
margin: 0px 5px 5px 5px;
width:50%;
}
.vmAttribChildDetail_2up { /* Product Attributes Styling */
}
.vmMultiple {
height:35px;
}
.vmChildType_2up { /* Product type div*/
background: #ADD8E6;
padding: 0px 5px 5px 5px;
margin: 0px 5px 5px 5px;
float: left;
width: 40%;
border: 1px solid #000;
}
.vmClearDetail_2up { /*Clear the divs afer child types*/
}
.vmClearAttribs_2up { /*Clear the divs before the attributes*/
clear:both;
}
.vmRowOne_2up { /* Odd Row One styling */
background: #d3d3d3;
}
.vmRowTwo_2up { /* Even Row Styling */
background: white;
}
/* Link Details for link to child*/
.vmChildDetail_2up a, .vmChildDetail_2up a:link {
font-size : 11px;
color : #000000;
text-decoration : none;
font-weight : bold;
}
.vmChildDetail_2up a:hover {
font-size : 11px;
color : #333333;
text-decoration : none;
font-weight : bold;
}
.vmCartModuleList {
cursor : pointer;
font-size : 11px;
color : #000000;
text-decoration : none;
font-weight : bold;
}
.vmCartModuleList:hover {
font-size : 11px;
color : #333333;
text-decoration : none;
font-weight : bold;
}
.vmquote {
margin: 4px;
border: 1px solid #cccccc;
background-color: #E9ECEF;
padding: 10px;
font-size: 12px;
color: #254D78;
}
.editable {
background: #ffff33;
cursor: pointer;
}
ul.pagination li {
padding: 2px 1px;
display: inline;
background: none;
}
.clr { clear: both; overflow:hidden; }
Otra cosa que he notado es que el espacio entre imagen y título de la ultima columna (cuarta) no es el mismo que en las demás. Pongo una imagen con el espacio mal (rojo) y el espacio bien (verde).
Respondido : 12/08/2011 9:12 am
Hola h3r0
Según lo que veo, el problema del centrado es un problema de estructura, tal como se muestra en la siguiente imagen.
Es decir las flechas rojas indican el
flotante que nunca estará centrado con respecto al texto por que es float.
El texto se encuentra centrado con respecto al elemento principal, al contenedor, es este elemento que debe ser float y no la imagen.
El texto se encuentra centrado con respecto al elemento principal, al contenedor, es este elemento que debe ser float y no la imagen.
Adicionalmente hay un elemento float adicional, pero que no esta teniendo efecto (signo de interrogación)
Saludos.
Respondido : 12/08/2011 3:10 pm
Hola Jhon, el div de la interrogación pertenece a lo de "detalle del producto" que tengo deshabilitado. He hecho algunos cambios, no se si bien, pero el caso es que ahora quedan centradas las imagenes, aunque con alguna cosilla que hay que pulir. Os adjunto una imagen para que veais el tema de espacios. ¿Porque en la última columna hay más espacio (linea roja) que en las demás (linea verde)? Y ¿porque el espacio del titulo del artículo (linea azul) es más amplio que en la página donde se muestran las categorias?
Respondido : 12/08/2011 4:02 pm
Hola h3r0
Ahora luce centrado :), en cuanto a la diferencia entre espacios, veo que el problema se debe a los nombres largos de algunos productos, es decir, en alguna columna que algún producto tenga un nombre largo, entonces se expandera, haciendo diferencias entre los espacios.
Revisa la siguiente imagen:
Saludos.
Respondido : 13/08/2011 2:03 pm
Página 3 / 3
Anterior
