# 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.
