How to Add and Edit CSS & HTML Code to a Website

DecoNetwork allows you to extend and fine-tune your website beyond the standard drag-and-drop editor by adding custom CSS and HTML code. This is typically used for advanced styling, layout overrides, or third-party integrations such as live chat and analytics tools.

In this article

• Prerequisites
• Why use custom CSS and HTML
• Step 1: Access custom CSS and HTML
• Step 2: Add and enable custom CSS
• Step 3: Edit custom HTML layouts
• Step 4: Use custom code snippets
• Best-practice tips
• Troubleshooting
• FAQs
• Additional resources

Prerequisites

Why use custom CSS and HTML

• Override styling such as colors, spacing, and font sizes
• Create advanced layouts not achievable with drag-and-drop widgets
• Customize the website header, which is not fully drag-and-drop
• Integrate third-party tools such as live chat or analytics scripts

Step 1: Access custom CSS and HTML

1. Go to Websites → Edit Website.
2. Select Customize Template CSS to edit CSS.
3. Select Customize Template HTML to edit HTML layouts.

Step 2: Add and enable custom CSS

Custom CSS is typically used to adjust the visual styling of your website, such as overriding colors, font sizes, margins, or other design elements.

1. Open Customize Template CSS.
2. Add your custom CSS code.
3. Enable Custom CSS.
4. Click Save, then Publish.

Step 3: Edit custom HTML layouts

HTML controls the structure and layout of your website. In most cases, you should avoid extensive HTML customization and rely on the drag-and-drop editor instead.

The primary exception is the website header, which is not fully drag-and-drop. Many users customize the header layout using custom HTML.

1. Open Customize Template HTML.
2. Select a layout (for example, Default).
3. Enable Override Default Layout.
4. Edit the HTML code as required.

Step 4: Use custom code snippets

DecoNetwork provides Custom Code Snippets to make adding third-party code easier and safer. This is commonly used for live chat tools, analytics tracking, or other external scripts.

1. Open Custom Code Snippets.
2. Paste the provided code snippet.
3. Select the correct placement:
   • Header
   • Body
   • Footer
   • jQuery
4. Save and publish your changes.

Best-practice tips

• Use drag-and-drop widgets wherever possible before resorting to custom code.
• Limit custom HTML to structural elements such as headers.
• Document any custom code added for future maintenance.
• Test changes on a staging or low-traffic site before applying them broadly.

Troubleshooting

• CSS changes not visible: Confirm that Custom CSS is enabled and the site is published.
• Layout issues after HTML edits: Revert to the default layout to isolate the problem.
• Third-party tools not working: Verify the snippet placement (header, body, footer, or jQuery).

FAQs

Do I need to use custom CSS or HTML to build my site?
No. Most websites can be built entirely using the drag-and-drop editor and widgets.

What part of the site usually requires custom HTML?
The website header is the most common use case, as it is not fully drag-and-drop.

Can incorrect code break my site?
Yes. Incorrect CSS or HTML can cause layout or display issues, which is why custom code should be added carefully.

Additional resources

• Customize Template CSS
• Customize Template HTML