The File Manager is a cpanel tool not all that different from the desktop file management system on your computer.

Your web site is organized in a series of directories that correspond to each site you create; exploring the structure with the File Manager is one way to get a better understanding where stuff is. But also, it allows you to modify files on your site. For this activity, we start with something relatively simple; replacing a background image from one of the Site Publisher created templates (see the Building a Front Entrance for Your Domain with Site Publisher activity).

A common reaction to these new sites is “Can I change the background image?” — the answer is yes, if you can figure out where it goes. The Domains of Our Own Guide gives info for modifying a few of the Site Publisher created templates.

For this example, the Under Construction template was used for the extendlabs.ca welcome site.

An under construction site with a book as the background image

It’s an image of a book; how can we do something that is more laboratory like? I might have a great image of a microscope that is much better. Just as a check, when we return to the Site Publisher tool, it tells us where our files are stored.

The files are all stored in the director /home/extendla/public_html — I know from logging in that “extendla” is my Reclaim Hosting user name, so we know that always all of the files for my main domain are always stored in the public_html directory.

Knowing this, we reach for the File Manager in cpanel, located with the Files tool area.

Finding the File Manager icon in cpanel

What you see in here may make you scream “GAACK” and my site has been littered with a few more files from repeated experimentation. We are not teaching web design, but I can tell you that for this theme, that background image is located in the img directory. If you are looking to change something in another Site Publisher template, please post a request on the Reclaim Hosting Community site; someone there cam help you figure out which file you should be modifying.

Double clicking that folder on the left lets me see the contents, and in fact that file name is background.jpeg

I suggest clicking the file and then using the Download menu item at the top row of commands so you have a local copy of the file. Then, while it is still selected, click Delete. Yes, there goes the file.

Now, click Upload to pick the new photo you want to use on the site as a background. For my example, my file name was microscope.jpg. When that file appears in the File Manager, click it once to select, then click Rename so we can change the file to the name the theme is expecting, background.jpeg.

When I reload my site in a web browser, I should now see my new image in the background:

If you want even more to explore in the file manager, find the index.html file in the main public_html directory, this is the file that has all the site content. You can change anything there. If you are brave enough to wade through HTML code, select the file and click Edit but you can also use a visual editor by using the Edit HTML menu item.

This is just a taste of what you can do in the File Manager. You can move directories, create new blank ones, and (with great care) delete files. Mostly, we hope you get to develop a sense of where all the files live that are part of your domain

Example for "Using File Manager for Image Changes":
http://extendlabs.ca/

Complete This Activity

After you do this activity, please share it so it can appear with other responses below. If your response exists at a public viewable URL, you can add the information directly to this site.

Add A Response

3 Responses Completed for this Activity

  • Updated Images (Lynn Cartan, @LynnCartan)

    I had previously set up a Learning Squirrel basic landing page using the About Me template.   For this activity, I switched it out to the Fresh template which had a background image of a bunch of grapes.  I added an image from Unsplash (Photo by Esteban Lopez on Unsplash).   I also added a button to take viewers to… Read more »

  • Changing the background image (Irene Stewart, @IrenequStewart)

    I have changed the image from the personal template to a photo of some spiderwebs on a bush in front of the college that I just took. Using the instructions, it was fairly easy to find the right background image. I changed that image to bg1.jpg and then changed my image file name to bp.jpg… Read more »

  • Failing at HTML :-) (Lisa Koster, @lkoster)

    I changed the picture… it worked pretty well. Tried to move the words around by playing with the HTML… not only did it not work, I lost the picture…oh well. It was fun to try!!  

Creative Commons License
This work by Alan Levine is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Leave a Reply

Your email address will not be published. Required fields are marked *