CSS Help
The OrderStorm WordPress eCommerce plugin comes with five .css files. You have complete control over these files and can customize any element. Almost all elements have a box and border. If you are not a fan of boxes and borders, you can change the color to transparent to disappear them. Some of the more common items that you may want to change to match the look and feel of your site and customize the product display are identified below.
Important! – Backup your changes
- After you have your .css files changed the way you want them, create a copy of your .css files in a separate folder as OrderStorm will overwrite the main plugin .css files when we issue updates.
- Alternately, use the OrderStorm eCommerce Custom Files Manager plugin. The OrderStorm eCommerce Custom Files Manager sets up a second folder called orderstorm-wordpress-e-commerce-custom that contains a duplicate set of .css files for your shopping cart. You no longer need to worry about creating a separate backup of your style sheets prior to an upgrade. By using the OrderStorm eCommerce Custom Files Manager, its done for you. After the plugin is installed, make all changes to the OrderStorm e-Commerce .css files in the Custom Files Manager plugin edit screen instead of to the .css files in the main plugin.
orderstorm-wordpress-e-commerce/css/OrderStormCategoriesMenuWidget.css
== Description ==
While this file controls the styling of the categories menu except for the background color. The background color of the categories menu cannot be changed from this style sheet. To create the category menu, the .css file calls three files from the images folder:
menu_bottom.png
menu_top.png
menu_center.png
The default color of these images is black. To change the color of the category menu background, you must change the color of the images in these three files.
We will be changing this style sheet to incorporate the background color in a future update.
orderstorm-wordpress-e-commerce/css/OrderStormProductCategories.css
== Description ==
This file controls the category page and the look of any sub-categories displayed on the page.
.categories h1 - Controls the title of the category
font: 2em Tahoma; - Font for the category title
color: white !important; – Color of the category title
background-color: #808080 !important; - Background color for the category title
.categories .long_description - Controls the category long description field – located under the category title
background-color: #F0F0F0; - Background color for the category long description
.categories .tile_medium – Controls the box for the category image
width: 170px; Width of the category image box – Make narrower to display more categories per row
.categories .tile_medium a - This is the category image title
.categories .tile_medium a:hover - Color of the name of the category image title when you hover the mouse over it
.categories .tile_medium a:visited - Color of the category image name color after the link has been visited
.categories .tile_medium div – Controls the category box height plus the width of the category image
width: 170px; - Alignment of the category image inside the box. Increase the number of pixels to move the image to the right. Decrease to move the image left.
height: 154px; - Height of the background box
.categories .tile_medium label – This is the amount of space for the subcategory description above the image
.categories .tile_medium img - To use the default display, the category image should be 150 X 150 max before you upload it in the shopping cart.
max-width: 150px !important;
orderstorm-wordpress-e-commerce/css/OrderStormProducts.css
== Description ==
This file controls the appearance of the product list on the category page.
.products .product_description – Controls the background of the product short description
.products .product_description .item_number – Controls the color of the item number and padding. Change the padding depending on how long your item names and numbers are so this line does not wrap.
.products .product_description .description – Controls the Color of the product short description text
.products .product_description .price.sale – Controls the color and alignment of the price
orderstorm-wordpress-e-commerce/css/OrderStormProductDetails.css
== Description ==
This file controls the look of the product detail page.
Note: Display of this page including the font and tables is primarily controlled by the theme.
.product.page, .product.page td, .product.page p
font-size: 14px !important; – Size of the text in the product short description
.product.page - Box behind the product short description
background-color: #FFFFFF; - Sets the background color for the box behind the product short description and Q&A section- default is white
.product.page div.product_image – The image can be aligned left or right of the text – Text wraps around picture, center where the text is below the picture.
margin: 0 25px 5px 0;
float: right;
.product.page hr.separator
background-color: silver; - Color of the lines above and below the quantity box
height:1px; - Height of the lines above and below the quantity box
.product.page input, .product.page select
font-size: 100% !important; - Size of the number inside the quantity box ‘How Many?’
div.qa_form
border-top-color: silver; - Colors the line above ‘Still have questions about this product?’
border-top-width: 1px; - Width of the line above ‘Still have questions about this product?’
border-top-style: solid; - Style of the line above ‘Still have questions about this product?’
padding-top: 10px; - Width of the space above ‘Still have questions about this product?’ and the border-top
border-bottom-color: silver; - Colors the line under the ‘Send your question’ button
border-bottom-width: 1px; - Width of the line under the ‘Send your question’ button.
border-bottom-style: solid; - Style of the line under the ‘Send your question’ button.
div.qa_form div.title
text-align: left; - Aligns the text ‘Still have questions about this product?’
border-bottom-color: silver; - Colors the line under ‘Still have questions about this product?’
border-bottom-width: 1px; - Width of the line under ‘Still have questions about this product?’
border-bottom-style: solid; - Style of the line under ‘Still have questions about this product?’
padding-bottom: 10px; - Width of the space between ‘Still have questions about this product?’ and the border-bottom.
font-size: x-large; - Font for the text ‘Still have questions about this product?’
color: black; - Color for the text ‘Still have questions about this product?’
orderstorm-wordpress-e-commerce/css/OrderStormShoppingCartStatusWidget.css
== Description ==
This file controls the appearance of the shopping cart status box widget. Note that the widget does not actually appear on the page until an item is placed in the cart. You can change the look and feel of all elements of the box including size, borders, backgrounds, font size, colors and alignment.
div.ostrm_shopping_cart_status_widget
font-size: 14px; - This is the font size for the number of items in the cart, the price and the ‘View cart’ button.
background-color: blue; - This is the background color of the box.
color: white; - This is the color of the text inside the box.
div.ostrm_shopping_cart_status_widget > div.view_cart_button
background-color: white; – This is the background color of the box that says “view cart” inside the larger shopping cart status box.
color: black; - This is the color of the ‘view cart’ text.
div.ostrm_shopping_cart_status_widget > div.view_cart_button:active – Controls the color that the ‘view cart’ box changes to when you click on it.