Virtuemart Support :: Topic: CSS Mod Help (1/1)

Welcome, Guest

TOPIC: CSS Mod Help

CSS Mod Help 11 years 2 months ago #2762

Andy Connell

flexiblewebdesign.com/index.php?option=com_kunena&view=topic&catid=18&id=591&Itemid=234#2545

Hi I followed your advice/help in this post you made for me a week or so ago and it works well, but I was after some help advice on how to alter it slightly.

Instead of having the variation in a grey box and the dropdowns underneath.

What is the correct method to have the dropdown display on the same line as the variation title?

I am modifying a product detail page to try and be a bit more compact and would be helpful to have variation and title on same line?

Instead of this;

Attachment ScreenShot2013-02-21at2.08.19AM.png not found

We get this;

Attachment after.jpg not found

Thanks in advance,

Andy

The administrator has disabled public write access.

CSS Mod Help 11 years 2 months ago #2769

John

Hi Andy,

something like:

Open this CSS file:
ROOT/templates/<yourjoomlatemplate>/html/com_virtuemart/assets/css/flexibleVM2Global.css

around line: 2249

div.product-field.product-field-type-E span.product-field-display div div span {
  display: inline !important;
  width: 100% !important;
}

around line: 2246

div.product-field.product-field-type-E span.product-field-display div div {
  background: none repeat scroll 0 0 #F5F5F5;
  margin: 0 0 10px;
  padding: 5px;
  width: auto !important;
}

around line: 2236

div.product-field.product-field-type-E span.product-field-display div div span {
  background: none repeat scroll 0 0 transparent;
  margin: 5px 0;
  padding: 3px;
  text-align: left;
}

around line: 2063

.product-field-type-E .product-field-display .attribute_list {
  display: inline-block;
  margin: 0 3px;
}

gives

Attachments:

inline_att_titles.png (15KB)

The administrator has disabled public write access.

CSS Mod Help 11 years 2 months ago #2772

Andy Connell

Thanks for that help John , It works a treat & I really appreciate it!

I also added a float:right to;

.product-field-type-E .product-field-display .attribute_list {
  display: inline-block;
  margin: 0 3px;
  float:right;
}

Which finishes it off very nicely

Is there any reason why
This at line 2249

div.product-field.product-field-type-E span.product-field-display div div span {
  display: inline !important;
  width: 100% !important;
}

And this at line 2236

div.product-field.product-field-type-E span.product-field-display div div span {
  background: none repeat scroll 0 0 transparent;
  margin: 5px 0;
  padding: 3px;
  text-align: left;
}

cant be combined into this

div.product-field.product-field-type-E span.product-field-display div div span {
	background: none repeat scroll 0 0 transparent;
	margin: 5px 0px;
	padding: 3px;
	text-align: left;
	display: inline !important;
	width: 100% !important;
}

The administrator has disabled public write access.

CSS Mod Help 11 years 2 months ago #2773

John	If your happy were happy! Generally there's no reason why css can't be combined or over-written rules deleted - but be careful that they aren't targeting any other elements. Cheers
	The administrator has disabled public write access.