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.

PreviousFAQNextHow to add content over slide image?

Last updated