---
myst:
html_meta:
"description": "We're going to create a theme package for Plone 6 Classic UI, that is based on the Business Casual theme from [startbootstrap.com](https://startbootstrap.com/theme/business-casual)."
"property=og:description": "We're going to create a theme package for Plone 6 Classic UI, that is based on the Business Casual theme from [startbootstrap.com](https://startbootstrap.com/theme/business-casual)."
"property=og:title": "Create a theme based on Diazo"
"keywords": "Create a theme based on Diazo"
---
# Create a theme based on Diazo
We're going to create a theme package for Plone 6 Classic UI, that is based on the Business Casual theme from [startbootstrap.com](https://startbootstrap.com/theme/business-casual).
Integrating a custom layout (static mockup) with Plone classic UI,
**Use Case**
- You have an existing static layout coming from a website or a designer.
- You want to integrate this layout without changing too much.
- You want to use the Plone default layout for all edit-/backend-view's.
**What you will learn**
- How to create your theme package with `plonecli`
- How to create the content structure for your theme
- How to integrate your static layout into the theme
- How to add and compile your styles
- How to create HTML snippets as TinyMCE templates
- How to create content type's and views
## Creating a theme package
To create a file system based theme, we first create a new addon package for Plone:
```{code-block} shell
$ plonecli create addon plonetheme.businesscasual22
```
Answer some questions about the package:
```
--> Author's name [Your Name]:
--> Author's email [yourname@example.com]:
--> Author's GitHub username: your_github_name_
--> Package description [An add-on for Plone]:
--> Do you want me to initialize a GIT repository in your new package?
--> Plone version [6.0.0]:
--> Python version for virtualenv [python3]:
--> Do you want me to activate VS Code support? (y/n) [y]:
Generated file structure at ... ./plonetheme.businesscasual22
```
Change into the generated package folder:
```{code-block} shell
$ cd plonetheme.businesscasual22
```
now we want to add a theme, to the addon:
```{code-block} shell
$ plonecli add theme
--> Theme name [My Theme]: Plone Theme Business casual 2022
```
## Integrate the static layout
Download the Bootstrap theme [Business Casual](https://startbootstrap.com/theme/business-casual) and extract the content into the theme folder under `src/plonetheme/businesscasual22/theme/`.
Your folder structure should now look like this:
```{code-block} shell
├── about.html
├── assets
│ ├── favicon.ico
│ └── img
│ ├── about.jpg
│ ├── bg.jpg
│ ├── intro.jpg
│ ├── products-01.jpg
│ ├── products-02.jpg
│ └── products-03.jpg
├── css
│ └── styles.css
├── index.html
├── js
│ └── scripts.js
├── manifest.cfg
├── package.json
├── products.html
├── README.rst
├── rules.xml
├── store.html
└── tinymce-templates
├── bs-dark-hero.html
├── bs-hero-left.html
└── bs-pricing.html
```
## Showtime, build your setup and test your theme
Run `plonecli build` to get build a development setup with Plone.
```{code-block} shell
$ plonecli build
```
After that you can start your Plone site with:
```{code-block}
$ plonecli serve
[...]
Serving on http://0.0.0.0:8080
```
Open in a Browser and see that Plone is running.
```{image} _static/barceloneta/plone_running.png
:alt: A running Plone instance.
```
Click {guilabel}`Create a new Plone site` and enter `admin` for `Username` and also for `Password`
```{image} _static/barceloneta/create_plone_site.png
:alt: A running Plone instance.
```
Click {guilabel}`Create Plone Site` to complete the setup of your Plone instance.
```{image} _static/barceloneta/fresh_plone.png
:alt: New Plone instance.
```
To enable your theme:
1. Go to the Plone Control Panel: {menuselection} `toolbar --> admin --> Site Setup`
2. Go to the "Add-ons" control panel.
3. You will see this form:
```{image} _static/diazo/activate_theme_addon.png
:alt: Add-ons control panel
```
4. Click {guilabel}`Install` to enable your addon package. To see the theme layout, go to the start page.
```{image} _static/diazo/first-start-after-copying-static-layout.png
:alt: Plone site with installed addon
```
Since the theme for now is rather static, we will deactivate it for now. For that go to the Plone Control Panel: {menuselection} `toolbar --> admin --> Site Setup` and then to `Theming` and click on activate on the Barceloneta theme. We now have again the default theme active.
## Creating content for our theme to shine
On the root level, we add the following folders:
- About
- Products
- Store
- More
In the folders `About` and `Store` we add a Page and make it the default page.
For the folder Products we are going to use a Collection instead and making it the default page. The criteria for the Collection we will define later.
Let's cleanup some of the default content. In the toolbar click on `Contents`, mark news, events and users folders and press the delete button.
```{image} _static/diazo/folder-contents-delete-news-events.png
:alt: Delete news and events folder in folder contents view
```
## Adding HTML snippets as TinyMCE templates
Since our layout requires a specific content layout, which would be hard to create manually, we will create these HTML structures as TinyMCE templates.
To do so, we copy the desired HTML snippets from the layout and add them to the tinymce-templates folder in our theme.
Let's start with the About section. With the inspector from of the Browser we simple copy the HTML and insert it in the section-about.HTML file. We also wrap it in the `
` tag.
section-about.html:
```html
Strong Coffee, Strong RootsAbout Our Cafe
Founded in 1987 by the Hernandez brothers, our establishment has been serving up rich coffee sourced from
artisan farmers in various regions of South and Central America. We are dedicated to travelling the world,
finding the best coffee, and bringing back to you here in our cafe.
We guarantee that you will fall in
lust
with our decadent blends the moment you walk inside until you finish your last sip. Join us for your daily
routine, an outing with friends, or simply just to enjoy some alone time.
```
```{note}
Please make sure to prepend the image paths with `++theme++plone-theme-business-casual-2022/`
```
section-intro.html:
```html
Fresh CoffeeWorth Drinking
Every cup of our quality artisan coffee starts with locally sourced, hand picked ingredients.
Once you try it, our coffee will be a blissful addition to your everyday morning routine - we guarantee it!
```
```{note}
Please make sure to prepend the image paths with `++theme++plone-theme-business-casual-2022/`
```
section-promise.html:
```html
Our PromiseTo You
When you walk into our shop to start your day, we are dedicated to providing you with
friendly service, a welcoming atmosphere, and above all else, excellent products made with the highest
quality ingredients. If you are not satisfied, please let us know and we will do whatever we can to make
things right!
```
section-opening-hours.html:
```html
Come On InWe're Open
Sunday
Closed
Monday
7:00 AM to 8:00 PM
Tuesday
7:00 AM to 8:00 PM
Wednesday
7:00 AM to 8:00 PM
Thursday
7:00 AM to 8:00 PM
Friday
7:00 AM to 8:00 PM
Saturday
9:00 AM to 5:00 PM
1116 Orchard Street
Golden Valley, Minnesota
Call Anytime
(317) 585-8468
```
when you are done with it, the tinymce-templates folder should look like this:
```shell
tinymce-templates/
├── bs-dark-hero.html
├── bs-hero-left.html
├── bs-pricing.html
├── section-about.html
├── section-intro.html
├── section-opening-hours.html
└── section-promise.html
```
Now we need to register the templates for the TinyMCE editor. You could do this manually in the TinyMCE control panel, but we will do the registration with the package in `profiles/default/registry/tinymce.xml`.
Right now it should look like this:
```xml
Enter the list of templates in json format http://www.tinymce.com/wiki.php/Plugin:templateFalseTemplates[
{"title": "BS Pricing", "url": "++theme++plone-theme-business-casual-2022/tinymce-templates/bs-pricing.html"},
{"title": "BS Hero: Dark", "url": "++theme++plone-theme-business-casual-2022/tinymce-templates/bs-dark-hero.html"},
{"title": "BS Hero: left-aligned with image", "url": "++theme++plone-theme-business-casual-2022/tinymce-templates/bs-hero-left.html"}
]
Enter a list of custom plugins which will be loaded in the editor. Format is pluginname|location, one per line.FalseCustom pluginstemplate|++plone++static/components/tinymce-builded/js/tinymce/plugins/templatebutton
```
In the first record, we add our new template files as follow:
```xml
[
{"title": "BS Pricing", "url": "++theme++plone-theme-business-casual-2022/tinymce-templates/bs-pricing.html"},
{"title": "BS Hero: Dark", "url": "++theme++plone-theme-business-casual-2022/tinymce-templates/bs-dark-hero.html"},
{"title": "BS Hero: left-aligned with image", "url": "++theme++plone-theme-business-casual-2022/tinymce-templates/bs-hero-left.html"},
{"title": "Section: Intro", "url": "++theme++plone-theme-business-casual-2022/tinymce-templates/section-intro.html"},
{"title": "Section: About", "url": "++theme++plone-theme-business-casual-2022/tinymce-templates/section-about.html"},
{"title": "Section: Promise", "url": "++theme++plone-theme-business-casual-2022/tinymce-templates/section-promise.html"},
{"title": "Section: Opening Hours", "url": "++theme++plone-theme-business-casual-2022/tinymce-templates/section-opening-hours.html"}
]
```
That's all, after uninstalling/installing the addon we will have the new templates in the TinyMCE.
## Inspect and optimize our layout file
The `index.html` file of the Bootstrap theme we got, looks as follow:
```html
Business Casual - Start Bootstrap Theme
A Free Bootstrap Business ThemeBusiness Casual
Fresh CoffeeWorth Drinking
Every cup of our quality artisan coffee starts with locally sourced, hand picked ingredients. Once you try it, our coffee will be a blissful addition to your everyday morning routine - we guarantee it!
When you walk into our shop to start your day, we are dedicated to providing you with friendly service, a welcoming atmosphere, and above all else, excellent products made with the highest quality ingredients. If you are not satisfied, please let us know and we will do whatever we can to make things right!
```
Let's focus on the styles in the header for now. You will find here a line like this:
```html
```
Since we will include the css later via our manifest file, we will delete this line here.
Now to the JavaScript in the footer of the body.
```html
```
the first line which includes the Bootstrap JavaScript, we will delete, since Plone come with it by default. The second line we will keep.
Now let's make two more little changes to the markup.
Let's add a tag where we will show portal messages from Plone later. Add this right under the `
