Re-position just the welcome message

Question

I've been looking and looking and I can't seem to find the be all end ll to move this welcome message snippet.

I've looked around and found this question and answer to be helpful but not exactly what I was looking for.

I've located these files the above linked answer talks about, however I'm really only looking to move JUST the welcome message. I'd like to have it full width above the header. So ideally I'd like to do something like: but alas I do not know the hook for the welcome message.

The welcome message is in html/header.phtml and the block is referenced from this XML file, I'm not sure how to reference just the xml part of it? I've attempted to grab from the ko javascript from the header.phtml and make it my own in my own custom backend block and then reference the block in the default.xml file but that doesn't do anything at all. Just removes it completely.

So this is what I thought would work:

I've created a new template in my themes Magento_Theme folder and called it config_headergroup_notification.phtml:

<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/**
 * @var \Magento\Theme\Block\Html\Header $block
 */
$welcomeMessage = $block->getWelcome();
?>
<?php switch ($block->getShowPart()):
    case 'welcome': ?>
        <li class="greet welcome" data-bind="scope: 'customer'">

                <h1> hello???</h1>
                <span data-bind="html:'<?=$block->escapeHtml($welcomeMessage) ?>'"></span>
            <!-- /ko -->
        </li>
        <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                        "customer": {
                            "component": "Magento_Customer/js/view/customer"
                        }
                    }
                }
            }
        }
        </script>
    <?php break; ?>

    <?php case 'other': ?>
        <?php echo $block->getChildHtml(); ?>
    <?php break; ?>

<?php endswitch; ?>

Then added parts of the header.phtml code I thought would bring up my welcome message.

Then in my themes Magento_Theme default.xml file I've added this:

<referenceContainer name="header.panel">
              <block class="Magento\Framework\View\Element\Template" name="config.header.notification" before="-" template="Magento_Theme::config_headergroup_notification.phtml" />
        </referenceContainer>

But that just doesn't work. I know the function works because if I just put some text in the config_headergroup_notification.phtml and of course clear my theme files and cache the text appears in the header.panel section but my welcome message just won't show if I make any other attempted adjustments.

So then I thought I could find a block to reference and just move it as I've done with other ones in my default.xml file. So that's where my hopes are that I just need to find the block name for JUST this welcome message and then move it where I want. Like this first example in my question:

<move element="welcome.message" destination="header.panel" before="-"/>

Is anyone able to provide any insight or advice on this? I'm no Magento programmer but I do have a good idea of these basic xml changes.

Answer 1

Ok I found solution its works on my theme where parent is Blank.

yourtheme/Magento_Theme/layout/default.xml

in body tag add this:

<referenceBlock name="header.panel">
<block class="Magento\Theme\Block\Html\Header" name="header" as="header" before="-">
    <arguments>
        <argument name="show_part" xsi:type="string">welcome</argument>
    </arguments>
</block>
 </referenceBlock>

Or

 <referenceContainer name="header.panel">
    <block class="Magento\Theme\Block\Html\Header" name="welcome" as="header" before="-">
        <arguments>
            <argument name="show_part" xsi:type="string">welcome</argument>
        </arguments>
    </block>
     </referenceContainer>

And customize your less file for something like this:

li.greet.welcome {
   width: 100%;
   display: block;
   margin: auto;
   background-color: green;
   text-align: center;
}