Ubercart pictured cart block
This block realizes some ideas to make the shopping more easily. Here you can find some additional information about this module.
Customizing appearance of the block
It's unable to test this module with all themes and create a universal CSS-file. But we can create a class or an Id almost for all elements of block, so you can customize CSS and replace images for your theme(s).
I want to pay your attention on these declataions:
#uc_pic_cart_block_content .form-submit
Some artifacts in Garland or Pixture Reloaded theme (very fine theme, by the way) was detected, e.g. "floating" in the footer of Garland, very big buttons in Pixture and so on. So it is the first declaration to change if buttons looks unwanted..uc_pic_cart_block_productimage
It is another one, especially if you prefer horizontal orientation of block and your product pictures are not squares. I recommend to set up height or modify your ImageCache preset.- The scroll sections which named ..._scroll and ...scroll:hover are customizing your scroll buttons. Note that the ..._def declaration have "display: none" style to hide it if JavaScript disabled.
There are some images in subdir "img":
- bullet-arrow-down.gif, bullet-arrow-left.gif, bullet-arrow-right.gif, bullet-arrow-up.gif - arrows;
- cart_empty.gif, cart_full.gif - the cart icon, empty or full (by default copy of the standard Ubercart icons as well as arrows actually ^_^);
- dec_product.gif, inc_product.gif, remove_product.gif - the "-", "+" and "X" icons (made by me);
- no_image.gif - default image of product, also self-made.
You can change any of icons to your own but it must be GIF (well... PNG or JPEG inside with .gif extension is a risk) and the same named as default. The HTML attributes "width" and "height" are getting from image so don't be afraid.
Updating
If you changed CSS table and/or images as it described in previous section, a problem with updating comes. So be careful and back up your changes before update to prevent override these files. Also check the new versions of CSS table. For example, the CSS file of Beta2 has some changes from Beta1.
F.A.Q.
How can I make the height of the block in horizontal orientation smaller?
The height of the block are sum of the height of block title, sort header, the max height of product icon and the height of the summary.
Height of the block title seems to be constant because the others block titles should be looks the same. But you can change uc_pic_cart_block_block_title style to customize the block title. After that, the style of sort header is uc_pic_cart_block_sort_header, more than that, you can disable it at all in the settings of the block.
The product icon can be make smaller via changing the ImageCache preset (modify current or create new). Second, you can replace buttons (dec_product.gif, inc_product.gif, remove_product.gif) to smaller (the source is 16x16) or #uc_pic_cart_block_content .form-submit or .uc_pic_cart_block_btn styles to customize them. Third, there are uc_pic_cart_block_spansum (price of item) and uc_pic_cart_block_spanqty (quantity) styles to change e.g. the font size.
I recommend the Firebug plugin for Firefox to inspect the elements so changing the CSS will be easy.
Also, there are the summary styles which also can help you to decrease height of the block.
What about Ajax?
Well.. The block doesn't use Ajax/AHAH so every action leads to page reload, but module works even if JavaScript disabled. I think about adding Ajax functionality, but it needs some time to understand this technique. Maybe I will add it to one of the next releases.
Why the "Ajax cart" is not supported?
It is currently use the original Ubercart block only, feature request #430040 posted.
To be continued...
