How to increase width of dyna tabs

Welcome, Guest

(1 viewing) (1) Guest

Please ask all of your DynTabs Virtuemart Theme questions here.

Reply Topic

New Topic

Page:
1

TOPIC: How to increase width of dyna tabs

How to increase width of dyna tabs 11 months ago #2785

Jinsoku OFFLINE Fresh Boarder Posts: 4	If you look at the attached image you will see that the dynatabs width is quite small. However i want to increase the width but i cannot figure it out. Please could you tell me how to solve this problem. Thank you Attachments: screenshot...tabs.png (125KB)
	Reply Quote

Re: How to increase width of dyna tabs 11 months ago #2787

nicholas
OFFLINE
Moderator
Developing for Joomla since it was born!
Posts: 1197

Hello -

You go to this CSS file:
/components/com_virtuemart/themes/Dynatabs/templates/product_details/includes/js/css/dynatabs.tpl.css

Places which need to be coordinated in making DynaTabs wider are in marked with an asterisk:

 
#dynaTabsProductBox {
	**width:750px;**
	margin:0px;
	padding-left:20px;
}
#dynaTabsProductName {
	**width:750px;**
	color:#ff5900;
	margin-left:0px;
	margin-top:0px;
	padding-top:10px;
	padding-left:5px;
}
 
#dynaTabsProductImageBox {
	position:relative;
	background:none;
	float:left;
	**width:470px;**
	height:380px;
	margin-left:0px;
	padding:0px;
	border:thin;
}
 
#dynaTabsOtherImagesBox {
	float:left;
	**width:200px;**
	height:350px;
	background:none;
	padding-right:4px;
	padding-bottom:2px;
	margin-right:0px;
}
 
.browseProductImage {
	**width:130px;**
	height:80px;
	clear:right;
	float:right;
}
 
.dynaTabsThumb {
	**width:137px;**
	height:81px;
	clear:right;
	float:right;
	padding-left:1px;
	padding-top:1px;
	padding-right:1px;
	padding-bottom:1px;
	margin-bottom:2px;
	margin-right:5px;
}
 
#showThumb0, #showThumb1, #showThumb2, #showThumb3 {
	height:75px;
	**width:125px;**
	margin-left:2px;
	margin-top:2px;
}
 
 
#separatorBar1 {
       clear:both;
	float: left;
	height: 2px;
	**width: 400px;**
	margin-top:15px;
	margin-bottom:15px;
}
 
#separatorBar2 {
	clear:both;
	float: left;
	height: 2px;
	**width: 750px;**
	margin-top:20px;
	margin-bottom:15px;
}
 
#dynaTabsProductTabsPlace {
	clear:both;
	float: left;
	min-height: 430px;
	**width: 442px;**
}
 
#dynaTabsProductTabs {
	clear:both;
	float: left;
	min-height: 430px;
	**width: 442px;**
}
 
#dynaTabsPurchaseBox {
	float:left;
	**width:241px;**
	min-height:30px;
	background-color:transparent;
	margin-top:10px;
	margin-left:25px;
	padding:0;
}
 
.vmCartContainer {
	**width:241px;**
	min-height:30px;
	border:none;
	margin:0px;
	padding:0px;
}
 
.vmCartAttributes {
	float:left;
	**width:234px;**
	padding:0px;
	margin-left:0px;
}
 
.addtocart_button {
    clear:both;
	float:left;
	**width:167px;**
	height:22px;
	margin-left:35px;
	margin-top:5px;
	text-align:center;
	border:none;
}
 
#productReviews {
	float:left;
	margin-top:10px;
	**width:740px;**
	border:none;
	background:none;
    padding-bottom:2px;
}
 
#productReviewForm {
	float:left;
	margin-top:10px;
	**width:740px;**
	border:none;
	background:none;
}
 
#relatedProducts {
	float:left;
	margin-top:0px;
	**width:740px;**
	height:230px;
	border:none;
	background:none;
}
 
#cartSurround {
	float:left;
	**width:234px;**
	margin-top:0px;
	margin-bottom:30px;
}
 
#cartOptionBox {
	float:left;
	**width:234px;**
	min-height:5px;
	padding:0px;
	margin-top:20px;
}
 
#cartQuantity {
	float:left;
	**width:234px;**
	min-height:10px;
	padding:0px;
	margin-bottom:5px;
}

Please note asterisks aren't actually in the CSS file, I just used them above to note the width fields. Not all of the elements will need to change, depending on what you are trying to do in terms of your sizing. I simply showed them all above so that you can find them easily. All needed changes are in the CSS file. No php code changes or changes in any of the VM template files are required.

Please make sure you have a clean CSS file before starting on changes so that if you make a mistake, you can fall back to the previous file.

Nicholas
CIO - CorFun, Inc.
Publisher - orthodoxbiz.com
Webmaster - Orthodox Christian Network

Last Edit: 11 months ago by nicholas.

Reply Quote

Re: How to increase width of dyna tabs 11 months ago #2788

Jinsoku OFFLINE Fresh Boarder Posts: 4	Thank you very much for your prompt reply. However that is a very general answer and i understand its because of the lack of information i have provided. If you looked at the attachment, i have created a graphical representation of what i would like to the tabs to look like. Please could you tell me specifically what adjustments i should make. Thanks again
	Reply Quote

Re: How to increase width of dyna tabs 11 months ago #2789

nicholas
OFFLINE
Moderator
Developing for Joomla since it was born!
Posts: 1197

You start by making the overall product box bigger than 750px. You make it the size you want, then you make #dynaTabsProductTabsPlace bigger than 442. The tabs are designed to have the add-to-cart either in a tab or to reserver space for them to the right. If you plan to put them in a tab, then no problem, but if you plan to have the add-to-cart next to the tabs, you will need to take the space needed for the add-to-cart into account.

In your example, you aren't using any product images, so that may not be a factor. You may plan to put the product add-to-cart in a tab, in which case you can ignore that styling.

The Product Reviews can be in a tab, or they can be below the tab area. They are set to 740px wide, but you may not need them at all if you plan to not have the functionality turned on.

There are a lot of choices for DynTabs and for Virtuemart that affect sizing. If you make the VM area too big, that also means you can't publish Joomla modules to the left or right. This is all part of the design process.

Nicholas
CIO - CorFun, Inc.
Publisher - orthodoxbiz.com
Webmaster - Orthodox Christian Network

Reply Quote

The following user(s) said Thank You: Jinsoku

Reply Topic

New Topic