Virtuemart Support :: Topic: Change Design (background color) + cart Symbol (1/1)

Welcome, Guest

TOPIC: Change Design (background color) + cart Symbol

Change Design (background color) + cart Symbol 11 years 2 months ago #2631

Johannes E.	Hi, 1. i there a posibility to change easily the background color of the shopping cart? 2. And how can you change the grey backround of the productscategories into transparent / no background? 3. How can I change the Cart-Text into a Cart ICON ? Thanks for your help! regards, Johannes
	The topic has been locked.

Change Design (background color) + cart Symbol 11 years 2 months ago #2665

Support

1- Yes there is;
Open this JPG background image:
ROOt//templates/<yourjoomlatemplate>/html/com_virtuemart/assets/images/Flexible/checkoutBack.jpg

And change to whatever you want.
The shopping cart elements use this DIV element: <div class="checkout-content">
This DIV CLASS defined as:

.checkout-content {
	border-left:thin solid #a5a5a5;
	border-right:thin solid #a5a5a5;
	border-bottom:thin solid #a5a5a5;
	padding:15px;
	margin-top:-10px;
	margin-bottom:10px;
	background: url(../images/Flexible/checkoutBack.jpg) repeat-x #e2ddd9;
 
}

in ROOT/templates/<yourjoomlatemplate>/html/com_virtuemart/assets/css/flexibleVM2Global.css

You would see this in couple seconds if you were using "firebug" to investigate your website.
More more info about "firebug" look at this topic:
www.flexiblewebdesign.com/forum-virtuemart-2-template-puremart-support/342-using-firebug-for-customization-or-troubleshooting

2- to remove the background from category boxes; in this CSS file:
ROOT/templates/<yourjoomlatemplate>/html/com_virtuemart/assets/css/flexibleVM2Global.css

Find this CSS rules and modify them as you wish

.FWcategorybox {
	background: url("../images/Flexible/categorybox-back.png") repeat scroll 0 0 transparent;
    border: thin solid #E3E3E3;
	margin:0 2px 2px 0;
	text-align:center;
}
.FWcategorybox:hover {
 
	-moz-box-shadow:inset 0px 0px 10px #bdbdbd;
    -webkit-box-shadow:inset 0px 0px 10px #bdbdbd;
    box-shadow:inset 0px 0px 10px #bdbdbd;
	-webkit-transition: all 250ms ease-in 0ms; /* property duration timing-function delay */
    -moz-transition: all 250ms ease-in 0ms;
    -o-transition: all 250ms ease-in 0ms;
    transition: all 250ms ease-in 0ms;
 
 
}

3- You can't unless you are familiar with CSS, and looks like you are not.
But here is my guide to you, I can't give you the full instruction because it is a custom modification, and our free support doesn't cover custom modifications.

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

Find this CSS rule:

div.addtocart-bar span.FlexibleCSS3Button input.addtocart-button, div.FlexibleWebaddtocart-area div.Flexibleaddtocart-bar span.FlexibleCSS3Button input.addtocart-button{
    padding-top:5px;
    display:block;
    font-size:12px;
    white-space:nowrap;
    color:#fff;
 
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
	background:none;
	border:none;
	height:28px;
	padding:0 20px;
	cursor:pointer;
}

And in this CSS rule add these 3 rules:

background: url(the url of the image you want to replace the text with an icon);
overflow:hidden; (this is necessary to get rid of the TEXT)
padding-top:100px; (you are moving the add-to-cart TEXT to 100px down, and since there is overflow:hidden; exist, the text will be invisible.

Regards.
Forum Support.

The topic has been locked.

Change Design (background color) + cart Symbol 11 years 2 months ago #2676

Johannes E.	Thank you. There is a missunderstanding with Point 3. I ment the CART MODULE, sorry.. Is it possible just to show a cart icon, and not the field? Do you see the problem in thie picture, the cart gets cut. Attachment flexible2.JPG not found
	The topic has been locked.

Change Design (background color) + cart Symbol 11 years 2 months ago #2700

Support	It is a simple z-index CSS issue. If you tell me your website URL, i can provide you to fix this "cut" issue, so you can keep using the dropdown shopping cart module. Regards. Forum Support.
	Last Edit: 11 years 2 months ago by Support. The topic has been locked.

Change Design (background color) + cart Symbol 11 years 2 months ago #2708

Johannes E.	THANK YOU! Regards Johannes
	The topic has been locked.

Change Design (background color) + cart Symbol 11 years 2 months ago #2723

Support	Sure. I believe you fixed your problem by yourself since you didn't provide me your website URL to let me take a look at it. I am marking this topic as "solved" and closing it for forum clearance. Regards. Forum Support.
	The topic has been locked.