styling product listing pages with column layout grid

Where can I find the Flexible Product Listing module. I see all of these references to it but I can't seem to locate it. Can anyone point me in the right direction? :cool:

Attached to post 50 in this thread.

How do I center the price?

I saw an earlier post and changed the css as follows:

.listingPrice {text-align: center;} /demo setup/
.listingButtonGroup {}

The price is still justified left. :cool:

This float is still controlling the position:

stylesheet_flexible_product_listing.css (line 15)
.listingPrice {
float: left;
}

stylesheet.css (line 780)
.listingPrice {
text-align: center;
}

It is best to only have one rule addressing any particular element; this keeps conflicting properties from escaping notice.

Hi,
I have installed this mod and very happy with it other than one small issue.

Where there is only one result for a search some parts of the result are centered to the full page rather than the left column.

See below for an example,
http://onestopglassesDOTco.uk/index.php?main_page=advanced_search_result&search_in_description=1&keyword=481

I have managed to sort most of it but I can't get the pic and 'more info' to go over to the left, whatever I try that works messes up the results when there are two columns.

Hope that makes sense and any help would be appreciated.

Thanks,
Rick

causeone:

1. tell me if I'm in the right thread (there seems to be two that are dealing with similar issues).

2. I'm using the grid layout and would i like to customize the appearance of the individual product listings in the grid using CSS.

I'm fairly competent at CSS, but I'm having a little trouble finding the correct elements to edit the appearance of.

Here is what I would like to accomplish:

• Add padding/ margin between the individual products listed in the grid (really either will suit my purpose, just need some spacing between each listing so they don't run together as much).

• Declare a consistent size for the grid listed products, and add a background image to them.

• Put the price and "Buy" image on the same line instead of having them vertically stacked.

Any help/ pointers/ directions would be awesome.

k

any help here?

causeone:

any help here?

I'm hardly an expert in these matters but i've been having similar issues and the following lines in the bottom of my stylesheet have sorted the width for me, alter 360 to suit your taste obviously.

.itemTitle {
width: 360px;
}

.prodListPrice {
width: 360px;
}

.listingDescription {
width: 360px ;
}

i helped install this with the column grid layout mod and first i did the column grid one then yours.

when i did the column grid one the pages were the way they should be

then i applied yours and the side blocks have gotten longer.

any idea why and how to fix it

it is with zen1.3.9d and apple_zen template

doesn't want to upgrade til done setting things up...:no:

Justrimless:

I'm hardly an expert in these matters but i've been having similar issues and the following lines in the bottom of my stylesheet have sorted the width for me, alter 360 to suit your taste obviously.

.itemTitle {
width: 360px;
}

.prodListPrice {
width: 360px;
}

.listingDescription {
width: 360px ;
}

Tried a little experimenting there with no success.
Anyone else have suggestions?

I've been looking in the PHP files to try and find the correct stylesheet elements to edit with no results.

Actually I don't even find some of the elements listed in the PHP in the stylesheet.css, is there another stylesheet that I don't know about?

causeone:

Tried a little experimenting there with no success.
Anyone else have suggestions?

I've been looking in the PHP files to try and find the correct stylesheet elements to edit with no results.

Actually I don't even find some of the elements listed in the PHP in the stylesheet.css, is there another stylesheet that I don't know about?

the lines in the blocks i actually set from the admin / product listing section I think there...been all over the back end of store looking how to reset the blocks to the right way for this other store i posted about

which not adding this mod it is not happening to my own store...lol whew

anyway where you set the order for the items try setting them there.

i added some padding to that other store in the stores template stylesheet.css file---

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton,
#cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper,
#navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree,
#bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits,
#siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay,
.cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay,
#cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,
.rightBoxHeading, .productListing-data, .accountQuantityDisplay,
.ratingRow, LABEL#textAreaReviews, #productMainImage,
#reviewsInfoDefaultProductImage,
#productReviewsDefaultProductImage, #reviewWriteMainImage,
.centerBoxContents, .specialsListBoxContents,
.categoryListBoxContents, .additionalImages,
.centerBoxContentsSpecials, .centerBoxContentsAlsoPurch,
.centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal,
.attribImg, .parseTime
{
text-align:center;
padding: 0.1em;

but could only do the one size cause it would then drop the 3rd coulm image to the next line.

adjusting size of font in the same file helps some too

there is the stylesheet that came with his mod [flexible_product_listing_1_0_prelim] here but it has no numbers in it so i did not touch it but it was called: stylesheet_flexible_product_listing.css

and which i should clarify that with the regular column_layout_grid_for_product_listing_1-3-8 it is working wonderfully with just a couple of <br> tags I added to the files for spacing but it is the flexible_product_listing_1_0_prelim that is causing the blocks to expand in height which I can not seem to fix.

great idea for this mod to make the grids be the same size but that little block thing is very distracting.

oh i forgot i also added this from the mod [three_columns_grid_for_new_and_all_products_pages_0-1 ] to my templates stylesheet at the bottom:

h3.itemTitle {
margin-top: 0.1em;
margin-bottom: 0.1em;
}
.new_products {
float: left;
width: 32.5%;
text-align: center;
padding: 3px 1px;
}

since i also added this mod to the all and new product pages for continuity

Hello.
Thank you for providing the mod. I was able to figure out most of the changes i wanted to make however I can't seem to be able to reverse the display of name and product price so that it show as follows:

Image
Product Name
Price

Most likely looking in a wrong place.
Thanks in advance :)

Joanna

http://www.futureheirloomdesigns.com/

jgizinska:

Hello.
Thank you for providing the mod. I was able to figure out most of the changes i wanted to make however I can't seem to be able to reverse the display of name and product price so that it show as follows:

Image
Product Name
Price

Most likely looking in a wrong place.
Thanks in advance :)

