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?