News:

Support the VirtueMart project and become a member

Main Menu

How can I change the text column width in product description view?

Started by daviat, January 08, 2014, 03:08:30 AM

Previous topic - Next topic

daviat

Hi . . .

I need to widen the description column width in the product description page of my cart. Where can I do that and what needs to be changed in what file.

thanks,
Daniel

jenkinhill

In the default VM template the product description in a div with class product-description which runs the full width of the component div.

The layout is in components/com_virtuemart/views/productdetails/tmpl/default.php

If you use template overrides or a commercial templates then it will be wherever the developer placed the overrides - usually [joomlatemplate]/html/com_virtuemart/productdetails/
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

daviat

Hi . . . Thank you. I looked in the default.php but I could not find an area to alter the width of the right column of the product detail page.

I would like to specify the exact width of the text area on the default product detail view. That is the right hand column. I was going through the server and can that be done in the file 'vmsite-ltr.css' in the folder area  /public_html/components/com_virtuemart/assets/css? Not sure where I can alter the width of that right hand column in the products detail page of the view.

jenkinhill

Are you using the default VM view files or some third party VM template? In default if you wish to reduce the width of the desription, which is currently the full width of the component container, then you can add a width to the class product-description and append that to the end of your Joomla template css file so it does not get overwritten during VM updates. You can experiment using Firebug.  http://forum.virtuemart.net/index.php?topic=116620.0
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

daviat

I am using the default views. Using a regular Joomla template called Dome by Joomlashine but for the cart just out of the box. I actually want to widen the text description column at the right. I want to make the detail images a little smaller and widen the  column at the right that has the description, buy button and dropdowns. That area is a bit too narrow. Can I widen the right had column?  If not is there a way to redesign the view so I have two table rows? Top row will have the detail image and the buy now button and the row below will be the description text and the rest?

jenkinhill

The JS Dome has a three column layout built in, with modles left and right column, and component view in centre column. This can be set to 2 columns by not publishing any right modules and then the modules are left and component right. I believe it is a fixed width template so there will be a limitation on how wide you can make the component display. I have attached a pic of a 2 column display where you can see that the description runs the full width of the component area. This uses a template override, but is basically the same as the default layout.

What you say you want is in fact the default layout!

[attachment cleanup by admin]
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

daviat

That would be perfect but I can't seem to turn the tempalte from 3 to 2 columns. I used the default template but it didn't change the product details. Here is the link for you to review.
http://www.alunt.com/index.php/pediatric/exam-shorts-adult-bariatric-22-detail

I would like to place the description below the photo and the product listing with buy button next to the photo similar to that you have shown. Is this done in the modules area? Do I need to turn off any specific modules.

thanks

jenkinhill

I just looked at the url above. You are using the full width of the template for the component display. By columns were you are referring to left & right divs? But you don't seem to be using the default productdetails template (as in VM2.0.26d).

You can change the relative div colun sizes in css or by editing the productdetails template:

Replace <div class="width60 floatleft"> with  <div class="width40 floatleft">  and replace <div class="width40 floatright">  with  <div class="width60 floatright">

To put the description under everything else you could try to rewrite the default template and place the description code ( labelled // Product Description in the template) below the other content item divs, maybe include a <div class="clear"></div> before the description to tidy the diaply.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum