HelloKitty: Backgrounds, buttons, wishlist, compare

Colour accents

In order to change color accents, open /YourMagentoDir/skin/frontend/default/YourSkin/css/skin.css, and add the following code to the end of skin.css file.

• Lilac

  .products-grid button.button { background: transparent url(../images/lilac_btn_sprit.gif) no-repeat right -27px; } .products-grid button.button span span { background: transparent url(../images/lilac_btn_sprit.gif) no-repeat left top !important; } .products-grid button.button:hover, .products-grid button.buttonHover { background: transparent url(../images/lilac_btn_sprit.gif) no-repeat right -81px; } .products-grid button.button:hover span span, .products-grid button.buttonHover span span { background: transparent url(../images/lilac_btn_sprit.gif) no-repeat left -54px !important; }

• Pink

  .products-grid button.button { background: transparent url(../images/red_btn_sprit.gif) no-repeat right -27px; } .products-grid button.button span span { background: transparent url(../images/red_btn_sprit.gif) no-repeat left top !important; } .products-grid button.button:hover, .products-grid button.buttonHover { background: transparent url(../images/red_btn_sprit.gif) no-repeat right -81px; } .products-grid button.button:hover span span, .products-grid button.buttonHover span span { background: transparent url(../images/red_btn_sprit.gif) no-repeat left -54px !important; }

Wishlist and Compare

Download list.phtml into /YourMagentoDir/app/design/frontend/default/YourSkin/template/catalog/product/list.phtml

Background

In order to change the background open /YourMagentoDir/skin/frontend/default/YourSkin/css/skin.css, and add the following code to the end of skin.css file.

• Christmas Tree Decoration

  

  Download xmas.png into /YourMagentoDir/skin/frontend/default/YourSkin/images/. Add following code to the end of skin.css file.

  .wrapper { background: url(../images/xmas.png) repeat-x 0% 0%; }

• Blue snow

  

  Download snow.jpg into /YourMagentoDir/skin/frontend/default/YourSkin/images/. Add following code to the end of skin.css file.

  body { background: #ffffff url(../images/snow.jpg) repeat 0 0; }

• White snow

  

  Download snow.png into /YourMagentoDir/skin/frontend/default/YourSkin/images/. Add following code to the end of skin.css file.

  body { background: #ffffff url(../images/snow.png) repeat 50% 0%; }

Go to contentsBack to previous page