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.

The Style Guide extension is the reference for what these elements look like before you change them, and for checking the result afterwards.

Changing Tailwind Properties ​

Venta Theme is built on Tailwind v4, so theme properties are CSS variables defined in an @theme {} block. To override default Venta Theme properties, add your own @theme {} block in the theme's web/tailwind sources after the Venta imports (in theme.css, or directly in tailwind-source.css) - source order guarantees your values win.

One example would be changing the colors. If we need to change the primary color, we add:

css
@theme {
    --color-primary-500: #000000;
    --color-primary: var(--color-primary-500);
}

This replaces the primary color of the parent theme. This is not limited to colors - any token from the parent's @theme block (spacing, typography, radii) can be overridden the same way, and custom utilities are defined next to it with @utility.

The overrides become part of the compiled styles.css on the next build. For Tailwind classes used inside CMS content (pages, blocks, product and category descriptions) the compilation happens separately in the CMS Tailwind JIT module - set up the server-side daemon or the in-browser v4 fallback so those classes compile with your values too.

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