cancel
Showing results for 
Search instead for 
Did you mean: 

New page layout is blank

New page layout is blank

I'm trying to create a new page layout. The layout will be identical to the 1 column layout with the exception of the max0wdith and margins applied to the "maincontent" element. In other words, I want a page layout that is full-width.

 

I've added a new file layouts.xml to \app\design\frontend\my_company\my_theme\Magento_Theme;

 

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="full-width">
        <label translate="true">Full Width</label>
    </layout>
</page_layouts>

I've copied the definition for the 1 column layout and not changed anything yet. There's a load of conflicting information on where this file should reside. I've tried all of the following locations without success.

 

\app\design\frontend\my_company\my_theme\Magento_Theme\full-width.xml

\app\design\frontend\my_company\my_theme\Magento_Theme\layout\full-width.xml

\app\design\frontend\my_company\my_theme\Magento_Theme\page_layout\full-width.xml

\app\design\frontend\my_company\my_theme\Magento_Theme\page_layouts\full-width.xml

\app\design\frontend\my_company\my_theme\view\frontend\full-width.xml

\app\design\frontend\my_company\my_theme\view\frontend\page_layout\full-width.xml

\app\design\frontend\my_company\my_theme\view\frontend\page_layouts\full-width.xml

 

I can see my new layout in the Layout dropdown in Content>Pages>Design. I've selected the new layout and executed the following on the server;

 

chown -R magento:www-data /var/www/html/magento/

rm -R /var/www/html/magento/pub/static/frontend/my_company\my_theme/

rm -R /var/www/html/magento/var/view_preprocessed/css/my_company\my_theme/

 

When I attempt to navigate to the pages (my home page) that I specified the new layout for, all I get is a blank page. Looking at the page source I see;

 

<!doctype html>
<html lang="en-GB">
    <head >
        <script>
    var require = {
        "baseUrl": "http://www.myurl.com/pub/static/frontend/my_company/my_theme/en_GB"
    };
</script>
        <meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="robots" content="INDEX,FOLLOW"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title></title>
<link  rel="stylesheet/less" type="text/css"  media="all" href="http://www.nusa.world/pub/static/frontend/my_company/my_theme/en_GB/mage/calendar.css" />
<link  rel="stylesheet/less" type="text/css"  media="all" href="http://www.nusa.world/pub/static/frontend/my_company/my_theme/en_GB/css/styles-m.css" />
<link  rel="stylesheet/less" type="text/css"  media="all" href="http://www.nusa.world/pub/static/frontend/my_company/my_theme/en_GB/Magestore_Sociallogin/css/sociallogin.css" />
<link  rel="stylesheet/less" type="text/css"  media="all" href="http://www.nusa.world/pub/static/frontend/my_company/my_theme/en_GB/Magestore_Sociallogin/css/mobilesociallogin.css" />
<link  rel="stylesheet/less" type="text/css"  media="all" href="http://www.nusa.world/pub/static/frontend/my_company/my_theme/en_GB/Ves_ImageSlider/css/owl.carousel.min.css" />
<link  rel="stylesheet/less" type="text/css"  media="all" href="http://www.nusa.world/pub/static/frontend/my_company/my_theme/en_GB/Ves_ImageSlider/css/animate.css" />
<link  rel="stylesheet/less" type="text/css"  media="screen and (min-width: 768px)" href="http://www.nusa.world/pub/static/frontend/my_company/my_theme/en_GB/css/styles-l.css" />
<link  rel="stylesheet/less" type="text/css"  media="print" href="http://www.nusa.world/pub/static/frontend/my_company/my_theme/en_GB/css/print.css" />
<link  rel="icon" type="image/x-icon" href="http://www.nusa.world/pub/static/frontend/my_company/my_theme/en_GB/Magento_Theme/favicon.ico" />
<link  rel="shortcut icon" type="image/x-icon" href="http://www.nusa.world/pub/static/frontend/my_company/my_theme/en_GB/Magento_Theme/favicon.ico" />
<script src="http://www.nusa.world/pub/static/frontend/my_company/my_theme/en_GB/less/config.less.js"></script>
<script src="http://www.nusa.world/pub/static/frontend/my_company/my_theme/en_GB/less/less.min.js"></script>
<script  type="text/javascript"  src="http://www.nusa.world/pub/static/frontend/my_company/my_theme/en_GB/requirejs/require.js"></script>
            </head>
    <body data-container="body" data-mage-init='{"loaderAjax": {}, "loader": { "icon": "http://www.nusa.world/pub/static/frontend/my_company/my_theme/en_GB/images/loader-2.gif"}}' class="cms-index-index page-layout-full-width">
            </body>
</html>

I've no idea what to try next. Does anyone know the correct location of the new page layout file?