After importing demo content into the Goarch theme, you might notice that the frontend of your website displays as unstyled plain text, broken layout grids, or missing fonts and stylesheets.

This issue typically occurs when an SSL certificate is missing on your hosting server, or when there is a protocol mismatch between http:// and https:// in your WordPress settings. When this happens, modern browsers block CSS assets due to Mixed Content Security Rules.

Why Are Styles Not Loading After Demo Import?

When a website is loaded over a secure protocol (https://), modern web browsers enforce strict security rules:

• Mixed Content Blocking: If your site loads via https://, but stylesheet assets, fonts, or Elementor files are being requested via insecure http:// links imported from demo data, browsers automatically block those CSS files for security reasons.
• Missing Server SSL: If an SSL certificate has not been enabled or issued in your hosting control panel (e.g., Hostinger hPanel, cPanel), browser security warnings or insecure connection blocks will prevent theme scripts and styles from rendering properly.

Step-by-Step Fix for SSL & Broken CSS Issues

Step 1: Enable SSL Certificate on Your Hosting

Before updating settings inside WordPress, verify that an active SSL certificate (such as a free Let’s Encrypt certificate) is assigned to your domain in your hosting dashboard:

1. Log into your web hosting account (Hostinger hPanel, cPanel, or custom hosting).
2. Navigate to the SSL or Security section.
3. Install or issue an SSL Certificate for your primary domain.
4. Ensure HTTPS enforcement or automatic HTTPS redirect is turned On at the hosting level.

Step 2: Update WordPress Site URL to HTTPS

Once SSL is active on your server, update your core WordPress address settings:

1. Log into your WordPress admin dashboard.
2. Navigate to Settings > General.
3. Change both WordPress Address (URL) and Site Address (URL) from http:// to https://:
   • WordPress Address (URL): [https://yourdomain.com](https://yourdomain.com)
   • Site Address (URL): [https://yourdomain.com](https://yourdomain.com)
4. Click Save Changes at the bottom of the page. (Note: You may be automatically prompted to log back in to your admin dashboard).

Step 3: Replace Hardcoded Demo URLs (Fix Mixed Content)

Demo content imports often contain hardcoded http:// URLs for images, fonts, and inline CSS styles. You need to update these references across your site.

Option A: Using Elementor Replace URL Tool (Recommended)

1. Go to Elementor > Tools in your WordPress sidebar.
2. Click on the Replace URL tab.
3. In the http://oldurl.com field, enter: [http://yourdomain.com](http://yourdomain.com)
4. In the https://newurl.com field, enter: [https://yourdomain.com](https://yourdomain.com)
5. Click Replace URL.

Option B: Using an SSL Plugin

Alternatively, install and activate a plugin like Really Simple SSL or Better Search Replace to automatically fix mixed content references and force insecure requests through https://.

Step 4: Regenerate Elementor CSS & Data

Since Goarch relies on Elementor to generate page layouts and dynamic styles, cached CSS files referencing old http:// paths must be rebuilt:

1. Navigate to Elementor > Tools.
2. Under the General tab, locate Regenerate Files & Data.
3. Click the Regenerate Files & Data button.
4. Click Save Changes.

Step 5: Clear Site and Browser Caches

1. Caching Plugins: If you are using caching plugins (e.g., LiteSpeed Cache, WP Rocket, W3 Total Cache), select Purge All / Clear Cache from the admin toolbar.
2. Browser Refresh: Perform a hard refresh in your browser (Ctrl + Shift + R on Windows / Cmd + Shift + R on Mac) or clear your browser’s temporary cached images and files.

SSL & Style Issue Checklist

Problem / Cause	Visible Symptom	Solution
No SSL on Host	Browser shows “Not Secure” warning; styles fail to load.	Activate Let’s Encrypt / SSL in cPanel or Hostinger hPanel.
WordPress on HTTP	Mixed content console warnings; layout breaks.	Change http:// to https:// in Settings > General.
Hardcoded Demo Links	CSS and image files blocked over HTTPS.	Run Elementor > Tools > Replace URL from http:// to https://.
Stale Elementor CSS Cache	Layout broken despite valid SSL certificate.	Click Regenerate Files & Data under Elementor > Tools.

Diagnostic Tip: To verify if mixed content is blocking your styles, open your page in Chrome, press F12 (or right-click > Inspect), and select the Console tab. Red error logs stating “Mixed Content: The page at ‘https://…’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://…'” confirm an SSL URL mismatch.