Joanna

http://www.futureheirloomdesigns.com/

that one threw me too until i remembered that is set in admin...I think the product listing section...back there in one of them where you can set the order.

DarkAngel:

that one threw me too until i remembered that is set in admin...I think the product listing section...back there in one of them where you can set the order.

Thanks!!! Worked like a charm :)

I am trying to figure out now how to edit the css to look like what I want.

Is their any way to edit the css to put the fields I want into a table or maybe in one of the other files? I just don't know which one to look in.

Thank you for all your help.

punges24:

I am trying to figure out now how to edit the css to look like what I want.

Is their any way to edit the css to put the fields I want into a table or maybe in one of the other files? I just don't know which one to look in.

Thank you for all your help.

well for this you would probably get more better help if you ...

1. give a link to your store
2. tell what template you are using
3. show links to examples you find that look like what you want to do.

visuals are really helpful for me especially, since right now I have no clue what fields where.

here is a link to my website.

http://economyleasinginc.com/index.php?main_page=index&cPath=1

Can someone please tell me how to get rid of the weird symbol in the corner of the page that is also showing up on this page right under the menu bar http://economyleasinginc.com/index.php?main_page=product_info&cPath=1&products_id=3

Thanks

That is the byte order marker or BOM, and I believe comes from files incorrectly edited or identified as UTF-8 or other character sets. Don't remember how to get rid of it, but that should give you a good search term.

If you want the image on the left at the same height as the rest, try this:

.listingImage {text-align: left; float: left;}

This lets the following items rise to the top of the container.

Thanks, that worked. Do you know how I can get that extra stuff that is coming up with the price to go away? Also do you know where I can go to edit the price like if I want to add a title and to the quantity and that stuff also?

thanks

So I have been doing some testing on my site and I noticed this page (http://economyleasinginc.com/index.php?main_page=product_info&cPath=1&products_id=3) in firefox is not coming out right. The picture is no longer centered and you can not enlarge the big picture. Anyone have any ideas for this? Thanks