How to use 2 different CSS sheets in M2 that user can choose in admin? Layouts or something else?

Question

I am trying to create 2 new layouts called "3 column - full width" and "2 column - full width" so the user can choose either of those on any article page instead of having to resort to inline css overrides in the 'content' area.

These two layouts can be based off the M2 empty layout, the problem is, I have created them but my page shows blank after I select them in the layout dropdown.

Here's my code for example:

Magento_Theme/pagelayout/one_column-full_width-layout.xml:

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
    </referenceContainer>
</layout>

Magento_Theme/layouts.xml:

<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="two_column-full_width-layout">
        <label translate="true">Two Column - 100% Width</label>
    </layout>
    <layout id="one-column-full_width-layout">
        <label translate="true">One Column - 100% Width</label>
    </layout>
</page_layouts>

I am also not sure if I am going beyond the scope of what I need to do. I literally just want to user to be able to switch between two stylesheets.

Thanks for any help. Let me know if I need to clarify.

Answer 1

change id layout, you should use all underscore between not hyphen (my opinion). Important id must be same with layout name file in page_layout

<layout id="one_column_full_width_layout">
       <label translate="true">One Column - 100% Width</label>
</layout>