0

There is a link in header portion called quick order, I need to add css class for that link but there is no phtml file for that link so I need to add it via xml. Below is the xml file from vendor.

<referenceContainer name="header.panel">
            <block class="Magento\Framework\View\Element\Html\Links" name="b2blinks" before="top.links">
                <arguments>
                    <argument name="css_class" xsi:type="string">header links</argument>
                </arguments>
                <block class="Magento\QuickOrder\Block\Link" name="quick_order_link" ifconfig="btob/website_configuration/quickorder_active" after="-"/>
            </block>
        </referenceContainer>

How can give css class for quick order link?

Improve this question

4 Answers 4

Reset to default
0

Try this

        <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.overview" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info" after="product.info.extrahint">
            <arguments>
                <argument name="at_call" xsi:type="string">getShortDescription</argument>
                <argument name="at_code" xsi:type="string">short_description</argument>
                <argument name="css_class" xsi:type="string">overview</argument>
                <argument name="at_label" xsi:type="string">none</argument>
                <argument name="title" translate="true" xsi:type="string">Overview</argument>
                <argument name="add_attribute" xsi:type="string">itemprop="description"</argument>
            </arguments>
        </block>

Note: Space not allow into css_class value.

You can also add class using container

<container name="product.info.social" label="Product social links container" htmlTag="div" htmlClass="product-social-links">
    <-- Add your block here -->
</container>

I Hope This Helps You.

Improve this answer
2
  • I have tried but not working. Can you please explain a little bit? I need to give css class for this block, <block class="Magento\QuickOrder\Block\Link" name="quick_order_link" ifconfig="btob/website_configuration/quickorder_active" after="-"/>
    – MagentoDev
    Oct 21, 2020 at 12:21
  • use this into your argument <argument name="css_class" xsi:type="string">overview</argument>And before check please run upgrade command.
    – Msquare
    Oct 21, 2020 at 12:23
0

you can add your custom class for your custom link like this

<referenceContainer name="header.panel">
   <block class="Magento\Framework\View\Element\Html\Links" name="b2blinks" before="top.links">
      <arguments>
         <argument name="class" xsi:type="string">header links</argument> // like this
      </arguments>
   <block class="Magento\QuickOrder\Block\Link" name="quick_order_link" ifconfig="btob/website_configuration/quickorder_active" after="-"/>
   </block>
</referenceContainer>
Improve this answer
3
  • Tried the same way but not working
    – MagentoDev
    Oct 21, 2020 at 12:20
  • I have to give the css class name for this block, <block class="Magento\QuickOrder\Block\Link" name="quick_order_link" ifconfig="btob/website_configuration/quickorder_active" after="-"/>
    – MagentoDev
    Oct 21, 2020 at 12:20
  • please try it, <block class="Magento\QuickOrder\Block\Link" name="quick_order_link" htmlClass="your customclass" ifconfig="btob/website_configuration/quickorder_active" after="-"/>
    – Himanshu
    Oct 21, 2020 at 12:26
0

I don't believe you can do this with XML, if you look at the block XML instructions on the dev docs you'll see there is no method for adding CSS classes.

This means it would only be possible if the PHP class contains the functionality, from a quick search through the PHP this is not the case.

You will need to either wrap your block in a container element with the htmlClass attribute or use a new block.

Improve this answer
-1

Did you mean this? I've given css in xml header for my custom modules.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Vendor_Module::css/cssfilename.css"/>
    </head>
    <update handle="editor"/>
   
    <body>
        <referenceContainer name="content">
            <uiComponent name="index_edit_form"/>
        </referenceContainer>
    </body>
</page>

css file location "web/css/"

Improve this answer
1
  • and even for blocks, the css files could be added the same way as mentioned above.
    – Abdul Samad Abbasi
    Oct 21, 2020 at 12:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.