{"id":2641,"date":"2013-04-22T17:25:01","date_gmt":"2013-04-22T21:25:01","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/04\/22\/changing-the-content-background-style-in-oscommerce\/"},"modified":"2021-08-16T23:15:08","modified_gmt":"2021-08-17T03:15:08","slug":"changing-the-content-background-style-in-oscommerce","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/","title":{"rendered":"Changing the content background style in osCommerce"},"content":{"rendered":"

\"osCommerce<\/a><\/p>\n

<\/div>\n

Once you have changed the background image of your osCommerce site<\/a>, you will want to customize the body of the webpage. The snapshot to the right shows what the osCommerce site looks like with no background for the content area for the \u201cSunny<\/em>\u201d theme. You see the website background through it.<\/p>\n

To style this we will need to edit the stylesheet.css<\/em> file. The CSS code in the stylesheet.css<\/em> file is the #bodyWrapper<\/em> id. This article will explain how to change the color of the background of your osCommerce #bodyWrapper<\/em> content.
<\/p>\n

Create a header image<\/h2>\n

\"Create<\/a><\/p>\n

<\/div>\n

The first thing you will need to do is create an image for your header. Just like the last tutorial, we will make the header image duplicate across the header. The image we will use in this tutorial is found to the right. Part of the #bodyWrappe<\/em>r is the header section. The header section simply needs an image to make it fit the body content color. Below are the steps to set this up.
<\/p>\n

Add the CSS for the #bodyWrapper content<\/h2>\n

Once you have the image you want for your header, you can now add the code which will style the #bodyWrapper<\/em> content of your site. below are the steps to add the CSS code for your #bodyWrappe<\/em>r content in osCommerce.<\/p>\n

    \n
  1. Login into your cPanel<\/a>.<\/li>\n
  2. Go to the File Manager<\/a>. Select<\/strong> your osCommerce installation directory and click Go<\/strong>.<\/li>\n
  3. \"Upload<\/a>\n
  4. \"CSS<\/a>\n
    <\/div>\n

    Edit<\/a> the stylesheet.css<\/em> file in your osCommerce installation directory. Add<\/strong> the following code to the #bodyWrapper<\/em> CSS.
    <\/p>\n

    #bodyWrapper { background: repeat-x top  url('images\/header.png') #fff8e5; border:solid; border-width: 0px 1px 1px 1px; border-color: #494437; }<\/pre>\n
     This code will add a border around the bodyWrapper, fill in the background with the #fff8e5<\/em> color, and duplicate the header image across the top.<\/p>\n
    Note! the color for the background in this example is #fff8e5<\/em>. You can change to whatever color you want. <\/p>\n
    Save<\/strong> the file. <\/p>\n
    \"View<\/a><\/p>\n
    <\/div>\n
    Now the #bodyWrapper<\/em> area is styled with a border and a solid background. 
     <\/p>\n\n<\/li>\n<\/ol>\n
    The next tutorial will explain how to customize the footer of your osCommerce site.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Once you have changed the background image of your osCommerce site, you will want to customize the body of the webpage. The snapshot to the right shows what the osCommerce site looks like with no background for the content area for the \u201cSunny\u201d theme. You see the website background through it. To style this we Read More ><\/a><\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[31],"tags":[],"class_list":["post-2641","post","type-post","status-publish","format-standard","hentry","category-oscommerce"],"acf":[],"yoast_head":"\nChanging the content background style in osCommerce | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"When you change the background of your osCommerce website you will need to stye the bodyWrapper as well. This article will explain how.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Changing the content background style in osCommerce | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"When you change the background of your osCommerce website you will need to stye the bodyWrapper as well. This article will explain how.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-04-22T21:25:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:15:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_oscommerce_201_change-content-style_custom-bodywrapper-1-without-content-style.png\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41\"},\"headline\":\"Changing the content background style in osCommerce\",\"datePublished\":\"2013-04-22T21:25:01+00:00\",\"dateModified\":\"2021-08-17T03:15:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/\"},\"wordCount\":349,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_oscommerce_201_change-content-style_custom-bodywrapper-1-without-content-style.png\",\"articleSection\":[\"OsCommerce\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/\",\"name\":\"Changing the content background style in osCommerce | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_oscommerce_201_change-content-style_custom-bodywrapper-1-without-content-style.png\",\"datePublished\":\"2013-04-22T21:25:01+00:00\",\"dateModified\":\"2021-08-17T03:15:08+00:00\",\"description\":\"When you change the background of your osCommerce website you will need to stye the bodyWrapper as well. This article will explain how.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_oscommerce_201_change-content-style_custom-bodywrapper-1-without-content-style.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_oscommerce_201_change-content-style_custom-bodywrapper-1-without-content-style.png\",\"width\":800,\"height\":576,\"caption\":\"Click here to view the larger image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Changing the content background style in osCommerce\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41\",\"name\":\"InMotion Hosting Contributor\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/jamesr\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Changing the content background style in osCommerce | InMotion Hosting","description":"When you change the background of your osCommerce website you will need to stye the bodyWrapper as well. This article will explain how.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/","og_locale":"en_US","og_type":"article","og_title":"Changing the content background style in osCommerce | InMotion Hosting","og_description":"When you change the background of your osCommerce website you will need to stye the bodyWrapper as well. This article will explain how.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2013-04-22T21:25:01+00:00","article_modified_time":"2021-08-17T03:15:08+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_oscommerce_201_change-content-style_custom-bodywrapper-1-without-content-style.png","type":"","width":"","height":""}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41"},"headline":"Changing the content background style in osCommerce","datePublished":"2013-04-22T21:25:01+00:00","dateModified":"2021-08-17T03:15:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/"},"wordCount":349,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_oscommerce_201_change-content-style_custom-bodywrapper-1-without-content-style.png","articleSection":["OsCommerce"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/","name":"Changing the content background style in osCommerce | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_oscommerce_201_change-content-style_custom-bodywrapper-1-without-content-style.png","datePublished":"2013-04-22T21:25:01+00:00","dateModified":"2021-08-17T03:15:08+00:00","description":"When you change the background of your osCommerce website you will need to stye the bodyWrapper as well. This article will explain how.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_oscommerce_201_change-content-style_custom-bodywrapper-1-without-content-style.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_oscommerce_201_change-content-style_custom-bodywrapper-1-without-content-style.png","width":800,"height":576,"caption":"Click here to view the larger image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/oscommerce\/changing-the-content-background-style-in-oscommerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Changing the content background style in osCommerce"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41","name":"InMotion Hosting Contributor","url":"https:\/\/www.inmotionhosting.com\/support\/author\/jamesr\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=2641"}],"version-history":[{"count":3,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2641\/revisions"}],"predecessor-version":[{"id":84649,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2641\/revisions\/84649"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=2641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=2641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=2641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}