Appearance

Base Template ​

Base Template is a set of elements that you can change globally to account for changing colors, fonts, and any other tailwind / html properties.

The sequence of changes should be:

  1. Attempt to change via Tailwind properties
  2. Attempt to change via XML arguments
  3. Attempt to change via Template override.

Changing Tailwind Properties ​

Adapting the base template Tailwind properties can be easily done within a single file. In Previous steps, we created a file called tailwind.browser-jit-config.js, and we can use this file to override default Venta Theme properties.

One example would be changing the colors. If we need to change the colors, we can add this to the file:

js
module.exports = {
    theme: {
        extend: {
            colors: {
                primary: {
                    '500': '#000000',
                    get DEFAULT() { return this['500'] }
                }
            }
        }
    }
}

This would replace our default color of the primary element from whatever it was on the parent theme to this. This is not limited only to colors, but can be used for any other Tailwind classes that are used, to override the default values.

The tailwind.browser-jit-config.js is automatically included in the base tailwind.config.js file, so it'll be compiled within the final styles.css file, and also this property will be able to be used when Tailwind JIT is working in the admin CMS Pages and Blocks.

Changing templates ​

Sometimes all we need from a template change are some additional classes or class changes. In this case, there are 2 options, one of them is XML class changes, other is overwriting the file.

XML Class Changes ​

Some templates offer class changes to be done within the XML, not overriding the base file, e.g. vendor/magebitcom/magento2-venta-theme/Magento_Theme/templates/html/breadcrumbs.phtml.

This file has this in the template:

php
<nav class="breadcrumbs hidden bg-white absolute shadow-400 rounded z-30 pt-1
    md:pt-0 md:bg-container md:rounded-none md:shadow-none md:block md:relative
        <?= /** @noEscape */ $block->getCssClass() ?>"
        aria-label="Breadcrumb"
        id="breadcrumbs">
        ...

This means, that if we need to append any class to the breadcrumb element, instead of overwriting the template, we would create a new XML layout file, either global or local to a specific layout, and add the class via xml:

xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="breadcrumbs">
            <arguments>
                <argument name="css_class" xsi:type="string">block md:hidden</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

This will ensure on further Venta Theme updates, it will be easier to update.

File Overwrites ​

If an XML Class Change is not available, and additional changes are needed, we can overwrite a file in our app/design/frontend/<Vendor>/<theme> directory.

When we try to overwrite a file, we need to take sequence into mind to find the original file, let's say we're trying to overwrite the header template. We would firstly:

  • Check if the file exists in vendor/magebitcom/magento2-venta-theme/Magento_Theme/templates