HELP CENTER

LOGIN

877-595-4HUB (4482) Support Chat

Create a Website Hosting Features Web Design Compare About Us

Written by Arnel Custodio Views: 7,305 Published: May 2, 2013 Comments: 1

Changing the Background Image in OpenCart 1.5

You will occasionally have the need to change the background scenery of your OpenCartinstallation so that it looks the way you want it to look. This modification is accomplished bymodifying the existing theme's STYLESHEET.CSS (Cascading Style Sheet) file. The addition ofa background image will affect multiple elements of the website including colors, font colors andother graphics that must appear on top of the image. However, the rewards of making a goodimage change include keeping your site fresh for your users and also standing apart from yourcompetition. The following tutorial shows you how to modify the background image in the defaulttheme of the OpenCart 1.5 installation.

Modifying the Background Image in OpenCart 1.5

To give you an idea of the background that is being changed in OpenCart let's view a fewscreenshots so that there is an understanding of what will be changed by the instructions in thisarticle:

The image above shows the default theme using sample data with an OpenCart installation. Theimage below shows a change in the color of the background:

Note that in the above image, the background color has been changed to black. You can also addan image to the background, here's an example of how it would look with modifications to the CSSfile for centering and expanding an image:

Don't want to login usingFacebook or Google+?

Help Center Login

Login with Facebook

Login with Google+

Customizing the Appearance ofOpenCart

1. How to upload the StoreLogo in OpenCart 1.5

2. Remove Branding fromOpenCart 1.5

3. Changing the BackgroundImage in OpenCart 1.5

4. Setting the Image Sizes inOpenCart 1.5

5. Adding a New OpenCartTheme in OpenCart 1.5

6. Adding Product Links inOpenCart 1.5

7. Overview of the Options forAdding a Product inOpenCart 1.5

8. Setting the number ofcolumns in the store menuin OpenCart 1.5

9. How to set the image usedfor the banner in OpenCart1.5

10. How to enable banners inOpenCart 1.5

11. How to edit the BannerName in OpenCart 1.5

12. How determine the bannerlink in OpenCart 1.5

13. Overview of Setting UpBanners in OpenCart 1.5

14. Opencart 1.5 Admin:Changing the default itemsshown per catalog page

Enter a Domain (mydomain.com)

Help Center Login

How may we help? (e.g. install joomla) Search

Home Learning Corner OpenCart 1.5 Customizing the Appearance of OpenCart Changing the Background Im...

Step 1.

Step 2.

Step 3.

In order to make these changes you will need to have access to the installation folder forOpenCart, and then be able to edit the stylesheet CSS file for the theme that is loaded. The CSSfile is a text file that is found within the installation files for OpenCart. The following instructionswill reference the Cpanel File Manager and the built-in editors for these tasks. Knowledge of basicCSS commands will also help, but for this article we will provide the commands you need in orderto make the appropriate changes to the file.

Editing Stylesheet.CSS file in the OpenCart Installation

Login to your Cpanel and then click on File Manager to open the application.

The path for the Stylesheet.CSS file that you are seeking will in a path similar to thefollowing:

/public_html/catalog/view/theme/default/stylesheet.css

If you installed OpenCart to a directory other than the primary domain, then pathwould look something like this:

/public_html/DOMAINNAME/catalog/view/theme/default/stylesheet.css

DOMAINNAME = the name of your add-on domain or subdomain

Note that the DEFAULT part of the path is the folder for the DEFAULT theme. If youare using a different theme, then you will need to identify it and choose theappropriate path (e.g./public_html/domainname/catalog/view/newtheme/stylesheet.css)

Use the File Manager to go to this path. You can click on the field in the top leftcorner (with the button labeled GO next to it). Type in the path then click GO, oryou can click on the folders listed in order to find the correct folder where thestylesheet.css is located. Here's a quick screenshot of how the File Manager willappear:

Note that the paths above are blurred to protect the account security for exampleshown above. Additionally, clicking on the folders in the left-hand column willchange the content in the right-hand window. You can only EDIT the content inthe right-hand window of the file manager. Therefore, please click on thefile in the right-hand window when making any file changes.

Backup the file by making a quick copy. To this, do the following:

a) Click on the file STYLESHEET.CSS file to highlight it

15. Changing the Banner Sizein OpenCart 1.5

Related Questions

Here are a few questions relatedto this article that our customershave asked:

Ooops! It looks like there are noquestions about this page.

Would you like to ask a questionabout this page? If so, click thebutton below!

Ask a Question

Step 4.

Step 5.

Step 6.

b) Click on COPY at the left side of the menu bar of the File Managerc) The default path at the bottom of the COPY window that will appear is the pathfor the current location of the file. You will need to add a file name of the backup fileby clicking at the end of the file path and then type (with no quotes) "/stylesheet-backup.txt" or whatever you wish to name the file. If you don't rename the file,you will get an error message stating, "File OP Failure...Source and Destination arethe same". This simply means that the action can not be completed because thefilename is identical. Change the file name and you will create a backup file in thesame path with that new file name. This gives you insurance in case you makemistakes in the original file and need to recover the file as it was before you madeany changes.

