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 ==

This file controls the styling of the categories menu.

.ostrm_categories_menu_list
background-color: #F1F1F1 !important; – Background color for the categories menu

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 a:link – Controls the color of the product name.

.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.