How to Customize Your Website’s Design Using Code with OzSpeed hPanel

Customizing your website’s design using code can give you greater control over the look and feel of your site, allowing you to implement unique styles and features that aren’t available through standard settings. With OzSpeed’s hPanel, you can easily add custom HTML, CSS, and JavaScript to personalize your website design. Here’s a step-by-step guide on how to customize your website using code.

---

Step 1: Access the Custom Code Section in hPanel #

To start customizing your website design, open the Custom Code section in hPanel.

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Settings > Custom Code.
3. You’ll find three sections where you can add code:
   • Header Code: For adding meta tags, custom CSS, and analytics scripts.
   • Body Code: For code that should appear at the beginning of the body content.
   • Footer Code: For JavaScript or tracking scripts that should load after the main content.

Tip: #

• Use the Header Code section for CSS and the Footer Code section for JavaScript to optimize page load performance.

---

Step 2: Add Custom CSS for Styling #

CSS (Cascading Style Sheets) allows you to style your website’s elements, such as colors, fonts, and layouts.

How to Add Custom CSS: #

1. In the Header Code section, paste your custom CSS code.
2. Click Save.

Example: #

cssCopy code/* Custom Button Style */
.button-custom {
  background-color: #007BFF;
  color: #FFFFFF;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
}

/* Change Header Background Color */
header {
  background-color: #333333;
}

Tip: #

• Use specific class names (e.g., .button-custom) to avoid conflicts with existing styles.

---

Step 3: Add Custom JavaScript for Interactivity #

JavaScript allows you to add interactive features and dynamic content to your website.

How to Add Custom JavaScript: #

1. In the Footer Code section, paste your JavaScript code.
2. Click Save.

Example: #

htmlCopy code<script>
  document.addEventListener('DOMContentLoaded', () => {
    const button = document.querySelector('.button-custom');
    button.addEventListener('click', () => {
      alert('Button clicked!');
    });
  });
</script>

Tip: #

• Place your JavaScript code in the Footer Code section to ensure it loads after the page content, improving performance.

---

Step 4: Customize Layout with HTML #

You can also add custom HTML code to create new elements or modify the existing layout.

How to Add Custom HTML: #

1. Go to the Page Editor in hPanel.
2. Click on the HTML Block element and paste your HTML code.
3. Click Save.

Example: #

htmlCopy code<div class="custom-section">
  <h2>Welcome to Our Custom Section</h2>
  <p>This is a new section added using custom HTML.</p>
  <button class="button-custom">Learn More</button>
</div>

Tip: #

• Use HTML comments (<!-- Comment -->) to document your code and keep it organized.

---

Step 5: Use Media Queries for Responsive Design #

Media queries allow you to apply different styles based on the screen size, ensuring your website looks good on both desktop and mobile devices.

Example of Media Queries: #

cssCopy code/* Desktop Styles */
body {
  font-size: 18px;
}

/* Mobile Styles */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
  .custom-section {
    padding: 20px;
  }
}

Tip: #

• Test your responsive design using the Device Preview tool in hPanel’s Page Editor.

---

Step 6: Test Your Custom Code #

Before publishing, make sure to test your custom code on different devices and browsers.

How to Test Your Code: #

1. Open your website in multiple browsers (Chrome, Firefox, Safari, Edge).
2. Use browser developer tools (F12 or right-click > Inspect) to debug any issues.
3. Check the Console tab for JavaScript errors and the Elements tab for styling issues.

Tip: #

• Use Lighthouse in Chrome DevTools to analyze your website’s performance and accessibility.

---

Step 7: Publish the Changes #

Once you’ve confirmed that everything looks and functions as expected, publish your changes.

How to Publish: #

1. Click Publish in the top right corner of hPanel.
2. Confirm the changes to make them live on your website.

Tip: #

• Clear your website cache and browser cache to see the latest changes.

---

Troubleshooting Tips #

1. Custom Styles Not Applying:
   • Ensure your CSS selectors are specific enough and not overridden by existing styles.
   • Check for typos or syntax errors in your CSS code.
2. JavaScript Not Working:
   • Look for errors in the Console tab of the browser developer tools.
   • Ensure your JavaScript code is placed in the Footer Code section to load after the page content.
3. Layout Issues on Mobile:
   • Use media queries to adjust the layout for smaller screens.
   • Test your changes using the Responsive Design Mode in browser developer tools.

---

Additional Tips: #

• Backup Your Code: Before making major changes, copy your custom code to a text file for backup.
• Keep Code Organized: Use comments and indent your code for better readability.
• Optimize for Performance: Minimize the amount of custom code and use efficient coding practices to keep your website fast.