Frontend CSS faulty

Question

I know this question has been set a few times now, I can't seem to find the answer - I did the whole cache emptying of folders with "php bin/magento setup:static-content:deploy" - this seems to only work for reloading the backend css properly but not the frontend. (I had this problem with the backend in the beginning, but the content:deploy worked it out, just doesn't seem to be doing anything for the frontend).

The frontend looks bogus, the css file reference of the page seems correct... http://localhost/magento/pub/media/styles.css (at least, there is a file here).

I'm on a local Xampp (Win 8) Community Version wit Sample Data included.

Thanks for the help.

....

enter image description here

• Rakesh Jesadiya: have you set developer mode, php bin/magento deploy:mode:set developer and remove var folder
• tutuKid: tried this...nothing, sorry. :(
• Rakesh Jesadiya: have you set client mode inside stores-> Configuration->Advanced -> Developer -> workflow type to client side
• tutuKid: I just did this, and repeated your first step...now my backend is missing it's CSS file: FileError: 'localhost/magento/pub/static/adminhtml/Magento/backend/en_US/…' wasn't found (404) in styles.css ---- which I just populated again from my backup. But not, this isnt working for the frontend
• tutuKid: It just seems as if the css in media/styles.css is not being loaded properly... I just dont get it, the link is there <link rel="stylesheet" type="text/css" media="all" href="localhost/magento/pub/media/styles.css" /> ... but the frontend css folder of LUma theme is empty...I dont know if this has any effect.

Answer 1

I was also facing this problem admin gives 404 error and frontend didn't attach css(i.e. Luma didnot showing in proper format..).so i did these steps to solve these both problems in magento 2. 1)go to terminal and run this command

sudo gedit /etc/apache2/apache2.conf

And change:-

<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride none
Require all granted

To

<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted

only change AllowOverride none to all

And

2) go to terminal and run command :-

 sudo a2enmod rewrite
 sudo service apache2 restart

Then give the permission to your var,pub and app/etc. and then go to your admin and frontend it works properly.i think it works for this problem.

Answer 2

Try this Before that take Backup

1. Remove everything, except .htaccess file from pub/static folder

2. Open up app/etc/di.xml find the path "Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink" and replace to Magento\Framework\App\View\Asset\MaterializationStrategy\Copy

Note: Remove entire files and folder under pub/static except .htaccess file.

For More info ref this http://www.dckap.com/blog/magento-2-admin-links-not-working-in-windows/

• tutuKid: Thanks for the quick reply...it seems the backend looks better now, I can see all the products fully generated within the dashboard, but I am sorry, it's not doing anything for the frontend - still looks the same. I was wondering though...what you mean with remove everything under pub/static except .htaccess .....htaccess is OUTSIDE in the folder pub, but not /static.... I hope I wasn't misunderstood - my backend admin panel is working, its the frontend WEBPAGE that doesn't seem to be loading the theme/skin/css.
• Magento 2: delete all file under pub/static excetpt .htaccess
• tutuKid: Okay... I did this.... link - is it correct? deleting everything IN pub/static but leaving all in /pub
• Magento 2: Now it's working or not
• tutuKid: my question is, what about the other folders and files in the pub folder? /errors, /media, /opt, cron.php, get.php, index.php, static.php? Remove these too? or JUST pub/static?

Answer 3

Okay, this answer worked, it is however necessary to do this during installation and before starting Magento (I am guessing the system creates faulty links afterwards which can't all be reversed?) - basically I needed to reinstall Magento with new database... another post solved this problem very well, in Solution #1:

https://magento.stackexchange.com/a/97230/39395

SOLUTION # 1

I would like you to download Magento 2 zip from magentocommerce.com/download with sample data, create new db in phpmyadmin, extract zip in htdocs folder. Install Magento 2 but do not use localhost use 127.0.0.1 in store URL and admin URL. After successful installation DO NOT run magento.

Now we are going to clear / delete caches and sessions of Magento 2. Go to following paths and delete everything:

ROOT> var> cache> DELETE ALL ROOT> var> page_cache> DELETE ALL ROOT> var> session> DELETE ALL

When Magento 2 is not in production mode, it will try to create symlinks for some static resources on local server. We have to change that behavior of Magento 2 by going to edit ROOT> app> etc> di.xml file. Open up di.xml in your favorite code editor, find the virtualType name="developerMaterialization" section. In that section below, you will find an item which needs to be modified. You can modify it by changing the following content:

Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink

To:

Magento\Framework\App\View\Asset\MaterializationStrategy\Copy

Now last step, also delete old files generated in ROOT> pub> static> DELETE ALL EXCEPT .HTACCESS