George Whitcher

Dad, Web Developer, Software Engineer, Graphic Artist, Snowboarder, Musician, Gamer, Nerd

Magento 2 custom theme and playing with the header

Magento 2 custom theme and playing with the header

Posted in Code
March 17, 2017 01:37:01 PM
Published by
Leave your thoughts

I have been working in Magento 2 lately for work.  Magento is a great E-Commerce platform widely used.  That said it is not very developer friendly.  There is a developer mode but honestly it doesn't do much for the developer.  Any time you make a change to the default.xml you have to clear your static files (rm -rf pub/static var/cache var/composer_home var/generation var/page_cache var/view_preprocessed) and deploy them again (php bin/magento setup:static-content:deploy)(In Magento 2.1 you can add --theme Vendor/Module to build a single theme).  It has to rebuild all the theme files which takes awhile and is really frustrating.  I was looking at the Imagine Magento conference (http://imagine.magento.com) and noticed a speakers website in Canada who is into Backcountry skiing.  So of course I was instantly intererested.  I snooped around and noticed I really liked the header all on one line.  This proved more complicated than expected.  Here is how I completed it.

If you have not already make a custom theme from the blank theme.  You can do this by creating a folder in /app/design/frontend/Vendor/Module/ and copying the files from /vendor/magento/theme-frontend-blank/.  Edit the composer.json, registration.php, and theme.xml to reflect your Vendor/Module names chosen.  You can now activate your theme in the administration by going to Store > Configuration > Design and selecting it from the drop down.  You have now activated your custom theme.

Now that you have a custom theme it is time to add custom CSS and Javascript.  Open your /app/design/frontend/Vendor/Module/Magento_Theme/default_head_blocks.xml and add <css src="css/styles-custom.css" /> and <script src="js/javascript-custom.js"></script> to the <head> tag.  Now go to to the /app/design/frontend/Vendor/Module/web folder and add a styles-custom.css file to the css folder and a javascript-custom.js file to the js folder.  You have not added custom CSS and Javascript files to your theme.

With your custom theme active and setup with custom CSS and Javascript files it is time to move around your header so everything is on one line.  To do this we have to make some changes to your themes default.xml located in the /app/design/frontend/Vendor/Module/Magento_Theme/ folder.  You should see the following lines:

<move element="top.links" destination="header.panel" after="-"/>
<move element="catalog.topnav" destination="store.menu" before="-"/>

You will want to replace them with the following:

<move element="logo" destination="header.panel" before="catalog.topnav"/>
<move element="catalog.topnav" destination="header.panel" after="logo"/>
<move element="top.search" destination="header.panel" after="catalog.topnav"/>
<move element="top.links" destination="header.panel" before="minicart"/>
<move element="minicart" destination="header.panel" after="top.links"/>

Save your file and now open your styles-custom.css we made.  Paste the following CSS:

/* Custom styles */
.page-header {
    margin-top: 0px;
}
.page-header .header.panel {
    padding: 0px !important;
    margin-bottom: 0px;
}
.page-header .logo {
    margin-top: 15px;
}
.page-header nav.navigation {
    max-width: 305px; /* This may change based off your nav items */
    background: #FFF;
    float: left;
    margin: 0px;
    padding: 0px;
}
.page-header .header.panel > .header.links {
    float: none !important;
}
.page-header div.minicart-wrapper {
    float: right !important;
    top: 7px;
}
.page-header .block-search {
    float: left !important;
    max-width: 140px;
    margin-top: 10px;
}
.page-header .nested {
    display: none !important;
}

Now clear your cache (rm -rf pub/static var/cache var/composer_home var/generation var/page_cache var/view_preprocessed) and build your static files (php bin/magento setup:static-content:deploy) and refresh your page.  Your header should now be all on one line.

Also if you want to remove any of these items you can just add the following.  This will remove the Magento bug reporting on the footer that you most likely don't want.  This same method would be applied to any header object.  For instance changing report.bugs to logo would remove the logo.

<referenceBlock name="report.bugs" remove="true" />

Bonus!  You most likely want to add your own logo now.  Since you already are in your default.xml drop the following code in (update to your image width/height) and your logo in the images folder.  Clear your cache and rebuild your static files and your logo will appear.

<referenceBlock name="logo">
<arguments>
  <argument name="logo_file" xsi:type="string">images/logo.png</argument>
  <argument name="logo_img_width" xsi:type="number">200</argument>
  <argument name="logo_img_height" xsi:type="number">33</argument>
  </arguments>
</referenceBlock>

Magento 2 can be complicated and this took me awhile to figure out.  Hopefully it can help others.

Article written by:

Hi! My name is George Whitcher and I am a developer from the South Shore of MA.  When I am not busy being a dad I like to play video games, play/write music, snowboard, and skateboard.