Center Add to Cart Button

[magtaf]

Hi Everyone, I am in the need of some guidance.

I have searched on many post on hos to style the add to cart and I have tried several methods but none have worked for me.

If you can take a look at the attached image, the add to cart, I would like to make the font 12px and the width to 100px, and from top to bottom make if centered.

I have make the modification with firebug to see how I want it in the vmsite-ltr.css but in (( span.details-button input.details-button )) but the changes donnot take.

Can someone help me. I have read the post (http://forum.virtuemart.net/index.php?topic=90935.0) and even moved the vmsite-ltr.css to my template CSS folder and nothing getes reflected online. I have cleared the cache on my browsers, i tested with IE, Chrome, Firefox and SAfari and no reflection to changes made.

Am I changing the correct file and section?



[attachment cleanup by admin]

[bytelord]

Hello,

Answer to your previous post: http://forum.virtuemart.net/index.php?topic=110662.msg371102#msg371102

Without a live url is difficult to help you out with the styling. Please make sure that you create a css override file for vmsite-ltr.css under your template so you will not loose your changes in each vm2 update.
Your button styling is overrides be your Joomla css styling (is suppose), but please provide a live url, without that is difficult someone to help you.

Regards

[magtaf]

Hi Bytelord.

This is the live URL

http://www.futurewirelesselectronics.com/index.php/shop-category/view/productdetails/virtuemart_product_id/3525/virtuemart_category_id/993

Hole that this helps.

[bytelord]

Hello,

As is see you are using gavick template. So the easiest way is to create a new CSS override file named virtuemart.css and load it in the template header file, because i don't know which template header file gavick's template uses you could loaded your CSS changes inside override.css as gavick instructed, OR USE style1.css that you already used (suppose your template supports 2-3 CSS styles and changed thought a switcher).

In out case we will use style1.css (please ask gavick support where how to use the override.css). So,

That file is located under your_joomla_folder\templates\gk_black_and_white\css\style1.css and i suppose that you will use this style. Edit that file and place

Code Select Expand

span.addtocart-button input.addtocart-button, span.addtocart-button input.notify-button {
width:100px;
font-size:12px
}

alternative you can use:

Code Select Expand

.addtocart-button {
width:100px!important;
font-size:12px!important;
}

Why we have to place hour changes to our overrides? Because each time you upgrade vm you will loose those changes.
So because if you after upgrade gavick template you should place those changes inside override.css that gavick provides with their templates as far as i know.

Regards

[magtaf]

Nikos, thank you for you help in styling, it helped alot and I got my issues fixed.

I have another question. I am having issues centering the add tocart and I have tried firebug and cannot figure out what it the place I need to make the add to cart button centered with the category view as in this picture.

Any help is appreciated.

[bytelord]

Hello,

i think i had respond on that on another post, but any way, please provide a live url, i check your url above but is down to maintenance

Regards

[magtaf]

Butelord

Site is now open for your review

[bytelord]

Hi,

Your button centerized on the width 70% you have ...

<div class="width70 floatright">

make it without that  inside your template override ...

<div class="floatright">

also you have to make A LOT of css fixes ...

Use firebug to examine you site code and css styling: https://forum.virtuemart.net/index.php?topic=102850.0

Template Overrides:
Creating Template overrides: https://forum.virtuemart.net/index.php?topic=98505.0
Template System: https://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system

Regards