Magento2 - Change "LINKS" CSS class in footer

Question

I would like to change the div class "links" to something like "footerlinks", so if I change the css only the footer links are affected and not all divs with "links" as a class.

Below you can see which div class I mean.

enter image description here

Info: I want to change the class so I can have the linksblock in the footer side by side. Currently it is side by side because i changed style of ".links", but all the other CSS blocks with the class "links" are screwed up now..

Answer 1

Add below code to your theme default.xml file with change your class name:-

<referenceContainer name="footer">
 <block class="Magento\Framework\View\Element\Html\Links" name="footer_links">
 <arguments>
 <argument name="css_class" xsi:type="string">footer your-class</argument> <!-- changed links to your-class -->
 </arguments>
 </block> 
</referenceContainer>

• clear cache

• N1njaWTF: Hey, thanks for the answer. The problem is, I did "<referenceBlock name="footer_links" remove="true" />", because I created 3 custom footer link blocks, which names are "footerblock1", "footerblock2" and "footerblock3". How could I handle it then? or is there a way i can have more then 1 "linkblock" in "footer_links"?
• Dipesh Rangani: Yes you can add and change class name in block as: <block name="footerblock1" class="Magento\Cms\Block\Block" htmlTag="div" htmlClass="your-class-namel">
• N1njaWTF: Tried it, didnt work... Look, I removed the "footer_links" and made 3 new cms blocks and added them as widget to "cms footer links". now all these 3 cms blocks/widgets are in a css class called "links". I would like to change that css class "links" to "footerlinks", so the other css classes called "links" arent getting affected by css changes I need to make in order to place the footer link blocks/widgets side by side. Thanks alot!

Answer 2

I encountered this same problem in magento 2.1.0, I simply changed the css and it worked: .footer.content .links{display:flex;}

Also, I gave the class=footerlinks to the unordered list created in each block and added the css .footer.links {display: block !important;}