Editing Source

Overview

Editing the source code of a screen allows for unique customizations to be added, which may not have been present during capturing. Similar to inspecting a page in Chrome and viewing DevTools, editing the source code of a screen will showcase the hierarchy of the page broken down by each element. When making edits, it is important to note that each change applied will result in that element being locked for any further changes. So it is a good idea to make source code edits near the end of your editing process as finishing touches. 

Instructions

1. Open the Walnut Editor

2. Click on whatever element you want to edit

3. Click the three dots on the right end of the toolbar and click “Edit Source”

4. The code of the selected element will appear below your template screen.
   
   

5. If you wish to see the code of the parent or encompassing element, simply click on the right angle arrow, next to the title of the element.
    
6. If you wish to find and/or find and replace a specific element, simply click anywhere within the code, and use the following keyboard shortcuts:
   

   Command	Mac	PC
   Find	Command + F	Control + F
   Find & Replace	Command + Option + F	Control + Alt + F

FAQs

How do I revert any changes I've applied?

If you made a change to the code, and clicked 'Apply' but weren't getting the results you were expecting; you can undo your edit quickly by hitting command + Z (Mac) or control + Z (PC) to revert your changes. This will only work on the last change made, and if the template did not save. For reverting saved changes, either click "Reset Changes" on the element, or "Reset all Changes" on the template screen.