Luma Theme completely broken when installed

Magento 2 Frontend Design
1

Hi guys,

I have installed Magento 2 and after that Magento 2 sample data which was missing. The only problem now is that the front is completely broken and it looks like this:

image
image.jpg747×600 109 KB

Any guess why is this happening and what could be the solution.

Tnx.

2

Hi @Petar and welcome.

You’ll need to provide some additional information to point you in the right direction.

  1. What was your method of installation for Magento?
  2. Was the site loading okay before installing Sample Data?
  3. When you open Inspect Element in Chrome (F12), press the Network tab and refresh the page, what do the items in red tell you? E.g. Is there a specific pattern you’re seeing? Does it only effect certain files?

I would normally suggest that apache rewrite isn’t enabled. However, your question seems to suggest that it was working before installing the Sample Data. You answers to the above questions will help.

3

Hi @digitalstartup

  1. I downloaded Magento 2.3.1 version from the official site and installed on my Windows 10 machine.
  2. Then after that, Magento started running but I noticed that sample data was completely missing along with categories and products. So I opened terminal and put:
  • php -dmemory_limit=6G bin/magento sampledata:deploy (memory limit - because I was getting error on allowed memory size).
  • php bin/magento setup:upgrade
  • php bin/magento setup:static-content:deploy -f
  • php bin/magento setup:di:compile
  • php bin/magento setup:upgrade

After that sample data show up along with products and categories but as you can see from the screenshot is all messed up. I tried to find the solution but unfortunately all the topics related to this issue were not helpfull.

This is the screnshot from my home page block:

image
image.jpg1558×796 161 KB

4

Working in a Windows environment can be tricky.

Is it just JS and CSS files not loading? What does Chrome tell you is the reason for them not loading in? File Not Found? Access Denied?

5

This is my JS:

image
image1675×538 59.5 KB

My CSS:

image
image1673×544 31.1 KB

There is no specific mistake Chrome is pointing me on…

6

Interesting… It definitely looks CSS related. It looks like some files are being generated. I’m pretty sure there should be:

  • styles-l.css
  • styles-m.css
  • styles.css

Deploy your static content again, but add your Locale at the end. For example:

bin/magento setup:static-content:deploy -f en_US

It’s really hard to diagnose without being able to have a poke around.

EDIT: I found this article based on the missing files - But I can’t condone the solution because it requires the editing of core code, which is bad practice. Plus it feels more like solving the symptom and not the issue itself.

7

No, unfortunately your solution does not work.

Something similar here, altough none of these solutions suggested also work:

8

There’s a few similar solutions but they relate to 404 files - Not non-generated files. I’m afraid your scenario isn’t an one that I’ve experienced or heard of.

At this stage it could be anything from an Installation issue (i.e. some core files missing) or an Environmental issue (i.e. stopping files from being generated).

If your plan is to development locally, then running an Ubuntu VirtualBox would eliminate the Environment Variables. There’s a ton of articles about this on Google.

If in the meantime you do find a solution, please let us know in case others come across this issue too.

9

Thanks for tips Craig, I appreciate it. If I find solution in the meantime I will post it, in the meantime let me check what can I do with Ubuntu.

Cheers.

1 Like
10

Hi @Petar,

I’m having the same issue. Did you find a solution?

Thanks,
Bryce

11

A post was split to a new topic: Theme broken after manually clearing the pub/static folder