Please follow the steps below to change the CSS for the Left/Center/Right column:
1. Open the “main-responsive.css” file using Notepad. The file is located in “templates/default/css.”
2. Locate any code in the file that contains “sidebarcell.”
.sidebarcell, .main-content, .main-product, .main-news, .main-blog, .main-freetext, .main-product, #shopcustomer {
border: 1px solid #e7e7e7;
margin-bottom: 10px;
padding: 15px;
}
.sidebarcell_noborder {
margin-bottom: 10px;
padding: 15px;
}
.sidebarcell .txtfielddropdown {
width: 100%; }
.sidebarcell, .sidebarcell_noborder,
.main-content, .main-product, .main-news, .main-blog, .main-freetext,
.main-product, #shopcustomer { padding-top: 0px;}
3. Directly update the CSS to reflect your own column style as mentioned above. You need to be familiar with CSS in order to update this.
For more information about CSS, please refer to:
http://www.w3schools.com/Css/default.asp
For example, if you wish to change the columns so that they will show a green background color, then please update the CSS as shown below:
.sidebarcell, .main-content, .main-product, .main-news, .main-blog, .main-freetext, .main-product, #shopcustomer {
border: 1px solid #e7e7e7;
margin-bottom: 10px;
padding: 15px;
background-color:#009900;
}
4. Save the file and upload to the “templates/default/css” folder.
Preview before the changes:
After changes:
NOTE: The preview shown above is just an example of how to change the left/center/right column CSS to display in a blue background. You can, of course, change any of the CSS codes to create your own style.