0

How do I apply an inline style to an element in an XML layout file in Magento 2?

<container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="header" before="main.content"/>

I am looking to add inline styles to the header element above, but I cannot find any reference on how to do this, I tried htmlStyle and this does not appear to work.

3

According to my research, you can't set inline style on a container element.

The Arguments

  • In the classes responsible for interpreting this type of xml element, Magento\Framework\View\Layout\Reader\Container and Magento\Framework\View\Layout\Generator\Container, you'll find the names of container options in layout, which are used for performing validations:

    const CONTAINER_OPT_HTML_TAG = 'htmlTag'; const CONTAINER_OPT_HTML_CLASS = 'htmlClass'; const CONTAINER_OPT_HTML_ID = 'htmlId'; const CONTAINER_OPT_LABEL = 'label';

  • Also, when the xml's are converted into html output, in Magento\Framework\View\Layout, you'll find in _renderContainer($name) method, this line $html = sprintf('<%1$s%2$s%3$s>%4$s</%1$s>', $htmlTag, $htmlId, $htmlClass, $html);, which means that only tags, ids and classes are included in the html output.

The arguments are strengthened by magento documentation: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-instructions.html#fedg_layout_xml-instruc_ex_cont, which presents the allowed options for a container element, without specifying any inline customisations.

The only option I can see is to use htmlClass. If there's a way to do that and I'm wrong, please leave a comment

|improve this answer|||||
0

To expand on Alex's answer above, you will need to use CSS/LESS for styling as you can't directly do it inline in XML.

  1. Create a stylesheet for your module.
    • Vendor\Module\view\frontend\web\css\source\_module.less
  2. Add your CSS/LESS styling to that sheet
  3. If in developer mode:
    • Clear the pub/static cached files with: rm -rf pub/static/
    • Clear the var/view_preprocessed cached files with: rm -rf var/view_preprocessed
  4. If in production mode:
    • Deploy static content: php bin/magento setup:static-content:deploy
  5. If caches are enabled
    • Clear the cache: php bin/magento cache:clean
  6. Refresh the page

NOTE: I've seen some other sources suggest that you need to run an upgrade. I didn't need to in developer mode but wanted to mention it in case others find it necessary. php bin/magento setup:upgrade

Also worth mentioning that you can use an ID as well as an HTML Class. In your XML you can set these to the container with the following syntax:

Set ID:

<container name="custom.container" as="custom_container" htmlTag="div" label="Custom Container" htmlId="custom_css_id" />

Set Class:

<container name="custom.container" as="custom_container" htmlTag="div" label="Custom Container" htmlClass="custom_css_class" />

Set ID and Class:

<container name="custom.container" as="custom_container" htmlTag="div" label="Custom Container" htmlId="custom_css_id" htmlClass="custom_css_class" />
|improve this answer|||||

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.