Once you have located the STYLESHEET.CSS file, click on it to highlight it, then inthe upper menu bar of the file manager, click on EDIT in order to edit the file. Youcan also choose to use CODE EDIT as an option. CODE EDIT will show the CSScode in number lines with specific spacing format. Using the plain EDIT will not dothis. Additionally, when clicking on CODE EDIT or EDIT, you may see an additionalwindow asking you to backup the original file before converting the character sets. You should always do this before making any changes to your files. If you didn'tmake a backup as per the instructions in Step 3, then please take a moment tobackup the file so that you can recover from any possible mistakes to theSTYLESHEET.CSS file. Click on EDIT to continue with the editing process, or clickon CANCEL to stop and return to step 3.

When editing the file you will see something similar to the following (using the CODEEDIT option):

Look for the BODY of the CSS file (as highlighted in the screenshot above). If youare familiar with CSS (Cascading Style Sheet), the STYLESHEET.CSS is key tomodifying how certain parts of your website will appear - this includes, fonts, color,formatting, etc. As per the example screenshots at the top of this article, theBACKGROUND-COLOR was modified from #ffffff (the color white) to #000000 (thecolor black). With the background set to the color black, the CSS entry forbackground-color would appear as:

background-color: #000000;

In order to add an image to the background, you will need to add a different line ofcode. This change will involve modifying the STYLESHEET.CSS file by addingseveral lines of code. Note that this code includes basic CSS commands and are buta small portion of the CSS commands that you can utiliize in this file.

You will also need to save your image file to the server. Make sure that your imageis the appropriate format and size to accommodate your customers. I would suggestusing either JPEG, GIF, or PNG file formats. Remember that large backgroundimages will affect the load time of your website, so keep the file size (in terms ofbytes) to something as small as possible. Here's an example of how you can saveyour image file with the FILE MANAGER:

Go to the following path: /public_html/catalog/view/theme/default/image (note: this is with DEFAULT as the theme in use and the site installed in the primary

Learn more Learn more

CURRENT CUSTOMERSAre you a current Web Hosting Hub customer? Sign in or joinour Customer Community to get special benefits just forCommunity members.

NOT YET A FREE MEMBER?Not a customer or a Community Member? Join today and getfree priority support and be eligible for company goodies,discounts, and more.

Step 7.

Step 8.

domain)

You will see a number of image files listed in the folder already. At the top of theFILE MANAGER, click on UPLOAD and then find the image file you want to use onyour computer by selecting BROWSE. Once you have found it, click on the OPENbutton, and the file will automatically be uploaded into the IMAGE folder. Remember to take note of the file name that you will use.

Returning to the EDITOR viewing the STYLESHEET.CSS file, put your cursor atthe beginning of line #7 - which indicates the background-color by left-clicking at thebeginning of the line with your mouse. Click on the ENTER key of your keyboard inorder to create a line space then type in the following:

background-image: url('../catalog/view/theme/default/image/background-bw-2.png

background-repeat: no-repeat;

background-color: #000000;

The following table explains the commands used above:

background-image

path of the image file to be displayed

background-repeat

indicates if image file is being tiled or not - "no-repeat" indicates notiling

background-position

determines the position of the graphic file being displayed

background-size

determines how large the image will be displayed relative to thesite; 100% indicates that it will be occupy all of the backgroundspace behind the website

background-color

determines the color used in the background of the website

Click on SAVE CHANGES in the top right-hand corner of the editor in order to saveyour modifications.

Make sure to review your changes and take a close look at the entire store websitewith your image in place. It's possible that you may need to adjust the image in agraphics editor so that you have no problems with viewing certain pages. Font colorscan also be adjusted in the STYLESHEET.CSS, but it may be simpler to edit yourimage or its position.

Changing the image background in OpenCart is one of the key changes you can make that will re-define how your site appears to your customers. It involves making sure that the image iscorrectly positioned using CSS commands and then insuring that the text and other elements ofthe site are visible per the theme that you are using. Image changes are important to keep yoursite fresh and can be the edge you need to make your site standout from your competition.

Did you find this article helpful? Yes No

Did you find this article helpful?

0Me gusta 0 Tweet 0

PrevRemove Branding fromOpenCart 1.5

Next Setting the Image Sizes in

OpenCart 1.5

CategoryCustomizing the Appearance

of OpenCart

Post a Comment

Name:

EmailAddress:

Comment:

Submit Please note: Your name and comment will be displayed, but we will notshow your email address.

Submit Comment

File Edit View Format

& % Formats 2 1 0 /

+ * ( )

p

Escriba el texto

How may we help? (e.g. install joomla) Search

Help Center Search Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support TicketCall: 877-595-4HUB (4482)

757-416-6627 (Intl.)Chat: Click To Chat Now

Browse

Questions

Ask a

Question

Ask the Community

Get help with your questions from our community oflike-minded hosting users and Web Hosting Hub Staff.

Sign up

today!

Not a Customer?

Get web hosting from a company that ishere to help.

PRODUCTS & SOLUTIONS

Hosting Services

Domain Names

Website Builder

Host Your Blog

Custom Web Design

cPanel Hosting

APPLICATIONS HOSTING

WordPress

b2evolution

concrete5

Joomla

Drupal

PrestaShop

SUPPORT & COMMUNITY

Help Center

Learning Corner

Community Q&A

Guides & Whitepapers

Affiliate Program

ABOUT COMPANY

About Us

Features

Compare Us

Contact Us

Acceptable Use Policy

877-595-4HUB(4482)+1 757-416-6627 (Intl)

3629 Sentara WayVirginia Beach, VA 23452

Connect with us:

Copyright 2014 Web Hosting Hub - Privacy Policy - Terms of Service