Knowledge Base

Search

  • Video block
  • Video Tutorials

  • Watch our easy-to-follow video tutorials for quick tips on designing and managing your store.
  • View Video Tutorials

CSS Examples

The following examples show how you can customize your theme by making slight changes to existing CSS styles. Each example addresses a specific location on the page. The syntax applies specifically to the “Media” theme, but can be easily adapted to your current theme. Examine the style sheet used by your theme to become familiar with the styles. Then, experiment by entering CSS code directly into Edit Custom .css box, to see the effect on your store.

Use the Firefox plug-in Firebug to help you determine the specific names and values used in your theme. You can find the css class or id name of all items on any page by using your browser’s developer tool option if available. For example, you can point your mouse on any item on the page when using Google Chrome by right clicking and selecting “Inspect Element” in the menu list. A window will expand at bottom of your browser and will show the browser’s source code where you can find all the relevant css class or id names.

Top Navigation

Use this code to remove the extra white space under the top navigation.

.top-container { margin: 0; padding: 0; }

Search Box

Use this code to remove the quick search box in the header.

.form-search {display: none;}

The following code moves the quick search box down into the top navigation area.

.header .form-search { position: absolute; right: 10px; top: 100px; }

Checkout Link and Mini Cart

Use this code to remove both the checkout link at the top of the page and the separator bar after the cart link:

.top-link-checkout { display: none; }
.top-cart .block-title strong { background-image: none; }

Link Style

Links are formatted according to the style sheet of your theme. You can change the color of the links in your theme by changing the color code that is assigned to the anchor tag.

a { color:#2166a0; text-decoration:underline; }
a:hover { text-decoration:none; }
:focus { outline:0; }

List Controls

Use this code to remove the pager and sorter blocks:

.pager { display: none; } .sorter{ display: none; }

To change location of Items (# ITEM(S)) and Show # PER PAGE, you can use some css tricks to switch their location.  Use the following code to move Items to left and Show to the right.

.pager .amount { float: right; }
.pager .limiter { float: left; }
.sorter .view-mode { float: right; }

Product Tags Box

Use this code to remove both the Add Product Tags box from the product detail page:

.box-tags { display: none; }

Footer

Use this code to remove the Newsletter sign-up link from the footer:

.footer .form-subscribe { display: none; }