CSS Styles

This topic has 3 replies, 2 voices, and was last updated 12 years, 10 months ago by Kelvin.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
November 20, 2011 at 1:08 am #2320

Eric
Guest

You guys are gonna hate me after this.. I hope you have an open mind >:D

This is an awesome plugin, and I’m loving working with it. However, applying css styles to some elements is just killing me. It might be my OCD kicking in, but there are so many inconsistencies between IDs and class names, redundant divs, and nameless elements all over the place. Standing out in my mind right now is the checkout page with its unwrapped labels/inputs and the classless/ID-less submit buttons.

What gets me is that I’m manually editing the plugin files, and all of that work will be erased on a new update. Yeah, I’ve got backups of every file so that I can compare them but man does that ever make a lot of extra work down the road.

But I would be an asshat if I didn’t offer a solution, I guess! Here’s a copy of dp-cart.php with a few updates: http://pastebin.com/eMqiWVeW

I suppose you could consider this a formal request for moar css! While we’re on the topic, is it possible to override your php files from the template directory?

Keep up the awesome work. Love, eric

November 21, 2011 at 11:34 am #2418

wham
Guest

This is interesting, thank you!

However, would you be so kind as to go into a little details as to what you think we can do to improve the CSS generally?

January 3, 2012 at 5:13 am #4012

Declan
Guest

I agree the CSS is one of the most annoying to work with, could you implement a different div or class for the shopping cart widget and the add to cart product display generated by the [dpsc_display_addcart] shortcode. I styled my product pages how I want them and now I can’t use the widget in my sidebar as they use the same css styling.

January 3, 2012 at 3:35 pm #4034

Kelvin
Keymaster

That’s not really true. The cart widget and the product display are “enveloped” by different CSS classes which you can sue to differentiate them.

For widget:
.dp_widget_product – for the overall widget
.dp_widget_product_image – for the image
.dp_widget_product_detail – for the content other than the image

For product display:
.dpsc_product_main_container – for the overall product
.dpsc_image_container – for the image(s)
.dpsc_content_container – for content other than the image(s)

For example, if you want to address the “Add to cart” button differently, you would do:

For widgets:
.dp_widget_product .dp_widget_product_detail .product_form {CSS HERE}

For product pages:
.dpsc_product_main_container .dpsc_content_container .product_form {CSS HERE}

This applies similarly when you look at the “grid display”.

I would love to answer any other questions.
Author

Posts