diff --git a/docs/index.md b/docs/index.md index edb9bdbd..287a4fdc 100644 --- a/docs/index.md +++ b/docs/index.md @@ -21,6 +21,7 @@ mastering-plone-5/index voltohandson/index voltoaddons/index volto_customization/index +volto-light-theme/index effective-volto/index testing/index theming/index diff --git a/docs/volto-light-theme/adding-installing-new-block.md b/docs/volto-light-theme/adding-installing-new-block.md new file mode 100644 index 00000000..16d8f8c6 --- /dev/null +++ b/docs/volto-light-theme/adding-installing-new-block.md @@ -0,0 +1,39 @@ +--- +myst: + html_meta: + "description": "Adding Installing New Block" + "property=og:description": "Adding Installing New Block" + "property=og:title": "Adding Installing New Block" + "keywords": "Plone, Volto, Training" +--- + + +# Adding A New Block + +In this training module, we will learn how to integrate the @plone-collective/volto-relateditems-block into the Volto-light-theme. This block allows you to easily create links to related content in your Plone site. + +## Installing *@plone-collective/volto-relateditems-block* + +To install the related items block, use the following command: + +```shell +pnpm install @plone-collective/volto-relateditems-block +``` + +After installation, ensure that the addon is included in the addons key of your project's package.json: + +```json + "addons": [ + "@eeacms/volto-accordion-block", + "@kitconcept/volto-button-block", + "@kitconcept/volto-heading-block", + "@kitconcept/volto-highlight-block", + "@kitconcept/volto-introduction-block", + "@kitconcept/volto-separator-block", + "@kitconcept/volto-slider-block", + "@kitconcept/volto-light-theme", + "@plone-collective/volto-relateditems-block" + ], +``` + + That's it! Your project should now be using @plone-collective/volto-relateditems-block which shows the relateditems as link for this content. \ No newline at end of file diff --git a/docs/volto-light-theme/creating-new-project.md b/docs/volto-light-theme/creating-new-project.md new file mode 100644 index 00000000..6b621ba9 --- /dev/null +++ b/docs/volto-light-theme/creating-new-project.md @@ -0,0 +1,90 @@ +--- +myst: + html_meta: + 'description': 'Learn How to customize the Footer of the page' + 'property=og:description': 'Learn How to customize the Footer of the page' + 'property=og:title': 'Footer customization' + 'keywords': 'Plone, Volto, Training, Theme, Footer' +--- + +# Creating a New Project with Plone and Volto + +Follow the steps below to create a new project using Plone 6 and Volto. This guide assumes you have `pipx` installed. + +### Step 1: Install CookiePlone + +First, install `cookieplone`, a tool for setting up new Plone projects, using `pipx`: + +```shell +pipx install cookieplone +``` + +### Step 2: Create the Project + +Once Cookieplone is installed, run the command below to start the project creation process: + +```shell +pipx run cookieplone +``` + +You’ll be prompted with several questions. +For this tutorial, you should accept the default values by pressing {kbd}`Enter`, except for the following. +[Insert exceptions here.] + +Here are the prompts you’ll encounter + +```console +[1/17] Project Title (Project Title): my-vlt-project +[2/17] Project Description (A new project using Plone 6.): My Project +[3/17] Project Slug (Used for repository id) (my-vlt-project): my-project +[4/17] Project URL (without protocol) (my-project.example.com): my-project.example.com +[5/17] Author (Plone Foundation): +[6/17] Author E-mail (collective@plone.org): +[7/17] Should we use prerelease versions? (No): +[8/17] Plone Version (6.0.13): +[9/17] Volto Version (18.0.0): +[10/17] Python Package Name (my.project): +[11/17] Volto Addon Name (volto-my-project): +``` + +After answering the prompts, the project will be created. + +### Step 3: Install Dependencies + +Once the project is created, you need to install dependencies for both the backend and frontend. + +1. **Install the backend and frontend dependencies**: + +```shell +make install +``` + +2. **Start the backend**: + +```shell +make backend-start +``` + +3. **Start the frontend**: + +```shell +make frontend-start +``` + +### Step 4: Commit the Initial Changes + +To commit your initial project files to Git, run the following commands: + +```shell +git add . +git commit -m 'initial-commit' --no-verify +``` + +### Summary + +- `cookieplone` is used to create a new Plone project. +- Use `make install` to install dependencies. +- Start backend with `make backend-start` and frontend with `make frontend-start`. +- Commit the initial files to version control using Git. + +That's it! You've successfully set up your Plone project with Volto. diff --git a/docs/volto-light-theme/index.md b/docs/volto-light-theme/index.md new file mode 100644 index 00000000..03114c62 --- /dev/null +++ b/docs/volto-light-theme/index.md @@ -0,0 +1,39 @@ +--- +myst: + html_meta: + "description": "Volto Light Theme" + "property=og:description": "Volto Light Theme" + "property=og:title": "Volto Light Theme" + "keywords": "Plone, Volto, Training" +--- + +(volto-light-theme-label)= + +# Volto Light Theme + +About + +*Volto-light-theme* is aimed at providing developers with comprehensive knowledge and practical skills for theming in Plone 6's Volto frontend using volto-light-theme. + +The goal of this training is to guide developers in understanding and effectively working with volto-light-theme to create visually compelling and consistent user interfaces. Due to the scope of the content, the training follows a structured "show and tell" approach, presenting concepts and explaining their usage, while encouraging participants to put their learning into practice. + +Participants will explore essential aspects of volto-light-theme, such as setting up theme providers, customizing styles, and understanding how Volto’s theming system functions. The training also covers advanced tips, best practices, and lesser-known features to extend volto-light-theme and create more tailored solutions. + +This training is best suited for developers who have prior experience with Volto and want to deepen their theming knowledge. + +Level +: Beginner level + + +```{toctree} +:caption: Volto Light Theme +:maxdepth: 1 +:numbered: true + +creating-new-project +installing-vlt +adding-installing-new-block +theming +question-answer + +``` \ No newline at end of file diff --git a/docs/volto-light-theme/installing-vlt.md b/docs/volto-light-theme/installing-vlt.md new file mode 100644 index 00000000..48117eb3 --- /dev/null +++ b/docs/volto-light-theme/installing-vlt.md @@ -0,0 +1,68 @@ +--- +myst: + html_meta: + "description": "Installing Volto Light Theme" + "property=og:description": "Installing Volto Light Theme" + "property=og:title": "Installing Volto Light Theme" + "keywords": "Plone, Volto, Training" +--- + + +# Installing Volto Light Theme + +Follow the steps below to install and configure **Volto Light Theme** in your project. Volto Light Theme provides a clean and modern design with ready-to-use blocks and components. + +### Step 1: Install Volto Light Theme + +To install the **Volto Light Theme** in your project, navigate to the `frontend/packages/volto-my-project` folder and run the following command: + +```shell +pnpm install @kitconcept/volto-light-theme +``` + +### Step 2: Add Addons (Optional) + +Volto Light Theme comes with several pre-configured add-ons that provide basic blocks for your website. If you'd like to include them, you can add them to the `addons` section in your {file}`package.json`. + +Here is the list of available addons you can include: + +```json + "addons": [ + "@eeacms/volto-accordion-block", + "@kitconcept/volto-button-block", + "@kitconcept/volto-heading-block", + "@kitconcept/volto-highlight-block", + "@kitconcept/volto-introduction-block", + "@kitconcept/volto-separator-block", + "@kitconcept/volto-slider-block", + "@kitconcept/volto-light-theme" + ], +``` + +If you don’t need any of these addons, you can skip adding them to the `addons` list. + +### Step 3: Configure Volto Light Theme as the Theme Provider + +To leverage a cohesive set of styles, components, and design patterns that align with Volto’s best practices, you need to set the Volto Light Theme as your theme provider. + +Open the `volto.config.js` file in your `frontend` folder and modify it as shown below: + +```diff +diff --git a/frontend/volto.config.js b/frontend/volto.config.js +index 56feec6..41aa96b 100644 +--- a/frontend/volto.config.js ++++ b/frontend/volto.config.js +@@ -1,7 +1,7 @@ + const addons = ['volto-my-project']; +-const theme = ''; ++const theme = '@kitconcept/volto-light-theme'; + + module.exports = { + addons, +- theme ++ theme, + }; + ``` + + +That's it! Your project should now be using Volto Light Theme with the additional blocks and components. diff --git a/docs/volto-light-theme/question-answer.md b/docs/volto-light-theme/question-answer.md new file mode 100644 index 00000000..8dca5448 --- /dev/null +++ b/docs/volto-light-theme/question-answer.md @@ -0,0 +1,10 @@ +--- +myst: + html_meta: + "description": "Questions And Answer" + "property=og:description": "Questions And Answer" + "property=og:title": "Questions And Answer" + "keywords": "Plone, Volto, Training" +--- + +# Questions And Answer \ No newline at end of file diff --git a/docs/volto-light-theme/theming.md b/docs/volto-light-theme/theming.md new file mode 100644 index 00000000..27189864 --- /dev/null +++ b/docs/volto-light-theme/theming.md @@ -0,0 +1,42 @@ +--- +myst: + html_meta: + "description": "Theming" + "property=og:description": "Theming" + "property=og:title": "Theming" + "keywords": "Plone, Volto, Training" +--- + +# Volto-light-theme Theming Concept + +## Introduction + +Volto Light Theme is a customizable theme built for the Volto frontend of the Plone CMS. It offers a streamlined, modern design with the flexibility to adjust components and styles to fit various branding needs. This module will help you understand the core concepts of theming in VLT and guide you on how to present these concepts during training. + +## Core Theming Concepts + +### 1. **Base Styling** + +VLT is designed with simplicity and a minimalistic aesthetic. + +### 2. **Customizable Variables** + +VLT offers a set of Sass variables that allow developers to customize various design elements such as: + +- Primary and secondary colors +- Font families and sizes +- Spacing and padding + +These variables can be easily overridden in the theme’s configuration to match the visual identity of different projects. + +### 3. **Extending Components** + +The theme provides the ability to extend or modify existing components without breaking the overall design. Custom components can be created by copying and modifying the default components provided in Volto. This flexibility is crucial for tailoring specific parts of the site. + +### 4. **Overriding Default Styles** + +Developers can override default styles by creating custom CSS or SCSS files. These files can be imported into the project to replace or extend the styles defined in Volto-light-theme. + +## Conclusion + +Understanding the theming concept of Volto-light-theme allows you to build visually appealing and customized Plone sites that align with your brand's identity. By knowing these concepts, you will be able to extend, modify, and maintain consistent and attractive UI designs in your project.