Add inline style to element in XML Magento 2

Question

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.

Answer 1

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

Answer 2

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" />