First off, I'm a beginner when it comes to CSS, so please dummy down your reply. Currently, the CSS for the Add to Cart button on the products page is linked to the Add to Cart button on the product details page. How would I go about creating a separate class that only affects the Add to Cart button on the products page? Specifically, I would like to change the position of the Add to Cart button on the products page without affecting it on the details page. Which files will I need to modify to make this work? Below are pages for reference.
1. http://bit.ly/1s34qpF (http://bit.ly/1s34qpF)
2. http://bit.ly/UVsc8m (http://bit.ly/UVsc8m)
css rules can be wriiten in any file that is loaded
so pick one and
products page :
.browse-view .addtocart-button {
do what you want
}
products detail page:
.productdetails-view .addtocart-button {
do what you want
}
Yes, but which file do I add the additional class to? I want to add the additional rule to the Add to Cart button on the Products Page, but have it omitted on the Details Page.
which is EXACTLY what the above will do.. you don't need any additional class - the ones above are already there!
think you had better read this ->
Descendant Selector
The descendant selector matches all element that are descendants of a specified element.
The following example selects all <p> elements inside <div> elements:
Example
div p {
background-color: yellow;
}