0

My goal is to borrow the Add to Cart form style from Commerce Kickstart on a site where:

  1. Panels: Node Templates controls the Product Displays
  2. Subtheme of Commerce Kickstart sets the CSS / template

Questions:

  • How do I find the CSS controlling the standard Commerce Kickstart Add to Cart form?
  • How do I use that CSS to control all "Add to Cart" widgets on the site?
  • Do I need to call out each Product Display type? Or is there a way to call it globally?
  • Related question: Why is the parent theme CSS being called? (There seems to be two levels of the Commerce Kickstart theme. One in .../themes/contrib and one in .../themes/commerce_kickstart_theme What's the difference? Are there two to share between the admin theme and site theme?

I am new to css, so am using "Inspect Element" to figure out how styles are applying to a given item. However, I can't figure out how to repurpose the css from Commerce Kickstart to apply to all "Add to Cart" widgets that are sprinkled throughout the site and control on a product-type basis through several Panels: Node Templates.

**These css callouts seem to be coming from the Kickstart theme, instead of the subtheme. I have enabled the subtheme and see changes I am making in the subtheme work, so I'm lost on why it is calling from the parent theme. .../profiles/commerce_kickstart/themes/contrib/omega_kickstart/css/omega-kickstart-alpha-default-normal.css

From Inspect Element, I see that Commerce Kickstart shows:

For the attribute label:

.node-product-type .field-name-field-product form.commerce-add-to-cart label {
    float: left;
}

For the attribute drop-down:

element.style {
    width: 44.7778px;
    margin-right: 17px;
    text-align: right;
}
  • 1
    Welcome to Drupal Answers! You stated facts, but you didn't asked an explicit question. (The title doesn't count as question.) – kiamlaluno Nov 2 '15 at 4:14
0

My solution is not elegant, but it got the job done:

  1. Using inspect element, identified css that dictating styling of the "Add to Cart" form elements that I wanted to keep. This css was buried in the subtheme_style.css file associated with "Product" only: .node-product-type.

  2. Copied css to start of subtheme_style.css file

  3. Removed the references to .node-product-type. This set all the select widget fields and all the "Add to cart" buttons to the desired style/look.

This seems like an odd way to go, but also means that I don't have to differentiate among all product display types, as I build out panel displays that are unique to each one. What would you have done differently?

This is the css that I repurposed and generalized by deleting the reference to .node-product-type:

.field-name-field-product form.commerce-add-to-cart label { float: left; margin-right: 5px; width: 45%;}

.field-type-commerce-product-reference form.commerce-add-to-cart .form-submit { background-color: #9E4934; /*CG Add to Cart button*/ background-image: url("../images/bg_add_to_cart.png"); background-position: 90% 50%; /* LTR */ background-repeat: no-repeat; border: 0; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; color: #ffffff; font-family: "Open Sans", sans-serif; font-size: 17px; font-weight: 400; float: right; margin-top: 40px; margin-left: 5px; /* LTR */ padding: 5px 50px 5px 10px; /* LTR */ }

.field-type-commerce-product-reference form.commerce-add-to-cart .form-submit:hover { cursor: pointer; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.