Designer Guide

Glossary & Overview

The following terms are essential for understanding Venddor IO theme development:

CSS Styles - Cascading Style Sheets that define the look and feel of web pages.
Styles (e.g., presets) - Specific sets of CSS attribute values. These can be altered using the Theme Editor.
Theme Editor - A tool designed to tweak certain visual elements of the design.
Templates - Files based on the Smarty template engine, dictating how content gets presented.
Media - Elements like images, icons, and fonts used within the theme.
Mail - Email templates crafted with the Smarty template system.
Layout - The arrangement and design of blocks in the customer view.
Location - Specifies the design of a particular page.
Container - A designated space in the Layout, where grids can be placed. Four types are available: top panel, header, content, and footer.
Grid - Elements that constitute the layout's structure.

Theme Structure

A theme encapsulates various files that shape the store's visual presentation. This includes templates, CSS styling, media elements, the layout blueprint, and block content for customers. Some themes may also feature "Styles."

Themes in Venddor IO

These themes are organized under the design/themes/ directory. The default theme in Venddor IO is "Bright", but it's built on top of the "Responsive" theme.

A typical theme structure comprises six folders and two ancillary files:

layouts/ - Holds XML files defining visual structures. You can dive deeper into Layout later.
styles/ - Houses files with .less variables and elements for the Theme Editor.
templates/ - Consists of template files (.tpl).
mail/ - Contains email notification templates (.tpl).
css/ - Holds the theme's .less and .css styles.
media/ - A repository for the theme's fonts, icons, and images.
langs/ - Has the theme's translations and language variables (.po files).
customer_screenshot.png - A preview of the theme displayed in the Design → Themes section of the admin panel.
manifest.json - A file detailing theme information.

Manifest.json

This file captures essential theme information:

title - The theme's moniker, as displayed in the Design > Themes section.
description - A succinct descriptor of the theme.
theme - The path leading to the site's logo. Ideally, store the logo under media/images/.
developer - Either the individual developer's name or the company behind the theme.
favicon - The path to the theme's favicon, best stored under media/images/icons/.
parent_theme - The main theme your design draws inspiration from.
default_language - Default language code for the theme.

Every theme in Venddor IO should either derive from the "Basic" or "Responsive" theme, specified under the parent_theme parameter.

While creating a new theme, it's not mandatory to utilize all theme files. During installation, required files are fetched from the default theme. The parent_theme parameter in manifest.json indicates the theme from which these files originate.

For themes rooted in the "Responsive" design, this parameter must be defined, especially if absent in the manifest.json (like older themes based on "Basic").

Additional Insights

Cloning a Theme - Create a replica of an existing theme to preserve originality.
Managing Layouts - Tweak the arrangement and design of your theme.
Top Panel and Header - Adjust topmost sections for an intuitive interface.
Modifying Store Settings via a Theme - How your theme can influence store parameters.
CSS - Delve deeper into cascading style sheets and their impact.
Language Variables - Understand how multilingual support works within themes.
Layout - Define and alter the overall arrangement of design components.
Mail - Craft and modify email templates for notifications and communications.
Media Files - Learn to manage images, fonts, and icons.
Parent Themes - Get insights into foundational themes and their relevance.
Styles and Theme Editor - Deep dive into presets and the art of theme customization.
Templates - Know the backbone of your theme's structure and design.