Css Not Working #136132

memonkamran5522 · 2024-08-17T19:20:32Z

memonkamran5522
Aug 17, 2024

Select Topic Area

Question

Body

After deploying my local WordPress site to a GitHub repository using the Simply Static plugin, the homepage is working fine, but the CSS for other pages isn't displaying correctly. How can I fix this issue?

AEdgecombe · 2024-08-17T20:24:50Z

AEdgecombe
Aug 17, 2024

Steps to Fix CSS Not Displaying on Other Pages:

Check the Paths to Assets:
- When you deploy a static version of your WordPress site using a plugin like Simply Static, it generates HTML files with links to CSS, JavaScript, and image files.
- The problem could be due to incorrect relative or absolute URLs in your static HTML files.
Relative vs. Absolute URLs:
- Ensure that your CSS and other assets are linked with relative URLs instead of absolute URLs. Absolute URLs may still be pointing to your local WordPress development site or an incorrect domain, which causes them to break on other pages.
Example:
- Incorrect (Absolute URL): https://localhost/wp-content/themes/your-theme/style.css
- Correct (Relative URL): /wp-content/themes/your-theme/style.css
Simply Static Configuration:
- Go to the Simply Static plugin settings and check how URLs are being handled. Make sure that:
  - The "URL of your static site" is correctly set to your GitHub Pages URL or wherever you’re hosting the static site.
  - Check the "Delivery Method" options and ensure you are using "Relative URLs" for your CSS and assets instead of "Absolute URLs".
Regenerate the Static Site:
- After adjusting the Simply Static settings, regenerate your static files by going to the Simply Static dashboard and clicking "Generate". Then, redeploy the updated static site to GitHub.
Inspect Your Deployed Site:
- Use the browser’s developer tools (F12 or Ctrl+Shift+I) to inspect the CSS links on pages where the styles aren’t being applied. Verify if the paths to the CSS files are correct and accessible.
Check File Permissions and Case Sensitivity:
- Make sure all CSS files and directories are properly uploaded and that their file paths are case-sensitive. GitHub Pages (and most Linux servers) are case-sensitive, so if your file is named Style.css, but your HTML refers to style.css, the file won't load.
Recheck Base URL Configuration:
- If your site is hosted on a subdomain or subdirectory (like GitHub Pages), ensure the base URL is correctly set. You may need to add a <base> tag in your HTML head section to correctly point to the root of your static site.
Example:
```
<head>
    <base href="https://username.github.io/repository-name/">
</head>
```

Conclusion:

The issue is most likely due to incorrect paths to your CSS and other assets after converting your dynamic WordPress site into static HTML. Adjust the URLs in Simply Static to use relative paths, regenerate your site, and redeploy to GitHub. Ensure that your site’s configuration matches the GitHub Pages environment.

2 replies

memonkamran5522 Aug 18, 2024
Author

"I've tried the suggested solutions, but the issue persists. My website URL is driedrosepetals.live. Could you please check it out? Thank you."

AEdgecombe Aug 18, 2024

I had a look but aside from what was mentioned and without access to your project I can't really suggest more, sorry.

memonkamran5522 · 2024-08-18T15:42:33Z

memonkamran5522 Aug 18, 2024
Author

"I've tried the suggested solutions, but the issue persists. My website URL is driedrosepetals.live. Could you please check it out? Thank you."

2024-10-18T03:31:04Z

github-actions[bot]
bot Oct 18, 2024

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Css Not Working #136132

{{title}}

Replies: 3 comments 3 replies

{{title}}

{{title}}

{{title}}

This comment was marked as off-topic.

{{title}}

{{title}}

Select a reply

GitHub Community

Css Not Working #136132

memonkamran5522 Aug 17, 2024

Select Topic Area

Body

Replies: 3 comments · 3 replies

AEdgecombe Aug 17, 2024

Steps to Fix CSS Not Displaying on Other Pages:

Conclusion:

memonkamran5522 Aug 18, 2024 Author

AEdgecombe Aug 18, 2024

This comment was marked as off-topic.

memonkamran5522 Aug 18, 2024 Author

github-actions[bot] bot Oct 18, 2024

memonkamran5522
Aug 17, 2024

Replies: 3 comments 3 replies

AEdgecombe
Aug 17, 2024

memonkamran5522 Aug 18, 2024
Author

memonkamran5522 Aug 18, 2024
Author

github-actions[bot]
bot Oct 18, 2024