Applying Custom Styles to Your Store
Purpose:
To explain how to upload an image to use as the background image on your site.
Solution:
It’s possible to add a page background image via CSS. Let’s say you wanted to change the light gray background of the Celebrity theme to use a background texture image (named bg-grey.gif in this example), instead of a solid color.
For example:
1) Select
CMS / Images & Other Files
to upload your background image
2) Select
System / Configuration
. In the
Design
section on the
HTML Head
tab, and enter the following in the
Miscellaneous Scripts
field (be sure to click the
Save Config
button to save your change):
<style>
.header-container { background: transparent url(/media/wysiwyg/bg-grey.gif) !important; }
.main-container { background: transparent url(/media/wysiwyg/bg-grey.gif) !important; }
.footer-container { background: transparent url(/media/wysiwyg/bg-grey.gif) !important; }
</style>
If you only want to change the background of the light gray area and not the footer section, just leave out the .footer-container line.
Other Styles:
You can enter any CSS definitions between the <style> ... </style> tags in the Miscellaneous Scripts field (located in the NRO Admin Panel under System / Configuration / HTML Head). Alternatively, you can upload your own CSS file.
Popular styles include:
.special-price { color: red; }
/* Changes the sale price on the item detail page to red */
.short-description { display: none; }
/* Hides the item's short description displayed in the middle of the page */
.availability { margin: 0; visibility: hidden; }
/* Hides the Out Of Stock message on the item detail page */
#product_tabs_description_tabbed_contents.product-tabs-content .std ul li { list-style: disc inside none;}
/* Adds disc bullets to bulleted lists used in HTML long descriptions */
#product_tabs_description_tabbed_contents.product-tabs-content
.std p { margin: 0 0 20px 0; }
/* Adds spacing after paragraphs used in HTML long descriptions */
Article ID: 378
Created On: Mon, Oct 15, 2012 at 3:00 PM
Last Updated On: Wed, Dec 12, 2012 at 2:08 PM
Online URL: http://help.ncrretailonline.com/article/applying-custom-styles-to-your-store.html