Backgrounds and Buttons

How to add background image in the header

1 Create an image. 2 Create transparent logo.gif. 3 CSS. Read more...

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.

• div.block-cart-top .title:link, div.block-cart-top .title:visited, .form-list label.required em, .product-view .product-shop .availability, p.required, .validation-advice, #advice-validate-email-newsletter, .subtitle, .sub-title, div.block-cart-top .title:hover, .block-cart .subtotal .price, .product-options dt span.required, .minimal-price .price { color: #99b500; } .nav-container {background: url(../images/nav_bg_green.png);} div.block-cart-top .actions button.button-small span { background: transparent url(../images/header_btn_sprite_green.gif) no-repeat 100% 100% !important;} div.block-cart-top .actions button.button-small span span { background: transparent url(../images/header_btn_sprite_green.gif) no-repeat 0% 0% !important;} button.btn-checkout span { background: transparent url(../images/btn_checkout_green.gif) no-repeat 100% 100% !important;} button.btn-checkout span span { background: transparent url(../images/btn_checkout_green.gif) no-repeat 0% 0% !important;}
• div.block-cart-top .title:link, div.block-cart-top .title:visited, .products-list .special-price .price, .form-list label.required em, .product-view .product-shop .availability, .price-as-configured .price, p.required, .validation-advice, #advice-validate-email-newsletter, .subtitle, .sub-title, div.block-cart-top .title:hover, .block-cart .subtotal .price, .mini-products-list .regular-price .price, .mini-products-list .special-price .price, .mini-products-list .price-from .price, .mini-products-list .price-to .price, .mini-products-list .minimal-price .price, .special-price .price, .product-options dt span.required, .regular-price .price, .minimal-price .price { color: #e10000; } .nav-container { background: url(../images/nav_bg_red.png); } div.block-cart-top .actions button.button-small span { background: transparent url(../images/header_btn_sprite_red.gif) no-repeat 100% 100% !important; } div.block-cart-top .actions button.button-small span span { background: transparent url(../images/header_btn_sprite_red.gif) no-repeat 0% 0% !important; } button.btn-checkout span { background: transparent url(../images/btn_checkout_red.gif) no-repeat 100% 100% !important; } button.btn-checkout span span { background: transparent url(../images/btn_checkout_red.gif) no-repeat 0% 0% !important; }

Backgrounds

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.

• body {background: url(../images/bg01.jpg) repeat 0% 0%; background-attachment: fixed; } .page {background:#ffffff; border-left: 3px solid #f1f1f1; border-right: 3px solid #f1f1f1; }
• body {background: url(../images/bg02.jpg) repeat 50% 0%;} .page {background:#ffffff;}
• body {background: #000 url(../images/bg03.jpg) no-repeat 50% 0%; background-attachment: fixed;} .page {background:#ffffff; border-left: 3px solid #f1f1f1; border-right: 3px solid #f1f1f1; }
• body {background: #c2c2c2 url(../images/bg04.jpg) no-repeat 50% 0%; background-attachment: fixed;} .page {background:#ffffff;}
• body {background: #000 url(../images/bg05.jpg) repeat 50% 0%;} .page {background:#ffffff;}
• body {background: #000 url(../images/bg06.jpg) repeat 50% 0%; background-attachment: fixed;} .page {background:#ffffff;}
• body {background: #fff url(../images/bg07.jpg) repeat 50% 0%; background-attachment: fixed;} .page {background:#ffffff;}
• body {background: #fff;} .page {background:#ffffff; border-left: 3px solid #f1f1f1; border-right: 3px solid #f1f1f1;}
• body {background: #000;} .page {background:#ffffff; }
• body {background: #ffffff url(../images/snow.png) repeat 0 0;} .page {background:#ffffff; border-left: 3px solid #f1f1f1; border-right: 3px solid #f1f1f1;}
• body {background: #ffffff url(../images/xmas.jpg) repeat 50% 0%;} .page {background:#ffffff;}

Go to contentsBack to previous page