Homepage - Luma Child Theme without Sample Data Installed (css classes not loading)

After playing around with home page setups, I decided that it would be easiest enough to simply take the default Luma home page and make it my own. I have a luma child theme and have NOT installed sample data. Everything on the theme works as you’d expect, however I can not get the proper formatting for the home page for the life of me. I figured it would be very easy since it is all built in css classes within magento/LUMA. Perhaps there is something else I need to copy over to my “child luma theme”???

I have created the home page just as the sample data would with the blocks/widgets method. The content I have created shows up on the homepage, so I know it is pulling in my data, however the css/div/span classes are not being applied to this for some reason.

I know it has to be fairly easy, what am I missing here?

<div class="blocks-promo"><a class="block-promo home-main" href="{{store url=""}}collections/yoga-new.html"> <img src="{{media url="wysiwyg/home/home-main.jpg"}}" alt=""> <span class="content bg-white"> <span class="info">New Luma Yoga Collection</span> <strong class="title">Get fit and look fab in new seasonal styles</strong> <span class="action more button">Shop New Yoga</span> </span> </a>
> <div class="block-promo-wrapper block-promo-hp"><a class="block-promo home-pants" href="{{store url=""}}promotions/pants-all.html"> <img src="{{media url="wysiwyg/home/home-pants.jpg"}}" alt=""> <span class="content"> <strong class="title">20% OFF</strong> <span class="info">Luma pants when you shop today*</span> <span class="action more icon">Shop Pants</span> </span> </a> <a class="block-promo home-t-shirts" href="{{store url=""}}promotions/tees-all.html"> <span class="image"><img src="{{media url="wysiwyg/home/home-t-shirts.png"}}" alt=""></span> <span class="content"> <strong class="title">Even more ways to mix and match</strong> <span class="info">Buy 3 Luma tees get a 4th free</span> <span class="action more icon">Shop Tees</span> </span> </a> <a class="block-promo home-erin" href="{{store url=""}}collections/erin-recommends.html"> <img src="{{media url="wysiwyg/home/home-erin.jpg"}}" alt=""> <span class="content"> <strong class="title">Take it from Erin</strong> <span class="info">Luma founder Erin Renny shares her favorites!</span> <span class="action more icon">Shop Erin Recommends</span> </span> </a> <a class="block-promo home-performance" href="{{store url=""}}collections/performance-fabrics.html"> <img src="{{media url="wysiwyg/home/home-performance.jpg"}}" alt=""> <span class="content bg-white"> <strong class="title">Science meets performance</strong> <span class="info">Wicking to raingear, Luma covers&nbsp;you</span> <span class="action more icon">Shop Performance</span> </span> </a> <a class="block-promo home-eco" href="{{store url=""}}collections/eco-friendly.html"> <img src="{{media url="wysiwyg/home/home-eco.jpg"}}" alt=""> <span class="content bg-white"> <strong class="title">Twice around, twice as nice</strong> <span class="info">Find conscientious, comfy clothing in our eco-friendly collection</span> <span class="action more icon">Shop Eco-Friendly</span> </span> </a></div>
> </div>
> <div class="content-heading">
> <h2 class="title">Hot Sellers</h2>
> <p class="info">Here is what`s trending on Luma right now</p>
> </div>
> <p>{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" products_per_page="8" products_count="8" template="product/widget/content/grid.phtml" conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^],`1--1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Product`,`attribute`:`sku`,`operator`:`()`,`value`:`WS12, WT09, MT07, MH07, 24-MB02, 24-WB04, 241-MB08, 240-LV05`^]^]"}}</p>

Essentially, the above is from the default LUMA homepage and what I have in my homepage. I have changed the images and some text, but that’s it. Is there a _theme.less or _extends.less file from the blank theme or luma theme that I need to copy over to the child theme?

When I grep: block-promo-wrapper it comes up with nothing.

Solution: When sample data is installed it adds a styles.css file to pub/media/styles.css You have to add this your css file for your child theme. I just grabbed the styles.css file off M2 demo site: https://demo-magento-2.auroracreation.com/pub/media/styles.css

A child theme is design to “fall back” to it’s parent files when they aren’t present.

If this page live? It would be easier to Inspect Element it against my Sandbox Luma install.

Oh, did you fix it then? Confused :confused:

Yes, I continued to stumble through and finally found the solution that I posted. I should have probably put that in a new post. I was on the same page as you, which is what really confused me. If it wasn’t there then it should have led to a fallback on the luma theme. Stepping away from it for a few minutes made me realize it had to be something imported during the sample data installation. Indeed it was.

1 Like

When sample data is installed it adds a styles.css file to pub/media/styles.css You have to add this your css file for your child theme. I just grabbed the styles.css file off M2 demo site: https://demo-magento-2.auroracreation.com/pub/media/styles.css

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.