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:
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:
I am a newcomer to magento, so a clear explanation of how to implement custom styles might be helpful. TIA!