0

I am creating a theme for magento 2.2. Created my first custom block in app/frontend/CUSTOM VENDOR/CUSTOM THEME/Magento_Theme/templates/heading.phtml containing the following code:

<?php
//create block_identifier static block
echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block_identifier')->toHtml();?>

<?php echo __('<div class="block heading_title"><h1>Murky<br>Apparel</h1></div>');
?>

I have also successfully loaded the new block within app/frontend/CUSTOM VENDOR/CUSTOM THEME/Magento_Theme/layout/default.xml using this code:

<!-- Add custom title block to header -->
<referenceContainer name="header-wrapper">
<block class="Magento\Framework\View\Element\Template" name="customblock" before="top.search" template="Magento_Theme::heading.phtml" />
</referenceContainer>

The block is displaying on the front-end, but it pushes down the search bar and floats to the left, leaving no space between it and the logo. Here is an example image:

broken header text

I would like to know the following:

1) How do I implement a clearfix so that the search bar displays where it is supposed to, to the left of the cart button?

2) How do I add either padding or margin to the tag or its parent div?

Desired outcome would be something like this:

desired header

I am a newcomer to magento, so a clear explanation of how to implement custom styles might be helpful. TIA!

1

Even though Joshua is not wrong its a bad practice to add your own .css files.

For extending the theme css classes or overwriting them use /web/css/source/_theme.less. For adding css to your own custom classes (logo is already used by magento) use /web/css/source/_extend.less.

Even more so these filles are autogenerated by magento and you don't need to add them to any xml.

For a better understanding about how to use Magento's Block system (and a .phtml file is not a Block but a Template that is used within a Block) i highly recommend the following URL :

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html

But i'm guessing that you don't see how you can easily create your own template files from the one from magento 2

You can inherit any theme that Magento defines by adding the following to your theme.xml

<parent>magento/blank</parent>

Then you can just copy any .phtml file in the corresponding directory within your theme and it will be overwritten.

In your example you want to edit the logo box of Magento 2. You can add Logo's within magento from your theme settings (content->design->configuration->theme edit -> HTML Head)

The logo is defined within vendor/magento/module-theme/view/frontend/templates/html/header/logo.phtml

We can copy that file to our app/design/frontend/vendor/theme/Magento_theme/templates/html/header/logo.phtml and then just adjust it to our needs. It will automatically overwrite the .pthml file of Magento and you don't need to adjust any xml's.

As you noticed we need to follow the exact folder directory that Magento uses. We do not need to define its within the view/frontend folder because we are in the app/design/frontend folder already, magento/module_theme becomes Magento_theme and from there you just follow the directory that Magento wants.

  • Thank you for the explanation of the file structure! I had to rebuild the whole website at one point because I incorrectly copied files from vendor/magento and couldn't work it out. Although, in this instance, I don't actually need to alter the logo phtml file. I would simply need to add a margin to the logo or a custom class attached to it. I will now attempt this using the _extend.less method and a custom class added to the logo. One question, though, how would you recommend attaching a custom class to the existing logo? – Joshua Flood Oct 29 '17 at 0:10
  • I gave you a +1 for this already, but I don't have enough reputation for it to display. – Joshua Flood Oct 29 '17 at 0:11
  • Ah I see... I need to copy the logo.phtml file in order to add the custom class.. correct? – Joshua Flood Oct 29 '17 at 0:12
  • You can copy the logo.phtml and add your own class to the div that you want and use that in your _extend.less or you can use the #logo in your _theme.less and use that id to give it some padding – CompactCode Oct 29 '17 at 15:18
  • 1
    I try to give the resources to help you understand the framework but its impossible to explain everything in 1 post. I'm glad you did some of the research yourself. Thanks! – CompactCode Oct 29 '17 at 21:20
0

As stated in the question, the first problem, causing the search box to display incorrectly, was solved by editing the before attribute in the default.xml file:

<referenceContainer name="header-wrapper">
  <block class="Magento\Framework\View\Element\Template" name="customblock" before="page-header.end" template="Magento_Theme::heading.phtml" />
</referenceContainer>

The h1 container extends to the width of its parent. So, in order to create a space between it and the logo, I had to declare a <head> inside default.xml and reference a custom stylesheet:

<head>
  <css src="css/style.css" media="all" />
</head>
<body>
...

Inside the new stylesheet, located at app/frontend/CUSTOM VENDOR/CUSTOM THEME/web/css/style.css, I added the following code:

.logo {
  padding-right: 1rem;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.