Magento 2 Custom Themes

[neilcarpenter]

I'm a developer that's new to magento - can anybody point me in the right direction that gives me an insight into how it works in regards to creating a custom theme. I've looked through the docs and am none the wiser as the whole approach is pretty new to me.

I've created a theme that has the Blank theme as a parent, but I can't find where I edit any front end html, or move things around on my page... For instance, i'd like to move the search bar underneath my main navigation, how would I do this?

[Tom Robertshaw]

For moving the search you may be able to achieve this through layout instructions which you can read up on here: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/layouts/xml-instructions.html

For getting started by creating a new theme, I think this page is the most relevant out of the docs: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/theme-create.html

Which particular point in the process did you get up to? What have you tried and hasn't worked?

[neilcarpenter]

I went through the Creating a theme guide and done all of that, so I have a theme, that has the Magento blank theme as a parent.

Now I'm trying to get an understanding of how the front-end pages are put together. Like where does the rendering process start, I think it's with page layouts.

So I've created a file...

/app/design/frontend/<vendor>/<theme-name>/Magento_Theme/view/frontend/page_layout/1column.xml

And I think my file above should be used instead of...

/vendor/magento/module-theme/view/frontend/page_layout/1column.xml

Am I right in thinking that @Tom Robertshaw?

[Rakesh Jesadiya]

You dont need to keep in your custom theme view/frontend Because by default you created theme is for frontend scope so just ignore it.

Your new path would be like for page_layout,

app/design/frontend/<vendor>/<theme-name>/Magento_Theme/page_layout/1column.xml

 For override layout file,

app/design/frontend/<vendor>/<theme-name>/Magento_Theme/layout/default.xml

For override templates file,

app/design/frontend/<vendor>/<theme-name>/Magento_Theme/templates/

You can do for all other module.

if issue solved, Click kudos/accept as solutions.

[neilcarpenter]

Sorry, so what's the difference between default.xml in my layouts directoy, and the 1column.xml in my page_layouts directory?

I think I just have a lot of confusion between layouts,page layouts and templates - They all kind of sound like they should be the same thing to me.

Same with using the term 'override' - isn't the 1column.xml in my page_layouts directory overriding the same file in the parent theme? So that too is an override file?

I'll keep trying using a bit of trial and error and your help and if I will accept you reply as successful if it works out for me .

[Rakesh Jesadiya]

yeah, I will figure out your doubt.

When you want to override any files like phtml.xml or js and css file from core module to your theme.

You need to first create folder with name like Magento as prefix and each hyphen word to Camelcase.

Ex. for module-catalog to Magento_Catalog

For override core module name with dash(hyphen) module-catalog-inventory to Magento_CatalogInventory

You have to copy from core module to your theme folder with,

app/design/frontend/<vendor>/<theme-name>/Magento_Theme/layout/***

For templates file,

app/design/frontend/<vendor>/<theme-name>/Magento_Theme/templates/***

where *** is responsible for core files from module.

Now, page_layout is default layout of your site pages. Like category page with 2columns-left layout, Homepage has 1column layout. Its different type of layout related to page. You dont need to override this layout files if you dont want to change anything in current layout.

Mostly you need to override layout and templates folder from core.

layout folder contains structure related to single action. For default.xml file its working for global layout(common settting) for all page. other is just example for product page, catalog_product_view.xml this xml file related to product page.

Template file contains template view rendered logic.

[neilcarpenter]

Hi Rakesh,

Ive been really busy on other projects, and been away on holiday for a while but im now back at trying to figure out Magento.

I feel like a have a better understanding of the way magento builds up the front end of the site now, but having worked through the docs, im stilll struggling to get my changes to appear on the front end. An example that im trying is to move the search bar above the top links on the website.

So i've created the file...

/app/design/frontend/<vendor><theme-name>/Magento_Search/layout/default.xml

And added the following code...

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move name="top.search" destination="top-links" before="header" />
    </body>
</page>

But on refreshing the homepage, the search bar hasn't moved. I've tried clearing the cache and emptying the /var/view_preprocessed and /pub/static/frontend directories, and there is still no changes.

Could you point me in the direction of what I might be doing wrong or misunderstanding please?

[olukyanenko]

Try to wrap your code

<referenceContainer name="page.wrapper">
       <move .... >
</referenceContainer>