Backgrounds and Buttons v2

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 colour accents open /YourMagentoDir/skin/frontend/default/YourSkin/css/skin.css, and add the following code to the end of skin.css file.

• .products-grid button.button, .products-list button.button, .add-to-cart button.button { background: transparent url(../images/light_btn_split_green.gif) no-repeat right -64px; } .products-grid button.button span span, .products-list button.button span span, .add-to-cart button.button span span { background: transparent url(../images/light_btn_split_green.gif) no-repeat left top !important; } .products-grid button.button span span, .products-list button.button span span, .add-to-cart button.button span span, .products-grid button.button:hover span span, .products-grid button.buttonHover span span, .products-list button.button:hover span span, .products-list button.buttonHover span span, .add-to-cart button.button:hover span span, .add-to-cart button.buttonHover span span { color: #fff; }

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/flower_bg01.jpg) repeat-y 50% 0%; }
• body { background: url(../images/flower_bg02.jpg) repeat-y 50% 0%; }
• body { background: #000000 url(../images/flower_bg03.jpg) no-repeat 50% 0%; }
• body { background: #fff url(../images/flower_bg04.jpg) repeat 0% 0%; }
• body { background: #212121 url(../images/flower_bg05.jpg) repeat-y 50% 0%; }
• body { background: #c9d77c url(../images/neutral_bg01.jpg) repeat-x 0% 0%; }
• body { background: #b5c658 url(../images/neutral_bg02.jpg) repeat-x 50% 0%; }
• body { background: #ffffff url(../images/snow.png) repeat 0 0; }
• .wrapper {background: url(../images/xmas.png) repeat-x 0% 0%;}

This is a step-by-step guide on how to change background and colour accents in the LightShop Green Responsive Magento Template.

The LightShop theme is a very modern, simple, and fresh theme, with a focus on usability and fast, clean code. It is fully responsive theme, has many more features.

Back

Go to contentsBack to previous page