Skip to content

Commit

Permalink
Tidy up installing-vlt.md
Browse files Browse the repository at this point in the history
  • Loading branch information
stevepiercy committed Nov 18, 2024
1 parent 9748787 commit 28854ed
Showing 1 changed file with 19 additions and 20 deletions.
39 changes: 19 additions & 20 deletions docs/customizing-volto-light-theme/installing-vlt.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ myst:
"description": "Installing Volto Light Theme"
"property=og:description": "Installing Volto Light Theme"
"property=og:title": "Installing Volto Light Theme"
"keywords": "Plone, Volto, Training"
"keywords": "Plone, Volto, Training, Volto Light Theme"
---


Expand All @@ -14,42 +14,42 @@ Follow the steps below to install and configure VLT in your project. VLT provide

### Step 1: Install Volto Light Theme

To install VLT, navigate to the `frontend/packages/volto-my-project` folder and run the following command:
To install VLT, navigate to the {file}`frontend/packages/volto-my-project` folder and run the following command:

```shell
pnpm install @kitconcept/volto-light-theme
```

While in your project package folder, add VLT to the `addons` list in your {file}`package.json`, as follows:

```
"addons": ["@kitconcept/volto-light-theme"],
```json
"addons": ["@kitconcept/volto-light-theme"],
```

### Step 2: Install Block Addons (Recommended)
### Step 2: install block add-ons

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`, but this is not required.
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 in the `addons` section in your {file}`package.json`, but this is not required.

Here is the list of recommended addons to install, including VLTwhich should be the last element:
Here is the list of recommended addons to install, including VLT, which should be the last element:

```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"
],
"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"
],
```

### Step 3: Configure Volto Light Theme as the Theme Provider
### 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 VLT as your theme provider.

Open the `volto.config.js` file in your `frontend` folder and modify it as shown below:
Open the {file}`volto.config.js` file in your {file}`frontend` folder, and modify it as shown below:

```diff
diff --git a/frontend/volto.config.js b/frontend/volto.config.js
Expand All @@ -68,5 +68,4 @@ index 56feec6..41aa96b 100644
};
```


That's it! Your project should now be using Volto Light Theme with its additional blocks and components.

0 comments on commit 28854ed

Please sign in to comment.