Joomla Templates Club 406,261 posts

[sfpkent Friend sfpkentJoin date: October 2008Posts: 829Downloads:0Uploads:100 Thanks: 310 Thanked: 75 times in 1 posts]

#135221

Hi friends,

First and foremost, thanks for scotty for sharing with me “how to move products pictures in products listing from right to left”

You can view the result here:

Locate the file at yoursite/component/com_virtuemart/theme/ja_mesolite/theme.css

Search for the code:
/** BROWSE PRODUCTS STYLES **/
.browseProductContainer {
width: 100%;
padding: 15px 0;
position: relative;
background: url(images/dot-h.gif) repeat-x top;
margin-top: 15px;
}

.browseProductTitle {
font-weight: bold;
padding: 0;
margin: 0 0 10px;
width: 70%;
}

.browseProductImageContainer {
float: right;
}

.browseProductDetailsContainer {
float: left;
width: 70%;
}

.browseProductDescription {
margin-top: 60px;
width: 70%;
}

.browsePriceContainer {
font-size: 125%;
float: left;
line-height: 40px;
padding: 0 20px;
background: #E6E6E6;
border: 1px solid #E6E6E6;
}

.browseRatingContainer {
white-space: nowrap;
float: left;
height: 40px;
padding: 0 20px;
border: 1px solid #E6E6E6;
}

.browseAddToCartContainer {
margin-top: 15px;
width: 100%;
display: block;
}

.browseAddToCartContainer .addtocart_button {
margin: 0 0 0 5px;
}

.browseRatingContainer img {
vertical-align: baseline;
}

CHANGE THE CODE TO:

/** BROWSE PRODUCTS STYLES **/
.browseProductContainer {
width: 100%;
padding: 15px 0;
position: relative;
background: url(images/dot-h.gif) repeat-x top;
margin-top: 15px;
}

.browseProductTitle {
font-weight: bold;
padding: 0;
margin: 0 0 10px;
width: 70%;
}

.browseProductImageContainer {
border:1px solid #DDDDDD;
float: left;
padding: 2px;
}

.browseProductDetailsContainer {
float: left;
width: 70%;
}

.browseProductDescription {
margin-left: 140px;
padding:0 5px;
}

.browsePriceContainer {
color: #B01C1C
font-size: 125%;
float: right;
line-height: 40px;
padding: 0 20px;
background: #E6E6E6;
border: 1px solid #AAAAAA;
}

.browseRatingContainer {
white-space: nowrap;
float: right;
height: 40px;
padding: 0 20px;
border: 1px solid #AAAAAA;
}

.browseAddToCartContainer {
margin-top: 15px;
margin-left: 140px;
display: block;
}

.browseAddToCartContainer .addtocart_button {
margin: 0 0 0 5px;
}

.browseRatingContainer img {
vertical-align: baseline;
}

It works well on Mozilla Firefox and IE 7. Again, thanks to scotty. 🙂

Kent

1 user says Thank You to sfpkent for this useful post

1. nefar

[sfpkent Friend sfpkentJoin date: October 2008Posts: 829Downloads:0Uploads:100 Thanks: 310 Thanked: 75 times in 1 posts]

#278663

Hi,

Sorry, forgot insert the link, you can view the result here:
http://daimingjewelry.com/index.php?page=shop.browse&category_id=28&option=com_virtuemart&Itemid=79

[nefar Friend nefarJoin date: December 2007Posts: 434Downloads:0Uploads:2 Thanks: 78 Thanked: 42 times in 1 posts]

#278752

Ahh very cool. I think I may try that layout myself. I’m not to much of a fan with pictures on right side either.

Power seller on Ebay Huh.. How do you like that total garbage feedback policy? I have a friend that is a power seller also and has had to deal with “blackmail” buyers now 4 times in the last month.

[sfpkent Friend sfpkentJoin date: October 2008Posts: 829Downloads:0Uploads:100 Thanks: 310 Thanked: 75 times in 1 posts]

#278820

Hi nefar,

Our company actually started from eBay. But, it seems that eBay is getting stricted on rules and regulations. Make eBayers hard to sell. And most important thing is, joybidders is getting more and more.

And we keep searching for Virtuemart templates to sell our products. Finally, we choose JA Mesolite. 🙂 Clean, neat, simple and nice. I really like that. And, it worked well in IE7 and Mozilla Firefox. No headache.

Thanks to Joomlart.com again. Well done.

Kent

[Author]

Posts