How to properly create and customize a Magento 2.1 theme?

Question

I want to create a new theme in magento and customize the html and css as I need.

I successfully created a new theme as per magento dev docs.

Now I need to customize, so that if someone gives me a design I should be able to convert it to a Magento theme.

I tried to start customizing the navigation bar. For navigation, the template file is topmenu.phtml located in root/vendor/magento/module-theme so I created a new folder Magento_Theme in my theme's directory app/design/frontend/<V>/<T>/Magento_Theme and in the templates/html directory I copied and pasted topmenu.phtml. But to my amusement, I found nothing there, everything is getting from block, even the html:

<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>
<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>

<nav class="navigation" data-action="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <?php /* @escapeNotVerified */ echo $_menu; ?>
        <?php /* @escapeNotVerified */ echo $block->getChildHtml(); ?>
    </ul>
</nav>

I am stuck here - how to customize it?

Can anyone who has experience in developing Magento 2.1 themes guide me how to customize pages? I just started with navigation and got stuck here. I am only able to change the CSS, not the HTML.

I want to change sidebars, catalog products, navigation and all.

Any guidance is appreciated. Please.

Answer 1

You are on the right track for customizing many Magento elements - but the navigation menu is a particularly complex one. Because all of the categories and menu options are dynamically generated from the database and configuration settings, you are correct: there is no HTML in there.

Most other theme elements have HTML in their templates, as you can probably see. The method of copying template .phtml files to your theme is correct, I believe.

Be sure to enable the theme, and the $ bin/magento cache:clean layout command is helpful for loading changes to your theme HTML.

Remember that to move elements and blocks around, you need to override and edit the layout.xml files.

But remember that the main navigation is difficult to customize. It should be controlled via store settings anyway. There are lots of classes on the links and elements to allow changing the theme and style.

If you need to change the way the menu HTML is output, look at the _getHtml() method in the \Magento\Theme\Block\Html\Topmenu class. (The comments at the top of topmenu.phtml tell you this is the class to look in). It loops over the menu Tree structure from the database and outputs the <ul> and <li> wrappers. You can override this Topmenu class with your customization by creating a module and using the di.xml file.

Welcome to the complex world of Magento development!