ComusThumbz Documentation
HTML Markdown Print/PDF Plain Text
Admin Login

Documentation Menu


Admin Access

File Editor

 

What This Page Does

The File Editor lets you edit your website's files directly from the admin panel -- no separate software needed. You can update page content, change how your site looks, edit translations, and more, all from your browser. It works like a simplified version of a professional code editor with color-coded text, multiple open files, and a built-in history so you can undo mistakes.

Warning: Changes you make here go live immediately. There is no preview step. Always use the version history to create a safety net before making big changes.

[Screenshot: page-overview]

How to Get Here

Navigate to Admin Panel > Template Manager > Files

Understanding the Page

When you open the File Editor, you see three main areas side by side.

File Browser (Left Side)

This is your file list. It shows all the files and folders on your website that you can edit, organized in a folder tree -- just like the file browser on your computer. Click a folder to expand it and see what is inside. Click a file to open it for editing.

At the top of the file browser you will find:

  • A search box to quickly find files by name
  • A Refresh button to reload the file list
  • A New File button to create a new file
  • A New Folder button to create a new folder

 

Tip: Type part of a filename into the search box and the list narrows down instantly. Folders containing matches open automatically so you can find what you need fast.

Editor Area (Center)

This is where you make changes to your files. When you open a file, its contents appear here with color-coded text that makes it easier to read. If you open more than one file, each one gets its own tab at the top -- click a tab to switch between files.

Above the editor you will see a toolbar with:

  • The file path showing which file you are editing
  • A Find button to search within the file
  • A Format button to tidy up the code automatically
  • A Save button to save your changes

 

When no file is open, you will see a message asking you to select a file from the file browser.

History Panel (Right Side)

Every time you save a file, a snapshot is stored here. This panel shows the complete history of changes for the file you are currently editing -- who changed it, when, and what type of change was made. Most importantly, you can restore any previous version with one click.

Note: If you do not need the history panel, you can close it using the X button in its header. The editor area expands to fill the extra space.

Common Tasks

How to Open a File

  1. Look at the file browser on the left side of the page.
  2. Click on folder names to expand them and see the files inside.
  3. Click on the file you want to edit.
  4. The file opens in the editor area with its own tab.
Tip: You can have several files open at the same time. Each file gets its own tab. Click any tab to switch to that file.

How to Edit a File

  1. Open the file you want to change.
  2. Click in the editor area and make your changes.
  3. As you type, a small yellow dot appears on the file's tab to let you know you have unsaved changes.

Useful keyboard shortcuts while editing:

Shortcut What It Does
Ctrl+Z Undo your last change
Ctrl+Y Redo a change you undid
Ctrl+F Search within the file
Ctrl+H Search and replace text

How to Save Your Changes

  1. After making your edits, click the Save button in the toolbar, or press Ctrl+S on your keyboard.
  2. A green notification appears in the bottom-right corner confirming the save was successful.
  3. The yellow dot on the tab disappears, meaning all changes are saved.
  4. A new entry appears in the history panel on the right.
Warning: If you try to close a tab or leave the page with unsaved changes, your browser will ask if you are sure. Click Cancel to go back and save your work first.

How to Create a New File

  1. Click the New File button (the file with a plus sign) at the top of the file browser.
  2. A dialog box opens. Select the folder where you want to create the file from the dropdown.
  3. Type a name for your file, including the file extension (for example, custom.css or about.php).
  4. Click Create File.
  5. The new file appears in the file browser and opens automatically, ready for editing.
Note: Each folder only allows certain types of files. For example, the styles folder only allows stylesheet files. The allowed types are shown in the dropdown to help you choose the right location.

How to Create a New Folder

  1. Click the New Folder button (the folder with a plus sign) at the top of the file browser.
  2. Select the parent folder where the new folder should be created.
  3. Type a name for your new folder.
  4. Click Create Folder.
  5. The new folder appears in the file browser.

How to Rename a File or Folder

  1. Right-click on the file or folder you want to rename.
  2. Select Rename from the menu that appears.
  3. The current name is already filled in. Change it to the new name you want.
  4. Click Rename.
  5. The file or folder is renamed and the file browser updates.
Tip: When renaming a file, make sure you keep the correct file extension (the part after the dot, like .php or .css). Changing the extension could cause problems.

How to Delete a File or Folder

  1. Right-click on the file or folder you want to remove.
  2. Select Delete from the menu that appears.
  3. A confirmation dialog appears showing what will be deleted. Click OK to proceed.
  4. The item is removed from the file browser. If the file was open in a tab, the tab closes automatically.
Warning: Deleting a file cannot be undone through the normal interface. However, if the file was previously saved through the editor, you may be able to recover its contents from the version history. To be safe, always save a file at least once before you consider deleting it.
Note: Folders must be empty before you can delete them. Remove all files inside a folder first, then delete the folder itself.

How to Search for a File

Finding a file in the file browser:

  1. Type part of the filename into the search box at the top of the file browser.
  2. The file list filters instantly to show only matching files.
  3. Folders containing matches expand automatically.
  4. Clear the search box to see all files again.

 

Finding text inside a file:

  1. Open the file you want to search.
  2. Click the Find button in the toolbar, or press Ctrl+F.
  3. A search bar appears at the top of the editor. Type what you are looking for.
  4. Use the arrow buttons to jump between matches.
  5. Press Escape to close the search bar.

 

