This block suggests some ideas to make the shopping more user friendly. Here you can find some additional information about this module.
Customizing appearance of the block
It's impossible to test this module with all themes and create a universal CSS-file. Fortunately we can create a class or an Id for almost every element of the block. This means you can customize CSS and replace images for your theme(s).
CSS and image replacing
I want to direct your attention to these declarations:
It is important 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 image preset.
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.
Here is hierarchy of theme functions:
uc_pic_cart_block_block_title- block title
uc_pic_cart_block_sort_header- sort header (Sort by: name | qty | sum)
uc_pic_cart_block_content- main block content
uc_pic_cart_block_scroll_btn- one scroll button
uc_pic_cart_block_item- cart item
uc_pic_cart_block_item_image_product- product image if present
uc_pic_cart_block_item_image_default- default image
uc_pic_cart_block_item_qty_manage- "+" and "-" buttons with current quantity of item
uc_pic_cart_block_summary- totals and buttons
To deep understand how it works you can check uc_pic_cart_block.theme.inc file or Bootstrap example above where all variables were documented.
In Drupal 7.x themes can exclude unwanted CSS and JS files. You can create your own scrolling script on theme level.
If you want to use provided script there are few IDs and classes used.
For scrolling buttons use following IDs:
#uc_pic_cart_block_scroll_up: vertical block - up button
#uc_pic_cart_block_scroll_down: vertical block - down button
#uc_pic_cart_block_scroll_left: horisontal block - left button
#uc_pic_cart_block_scroll_right: horisontal block - right button
#uc-pic-cart-block-wrapper: ajax wrapper
#uc_pic_cart_block_scroll_area: scroll area - outer container (scrollTop/scrollLeft applied)
#uc_pic_cart_block_content: content area - inner container
.qty: quantity management block - important for vertical scrolling delta-height
.uc_pic_cart_block_item_hor: cart item in horisontal block - important for horisontal block width and height calculations
.uc_pic_cart_block_scroll_area_vert: scroll area helper class in vertical block (added by script)
.uc_pic_cart_block_scroll_area_hor: scroll area helper class in horisontal block (added by script)
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 6.x-Beta2 has some changes from 6.x-Beta1.
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 image 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?
In contrast with 6.x version, 7.x branch have Ajax support for changing sort order, remove and change qty of cart items.