How to custom layout xml and template?
To override the module on your custom theme you should create the folder module in your custom theme folder as this:
app/design/frontend/[Vendor Theme]/[Theme Name]/Ves_ImageSlider
Then copy there files and folders in folder: app/code/Ves/ImageSlider/view/frontend/ Then paste into the folder “Ves_ImageSlider” on your custom theme folder.
1. Config layout xml
Edit the file “app/code/Ves/ImageSlider/view/frontend/layout/default.xml”
The content code of the file:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="Ves_ImageSlider::css/owl.carousel.min.css" /> <css src="Ves_ImageSlider::css/animate.css" /> </head> <body> <referenceContainer name="before.body.end"> <block class="Magento\Framework\View\Element\Template" name="imageslider.js" template="Ves_ImageSlider::js.phtml" /> </referenceContainer> </body> </page>
The module are calling 2 css files:
<css src="Ves_ImageSlider::css/owl.carousel.min.css" /> <css src="Ves_ImageSlider::css/animate.css" />
If you want to remove there css files you just need add code in layout xml as this:
<remove src="Ves_ImageSlider::css/owl.carousel.min.css" />
<remove src="Ves_ImageSlider::css/animate.css" />
2. Custom template
Edit the file “app/code/Ves/ImageSlider/view/frontend/templates/widget/slides.phtml“
The file “app/code/Ves/ImageSlider/view/frontend/templates/js.phtml” to init owl carousel js to run image slider.
Last updated