About
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 showcases the hierarchy of the page broken down by each element.
When you edit code, it is important to note that each change applied locks the code for further changes.
Before you start
This feature is for editors, admins and account owners.
WARNING: Users who edit source code must have at least a basic level of coding experience.
Undo changes
If you made changes to code and clicked Apply but the results aren’t what you expected, then you need to undo.
Undo (ctrl Z or cmd Z) is a ‘life-saver’. But it only works on the last change before you saved the template. Hmm…
Fortunately, Walnut has you covered:
- Reset Changes reverts any changes you made to an element.
- Reset all Changes reverts any changes you made to a template.
Edit the template source
> To edit the template source:
- Navigate to the library and open the template in Edit mode.
- Right click the screen or select the 3 dots and select Custom HTML. A code pane opens at the bottom of the screen.
- Select Header or Body and edit the code.
- To find, use Ctrl/Cmd F; To find & replace, use Ctrl Alt F /Cmd Option F.
- To save the changes, click Apply.
WARNING: When you edit a large code snippet, potential destruction to the screen may occur. In such cases, Walnut displays a warning message. Please use your discretion before continuing.
Specific use cases
1. Remove link highlights
If you add links to a page with custom HTML, you can set the clickable area to transparent.
> To set the clickable area to transparent:
- Open the template in edit mode and click the Gear icon
in the toolbar on the right. This opens the Settings pane.
- Select the General tab and set the Clickable Area Color to transparent.
2. Duplicate an element
The best way to duplicate an element is to copy the source code from the element you want to duplicate and paste the code into another element.
> To duplicate an element:
- Create an element similar to the element you want to duplicate.
- Right click the element you want to duplicate and select Edit source.
- Copy the code.
- Go to the element you just created. Right click it and select Edit source.
- Delete the code and paste in the code from the first element.