Custom Look > Getting Started
HotDoodle provides a variety of looks for many uses. However, you might prefer creating a unique Look or modify an existing Look. This is an advanced operation and requires knowledge of CSS, since all HotDoodle Looks are dictated by a Style Sheet.
Note: To create a custom Look involves editing a currently existing HotDoodle look, since it’s easier to modify an existing template than build one from scratch. All Looks defined in HotDoodle are displayed on the Custom Look screen. The TPL files appear long since they contain extensive comments to make it easier for you to find what you wish to modify or override.
To find the TPL, choose the Template/Look that is closest to what you’re trying to achieve and follow these steps:
- In Edit Mode, select the Site button | Configure | Look | Make a Custom Look
When you click “Make a Custom Look” you will get to a screen that shows the entire definition of the current Look.
- The TPL can be edited directly in the text field, or copied out and back in if you have a different text editor you prefer using.
- When changes are complete, click Save as a Custom Look button and preview it.
- On Control Bar, click either Return to main page or New Window, whichever you prefer for previewing.
- Select Look button | Save this Look and Layout; if you like it
- Or, Select Look button | Cancel Look and Layout Previewing; if you don’t
- Or, Select Look button | Configure Layout; if you want to go back to the list of Layouts and choose another.
IMPORTANT: HotDoodle TPL must use [ ] brackets instead of { } brackets for CSS declarations in order to work correctly with the HotDoodle engine.
Note: A HotDoodle Look is a single TPL that is portable across every single HotDoodle template – meaning it should provide styling for every single Layout and Block option the HotDoodle engine generates. It can be very helpful to create a series of test sites using different Templates with different Layouts and Blocks in order to confirm that your new HotDoodle Look is truly portable. |