How to Format Code

  1. Open the file you want to tidy up.
  2. Click the Format button in the toolbar.
  3. The editor automatically adjusts spacing and alignment to make the code cleaner and easier to read.
Tip: Formatting works especially well for JavaScript and translation files. It is a quick way to clean up messy code without changing what the code does.

Version History and Restoring Files

The version history is one of the most important safety features in the File Editor. Every time you save, create, delete, or restore a file, a complete backup of the file's contents is saved.

How to View a File's History

  1. Open the file in the editor.
  2. Look at the History panel on the right side of the page.
  3. Each entry shows:
  • The type of change (Created, Edited, Deleted, or Restored)
  • The date and time of the change
  • Who made the change

How to Restore a Previous Version

If you made a change that broke something or you want to go back to an earlier version:

  1. Open the file you want to restore.
  2. In the History panel, find the version you want to go back to.
  3. Click the Restore button next to that version.
  4. Confirm when prompted.
  5. The file is restored to that version immediately.
Success: After restoring, a new entry is added to the history marking the restoration. This means you can even undo a restore if you change your mind -- just restore the version that was current before you rolled back.

What Files Can You Edit?

The File Editor gives you access to the frontend files that make up your public website. These include:

What You Can Edit What It Controls
Website pages The main pages visitors see (homepage, video pages, gallery pages, etc.)
Stylesheets How your site looks -- colors, fonts, spacing, and layout
Scripts Interactive features and behavior on your site
Translation files All the text displayed on your site in each language
Login and registration pages The pages where users sign in and create accounts
User settings pages Pages where users manage their account and preferences
Information pages About, legal, and other informational pages
Theme files Files that belong to your installed themes
Note: Some files appear dimmed (grayed out) in the file browser. These are protected system files that cannot be edited through this tool. This is a safety feature to prevent accidental changes to critical files.

The Right-Click Menu

Right-clicking on any file or folder in the file browser opens a quick-action menu:

Option What It Does
Open Opens the file for editing (files only)
Rename Changes the name of the file or folder
Permissions Adjusts who can read or write the file (advanced -- see below)
Delete Removes the file or folder

Click anywhere outside the menu or press Escape to close it without selecting an option.

File Permissions (Advanced)

Note: Most users will never need to change file permissions. This feature is here for advanced situations where a file needs different access settings. If you are unsure, leave permissions as they are.

If you do need to change permissions:

  1. Right-click on the file or folder.
  2. Select Permissions.
  3. Enter the permission value. The most common values are:
  • 644 -- Standard setting for regular files
  • 755 -- Standard setting for folders
  1. Click Apply.

Tips for New Users

Tip:
  • Save often. Press Ctrl+S frequently while working. Every save creates a backup you can restore later.
  • Start small. Make one change at a time, save, then check your site to make sure everything looks right before making more changes.
  • Use the search. If you are not sure which file to edit, use the search box to find files by name.
  • Check your site after saving. Open your website in a new browser tab and refresh the page to see your changes in action.
  • Do not edit files you are unfamiliar with. Changing the wrong file can break your site. Stick to files you understand, like stylesheets for visual changes or translation files for text changes.
  • Use version history as a safety net. Before making a significant change, note the current version in the history panel. If something goes wrong, you can restore it.

Troubleshooting

A file will not open when I click on it

What you see: You click a file in the file browser but nothing happens, or you see an error message.

How to fix it:

  1. Check if the file appears dimmed or grayed out. Dimmed files are protected and cannot be edited -- this is normal.
  2. Very large files (over 5 MB) cannot be opened in the editor. If you need to edit a large file, contact your developer or system administrator.
  3. Try refreshing the page using the Refresh button at the top of the file browser, or press F5 to reload the entire page.

 

My changes will not save

What you see: You click Save or press Ctrl+S but get an error message instead of a confirmation.

How to fix it:

  1. Check if there is an orange banner at the top of the page that says the editor is in demo mode. In demo mode, all changes are blocked. Contact your administrator to disable demo mode.
  2. Try refreshing the page and making your changes again. Sometimes the session expires and a fresh page load fixes the issue.
  3. If the problem continues, contact your system administrator. There may be a server permission issue that needs to be resolved.

 

The editor area is blank or will not load

What you see: The center area where you edit files is empty or shows a loading message that never finishes.

How to fix it:

  1. Make sure you are using an up-to-date browser (Chrome, Firefox, or Edge). Older browsers may not support the editor.
  2. Try clearing your browser cache and reloading the page.
  3. If you are using a browser extension that blocks external resources (like an ad blocker or privacy extension), try disabling it temporarily. The editor relies on an external resource to function.

 

The history panel is empty

What you see: You open a file but the history panel on the right shows nothing.

How to fix it:
This is normal for files that have never been edited through the File Editor before. The history starts recording after you make your first save. Once you save the file at least once, future changes will appear in the history.

I cannot delete a folder

What you see: You try to delete a folder but get an error message.

How to fix it:

  1. Make sure the folder is completely empty. You must delete all files and subfolders inside it before you can delete the folder itself.
  2. Check if there are any hidden files inside the folder. If so, contact your system administrator for help removing them.

 

Page When to Use It
Template Dashboard For an overview of all template management tools and quick access to each one
Theme Manager When you want to switch between complete site themes or install new ones
Style Manager When you want to change colors, fonts, and spacing using simple controls instead of editing code directly
Translation Manager When you want to edit the text that appears on your site in different languages using a dedicated translation interface

This guide is part of the ComusThumbz Admin Documentation.

Related Pages