I have the following custom xml inside of my Magento_theme> layout> default.xml
<referenceBlock name="top.links">
<block class="Magento\Framework\View\Element\Html\Link" name="contactus.link" after="my-account-link">
<arguments>
<argument name="label" xsi:type="string" translate="false">Contact Us</argument>
<argument name="path" xsi:type="string" translate="false">contact-us</argument>
</arguments>
</block>
<block class="Magento\Framework\View\Element\Html\Link" name="aboutus.link" after="contactus.link">
<arguments>
<argument name="label" xsi:type="string" translate="false">About Us</argument>
<argument name="path" xsi:type="string" translate="false">about-us</argument>
</arguments>
</block>
<referenceBlock name="register-link" remove="true" />
<referenceBlock name="authorization-link" remove="true" />
<referenceBlock name="wish-list-link" remove="true" />
<reeferenceBlock name="my-account-link" remove="false" />
</referenceBlock>
Im removing blocks and adding custom ones in.
What I'd like to to is add a class to the two custom blocks - aboutus.link and contactus.link - how do i go about doing this? Or can it not be done with xml.
3 Answers 3
You can add css as described below by the element
name="class"
<block class="Magento\Framework\View\Element\Html\Links" name="header.links">
<arguments>
<argument name="label" xsi:type="string" translate="false">Text</argument>
<argument name="path" xsi:type="string" translate="false">Text</argument>
<argument name="class" xsi:type="string">header links</argument>
</arguments>
</block>
-
adding
classcreates an exception in 2.1.2 =>section source is not supported, addingcss_classdoesn't create on but then the class is never addedOZZIE– OZZIE2017年03月07日 12:27:33 +00:00Commented Mar 7, 2017 at 12:27
There are 2 ways to do that:-
1- Add wrapping container to your block, like :-
<container name="div.header.links" htmlTag="div" htmlClass="header_links" after="-">
<block class="Magento\Framework\View\Element\Html\Links" name="header.links" >
</block>
</container>
2:- Add referenceContainer tag, like :-
<referenceContainer name="header.links" htmlClass="css_class" htmlTag="div">
<block class="Magento\Cms\Block\Block" name="header.links">
<arguments>
</arguments>
</block>
-
Both method are useful .. nice learningRavi Soni– Ravi Soni2018年05月05日 23:39:18 +00:00Commented May 5, 2018 at 23:39
-
htmlClass is not used with
<referenceContainer>devdocs.magento.com/guides/v2.1/frontend-dev-guide/layouts/…Gediminas– Gediminas2018年07月20日 10:59:37 +00:00Commented Jul 20, 2018 at 10:59
Looking at the Magento\Framework\View\Element\Html\Link\Current code for version 2.2.6, there is no class argument supported (as documented in the previously accepted answer). However class is an accepted attribute. It can be used to set the css_class as follows:
<block class="Magento\Framework\View\Element\Html\Link\Current">
<arguments>
<argument name="label" xsi:type="string" translate="true">My Link</argument>
<argument name="path" xsi:type="string">my_page</argument>
<argument name="attributes" xsi:type="array">
<item name="class" xsi:type="string">the-class</item>
</argument>
</arguments>
</block>
-
not work for me . i used both <argument class="class" xsi:type="string">the-classname</argument> and <argument name="attributes" xsi:type="array"> <item name="class" xsi:type="string">the-class</item> </argument> my current version is 2.2.6 I include like this <head> <css src="css/firstfile.css" media="all and (min-width: 1px)"/> </head>HaFiz Umer– HaFiz Umer2019年06月25日 10:46:24 +00:00Commented Jun 25, 2019 at 10:46
-
Thanks a lot. It is working! Where do I find documentation regarding these XML layout arguments?Ramesh KR– Ramesh KR2021年08月19日 17:01:15 +00:00Commented Aug 19, 2021 at 17:01