Plone 6 Classic UI Theming_ Create a theme for Plone 6 Classic UI based on Bootstrap 5
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Holzer, Peter
Antonelli, Stefan
Derstappen, Maik
The core technologies involved in Plone 6 Classic UI theming and how to write your own add-on theme package. You’ll learn how to create a theme based on Barceloneta (for minor customizations and overrides) or from scratch based Bootstrap 5 without any dependencies to Barceloneta.
 So let's say we start. Hello everyone, I'm Peter, I'm in Zurich. Welcome to the Plon6 classic UI theming. We will be doing three slots each of them about one hour, there's a short break in between and I hope you could prepare yourself or your computer and that it works. If you have any questions write in the Slack channel or just speak up here on Zoom. So I will cover one small part quickly and there's three web customizations. In Plon you always could do some web customization by changing the logo and stuff like that. And with Plon6 some things change. So I start up my site quickly. So one thing which you probably know is how to change the logo. I won't go into much detail here. It's a simple form. You add the logo and it will be displayed automatically. There is one other pull request to also change the fabric on but that wasn't merged yet. So the big new thing is we have now with bootstrap 5 the possibility of custom CSS variables. We introduced with Plon 5.2 version the possibility to add your custom style sheets again. Maybe remember that from Plon 4. Otherwise I'll quickly show you how that works. So you go to your Plon site. Set up for the theming control panel. There we have already a theming control but doesn't matter now. You go to advanced settings and within custom styles you have a simple field where you can add your CSS that you want to add to your site without theming anything in your Plon site. Just enter your styles here and you already see that heading one has a different color. If you go back to Plon site you see document first heading got that color. But with bootstrap 5 we got the CSS variables. So this makes possible to change a lot of stuff visually in your theme or in your site without creating a theme without compiling any styles. So just to give you an idea or an overview first this is the link to the series CSS variables that are available now. These are defined by bootstrap and we are using them as well. So we can pick one of these variables and just add it to your CSS. Instead of header just color red I define my variables here in the this root definition. I have here my green and my orange and I use the my green for the heading and also the orange for the body text color. What I'm also using here is a standard bootstrap variable. If I go to save here you see that I changed the background, changed the heading color to the variable name and also the standard text is now my orange. So yeah to mention there's just some variables. I think these variables will grow with the development of bootstrap and with what we do in Barcelona in the future. So let's head over to how to create a theme based on Barcelona. So we are going to create a theme on the file system. We'll be using the recommended way to make your life easier. That's based on Plan CLI. Now for the Plan 6 we created three new templates. One is for creating a theme based on Barcelona which we'll be doing now and the other two are covered by Stefan and Mike later. We quickly create a new Python package. You can enter whatever you want here. Just going with the defaults. So we have now my Aaron.name package. Just enter this package and then what we do here is we create our clone theme. So within the you change into the package and add a theme. You can also do a Plan CLI minus L and you see all the templates that you have available. Let's add a theme based on Barcelona. We will recreate the clone theme Gritzy Busy that I created for this showcase or training. So I just give it a name and it's added here. To run clone the first time or to get all the dependencies it will Plan CLI build. This will run build out for you. Get all the stuff you need to run a Plan CLI. Meanwhile I can show you what was created here. Within your package the namespace there was a theme folder created. We now have the basic files here that we need for our theme. To start my site I just run Plan CLI serve and if I go address I have a plain clone instance running but no site yet. So we just add Plan CLI. So this is your Plan CLI running. Then we go to the site setup to our Plan Control Panel. Go to the add-ons and here you see this add-on here. If I install it I already have some kind of coloring here. These are just default styles. So to get started with your Plan CLI I also already skip this part. You leave the Plan CLI running. Just create a new terminal. I go into the package and then into the theme volume. So here in the package we have the package.json file that defines all the dependencies what you need to make your own theme. From here you just run an npm install and npm will get the stuff dependencies what you need to work on your theme. What we also included here is a watch script. This will compile your scss file which is in the styles folder to the actual theme sss that you will be using later. So if you run npm with the watch command it will read the scss file and create the scss file. If we go here and do a refresh, maybe a shift refresh, the boilerplate scss is gone. So we can start with styling our own theme. As I said we are recreating the pretty busy but you can make your theme however you want it. It's always good for a theme or the most important part or what gives you guidelines how the theme should like is the logo. So we just add the logo as I showed you before. Here select your logo and press save. We have now an idea of what colors we'll be using and we will start by adding those variables. To say bootstrap has really a lot of variables and I can stress it enough you can change almost every aspect in your theme just by changing variables. In the beginning there are the color variables, base variables and here you can see the important part where you will be filling in your color values then. So we will be adding some colors. It's important that we add those colors before we do the import on basuleta or bootstrap because the way scss works is that you have to find it before your imports that the imported files can work with. So if I save the watcher compiles the files again and we should see some color changes already. So to make this really a kitten theme we will be changing more variables. One besides the specific variables we have overall variables that we can use to change our theme. These are variables or properties like rounded, shaded, shadows and others. In case of basuleta we already have a little bit of rounded corners but for this theme we want to make them more rounded. For completeness I add the property enable rounded but set the border radius for almost everything to one REM. So if I wait for the stars to compile if I press refresh you see most of the borders now get more rounded than before. So let's change some more variables. We are changing the background of the body and background of the breadcrumbs. So these again are variables from bootstrap that I add here. I'm reusing my defined color from above. Press save and it got even more pink. Most of the stuff you will be doing in CSS but some things like basic structure of your theme is in the index HTML and for some parts it's easier to just add classes here. This is the index HTML that will be that is our the base for our theme. What we want to achieve is we want to make the breadcrumbs the navigation the breadcrumbs not going to the full width. So we add this container class. This also comes from bootstrap and it's part of the grid system of bootstrap. I'll add this to the main navigation wrapper and to the above content. Just save it. You will see that now we have the navigation as well aligned to the content here. Put a link into the bootstrap grid system. I want to have more information. Once I know this don't change too much in index HTML. If you start very important are the IDs. The rules.xml is the file that will put your content from your clone site and replace it in the theme file here. Fonds are an important part in your site or in your theme. Selected two fonts from Google Fonts. We just added here. So import the fonts. Still above the other imports. And I will change two other bootstrap variables to make the things active or visible. You can change the heading font and we also changed the overall base font to a different font. If you want to use the fonts or want to see the fonts within the time, tiny MC editor as well, you should go for the input version. Alternatively, you can put it in the HTML as well. To prevent some kind of font loading side effects, it's maybe a good idea to add these pre-connect text. No matter if you import the font itself in the HTML as well or in the CSS. So to make these fonts that we put in here a little bit more obvious or visible, we add some more. We color the font. Just another set of variables. This will be the size of the body text and this will be the heading color. The heading color is now also the primary color that goes all through the theme. There are extra variables to change the link color separately. But for now we just stay with the primary color. And we also have variables for all kinds of font sizes. Make the h1 and h2 a little bit bigger. So h1 and h2. This body text is now also the same. So this is just a short view on what you can do with variables. But you can change almost every aspect of the look is implanted with this. So we change the primary color and the fonts around the corners. This is also true for the edit forms. You see here also the input fields around it now. We have the fonts in here. Also styled. And puts it to change very detailed aspects of your theme based on with variables. So to complete or prove our theme, the border of the navigation is still a bit pointy. So here I add some styles. Especially or specifically for those input forms of the life search for example. So I search for the selector at the class. And now it's important after the imports you add your own styles. And here you also have access to all the bootstrap mixings and utilities. Here you can just use them as you like. Okay, shift reload helped. Now we have connecting input box to the button for the search. Let's head over to the navigation and breadcrumbs. So we set the border radius for the navbar and in the plume for the breadcrumbs we also change the border radius down here. So if you go here, now have the navigation nicely rounded. There's one more thing that I want to change. Now the header was done in with flex and we are able to move the contents inside that flex box. So I like the ID portal header, they align items to the end of the box. And if I do a refresh, it's nicely aligned on the underside with the logo. So that's basically it for a simple theme based on Barcelona. I haven't covered CSS variables here very much because it's still developing, but you can change CSS variables within your theme as well. Since the browser interprets this directly, it's a good idea to put it just to the end, similar as the sudo web customization would be. Just edit here and it should work. So that's basically it from the Barcelona perspective. Maybe as an explanation, we created with the new Barcelona theme an MPM package, which we'll include. And you just can extend from that. We have two files just for explanation. We have an import of Barcelona at the SDSS that includes all of bootstrap plus the Barcelona data or our clone specific components like the navigation or other small elements that we use in clone. If you don't use any of the components from clone, but just want a clean start and working UI, you can also include base SDSS. There we only have the styles included to make the edit forms and other stuff work. You can start on top of that. Stefan, did I miss something or are there any questions about the contents? I didn't see any questions in the chat. Feel free to ask. Or I would say we make a short video as a closing word. I can't stress enough to get familiar with all the bootstrap variables because it makes your theme in life so easy. And I really enjoyed working with it or doing themes based on that. Maybe a question for me, for Maritz. Do you use this approach the most for your clients? Yes. Yes, because I like to have everything within the same look and feel. I don't make a difference between logged in or normal users and editing users because it just works and it's so much easier. What I do in 95% of my theme work is just basing my theme or also the site on the functionality of Plon that I already have. Also, if you use those variables, all the views, templates of add-ons will be almost automatically styled if they are updated to the Plon 6 and bootstrap 5 markup. One part to make this happen is in Plon 6 we really refactored or updated all our Plon core markup to bootstrap compatible markup. You do change your variables and everything within your Plon site will follow those variables. So almost no extra styling for whatever you want to do. Just use the bootstrap components and it will make your life quite easy. Any other questions? Okay, then I say thank you. Let's do a break till 45. Then Stefan will start showing you how to theme Plon from scratch without using any of the Barcelona specific codes. Thanks for listening. you you you you you Change your view. I can't hear you. How is it now? It seems to auto adjust doesn't work with zoom and my microphone but now it's okay. I can hear you. I can hear you. I can hear you. I can hear you. I can hear you. I can hear you. Okay. Let's start with the next part. Quick check, Mike, you can hear me. Everything fine. Screen is visible. Yeah, sounds good. Okay, thanks. So let's proceed with the next step or next chapter in the seeming training. We are going to create a seam from scratch, which is similar to the approach Peter showed already. What small details are a little bit different and gives you more or less better or worse options, however you see it afterwards. The seam is built from scratch, which means there is no dependency to Barcelona or Barcelona styling. The only thing you need is bootstrap. You can create a custom seam or custom UI or if you think in micro applications, stuff like that, you have a clean starting point and you have full control over whatever you want to do. So if you have any questions or questions, please leave them in the comments section. I can help you. Most of the stuff I do on the console is done with clone CLI. Ask Mike after my session. He is a good person to ask questions about clone CLI and what you can do or what you not can do with this thing. So I will proceed requirements. I guess who tries to follow the training also already made some steps that are required for my part as well. So I will skip that. And we just start creating a new seam here. So in the documentation, you are getting asked some questions for now I will proceed with defaults they're okay. The amount of questions is different based on if you have configuration files on your system that answers for example who's the author or your email address or stuff. It's taken from a configuration file. And if you miss a question, check the configuration file. So, the file structure has been generated. As we see in the console output. Then we are adding a seam to the actual package. Quick explanation we created a package that is called clone seem Tokyo. It is at this point basically an add on for blown without any functionality. There is no content type in there are no, almost no templates in it's just an empty package, and we start adding a seam with clones CLI. Okay, you have to step in the package. So here, some commands of clones you lie for create our for creating packages some stuff adds templates or views or stuff to an existing package for that you have to be inside the package already. That was the mistake I made here. So it adds seem basic seem basic is a bob template. So basically, a bunch of folders files configuration files that are put into our actual package. And we replace some variables here, for example, the same name. You can go with your own values. And then the client, clones CLI asks me to create a repository or add my stuff to the local git repository. This is more, more a security step. If you make a mistake or if you want to revert stuff to go to few lines before this gives you the option later so it's always good to do that and answer with yes at that point. So we have to see what you created. So we have to seem in. Next is to create or run the build out. The whole build process is covered by clones CLI built. So if you see the green output on my screen. We have documented that in the seeming documentation as well. It shows what actual command is fired on the console. Basically, virtual environment is created the requirements with our install with PIP install the build out is put straight and an actual build out runs in the background here. And build out we know we have now some minutes to talk a little bit. I like the, I like to do the steps manually at some point for the training clones CLI is a good start. Whatever you prefer. If you run into an error here if there are dependency issues, you will get output on the console and the process stops. If everything is works as expected. We finish with a line that says everything is done. For me, the generated stuff or as far there is no error everything is created and we can start now. So I recommend using code editor development kits somehow. In my example I will use Visual Studio code it's up to source you can download it and use it. Just we are already inside the package so you can just open it by codes dot on a Linux based system like Mac. It opens the code editor. We are inside clone seem Tokyo package seem has been added already. So I'm going to get some errors here. I just ignore them. The editor recognizes virtual environments, Python environment stuff. I'm not an expert answering that I ignore it or reload the window when the editor wants to reload that helps a little bit. I guess I have to look up here quickly. I guess the next step is to start up the instance and I recommend doing this inside the code editor. So I open a terminal new terminal. It gives me basically a shell in here where you can do the same like you do in a separate window, but you keep everything together in one editor window and you keep track of different running processes and commands. The instance for around starts up the application server. This is my fire war here I have to allow connections for that. And as mentioned in documentation. It shows you the application survey serving on local host port 8080. This is configured in your build out configuration. There is documentation about build out how to change that there is good. There is documentation if you want to run that on a production system. This is not covered by that talk, or by that training. I opened it up in my Chrome. When you have a new window. I quickly show it with Firefox here. I did this already before that's why I can show it. Once you go to the application server you will be asked for username and password poses admin admin, and it's documented in the build out configuration so there are your login credentials. Normally will get this ask after the first step out. So I am already here. And a look to the, if I look to the management interface it looks like that. This is a good sign everything is built everything is up and running everything works as expected. So I am going to go to the front part to go to the root. This screen you have already seen from Peter. We do a little thing a little bit different now we open the advanced tab. Then you have a little bit more information. You can directly install add ons with your package directly. You can also install a clone sim Tokyo and click on create clone site. This installs a clone site and installs the selected package in one go. Okay, so we have a little bit here to see. Let's check out the documentation quickly. Okay. Um, what we see here is blown up and running we see the edit bar, and we see it's not completely broken, because the phone markup fits to bootstrap. That's why we get some basic styling including colors and stuff. I will explain that a little bit later. The first step we do with the new setup is we add some columns clone always work with some columns. We don't have any CSS or any styling active so we have to do that. We have to cover that part manually. This is an example for overrides. We override the main template I explain a little bit more about overrides later on but let's start with that to have it in place and we can touch it later on. Okay. So what brings you apart folder. This is where all the original or the core stuff is located. That's, that's the packages. Basically you download it in a very special orientation. And here inside the the omelette folder, you see all the original packages. So when you copy over a template from clone up content types where the content type templates list in or blown up layout where lots of units are located in. I recommend not downloaded from somewhere you can use the master branch from from GitHub, but I recommend always copy the template from here from your local setup, because this is the exact version of running at the moment when you develop the stuff. The main template is under products. CMF clone browser templates. Here we have two templates we have to copy over it's the Ajax main template and also the main template, which we have here. So I copy the files, scroll down to my package and copy to the source folder I documented in the documentation. Create a new folder for that. And paste it in there. They're new. The VS code sees it's a new file when you do the diff you or the source control tab you see that are two files I've created. That's the only difference that is not committed at that point of time. Okay, in the documentation. This is covered by this lines here I added in the full past so you can see where I copied it to what location I actually copied it. And then we have to register the template. That's done in the configure part in the configure CCML paste it in. Save the file, go over it. And the last thing we have to copy is the main template PY. Again, scroll up to the original part. And then we have to copy it to the inside template it's directly in the browser folder there is our main template PY. In plan for it was just a template that has been changed later. I'm not an expert but here are some macro definitions that addressing an issue with recursion errors. If you know to fix this let us know. Okay, we have added a bunch of files, especially we touched configuration CCML. I always recommend to restart the instance. There are tools like blown reloads for Python files or as well configurations but in at the time where we have SSDs in our systems restarting a soap instance doesn't take that much time. So if you restart the instance and it comes up as expected, it's always a good point you didn't break anything. So, at this point, I go to the start page I reload and I see nothing changed. I expected, I can I'm not sure if it works or if it doesn't work. The only thing I can do is just add some characters it's HTML so we don't break anything if I add something here and if I reload. And then we can do the same thing to result in the template so this means the template registration we have in our package now just works as expected. Good. Let's have a look at the documentation. I cover one chapter with conflicts that says, if you register a template that is already there under its name. You have it with the main template. I'm talking about this part here. If you do this and name main template is already taken in blown, you get a conflict error. You can avoid this by adding a seam layer. The same layer is registered or is created in your team. And that's the or when you activate when you install the package, this layer is activated as well. So, uninstall the blown package, the layer has no effect. That's an option to have different packages touching more or less the same templates or the same parts of blown without conflicting so that's the hint here, explained under conflicts in the documentation. Okay. We have not built our team on top of possible and it has so we have to take care about some stuff. One stuff is columns. The main template doesn't care about columns by default. We have to do it with CSS with a mix in in the in the in the buzzer. I can show you that later. That's also an option of adding columns. I like the idea of having full control over the main template so I just copy the file, paste it in to the main template. I can do a.pt save it and give us some price if I reload now we see we have some columns. I have a container here and next to the container is an invisible column at the moment. I have to add some content quickly to make that I have to add some content. What I changed is basically I added a container to give it or to limit its width. It's not no more full width at that moment I added a row and inside the row I added columns. I can also over view that when I close the article which is the main content in Plone and when I close the two sites that contain our portlets. This is an option to give one column to the content and give two columns for or give one column for both columns. You can also remove statically remove the portlets stuff with that and have just one content column which is the idea of Plone Seam Tokyo. The Plone Seam that is available for Plone 5.2 basically removes columns in the main template and just serves one column. I will explain a little bit more about that later or feel free to ask questions. If you have questions on that on the seam just paste it or ask it in the chat I will walk through them after I'm finished. Okay. So as I promised there are columns you cannot see them. Let's add a little bit content now. Add new folder. I will just create a demo folder. I give it some Ipsum text here. Let's add a page. Also some copy and paste to see a little bit afterwards. I do this only to have minimalistic styling afterwards. Add some headlines as well. As you can see the editing stuff at this point works. It's fully available. We have the tiny MC. We have some basic styling tabs are also working. We have what we call back end and Plone. Basically the editing pages are fully functional even without any Barcelona theme. So we have just bootstrap. We have Plone and it works together somehow. But somehow it works because all the editing stuff is also bootstrap markup and that's why we can use it here. As promised there is a navigation portlet on the right end here and our content we created. We also see the notifications here. Just a short example and not part of the documentation. But if you want to touch it or if you want to give that some styling. So we are talking in the main template. We are talking about that notification stuff here. We have global status message. Give it a container and we should have this tool. We have it not here because it's gone when I reload the issue. I have an I reload the window when I save it again now it's also uses the container with that is defined in bootstrap. Okay, let's proceed to the next. I do this at that point because I need some columns some organization in my team before we go further. So let's go to the build process. Okay, short. Let's show the grids as CSS before this is part of possible meta. I added a link to the documentation. This is basically some magic that relies on classes inside the body tag classes that indicate if there is one column two or three columns and based on that class information. It adds some mix ins to give our seem one column one column plus one aside or plus two aside. This is basically the magic. You can literally copy that as CSS into your team and use it. Yeah, that gives gives you exactly the same functionality that possible and it deserves if you need columns in your seat. Good. So let's go to the build process. I have to say what we see here is a pre compiled as CSS file that is shipped with the Bob template stuff. It's not generated by us at the moment. That's what we do now. I switch. Quick look at the code editor quickly. I recommend here in this tab we show the Python process run in its shell with the Python process if you click that little plus you get a new console. And here we do know the theme compiling stuff. Step into your seem folder, which is here. So now I'm in the same folder. I do not explain that in detail because Peter mentioned it. We are now in the level of the same folder where our package chasing this. Here are the scripts in that you can run with npm. So I do npm install to add all dependencies. Magically there will be added a node modules folder in the same folder. You will see shortly here. It's great out because it ignore ignores that folder so it's not added to your code repository. Here are all the dependencies including bootstrap including bootstrap icons and stuff like that. Okay, looks good. Everything runs through no errors. That's what we like. So now we have npm run build as the command to actually compile the CSS from our SAS files. I documented all the paths in the seeming documentation. Basically we have this scss folder. Here we have a base scss with some small paddings and stuff. We prepared also something for the port of footer. It's basically empty except some paddings and margins we added here. This base is included in our seem scss and what you see here is everything we need to compile our seem based on bootstrap. We have some variables. Peter explained something about that before. They are just bootstrap variables with some colors. I added tone colors here and the secondary which is just a gray somewhere. Then I import bootstrap. Bootstrap is located, as I said, in the node modules folder. I want to explain that. This works because we have a little parameter here that says our load pass is node modules. So if you have a configuration and rename node modules or your node stuff is somewhere outside your seem folder, you have to take care about that pass. We have this parameter here. That's why node modules is the default and inside node modules we have all the stuff we need to compile it. So if you have two options, you can include everything of bootstrap or you can include only what you need. There are some required parts, functions, variables and mix ends and a lot of optional things. I recommend to include everything except you have a project that is very big and it's 0.1 kilobyte is important at the CSS size at the end, but for now I would go import everything. Last active line. So for example, if you have the Peter mentioned a node package, if you add this to your dependencies or if you install it manually, you can run this import to activate it quickly to better readability. You can run this import to actually activate the grid. So I look at it again. The only thing I have is base. Again base is inside the CSS or base CSS file. Don't bother with the underscore. I copied that style from bootstrap. It works. It imports base and it compiles everything together. The result is inside the CSS folder, a seam CSS and a mini five version of that. How do they go into our team. We have manifest configuration and inside the manifest. They are referenced. So basically here you can change that to something else. They are generated by our team admin that CSS is static when we create the bottom plate, you can change that to something else you have to take care about if you change name of CSS files and stuff. Another thing I want to mention here. A rules is empty. This is basically the point where you add a Diaz rules XML. When you don't have a rules XML Diaz is turned off. So we serve our templates as they are in the packages. The main template or is served without any modification. The page templates, the structure. As you see in the scene, there is no index HTML. So we serve exactly what we get from the application server. We serve exactly what we get from clone packages. Okay. Last thing I recommend is start them. Watcher. We have a new tab down there. So no watch always is taking care about when you change something. I do not do a lot of examples here because Peter did this already. You can ask questions if you want to see something special I can give my best and show it to you. Okay. Happy seeming. That's the point where the fun starts. I have to say, if you get to that point now, the whatever comes here is, in my opinion, much more fun than it was in the last years, because everything is on the file system you have everything set up with npm you have tools and stuff running that really helps you seeming in an explicit way and there is no, you don't have to start an instance and scripts and stuff and hope everything works together somehow. In the most cases we work with that since like one and a half year now, it just worked. Let's show that. I shouldn't say it just worked before I just tried something. So if the fall watcher is starting again here, we don't have to restart clone at that point because our CSS is changed and you can show it directly. So if I go to the team and do a reload. Nothing happens, do a shift reload to directly get the new file. And you see this is a little bit darker now and here we have our fancy green. And what we do with our team is takes effect now. Yeah, here is also the example. I can show some examples about enough bar and stuff when we have a little bit time later. Next thing I want to show is logo. The template is shipped with some some templates. They are just prepared. If you ask questions why is that that empty over there normally that this is the navigation or let's say navigation, the story of blown on top of that there is normally the logo and all the, all the search stuff. This are overrides, I explained what overrides are in a few minutes. The footer is just empty. That's or this is the footer the header is just empty that's why there is nothing. The sections view lead is what we see here as mitigation, and I want to extend the navbar brand. And show what what is that. What's the navbar I have to do with the docs. I always say your documentation now is the bootstrap documentation. Check it out. I guess I mentioned it somewhere in the, in the trading docs. But here you have components and a lot of boilerplate template you can literally copy and paste. And what I added to clone or to this example as not bar is basically a copy of one of the examples we have here. I have to. Yeah, I search it again it's a combination of search some navigation including not bright basically that it's cleaned up and of course dynamically navigation links in clone. So, if you have an example here and you want to try out something you can do it. I also have a document and an example of how to add a logo navbar brand and just put an image inside and give it a size. So that's what we do here. I copy that code and paste it in here. What code is always nice for matter to code. Remove that save that. This template is already in overrides. You don't have to restart the instance at that point it takes effect. It will give an error because there is no file there. So, the navbar is gone and we have clone, which is the alt tag text. I need an SVG now. I literally borrow it from here. Save it to our development. I'm going to add a folder. It appears here now. Folder with green and we have to hear only thing I have to take care is the file name should be the same, obviously. Maybe I extend pop templates and add a logo from clone in one or two variants to show that we start this step. But actually, now we have to clone logo in so it works. I did comment now I changed also that line. It's just a link. So the logo acts as link to the homepage. And just one note on the search thing it's just a search. It's nothing special. It's just a form that points to search and it has a name searchable text that's what you need to give you a search. And then we have a program which is pretty sure that it comes into my lower middle text number. So we find our demo page and so the search works at well navigation is dynamic. We don't have to drop down navigation that you know from clone default. You can add one level of drop downs with bootstrap for the for the bus of a native team. More complex navigation because more level of of drop downs are supported there. Okay. We added a logo. Next is content type templates. I think this looks pretty clean but there is still stuff maybe I don't want to have or I want to change somehow. I have this byline here and I don't know exactly where this template is from. Maybe you want to touch it so I clean up my editor a little bit. For the next step. And check was the documentation size. Yeah. Let's talk about overrides. As I mentioned already, we have that overrides folder. The overrides folder is registered in our configure file. You have it here. It's the technology or the package for the stuff that works or that is necessary to get this work is Jboard C3C Jboard. It's a clear directory called overrides as you see on the left pane and also our same layer so that's everything you need. Whenever you put a file inside that overrides folder that has a special name it overrides a template that exists in the clone application server in the clone ecosystem somewhere. The first started name is the actual pass so the sections view let is blown up layout. This is the package name there is a folder called view let and the template is named sections. We now want to change the template for the default content type document in my demo folder I added a document when I edit you see that in the headline, edit page or page is the content type name to be clear. I'm going to write that template now. After a while you will learn where this stuff lives in. I explained already in our parts folder we have omelette and in omelette there are hundreds of packages. If you're not familiar with that ask in the chat ask questions dig around a little bit. You can always do a search in there. And I will not recommend the search I search on the console most of the time because it's much faster than using an SDK. That's the only thing I don't know how to search in visual studio maybe there are guys that explained that a little bit better how to come to a to an actual template. So over I have to look. It's in omelette there is blown content types. This is the package where some of the default content types of blown are from. We have our well known browser folder inside browser there is a template sub folder. And here we have some listings, summary listing tabular listing you may already know. And there is also our document. So that's the file I want to have quick look into it pretty much nothing except a text block in there. I copied that file. The small thing closes everything so if you're lost just click it and you start from the root. I love that button. Once in Tokyo browsers overrides, and I paste it in there. So what I have to fix now is the past to the origin of this template. I'll just add a name. Again, add some exit save it. And if I reload, of course, nothing happens. If you add something to that overrides you have to restart your instance. So if you look at through the windows here I use hotkeys on my keyboard I Google for the key I love them. Just stop the instance. I do clear for the window to see what happens from from a new window or from without any stuff that was already there for if you have an error in the template or if there is something broken you will see it so an instance restart is always a good idea. And if I check this in browser now I see somewhere three access that's my indicator it works so now I can modify that template somehow. I don't step too much into details here. All right. I use the example I made in the documentation. This is basically the easiest or the most basic example of page template. We have the heading we have the lead paragraph the description mostly and we have our text block. There are different ways of adding text to to something. That's not how you should do it. It's one way of doing it with some code that takes care of links relative to something. The important thing I need to explain here is we fill slot main. So normally you fill lower slots that gives us the option to insert stuff between title description. There is a buff title below title stuff that's all available in the main template. So, I will show that quickly. We have that actually in our main template but I'm in this point or this example I don't want to use it. So, here are the defined slots and if we use the main slot, we override everything that is inside the article stuff. For example, we override the above content title. If you have you that's registered to that provider. Of course, you need that provider in your template. So, it starts getting complicated here. For now I want to keep the example simple. And if I save that I restarted the instance. And now if I reload, you see the byline is gone because the provider is missing. But you have now full control of everything. And you have also control. Nothing pops up here because it is it is registered in somewhere below. This is an approach of start making a template that everybody understands. And if you need a provider in there, you literally can copy it. So, from the main template if I need that below content title providers thingy I guess that is it, you can add it to your actual document template. This should give us. Again, so little bit more obvious what happens in your template when you have that different layers in one page template. Okay, we'll move it again. Okay. That's about page templates. So, if you need an override. The other option than doing an override is you can register a new template. Basically, we set example for the main template we registered a new template, we gave it the same name that's why we have overwritten an existing template. And if we gave that the name like name temp or main template to we have a new template. It doesn't work for the main template that way but for content type stuff you could do it that way. I'm not stepping into that we have or Mike is talking about that later when he when he shows you the seeming based on the ISO. There is an example you can add entire views with blown CLI. You can register them registration takes place in the configs ECML. And if you want to configure it for a specific content type, the for attribute is important for you. So there you can like folders have two or three for different options of listing content. You can also add a second the third option for example for a document or for a news item that is selectable when you add the option or it's not selectable. You can use it when you know how to apply the view on that. So this is when you register a new template as an option to an or as an alternative to an override of templates. Okay. Next part is not that interesting. I, we had the same example from Peter so I move on here a little bit more quickly. So for example, of course, you don't want to ship funds directly from Google, Google, you probably want to download it added to your team and ship it from there. I can show you an example of how to do this. I, it's not part of the training. That's what I have to say. But let's see how we can extend our scene. So I added a funds as CSS. I inside the funds I just do the import. You can use this also to make more smaller as CSS files for your project for example different components or different content types if it if it grows. You can split it up a little bit to see what happens in the different parts. We need just the import to get the funds in. In the in the scene. I have to import now our funds as CSS. That's everything I need to do here. And before I save that's the stuff I have to copy over from the documentation. Maybe I show you how to do it correctly. In the documentation it's mentioned. I know there is a variable for defining funds in bootstrap. I have no clue what the name is and I have absolutely no clue what I should write in there to not break everything so that's the point where I have to look it up. So in the documentation you have to scroll the bootstrap bootstrap stuff list inside obviously a bootstrap folder. There is a CSS folder. That's where the magic comes from. And you should scroll all the way down you have a variable s CSS. That's all the actual variables from bootstrap and here you can pick up what you need. And you have a command F I guess, and you have different stuff specified mono space and sans serif fonts. I copied that line. So that's a little bit long. The example is part of the documentation. And I will add it somewhere. Into our variables over there. And the change is actually add open sense. And we can keep that stuff or we can remove it doesn't matter because I don't have 20 funds in there. I keep system UI I keep. I don't know. Let's keep everything from now. And then we can remove the defaults tag. That's an error in the documentation I have to fix. And now if I save. I have to switch to the other tab and then you see it's compiled again. So the background watch is still working. It sees I changed my CMS CSS and we should have a little bit different from now when I reload the window. So to add a font and just use bootstrap variable. Of course you can also do something like h1 and then at styling for h1 and use apply that font only for some specific HTML tags. That's also possible. But in our example we use the bootstrap variable for that. And here is a example of how to do this a little bit better is maybe the Tokyo CM repository. There is fonts folder. Again the example with open sense we added the truth right forms directly to the package. And we have an SDSS file. It's surprise it's called underscore fonts. And here you see what you need to do to register that font that through type font files to be available in your package so it's not magic it's nothing you need to you have to be scared of. So you have to do for fonts and different styles from the same font based on what you want to have or what you want to serve. So this is an example. So today we create PloneSim.Tokyo in this training. PloneSim.Tokyo is made for Plone 5.2. And when we created that package the idea was the same. We want to use bootstrap and we want to get rid of columns we want to simplify basically seeming for but it was 5.2. So you see in the source code of PloneSim.Tokyo of the of the main or master branch. There are tons of overrides because we had to touch a lot of stuff in Plone 5.2 to get a clean view. I can show it quickly. So this is basically PloneSim.Tokyo with some demo content looks pretty much the same. In 5.2 there was tons of overrides necessary to get this archived. After the training I will update that seam for Plone 6 with bootstrap 5. And as you saw in the example, it's pretty close to what you see on the website. So basically I have to delete a lot of overrides because now we have the bootstrap markup in all templates, which makes it much more easier to have a clean seam for some like that. Okay. Yeah. In the documentation, font is just an example you can touch whatever you want to touch with variables or with CSS. You can tear in components from what you see here. So if you have some minutes maybe we can archive that quickly or show an example. My, my, what I love is cards because they're tiny, they're simple. This is bootstrap documentation. You copy this stuff. I added to my, to my page template, just as an example of how you can use bootstrap. I can also add a page template override when for example I want to place the description inside a card. I do just this. So we should get a bootstrap component that looks like that, but keeps our description in. So basically bootstrap to fix stuff. It's a little bit broken here. There is no image or if you have a news item, you can add a news item image there. And then you can add margin to the bottom that's also available in bootstrap just as class or helper classes and the three is margin bottom three, three units, units are declared in bootstrap and you can use them. And now the margin bottom is there and the image is gone. So this is just an example of how quick you can use components from the documentation. And there are tons of documentation. There are tons of components you can reuse, especially for your patterns you want to reuse or stuff you maybe need. I recommend the example section from the documentation. There is for example stuff like sidebar. We are going to use that in a project as well. The code is pretty simple to get that and it just works out of the box. That's the good thing. So have a look at the bootstrap documentation to have really fun on that. Okay, last step. I have here my edit bar. People that know me also know that I really don't love that bar. So I'm going to replace them. There are definitely options. I show the way how to do this now. In our setup py, you have an option to add a dependency. That's what it requires. And the second thing is in our configuration. This is an example how you do it programmatically. Of course you can add the package to the build out run build out and then you have it and you can install it manually. If you do it that way, you have it installed automatically when you install the package. So, I, because I touched the setup py, I have to rerun build out now. This should take care of the requirements of that package and it should fetch the package and add it to the project and activate it in the project and make it available for us. Let's see what happens when we run the build out. Not so much output output on the console but some output on my on my example here and there is an error now. So, I built out tries to fetch that I can show what I basically wanted to show. That example, we made a replacement for the sidebar for toolbar which is called sidebar. If you log in. You can modify navigation and editing features of clone. There is one template so if you need to touch it if you need to modify it you don't have to bother with the complexity of the edit bar. There is only one viewlet or one one page template that you can also easily override to get something like that, which is not stick next to your team. So, if you go with custom UI or if you want to create a website layout, a modern website layout that is based on one column. This is an option for you. I have no idea why my build out is failing here at the moment, but maybe sometimes you just have to read error messages. And I guess the quote is missing here. I guess that isn't. Let's give it one more minute if it's not working I will skip that. And. Yeah, proceed. I see nothing in the chat I also see nothing in the slack. So I guess no questions so far. I think there are informations about the trainer somewhere around the training page. Feel free to ping us or me if you have questions or if you need to know something. I will push the code I created here inside my package to a branch of the closing Tokyo package so what you see in the documentation is available as code later in the closing Tokyo, I will create a branch that is called something like the training 2021 and there is the actual code I created today. So I will push that after the training so you have it for reference if you want to try this at home or if you want to see exactly what I added here. So build out runs through everything fine I have to start up my instance again. And if I reload it says everything work it has to pick something because I didn't define a version. It has to pick a version 1.5 oh which is the newest and edited. I have to create a new flow site. Or as Peter mentioned before in the site setup at one section. There is not yet on I can activate. So as our own package I have to do this, or I install or I create a new flow site then it's installed automatically. So, I like that approach because it doesn't bother with my layout, it just an overlay. And I have to say this is code that's written for clone five to it works of course, but the styling is not bootstrap five, we will update our sidebar and use the sidebar component for that. I also have to mention, there is work in progress on the edit bar of clone. It's part of the year six branch and I guess it's going to be merged in a couple of days or weeks. If somebody knows more, let me know. That's from my side. Seeming from scratch. Please give us feedback. Let me know if I missed something or if I should cover something different in this part of the training. I would say we make a short break about four minutes and proceed in at, yeah, like in like four minutes with Mike. Thank you and have a nice conference. So as the colleagues earlier said, if you have questions, don't hesitate to ask them. We are there for that. For now you can ask them in the Slack channel and the training channel. If you have later questions, you will find us usually hanging around on Discord and the blown channels and a classic UI, for example, just ping us there. You can find me there and Mr. Tango and the colleagues are also there. I can share my screen already. Can you see my screen correctly? Yeah, it's not too small. If I should increase the fonts and things like that, just let me know. Okay, I wrote earlier in the chat that you should upgrade the Optum Blades Plone CLI. We said it's some last quick fixes in the Diazo routes we will use later. If you haven't done that, you can also fix that copy paste later. That should be an issue. The training docs should have already the correct rules and all in place. But it's a bit easier if you use the current Bop templates blown beta 6.0 beta 9, which has already the correct stuff. Let's see what we will discuss today. My use case, I want to show you is for me the classical case, a web designer comes with a layout. You can either just Photoshop or you already have a click dummy. Another situation could be you got the web design from some websites and we will use today this sim from start bootstrap. That's why I chose that. It's relatively simple from the content and all, and also relatively close to plain bootstrap. Other themes I tried out, usually use a lot of jQuery plugins and other stuff and this makes the whole thing. It's all possible, but it makes more work for us and we want to focus on what's important for now. What you will learn, you will prepare your development environment. We will use Plone CLI a lot. We will also create content for the sim in the Plone site. We will integrate the static layout we got from startbootswrap.com. We will shortly see how to compile the styles and how that works. My colleagues showed you already some of the stuff in use. We will also create some HTML snippets as tinyMC templates to achieve some of the content areas which are not so easy to achieve by just using tinyMC. It's a nice way to just use existing HTML snippet and add it to tinyMC and then use it. What we also do is we will create content types and views for the products area. Let's start. We will go on the terminal. Use Plone CLI create add-on to create an add-on called PloneSim Business Casual 21. There was a different sim with the same name from startbootswrap back then which we also used in training center. I think there are even sim products on Collective. This is the new one. It will ask you for a description. For now I leave it out. You can here give a hint for the Plone version. Right now this does not have big effects. It was earlier used more for differentiation between Plone 4 and 5. Right now between 5 and 6 there are not many differences for the Plone CLI related. The Python version stick to Python 3 and this code support we also want. Now it's generating our Plone package like you have seen before. Now we see the into the package. And the next step will be at Plone CLI add-seam. This is a different package so it's not a sim basoneta, neither a sim basic. Funnily enough this is one of the more basic sims also because we will not have much in it because most of our layout and resources we will use are coming with the sim we will download soon. So we will call the sim the same as the original name. So we will just put business casual 21. Now we have the sim. Let's fill it with the actual sim from start bootstrap. If you follow the link from the training you will go here. You can download here but you can also click the preview button which also has the download up there. You can also see how the sim looks we want to achieve. So you have different sites with different sections. Here you have products listed and here you have the store which is basically the open hours and again the about section. So if you download this you will have a zip file. And if you take this and extract that or you could actually go right from the zip file. So this is the actual content we want. This is just the name folder and this is the stuff we care about. So if we select that and extract and go I created a new folder so we go in our and our sim package right down to the sim folder we have now. And here there's already some stuff in it. We don't care much about that. So we extract that in that folder. If it asks you to overwrite files just say yes. And now let's open VS code from this year. Yes we trust. So let's open the sim folder and inspect what we have here. So this HTML is now the index HTML from the same. And we also have other pages like the about and products. We will not use this, but we will mainly based on the on the index HTML. So let's have a look what's next. So the structure you can, you can look at this is basically what you have after you filled in the same you downloaded. So the clone CLI gives us a easy command to build our complete development setup. As you can see it also shows you exactly what commands are running. So it's creating a virtual environment Python running build out bootstrap to create the build out scripts and then it runs been built out. So you can run all these commands from any place anywhere inside your package folder so it doesn't have to be the root folder. I will figure out where it is. So you can run the build command later or so from a sub folder and also the other commands. So that's basically what the CLI provides us. So while this is running. Let's look. The next step would be using plune CLI serve to to start. You can also just do the bin instance FG, which is basically what plune CLI serve does. But again plune CLI serve works anywhere inside the folder structure. So if we go already in the folder structure to our sim folder where we do most of the work. We still can use plune CLI serve. It also shows us that we can open the website on this URL. We don't need that I already have it open here. So let me reload. We get the welcome page. For now it's in German, but will change soon. admin admin. So let me switch this to English. So you could also use the advanced. The advanced tab earlier and right away activate the same or other add ons. But we will do it the classical way, which means we just go on the add ons. We find our same here we will install it. Now we see it's installed. Right now here this still looks like like basal neta. This will also not change. If we go on the seeming control panel. You see now we have a seam here which is active that's our seam and we have the basal neta here. This control panel is never seen so even if we have some serious issues in the in the seam and the other rules or whatever this will always look like this so that you can activate or dictate the activate your seam and and fix the problem. Let me open this in a new tab so that we can have a look at the homepage, which now already looks like what we want. This is rather static now so for now I can go on edits. That's fine. This is all the added views are coming from from default clone. So this is basically what you have in basal neta except that the banner and the logo is cut out of this area. But everything else the styles here in the edit form in the manage portlets or in the control panels. This all looks like default clone. The reason why we do that is, normally you don't care how the how the back end how this control panels are styled. You don't want to rearrange the real and and bring with your style all this and restyle that. There are options to do that but normally it's not important and also said, it has the advantage that when you have like manuals and documentation, which use default clone style there. Yeah, they have a better use for more people and everything looks like everybody everybody knows it. The only difference is the same part. So we are locked in so this is this is no difference to being locked out, except, let me show you in a isolated container where we not locked in. So the only difference is the toolbars not there. So, okay, how are we going from here to many tabs open. So this we went through. For now, because this is all is static. I would suggest we disabled the same. That's why I left this open here. But other than that, you can always go on site setup and go there. So to deactivate that the best is to just activate basonita again, which means now when I do the reload here I have to default clone again. Now, to really achieve what what we have here, we want to create the products, the many, many new items. So let's create the the free we have the home we have anyway, and let's create just one more so that so that we can later see the difference. So when we replace this with with actually with the dynamic content coming from clones, otherwise we wouldn't see the difference is that the seems still static or is it is it something we created in clone. So, let's just close this. So folder about and the next will be products. And store and our extra content. So let's get rid of the other stuff of the default content blown ads. We don't need news and events here and we can even delete users folder. So let's just delete it. Now our menu looks already like it should just to make sure when you put more stuff under the, the more on menu blown by default has these drop down menu but our seem doesn't provide that so to not have the menu breaking we will force it to only have. Only have one one item. Also, you can see here but this is a bit different than blown default this is already coming from our from our seem so there are some configurations applied already. So when you create the seem with with clones, you know I there are some settings already in the profiles you can adjust. And for me, this makes the most sense. So in the menu I only want to see collection folder and link. And then I want to see types like file image. I never want to see in in the menu, or even news items for example, if you have an folder with hundreds of news items, and you have a left side navigation with the portlet. And it just looks odd, and it doesn't make sense to show them. You can always create a folder, a folder will be good, good start for menu point and then put the page in it and set it as default. This is what we are doing now. So we're going in the about page. And get inspired here so this is the title. This is that the rest we will do later so first just the title and description. And then we will launch it. So when we go on the folder about, we can set this now as a default page. So that when we go on about this, the page is already shown by default. So we will create a collection, because we want to list the products here. It's just called products. The rest we will do later so just save it. Publish it and go on products and also set the collection as a default. Now on store we create the last page for now. So, set it as default page in that folder. Let's publish this. So this is the basic content structure for now. The next step will be creating HTML snippets in tiny MC or for tiny MC. The way I did that you can, if you want to go fast, you just copy it out here. But this is basically the about page or this is the section about. So if you go on the page here and you go on the about and you inspect that in the browser, you will see that you have the section element here. This is what we want. This is what we want to include because it contains all the content and also the classes which are needed for the scene to work. So you could just go here, copy outer HTML and then go in your editor and create the file there. But the whole thing will be wrapped by this. So it's just for tiny MC. You need this div tag here and one below. This is what I did with all the templates you see here. And then we create this at the file. So this is the section about. So we go with the editor to our scene to the folders, tiny MC templates. You see here we have some of the examples that Stefan showed earlier. These are the example hero hero left and pricing from the bootstrap examples page. So you can use this also. They are there already. But we will not use them for now. So section about HTML. Copy and save. So the next one. Yeah, this note we will take care soon because some of them have pictures included. And let's see if I go a bit like this. So normally when you copy the stuff from the layout directly, this is the original path. But for to work later so that's inside clone. So inside our our scene, it finds these pictures. We have to add this and this is basically plus plus seem plus plus. And then the idea of the same recreate if you give a different seem name. This will be different. Yeah, so this unique to your to your team. Yeah, I think I did it in both sections already so that you have this. I think here there was also something. Yeah, so it's it's taken care of. If you copy it from here. You have. Where was it here. And this is the section intro. safe. And the next one is the section promise. And I think this is the last one. So, which is this section opening hours. So, our templates on place. What we need to do next is to tell tiny MC where to find these templates. By default, we have this registration already so let's go on the on the editor. We have here the profiles folder so this is outside of the same folder. And inside profiles defaults. We have configuration options. You will find things like the same name and some other metadata. And inside the registry folder, you can have different files. The names doesn't matter. Because this is basically sometimes you see just registry XML but you can also have just registry folder and then have smaller files which are just taken care of some stuff so here we see display types in for the navigation. This is the setting to change the default settings there. And we will focus now on the tiny MC here. So, if you look here, let me close the sidebar. You can see we have here already a list of templates. This is a record which will register the templates fields in the config registry and this is the way how tiny MC will find our templates. So, make sure that this is valid Jason so it's not a Python dictionary so the last comma should not be there. To make it simple. Let's just take the complete value tag here and replace it. Save. So now we have our name, our names for the for the different sections. And this is the path here. Still again, this is unique to your scene so this will be different and different seems. This is the folder tiny MC templates inside your scene folder, and then the file name according to the name you chose when you created that just for you to for the info. So, this part is right now necessary to, to register or to activate the tiny MC template plugin. This will most likely not be necessary in the future or at least it will change a bit. So normally you can activate activate the template in the future by just checking a checkbox in the tiny MC control panel like you can do with a lot of other plugins. It will be no longer an external plugin and you don't have to put in this way. But right now, we are still running with the first alpha of clone six. We still have the old resource registry running here. This will change in the next couple of weeks, hopefully, when we already and merged the year six effort. So here are some examples how you can change the HTML filter in in clone. This will change the back end filtering and also configure tiny MC to allow certain attributes or tags. One tag I already included here is the button, which by default is not allowed. Because in some of the bootstrap templates we have buttons so we want the buttons in there. So far so good. Let's have a look at the HTML. We can best do this. So we have the same we have the index HTML which we will use as our layout. So this is how it comes from from the designer. We don't need to change a lot. For production, I would also replace the, the CDNs here by not having the CDNs, at least in Europe, that's what you want for data privacy reasons, not to use external CDNs or use different ones. There are advantages and disadvantages having that but you can also make this locally available and change the links. For now, we will just keep it here. This, what we have here, we will remove. Because we will include the style sheets in a different way I will show you soon. That's one thing. The other thing is in the, in the footer of the content on the lower part. Here we have some JavaScripts. This one has only these two. The first, which is the bootstrap JavaScript, the, the bootstrap bundle containing the JavaScript from, from bootstrap. This is shipped by default in clone six. And so we don't need to include this anyway this is like jQuery and bootstrap. JS they are globally available so you don't have to think about that. You, you will have to bootstrap five version there. So, not our concern. This is the JavaScript we will still include so that stays like it is. Then one thing. clone has this thing called global status messages. This is when you, when you go somewhere and you edit for example, and you save. You have these info boxes here. And these portal messages, we also want to show when the same is active. So to have that, we take this small, small HTML snippet I didn't copy it just yet. So we copy that. And we insert this here. So this is one change we want to make. And another change is we want to wrap this. So we have two sections here. For example, we see here we have two sections. And this is the whole main content area. Many bootstrap seems kind of bad in in how the markup is structured from from the semantic point of view, which needs needs to be fixed. So we give it the main point and this, this actually gets filled with our content area from blown. So, this is this. And here we see it wrapped. So you can also copy paste, in case you did some typos or anything. So now how do we get get the styles to also to also make adjustments later. We will, we will go to the folder where they have the styles, you can always put this differently, give different folder names and so on. And for now, we call the seam SCSS. So we are using thus or SCSS. And in the same you see, we just pulling in the existing styles from the from the layout. Save it. So basically, what we need for now to to get in. So the next step will be having a look at the package Jason. So, if you go inside the same folder, you will find the package Jason like you will find also and two other packages, the colleagues created before. Pretty much looking the same or at least similar. So, here you have some commands you can, you can use. Most important is build and watch for now. So, let's do it right in the VS code here. Going inside. Same folder. Here we have to package Jason. We run npm install to make sure that all the dependencies and def dependencies are installed. This will not take too long because our list is not long. The difference here is def dependencies are used for building for bundling resources. And dependencies are dependencies you actually have from your team. So, as Peter told you before, you can use for example the basoneta styles, even if in your team if you want, or even if you go that way, or this way. So, you can do an npm install basoneta base theme. I don't remember the correct name but you can find it in his documentation. And then you have it in your node modules folder and you can use it and this you would put in dependencies. Or in def dependencies depends a bit how you use it. If you're just using CSS or or thus files, usually it's enough to put them in def dependencies because you will compile them later to CSS. And you only want to ship the CSS to the SSS is not necessary later in the browser. Okay. This was running. And then let's run npm build. We have a problem. I think the problem is other fuller sites. Yeah, I was not, not done. Sorry. We need to adjust the paths by default. We have the same folder name, like in the basoneta example, but in this scene, it's not called styles the folder. It's called CSS. So they are basically for places where we have to adjust this. Style. That's it. So let's try again. Still not. This time. I'll see CSS. No such. Ha. Okay. CSS and here. And then I was. So basically have to make sure that the scripts are using the correct for the name. Another way would be just rename this CSS folder to styles that should work too. So this time it worked. Now we have the, the styles coming from the scene, but they are actually get pulled in our seam SSS and the same SSS does compile to these files. And then we have the CMS as a map for, for the browser to show you the real CSS and the minified version of that. And this we will use in blown. This we did. One thing worth mention is we have a vendor folder. And inside the vendor folder, we will have all the resources we installed with npm or john. So our everything which is not deaf dependency, but the dependency. As I mentioned earlier, will be copied in here. So that later we can when we ship our seem to to blown or delivered. We can actually delete the node modules or not the, the one level higher. If you look here inside the seam you have these node modules, but there's a lot of stuff in it because this is all the build tooling stuff but inside the vendor you will have no modules and when you have defined dependencies here they will be in there and you can use them from your seem like you can use the local JavaScript we already have in the template. So let's move on. The next interesting thing would be to have a look at the manifest. Manifest is the central configuration fire of the scene. Here you have the visible seem name you will find in the, in the user interface and the description. You can even have a preview image here, which right now is not used here but that's what you can do. This also points to the rules file by default it's the rules XML and I wouldn't change that. Here's the prefix also which is the prefix you've seen in a lot of places this is unique to your seem and it's auto-generated generated by my plan. Here you have production and tiny mc content CSS earlier in clone five for example you also had to like a development CSS but this was because you could you could point it to a less file and the less file would later on in the browser also be compiled and you can adjust it there. This is not provided anymore so to revamp you can only write CSS not as CSS or less. So we only need the registration here for the final CSS you want to ship. And this is also because of the reason why we earlier removed the CSS inclusion in the HTML file because this is the place where we pointed to the CSS also for tiny mc so that tiny mc can include it in the iframe and looks basically the same. So you can have additional parameters like defining the portal URL as a as a variable and this you can then also use in inside by other words later but for now this is not not that important. So you can see here for God, yeah, we have to adjust here also the folder name. But this, as I said depends on if you change the folder name or how you want to structure. You can also separate the CSS and compiled files and put it in a dist subfolder as you like. This can also change in the future the default but at the end it's easy to change and to adjust to your means. So, when we have done this we can actually run npm run watch keep switching the wrong windows. So, we are in the same folder so let's run npm run watch, which will run a watcher. To the to the CSS. So, we also need to start the clone site. Let's use plunes here I serve for that doesn't matter where you're in the package. Clones that I figured out there's something wrong. I think I have somewhere something running, which I shouldn't. Let me see. And the terminal here. Okay, I can leave it here is okay. I don't need to have it in the editor. You can do it both ways. So, okay, so we have on one side, clone running and one terminal and here inside the code we have a second terminal where we have our npm watch running. So that means we now can go to our clone again. Now we want to verify. Now we want to go to the integration side to the the other side. That's why you're here right. So, let's go to the integration side. Let's activate our seem. So, we want to go on the front page. So, we want to replace now some of the things in the layout so if we, if we go on home for example. We have our sections and then our example we have it wrapped with the main, but also we have the navigation here. And this has different stuff and somewhere in here that was the navbar. Now, enough, enough, enough, enough, enough here it's because it's on mobile image was too small. Now something like that. Anyway, first thing first. It's a good thing to know what clone actually renders. One thing to find out is to open clone, not like we, we are doing it here, like local host 8080 blown, but using a different domain for example 127 001 will open the same page. The difference is, there's no day as activated. The reason is, when you go on the seeming control panel. In the advanced settings, you will see unseen host names and by default, we have this already here you can have also online, the same. If you want to treat later and you want to have some domain names where you can have it unseen so that you can inspect that. For now, locally this works fine, the default. And the nice thing is, let me do this, the same style. So if I go and inspect, let's move this to the bottom. We can actually inspect what clone has on the clone side so on and clone we will find. Now something like not enough. Back then it was these these classes didn't exist on phone six they are closer to what you also have on the on the same side. So when we use the editor. Let's make this big for now. We are opening the HTML. And we find the place where we want to replace the static part with the dynamic content from blown. And this is what we want this is this URL here with the nafba naf. So it's basically nafba naf on the same side and nafba naf on the content side. And to achieve that, we are opening the rules file. Let's maybe close all this sections here. Tiny MC we don't need packages and for now also not so. Okay. Just to give a if you short summary the first part. This is like including the older back end like when you go on edit in your seam or when you go on the control panel everything which looks default basonata. This comes directly from basonata. With this include rule so just leave it there. If you want, or basically the what this does is you have this kind of condition in basonata back end they have they have a similar thing but it's like inverse like this one. So it says, if not content has these classes, then it's the back end. And by default we are using this so when we have these classes in the body tech blown inject stem. This means we are not on edits, we are not on a control panel or anything else like that. So this is the way how you can switch from default blown to what you want to style. Here we point to the the same file. In this case we chose the index HTML but you could also have different files you could also use something like this is the default but use a different one under a condition so you can add if condition here when the path is like this or when somebody classes are like that use a different layout for the start. You can have different ones, but we keep it simple for now. No seem basically means when there's no visual portal VEPA on the content side, which from blown always is there. Then just don't seem anything that is a is a fallback so that when you have something which shouldn't be seen by the ISO. It usually don't have this like a eject calls and things like that. So, um, most of the stuff you can just leave it there. But what we actually want to do now is we want to take care of the navigation. So, we have you covered. Let's activate this rule. This rule what it does is it uses the replace functionality from the ISO. Because of this prefix CSS dot, we are using CSS selectors. If you remove that this part should be an expath selector. They are much more verbose, but they also much more powerful so sometimes when you want to do something tricky expath is the way to go. But in general, I would recommend sticking with the CSS classes. They get generated or converted into expath in the background anyway but you don't want to read them and you make more mistakes if you use expath. So, if you don't have to don't use them. I'm not sure why this is still using this. I thought I had this change but maybe I also have to not updated Bob templates somehow even though I updated it. This will change so normally you don't have to adjust this because when you want to see my boots up seem it's it's a bit easier to to have it like this. You can either say I want the elements and here we have this. This says is the same side but it says seem minus children. Which means not the element in the template itself. So, not this element we want to replace but we want to replace the children. So that's what the first condition says and the second set. Give me this and then inside give me the L E's so we will replace the children of the enough bar enough in the layout with the elements coming from blown. We could leave this like that or we could. We move this and also use the children here, which is the same. So if we do this, we save this. Let's go back to our browser. Now we see we have our more button here and our menu is working so we see here the URL is changing so we're actually going right now the content still has our index HTML content so that's not so fun. Let's fix that. We will go to the area where we have the content. Let's activate that. What does this do. It finds the content and also here is wrong. This time we want to use content core content core is the main content area, but without the title and without the description and without the lead image for example so it's really the base, the base text area which you added with the tiny MC. For this team we that's what we want. In most other cases you want to use the just the content not content core, which gives you a bit more of the content area. And on the same side we have our main tech which we use to wrap the sections and we will just replace everything inside the main template with the content core area coming from blown. Let's do a reload. And now we see we have here now the welcome blown. Here we don't see much for now because we are not taking over the, the headlines. So, let's continue. We did this we are the global message I was. Skipping. Let's add this quickly. We have. All that message so that's the global status message. This should work like this. To test this we will just go and edit. Save. There's our message. Concore we did. The last thing we want to get over is the footer. This is also already here so we just need to activate that. You see there are also other rules prepared for example for the, the portlets from blown to get them and put them somewhere in the same but this seem in particular doesn't use side panels so we don't need to activate them. Okay, the footer should also be there. Right now it would look like this. Now it looks a bit more fancy. One reason for that is we don't have our styles in a way but the portlets itself, the footer portlets we can configure directly in blown what we want to do is the default ones, which are basically if you want to stick with the copyright. You can also add more actions to that menu so you have some menu buttons down then you want to keep that but this seem doesn't have that so let's just turn it off. We need something we want to have a static portlet and we go here. Go there, take the content we want this is static for now but that's not important now you can create a template for that to have the 21 next year 2022 but that's not really important. So one thing I forgot sorry. Food is our static food. I forgot to click this. We want to omit the frame of the portlet. The portlet itself in this case doesn't have like a headline or anything else this can be useful to have but for now, this is not what we want. So now this looks already much better. This looks a bit odd here. So let's fix that. I think that's starting so we will. Just take this as a starting point. In the editor and go to our team. Just remove this and replace this. So what we added here now is the bootstrap SSS bootstrap good. So, we have to make sure that we have boots web in our depth dependencies bootstrap is there so in the node modules. Full that's there. You don't have to give the full path to the new modules you just have to take the path inside the new modules the rest. The compiler will will find itself. The reason why that is is you have these loads. Load path node modules for the sus compiling is given here and that's why this can be a bit cleaner here. So then we have our basic grid definitions this is just what we also have in in Boston eta and breakpoints. We can ignore that for now. So now to fix the content. This looks a bit. Um, a bit complicated, but it basically says when we have something like the content core that's what we grab. So, if we look at the content core. Um, inside the content core here we have parent field text so that's one of the things. And for now we don't have anything in there but we will see later when we use the tiny MC templates to have our already made snippets. This rule should not apply but whenever there's not a snippet like this with tiny MC in so default clone content and some other options. Then we want to have like this basic background and we just use. We define like like a with and the outside centered and then this background fade is I copied directly from the from the seam. The rounded and the P nine is all bootstrap stuff, and I used extend so that we don't have to. Yeah, we can have the same effect like they are using in the same without the markup having to provide this. This is copy this and put it in. So, our watcher have seen this and we should now see the change. We don't. Oh, wasn't ready yet. Okay, so this is much better readable and a good default. Let's continue. The next thing would be if we if you look at closely at this. It doesn't look exactly like our menu. So, this is not up a case. And it's also here there's much more padding. The reason why this is there are some some extra classes here. If we inspect that we have these. These extra classes on these enough item elements so pigs LG for for example, and also the uppercase somewhere I don't see it yet but it's there. So, what we can do. We could just fix that with plain CSS. I'm not afraid of that. I still like CSS. But to have a quick fix we just, we just do with X, extend. We just do the same as our markup would already provide this kind of classes so just take this. And for our enough items we do this extend and wait until this is finished here. There are some post processing post CSS and stuff that's taking a bit. So, so now our menu looks much better. Then, let's give the portal status message. Also a bit more space. Because we're short on time I will not show you the before but you saw that the status message was right under the menu. Now it has a bit space here which looks much nicer. So also the footer on the footer should have a bit margin to the top. So, we also put this. So this part we already did right away with the portlets. This is just here for the documentation. So, the footer itself. This is a bug in the current alpha here. So this is normally it should only show the page but for some reason it shows all the other content also. So the default page setting doesn't really work here. But here we see there's not much of a gap. So now the gap here is a bit bigger and if you go on other pages they also look better. So let's continue. We have our tiny mce templates. So first of all, let's go on this stop clone and start clone again just to make sure that we have our configuration and clone there. And one thing we want to do now is we want to uninstall and install our add-on again. We could also use an upgrade step but for now we don't have an upgrade step so we uninstall. And we install again. This is necessary whenever you change something in the profiles. So the registry settings for the tiny mce we want to load. And this way now when I go on tiny mce, not on seeming. Tiny mce. In the future it will just be here the template to activate but for now it's here. And here's the list of the templates and we see our sections. So the tiny mce should see the sections. So let's try if that's working already. If it's not working the first time after the reinstall we might need to. It's working. So here we have a preview of what we are injecting. It doesn't look exactly like the template we want. I just forgot something. Tiny mce is sometimes a bit strange when you have big blocks so do some spaces before and then insert. Otherwise you cannot really get under the block you inserted. So now I can just click under and I insert the second block we want on the homepage which is the promise. Let's save that. And now we have our dynamic content. Let's also move this so that we have the full screen size. So now we have our content that looks kind of nice. To prove that this is actually dynamic I can go here and can say. Drink fresh blown coffee. So you can customize that. And as you see it's here. Fresh blown coffee worth drinking. So you can adjust this also the link here for basic stuff this works if you want more complex blocks. You rather go with mosaic and create specific mosaic tiles. I'm planning to add this functionality also to the ploncel I so that you can just create this kind of blocks or any other kind of snippets easily in a couple of minutes for mosaic and use this in classic UI. The other way is of course, you can use what you have more built in options there and also plugins. But that's not the topic here. So, yeah inserting the templates. We were just showing this for this site now. Let me quickly do this also for the other sites. Doesn't take long. So edit. Here we just need one template so I don't need to make empty space. The product was our list so the store was the other one where we have static content. In this store we have more than one. So this store was opening hours. And under the opening hours. Again, the section about. So we have the opening hours we have the section about. We still have something here I don't know what this is. Yeah, we have the DMT spaces so we have to remove them. Otherwise, they get styled by our extra star sheets. Because these are actually not empty spaces but ptex empty ones. And on the homepage we should do the same. Okay, so we have now dynamic contents created in blown. The only thing which is still missing is the product page. For that, we will go back to let's do it in the previous code now a second terminal. So we have to blown CLI. We are in our. In our products and we create a new content type. We should be for. Commit our changes. So. So now. Is happy and doesn't complain. It's always good to. Yeah, make a comment before you start working with the plunge. Because plunge itself also does the commit and it's better if it's clean. You can always force it to just shut up but it's better to do it this way. This way you can. Things you did with the plunge later easily because I will create different stuff like tests and registrations and. To revert this manually. This can be a lot of work. So we create a product or a product content type not products. And then we have a description I skip for now we will go with the Python not the XML version. We can leave this container but we just need items so we don't need like folder rich things. We keep the globally at edible. Because we want to add this in the store folder. And then we do the. This is still yes and the next is we disabled that activate default behaviors. This other categorization and related items and all this fields you know from standard blown, but for here in this case we don't want them so we say first, keep it, keep it deactivated. We will activate to. Of them. And the next steps. So here you have to. All the stuff again. So. Now let's. See what we have. So we have a content folder now. So I creates for everything you create like views or behaviors and view let's usually different folders and you will find them. So we have a product here this XML file is when you want to create through the web your your schema fields and then download it here. And then we delete it because we said we want to go with the Python version. And here in this Python version. This is just example stuff. I will just delete it. And if you have in style clone snippets. Visual code extension you can just write clone. And the first thing we want to create is an image field. So. And we call this photo. The rest we can just keep like it is. The only can also adjust is the lead stuff. We see here right away there's there's some issues so as the. The node says we have to make sure that name file is activated. And also we have to make sure that the message factory this underlying is loaded. Let's clean this up a bit put the activated stuff here. And do an I sort. This looks much better we can also do format content which does black in this case. It's a great thing and also the testing relies on on black later so black will auto format your Python code. So that it looks nice and has the same rules for everybody. So this would be one field we need another field, which would be again blown and then we want the rich text field. We just call it text. We could leave it like that. So. This is what we did. We put this field. Text field. We forgot to fix the import. So here again we have to make sure that the rich text field is actually imported. Because this is. Coming. They are already here you just have to uncomment them most of them. Not not all of them but they are there so that it's easier for you to to use this. Okay that's it. We clean it up here you see how it looks when you're done. The next thing would be to adjust the FTI settings. So under profiles default types, you will find the products XML. This is the product name you have some settings for the product itself also like this global allow these settings are all made here but what is interesting for us is this so we want to activate the basic and name from title behavior basic basically gives gives us a title and the description field and name from title uses the title field to automatically creates the short name from the title when we fill it in the title. So this is very useful that's why we use this the rest, some of them also belong to the, by standard activate so if you don't say no to the question to the default behaviors you will have some more activate, but for now, this should be should be it. Um, we will just restart blown and uninstall install our add on. So, it's just do that. Add ons. Uninstall install. Now we go to our products. And don't need this anymore. Let's see we have a product here. We can create a product. The name of the product. Let's see fresh coffee is the name of the product. So, we have a product of drinking. Then we have these pictures here they are in the in the assets so you can just choose them but you could of course use different pictures from from some websites whatever you want this is the dynamic part so whatever you want you can put in this is the text. We will. Now we're talking. I was on the wrong page. So, coffee and tea and this is the description. And the picture we have already in and this is the text so. We are going. So, let's do the next one. Product. So, this is the title. This is our description. This is our text. And that's the product to save it. So we see the picture what we don't see here and the text is also here. What we don't see here is the title in the description that's because we are only pulling by default, the content core and the title and description are not part of that but we don't need that because we will use it in a different way. We will see that shortly. So the last products. It's this that product photo and the last text. The text can be formatted, but this is not needed for now. So if we go on products now let's edit our collection. Now we want to say, we want to show a specific type and the type is products. So here we have to preview already. We want to sort them by order and folder so that we when we change the order and the products folder. They will show in a different order. I think that's all that we need here. Now we see we have already the products in the right order. The only thing now is they don't look right. So to fix that, we have to do the last step now. Now a road trip. We are creating a view. So we're using clones CLI. Stop this for now. Also do this in the other way. Again, get that. It's commit. So now we want to pipe in class. We want to call this products view. We could choose your default view. This makes sense when you create a view for content type, for example, because this gives you some nice shortcuts to show the content. But in our case, we will replace it anyway so we can stick with the default. We also keep the defaults. So we want the template and we also don't change the name of the view and the template. But you could back to the editor. So now we have views folder. Views folder has a template, has a Python class and has our configure.tml where we registered the view. One thing we have to change here is we have to replace the folder with the collection. So if you want to create a view for a folder, nothing to change here. But you can put any other marker interface here so that it's under this name. It's only available for this kind of project. If you want to view on any context, you just put the Nusters and a file card. And that should do the trick too. So the next thing will be we are creating a file in the types folder for the collection XML. So we go on files, default types. So far there's only the products. Now we create a collection XML and we fill in this. This is a much shorter FTI because we only want to adjust one part. If you look here, for example, in the products, we also will find the behaviors and view methods. This is like view. And in the collection, the collection already has some. That's why we put the purge faults here. But we want to add another view method so that our view is in the list of selectable views for our collection. That's what this does. So this is the template for our view. Let's copy it like this just to mention. This is basically filling the content core area. It's iterating over the results of the collection. Then item is our item in each iteration. So we will fill in the description here. We fill in the title here. We create the image path here. We use the large scale from the image. And the same we do here again. The reason why we do that is when you look at the blocks, they are alternating. So it's like this combination and then you have even an odd variance. That's why we make it simple and we just do this. So let's just replace the whole thing with what we had there. So we have one thing here. Here's a condition. We use the repeat item. So when this is not called item but something else, this would be different here. But the last thing is to say, okay, when this item is an even or odd item, then do this. So in this case, if it's like the first, then this will get. And if it's the second, then it's even then this part only happens. So we only in in insects at the time one section, but it's either one or the other. So one last check here is the Python thing we have to adjust. That's the last thing. So if you look at the Python codes by default, it's our browser view. So we will now load the collection view because we want to basically use the collection view. We have a different template. The rest stays the same. So this stays the same. We need to delete this because we don't use it anymore. And that's basically it. So we want to start again. Since we changed stuff in the profiles folder again, what we need to do is uninstall install or add on. Or when you have public stuff, then you should write an upgrade step. Clones here I can you also help with that. So on the products, we should now have a products view here. So now that we switched that we have our content and it looks exactly like we want. So I would say not bad for the first taste. That brings us to the end of the official part. I hope my screen sharing or you can just join and ask questions. Also to Stefan, I think Stefan is still around. I hope. I'm not sure. Thank you. Questions from your side so far. Don't be so silent. Sorry for the rush. But it was a lot of questions to go through, but yeah, we have a bit of time left. If you have any, any questions to clarify, we can we can go over that. Yeah. One thing I can add is right now we have in the scene in the rules, a rule which will basically disable require Joe S. You might ask why disabled require jazz, because in the current alpha it's still there. So the resource registry is still working like in blown five, which would break things like the index HTML so you cannot just have like simple JavaScript included. You would get this undefined define nasty errors from require jazz. This rule will basically inject. No, no, this one, this one will inject like this at the very end of the of the header. And this will disable require jazz so that when in later code like in the body of of the HTML file, you use plain simple JavaScript. It's independent from from require jazz so there's no problem there. But this will go. So in the final release of clone six, this will not be needed anymore because there's no require jazz so nobody can shoot you in the food. But for now it's there. Still there. We will probably make some small adjustments after the trainings but it's mainly rockable like this. If you have any questions you can, as I said, reach us on discord anytime on community plone.org. Ask questions. Also all the Bob templates in for the plone CLI uses. They're not set in stone. So if you have wishes or ideas to make things better we have some some people already contributing to that. So this is going step by step. Yeah, you will find the code of this seem also already in the collective so if you search there for a plone seem business casual 21, you will find. It's the same steps I did here so you can inspect that in case you have any trouble with with your current setup and couldn't follow with the pace we we made. Then you can just inspect that and see what's what's wrong or just use this as an as an inspiration. It seems I usually get more complex but this really depends on on your needs. Okay, if nobody of you has any further questions then I would just.
 So let's say we start. Hello everyone, I'm Peter, I'm in Zurich. Welcome to the  Plon6 classic UI theming. We will be doing three slots each of them about  one hour, there's a short break in between and I hope you could prepare yourself or  your computer and that it works. If you have any questions write in the  Slack channel or just speak up here on Zoom. So I will cover one small part  quickly and there's three web customizations. In Plon you always  could do some web customization by changing the logo and stuff like that.  And with Plon6 some things change. So I start up my site quickly.  So one thing which you probably know is how to change the logo. I won't go into  much detail here. It's a simple form. You add the logo and it will be displayed  automatically. There is one other pull request to also change the fabric on but  that wasn't merged yet. So the big new thing is we have now with bootstrap 5  the possibility of custom CSS variables. We introduced with Plon 5.2 version the  possibility to add your custom style sheets again. Maybe remember that from  Plon 4. Otherwise I'll quickly show you how that works. So you go to your Plon  site. Set up for the theming control panel. There we have already a theming  control but doesn't matter now. You go to advanced settings and within custom  styles you have a simple field where you can add your CSS that you want to add  to your site without theming anything in your Plon site. Just enter your styles  here and you already see that heading one has a different color. If you go back to  Plon site you see document first heading got that color. But with bootstrap 5 we  got the CSS variables. So this makes possible to change a lot of stuff visually  in your theme or in your site without creating a theme without compiling any  styles. So just to give you an idea or an overview first this is the link to the  series CSS variables that are available now. These are defined by bootstrap and  we are using them as well. So we can pick one of these variables and just add it  to your CSS. Instead of header just color red I define my variables here in the  this root definition. I have here my green and my orange and I use the my green  for the heading and also the orange for the body text color. What I'm also  using here is a standard bootstrap variable. If I go to save here you see  that I changed the background, changed the heading color to the variable name and  also the standard text is now my orange. So yeah to mention there's just some  variables. I think these variables will grow with the development of  bootstrap and with what we do in Barcelona in the future. So let's head  over to how to create a theme based on Barcelona. So we are going to create a  theme on the file system. We'll be using the recommended way to make your life  easier. That's based on Plan CLI. Now for the Plan 6 we created three new  templates. One is for creating a theme based on Barcelona which we'll be doing  now and the other two are covered by Stefan and Mike later. We quickly create  a new Python package. You can enter whatever you want here. Just going with  the defaults. So we have now my Aaron.name package. Just enter this package and  then what we do here is we create our clone theme. So within the you change  into the package and add a theme. You can also do a Plan CLI minus L and you see  all the templates that you have available. Let's add a theme based on  Barcelona. We will recreate the clone theme  Gritzy Busy that I created for this showcase or training. So I just give it  a name and it's added here. To run clone the first time or to get all the  dependencies it will Plan CLI build. This will run build out for you. Get all the  stuff you need to run a Plan CLI. Meanwhile I can show you what was created  here. Within your package the namespace there was a theme folder created. We now  have the basic files here that we need for our theme. To start my site I just  run Plan CLI serve and if I go address I have a plain clone instance running but  no site yet. So we just add Plan CLI. So this is your Plan CLI running. Then we go  to the site setup to our Plan Control Panel. Go to the add-ons and here you  see this add-on here. If I install it I already have some kind of coloring here.  These are just default styles. So to get started with your Plan CLI I also already  skip this part. You leave the Plan CLI running. Just create a new terminal.  I go into the package and then into the theme volume. So here in the package we  have the package.json file that defines all the dependencies what you need to  make your own theme. From here you just run an npm install and npm will get the  stuff dependencies what you need to work on your theme. What we also included  here is a watch script. This will compile your scss file which is in the  styles folder to the actual theme sss that you will be using later.  So if you run npm with the watch command  it will read the scss file and create the scss file. If we go here and do a  refresh, maybe a shift refresh, the boilerplate scss is gone. So we can start  with styling our own theme. As I said we are recreating the pretty busy but you  can make your theme however you want it. It's always good for a theme or the  most important part or what gives you guidelines how the theme should like is  the logo. So we just add the logo as I showed you before.  Here select your logo and press save. We have now an idea of what colors we'll be  using and we will start by adding those variables. To say bootstrap has really a  lot of variables and I can stress it enough you can change almost every  aspect in your theme just by changing variables. In the beginning there are the  color variables, base variables and here you can see the important part where you  will be filling in your color values then.  So we will be adding some colors. It's important that we add those colors before  we do the import on basuleta or bootstrap because the way scss works is  that you have to find it before your imports that the imported files can work  with. So if I save the watcher compiles the files again and we should see some  color changes already. So to make this really a kitten theme we will be changing  more variables. One besides the specific variables we have overall variables  that we can use to change our theme. These are variables or properties like  rounded, shaded, shadows and others. In case of basuleta we already have a little  bit of rounded corners but for this theme we want to make them more rounded.  For completeness I add the property enable rounded but set the border radius  for almost everything to one REM. So if I wait for the stars to compile if I press  refresh you see most of the borders now get more rounded than before. So let's  change some more variables. We are changing the background of the body and  background of the breadcrumbs. So these again are variables from bootstrap  that I add here. I'm reusing my defined color from above. Press save  and it got even more pink.  Most of the stuff you will be doing in CSS but some things like basic  structure of your theme is in the index HTML and for some parts it's easier to  just add classes here. This is the index HTML that will be that is our the base  for our theme. What we want to achieve is we want to make the breadcrumbs the  navigation the breadcrumbs not going to the full width. So we add this container  class. This also comes from bootstrap and it's part of the grid system of bootstrap.  I'll add this to the main navigation wrapper and to the above content.  Just save it. You will see that now we have the navigation as well aligned to the  content here. Put a link into the bootstrap grid system. I want to have more  information. Once I know this don't change too much in index HTML. If you start  very important are the IDs. The rules.xml is the file that will put your content  from your clone site and replace it in the theme file here. Fonds are an important  part in your site or in your theme. Selected two fonts from Google Fonts. We just  added here. So import the fonts. Still above the other imports. And I will change two  other bootstrap variables to make the things active or visible. You can change  the heading font and we also changed the overall base font to a different font. If  you want to use the fonts or want to see the fonts within the time, tiny MC editor as well,  you should go for the input version. Alternatively, you can put it in the HTML as well. To prevent  some kind of font loading side effects, it's maybe a good idea to add these pre-connect  text. No matter if you import the font itself in the HTML as well or in the CSS. So to make  these fonts that we put in here a little bit more obvious or visible, we add some more.  We color the font. Just another set of variables. This will be the size of the body text and  this will be the heading color. The heading color is now also the primary color that goes  all through the theme. There are extra variables to change the link color separately. But for  now we just stay with the primary color. And we also have variables for all kinds of font  sizes. Make the h1 and h2 a little bit bigger. So h1 and h2. This body text is now also  the same. So this is just a short view on what you can do with variables. But you can  change almost every aspect of the look is implanted with this. So we change the primary  color and the fonts around the corners. This is also true for the edit forms. You see here  also the input fields around it now. We have the fonts in here. Also styled. And puts it  to change very detailed aspects of your theme based on with variables. So to complete or  prove our theme, the border of the navigation is still a bit pointy. So here I add some  styles. Especially or specifically for those input forms of the life search for example.  So I search for the selector at the class. And now it's important after the imports you  add your own styles. And here you also have access to all the bootstrap mixings and utilities.  Here you can just use them as you like. Okay, shift reload helped. Now we have connecting  input box to the button for the search. Let's head over to the navigation and breadcrumbs.  So we set the border radius for the navbar and in the plume for the breadcrumbs we also  change the border radius down here. So if you go here, now have the navigation nicely  rounded. There's one more thing that I want to change. Now the header was done in with  flex and we are able to move the contents inside that flex box. So I like the ID portal header,  they align items to the end of the box. And if I do a refresh, it's nicely aligned on  the underside with the logo. So that's basically it for a simple theme based on Barcelona.  I haven't covered CSS variables here very much because it's still developing, but you can  change CSS variables within your theme as well. Since the browser interprets this directly,  it's a good idea to put it just to the end, similar as the sudo web customization would  be. Just edit here and it should work. So that's basically it from the Barcelona perspective.  Maybe as an explanation, we created with the new Barcelona theme an MPM package, which  we'll include. And you just can extend from that. We have two files just for explanation.  We have an import of Barcelona at the SDSS that includes all of bootstrap plus the Barcelona  data or our clone specific components like the navigation or other small elements that  we use in clone. If you don't use any of the components from  clone, but just want a clean start and working UI, you can also include base SDSS. There  we only have the styles included to make the edit forms and other stuff work. You can start  on top of that. Stefan, did I miss something or are there any questions about the contents?  I didn't see any questions in the chat. Feel free to ask. Or I would say we make a short  video as a closing word. I can't stress enough to get familiar with all the bootstrap variables  because it makes your theme in life so easy. And I really enjoyed working with it or doing  themes based on that.  Maybe a question for me, for Maritz. Do you use this approach the most for your clients?  Yes.  Yes, because I like to have everything within the same look and feel. I don't make a difference  between logged in or normal users and editing users because it just works and it's so much  easier. What I do in 95% of my theme work is just basing my theme or also the site on  the functionality of Plon that I already have. Also, if you use those variables, all the views,  templates of add-ons will be almost automatically styled if they are updated to the Plon 6  and bootstrap 5 markup. One part to make this happen is in Plon 6 we really refactored or  updated all our Plon core markup to bootstrap compatible markup. You do change your variables  and everything within your Plon site will follow those variables. So almost no extra  styling for whatever you want to do. Just use the bootstrap components and it will make  your life quite easy. Any other questions? Okay, then I say thank you. Let's do a break  till 45. Then Stefan will start showing you how to theme Plon from scratch without using  any of the Barcelona specific codes.  Thanks for listening.  you  you  you  you  you  Change your view.  I can't hear you.  How is it now?  It seems to auto adjust doesn't work with zoom and my microphone but now it's okay.  I can hear you.  I can hear you.  I can hear you.  I can hear you.  I can hear you.  I can hear you.  Okay. Let's start with the next part.  Quick check, Mike, you can hear me.  Everything fine.  Screen is visible.  Yeah, sounds good.  Okay, thanks.  So let's proceed with the next step or next chapter in the seeming training.  We are going to create a seam from scratch, which is similar to the approach Peter showed already.  What small details are a little bit different and gives you more or less better or worse options, however you see it afterwards.  The seam is built from scratch, which means there is no dependency to Barcelona or Barcelona styling.  The only thing you need is bootstrap.  You can create a custom seam or custom UI or if you think in micro applications, stuff like that, you have a clean starting point and you have full control over whatever you want to do.  So if you have any questions or questions, please leave them in the comments section.  I can help you. Most of the stuff I do on the console is done with clone CLI. Ask Mike after my session. He is a good person to ask questions about clone CLI and what you can do or what you not can do with this thing.  So I will proceed requirements. I guess who tries to follow the training also already made some steps that are required for my part as well. So I will skip that. And we just start creating a new seam here.  So in the documentation, you are getting asked some questions for now I will proceed with defaults they're okay.  The amount of questions is different based on if you have configuration files on your system that answers for example who's the author or your email address or stuff.  It's taken from a configuration file. And if you miss a question, check the configuration file.  So, the file structure has been generated.  As we see in the console output.  Then we are adding a seam to the actual package. Quick explanation we created a package that is called clone seem Tokyo. It is at this point basically an add on for blown without any functionality.  There is no content type in there are no, almost no templates in it's just an empty package, and we start adding a seam with clones CLI.  Okay, you have to step in the package.  So here, some commands of clones you lie for create our for creating packages some stuff adds templates or views or stuff to an existing package for that you have to be inside the package already.  That was the mistake I made here.  So it adds seem basic seem basic is a bob template.  So basically, a bunch of folders files configuration files that are put into our actual package. And we replace some variables here, for example, the same name.  You can go with your own values.  And then the client, clones CLI asks me to create a repository or add my stuff to the local git repository. This is more, more a security step. If you make a mistake or if you want to revert stuff to go to few lines before this gives you the option later so it's always good to do that and answer  with yes at that point.  So we have to see what you created. So we have to seem in. Next is to create or run the build out.  The whole build process is covered by clones CLI built.  So if you see the green output on my screen. We have documented that in the seeming documentation as well. It shows what actual command is fired on the console. Basically, virtual environment is created the requirements with our install with PIP install the build out is put straight and an actual  build out runs in the background here.  And build out we know we have now some minutes to talk a little bit.  I like the, I like to do the steps manually at some point for the training clones CLI is a good start.  Whatever you prefer. If you run into an error here if there are dependency issues, you will get output on the console and the process stops. If everything is works as expected. We finish with a line that says everything is done.  For me, the generated stuff or as far there is no error everything is created and we can start now.  So I recommend using code editor development kits somehow. In my example I will use Visual Studio code it's up to source you can download it and use it.  Just we are already inside the package so you can just open it by codes dot on a Linux based system like Mac. It opens the code editor. We are inside clone seem Tokyo package seem has been added already.  So I'm going to get some errors here. I just ignore them.  The editor recognizes virtual environments, Python environment stuff. I'm not an expert answering that I ignore it or reload the window when the editor wants to reload that helps a little bit.  I guess I have to look up here quickly. I guess the next step is to start up the instance and I recommend doing this inside the code editor. So I open a terminal new terminal.  It gives me basically a shell in here where you can do the same like you do in a separate window, but you keep everything together in one editor window and you keep track of different running processes and commands.  The instance for around starts up the application server. This is my fire war here I have to allow connections for that. And as mentioned in documentation. It shows you the application survey serving on local host port 8080.  This is configured in your build out configuration. There is documentation about build out how to change that there is good. There is documentation if you want to run that on a production system. This is not covered by that talk, or by that training.  I opened it up in my Chrome.  When you have a new window. I quickly show it with Firefox here. I did this already before that's why I can show it.  Once you go to the application server you will be asked for username and password poses admin admin, and it's documented in the build out configuration so there are your login credentials. Normally will get this ask after the first step out.  So I am already here. And a look to the, if I look to the management interface it looks like that. This is a good sign everything is built everything is up and running everything works as expected.  So I am going to go to the front part to go to the root. This screen you have already seen from Peter. We do a little thing a little bit different now we open the advanced tab. Then you have a little bit more information. You can directly install add ons with your package directly.  You can also install a clone sim Tokyo and click on create clone site. This installs a clone site and installs the selected package in one go.  Okay, so we have a little bit here to see. Let's check out the documentation quickly.  Okay. Um, what we see here is blown up and running we see the edit bar, and we see it's not completely broken, because the phone markup fits to bootstrap. That's why we get some basic styling including colors and stuff.  I will explain that a little bit later. The first step we do with the new setup is we add some columns clone always work with some columns. We don't have any CSS or any styling active so we have to do that. We have to cover that part manually.  This is an example for overrides.  We override the main template I explain a little bit more about overrides later on but let's start with that to have it in place and we can touch it later on.  Okay.  So what brings you apart folder. This is where all the original or the core stuff is located. That's, that's the packages. Basically you download it in a very special orientation. And here inside the the omelette folder, you see all the original packages.  So when you copy over a template from clone up content types where the content type templates list in or blown up layout where lots of units are located in. I recommend not downloaded from somewhere you can use the master branch from from GitHub, but I recommend always copy the template from here from your local setup, because this is the exact version of  running at the moment when you develop the stuff. The main template is under products.  CMF clone browser templates.  Here we have two templates we have to copy over it's the Ajax main template and also the main template, which we have here. So I copy the files, scroll down to my package and copy to the source folder I documented in the documentation.  Create a new folder for that.  And paste it in there. They're new.  The VS code sees it's a new file when you do the diff you or the source control tab you see that are two files I've created. That's the only difference that is not committed at that point of time.  Okay, in the documentation.  This is covered by this lines here I added in the full past so you can see where I copied it to what location I actually copied it.  And then we have to register the template.  That's done in the configure part in the configure CCML paste it in.  Save the file, go over it. And the last thing we have to copy is the main template PY. Again, scroll up to the original part.  And then we have to copy it to the inside template it's directly in the browser folder there is our main template PY.  In plan for it was just a template that has been changed later. I'm not an expert but here are some macro definitions that addressing an issue with recursion errors.  If you know to fix this let us know.  Okay, we have added a bunch of files, especially we touched configuration CCML. I always recommend to restart the instance.  There are tools like blown reloads for Python files or as well configurations but in at the time where we have SSDs in our systems restarting a soap instance doesn't take that much time.  So if you restart the instance and it comes up as expected, it's always a good point you didn't break anything. So, at this point, I go to the start page I reload and I see nothing changed.  I expected, I can I'm not sure if it works or if it doesn't work. The only thing I can do is just add some characters it's HTML so we don't break anything if I add something here and if I reload.  And then we can do the same thing to result in the template so this means the template registration we have in our package now just works as expected.  Good.  Let's have a look at the documentation. I cover one chapter with conflicts that says, if you register a template that is already there under its name.  You have it with the main template. I'm talking about this part here. If you do this and name main template is already taken in blown, you get a conflict error.  You can avoid this by adding a seam layer. The same layer is registered or is created in your team. And that's the or when you activate when you install the package, this layer is activated as well.  So, uninstall the blown package, the layer has no effect. That's an option to have different packages touching more or less the same templates or the same parts of blown without conflicting so that's the hint here, explained under conflicts in the documentation.  Okay.  We have not built our team on top of possible and it has so we have to take care about some stuff. One stuff is columns. The main template doesn't care about columns by default.  We have to do it with CSS with a mix in in the in the in the buzzer. I can show you that later. That's also an option of adding columns. I like the idea of having full control over the main template so I just copy the file, paste it in to the main  template. I can do a.pt save it and give us some price if I reload now we see we have some columns. I have a container here and next to the container is an invisible column at the moment. I have to add some content quickly to make that  I have to add some content. What I changed is basically I added a container to give it or to limit its width. It's not no more full width at that moment I added a row and inside the row I added columns.  I can also over view that when I close the article which is the main content in Plone and when I close the two sites that contain our portlets. This is an option to give one column to the content and give two columns for or give one column for both  columns. You can also remove statically remove the portlets stuff with that and have just one content column which is the idea of Plone Seam Tokyo. The Plone Seam that is available for Plone 5.2 basically removes columns in the main  template and just serves one column. I will explain a little bit more about that later or feel free to ask questions. If you have questions on that on the seam just paste it or ask it in the chat I will walk through them after I'm finished.  Okay. So as I promised there are columns you cannot see them. Let's add a little bit content now. Add new folder. I will just create a demo folder. I give it some Ipsum text here.  Let's add a page.  Also some copy and paste to see a little bit afterwards.  I do this only to have minimalistic styling afterwards. Add some headlines as well.  As you can see the editing stuff at this point works. It's fully available. We have the tiny MC. We have some basic styling tabs are also working.  We have what we call back end and Plone. Basically the editing pages are fully functional even without any Barcelona theme. So we have just bootstrap. We have Plone and it works together somehow. But somehow it works because all the editing stuff is also bootstrap markup and that's why we can use it here.  As promised there is a navigation portlet on the right end here and our content we created. We also see the notifications here. Just a short example and not part of the documentation. But if you want to touch it or if you want to give that some styling.  So we are talking in the main template. We are talking about that notification stuff here. We have global status message.  Give it a container and we should have this tool. We have it not here because it's gone when I reload the issue. I have an I reload the window when I save it again now it's also uses the container with that is defined in bootstrap.  Okay, let's proceed to the next.  I do this at that point because I need some columns some organization in my team before we go further.  So let's go to the build process. Okay, short. Let's show the grids as CSS before this is part of possible meta. I added a link to the documentation. This is basically some magic that relies on classes inside the body tag classes that indicate if there is one column two or three columns and based on that class information.  It adds some mix ins to give our seem one column one column plus one aside or plus two aside. This is basically the magic. You can literally copy that as CSS into your team and use it.  Yeah, that gives gives you exactly the same functionality that possible and it deserves if you need columns in your seat.  Good.  So let's go to the build process.  I have to say what we see here is a pre compiled as CSS file that is shipped with the Bob template stuff.  It's not generated by us at the moment. That's what we do now.  I switch.  Quick look at the code editor quickly.  I recommend here in this tab we show the Python process run in its shell with the Python process if you click that little plus you get a new console. And here we do know the theme compiling stuff.  Step into your seem folder, which is here.  So now I'm in the same folder.  I do not explain that in detail because Peter mentioned it. We are now in the level of the same folder where our package chasing this. Here are the scripts in that you can run with npm.  So I do npm install to add all dependencies.  Magically there will be added a node modules folder in the same folder. You will see shortly here.  It's great out because it ignore ignores that folder so it's not added to your code repository. Here are all the dependencies including bootstrap including bootstrap icons and stuff like that.  Okay, looks good. Everything runs through no errors. That's what we like.  So now we have  npm run build as the command to actually compile the CSS from our SAS files.  I documented all the paths in the seeming documentation. Basically we have this scss folder. Here we have a base scss with some  small paddings and stuff. We prepared also something for the port of footer. It's basically empty except some paddings and margins we added here.  This base is included in our seem scss and what you see here is everything we need to compile our seem based on bootstrap.  We have some variables. Peter explained something about that before. They are just bootstrap variables with some colors. I added tone colors here and the secondary which is just a gray somewhere.  Then I import bootstrap.  Bootstrap is located, as I said, in the node modules folder.  I want to explain that. This works because we have a little parameter here that says our load pass is node modules.  So if you have a configuration and rename node modules or your node stuff is somewhere outside your seem folder, you have to take care about that pass.  We have this parameter here. That's why node modules is the default and inside node modules we have all the stuff we need to compile it.  So if you have two options, you can include everything of bootstrap or you can include only what you need.  There are some required parts, functions, variables and mix ends and a lot of optional things.  I recommend to include everything except you have a project that is very big and it's 0.1 kilobyte is important at the CSS size at the end, but for now I would go import everything.  Last active line.  So for example, if you have the Peter mentioned a node package, if you add this to your dependencies or if you install it manually, you can run this import to activate it quickly to better readability.  You can run this import to actually activate the grid.  So I look at it again. The only thing I have is base. Again base is inside the CSS or base CSS file.  Don't bother with the underscore. I copied that style from bootstrap. It works. It imports base and it compiles everything together.  The result is inside the CSS folder, a seam CSS and a mini five version of that.  How do they go into our team. We have manifest configuration and inside the manifest. They are referenced. So basically here you can change that to something else.  They are generated by our team admin that CSS is static when we create the bottom plate, you can change that to something else you have to take care about if you change name of CSS files and stuff.  Another thing I want to mention here. A rules is empty. This is basically the point where you add a Diaz rules XML.  When you don't have a rules XML Diaz is turned off. So we serve our templates as they are in the packages. The main template or is served without any modification.  The page templates, the structure. As you see in the scene, there is no index HTML. So we serve exactly what we get from the application server. We serve exactly what we get from clone packages.  Okay.  Last thing I recommend is start them. Watcher.  We have a new tab down there. So no watch always is taking care about when you change something.  I do not do a lot of examples here because Peter did this already. You can ask questions if you want to see something special I can give my best and show it to you.  Okay.  Happy seeming. That's the point where the fun starts.  I have to say, if you get to that point now, the whatever comes here is, in my opinion, much more fun than it was in the last years, because everything is on the file system you have everything set up with npm you have tools and stuff running that really helps you seeming in  an explicit way and there is no, you don't have to start an instance and scripts and stuff and hope everything works together somehow.  In the most cases we work with that since like one and a half year now, it just worked.  Let's show that.  I shouldn't say it just worked before I just tried something.  So if the fall watcher is starting again here, we don't have to restart clone at that point because our CSS is changed and you can show it directly.  So if I go to the team and do a reload. Nothing happens, do a shift reload to directly get the new file. And you see this is a little bit darker now and here we have our fancy green.  And what we do with our team is takes effect now.  Yeah, here is also the example.  I can show some examples about enough bar and stuff when we have a little bit time later. Next thing I want to show is logo.  The template is shipped with some some templates. They are just prepared. If you ask questions why is that that empty over there normally that this is the navigation or let's say navigation, the story of blown on top of that there is normally  the logo and all the, all the search stuff. This are overrides, I explained what overrides are in a few minutes.  The footer is just empty. That's or this is the footer the header is just empty that's why there is nothing. The sections view lead is what we see here as mitigation, and I want to extend the navbar brand.  And show what what is that.  What's the navbar I  have to do with the docs. I always say your documentation now is the bootstrap documentation. Check it out. I guess I mentioned it somewhere in the, in the trading docs. But here you have components and a lot of boilerplate template you can literally copy and paste.  And what I added to clone or to this example as not bar is basically a copy of one of the examples we have here. I have to. Yeah, I search it again it's a combination of search some navigation including not bright basically that it's cleaned up and of course dynamically  navigation links in clone. So, if you have an example here and you want to try out something you can do it. I also have a document and an example of how to add a logo navbar brand and just put an image inside and give it a size.  So that's what we do here.  I copy that code and paste it in here.  What code is always nice for matter to code.  Remove that save that.  This template is already in overrides. You don't have to restart the instance at that point it takes effect. It will give an error because there is no file there. So, the navbar is gone and we have clone, which is the alt tag text.  I need an SVG now.  I literally borrow it from here.  Save it to our development.  I'm going to add a folder.  It appears here now.  Folder with green and we have to hear only thing I have to take care is the file name should be the same, obviously.  Maybe I extend pop templates and add a logo from clone in one or two variants to show that we start this step.  But actually, now we have to clone logo in so it works.  I did comment now I changed also that line. It's just a link. So the logo acts as link to the homepage. And just one note on the search thing it's just a search.  It's nothing special. It's just a form that points to search and it has a name searchable text that's what you need to give you a search.  And then we have a program which is pretty sure that it comes into my lower middle text number. So we find our demo page and so the search works at well navigation is dynamic.  We don't have to drop down navigation that you know from clone default. You can add one level of drop downs with bootstrap for the for the bus of a native team.  More complex navigation because more level of of drop downs are supported there.  Okay.  We added a logo.  Next is content type templates. I think this looks pretty clean but there is still stuff maybe I don't want to have or I want to change somehow. I have this byline here and I don't know exactly where this template is from.  Maybe you want to touch it so I clean up my editor a little bit.  For the next step.  And check was the documentation size.  Yeah.  Let's talk about overrides.  As I mentioned already, we have that overrides folder. The overrides folder is registered in our configure file.  You have it here. It's the technology or the package for the stuff that works or that is necessary to get this work is Jboard C3C Jboard.  It's a clear directory called overrides as you see on the left pane and also our same layer so that's everything you need.  Whenever you put a file inside that overrides folder that has a special name it overrides a template that exists in the clone application server in the clone ecosystem somewhere.  The first started name is the actual pass so the sections view let is blown up layout. This is the package name there is a folder called view let and the template is named sections.  We now want to change the template for the default content type document in my demo folder I added a document when I edit you see that in the headline, edit page or page is the content type name to be clear.  I'm going to write that template now.  After a while you will learn where this stuff lives in. I explained already in our parts folder we have omelette and in omelette there are hundreds of packages.  If you're not familiar with that ask in the chat ask questions dig around a little bit. You can always do a search in there.  And I will not recommend the search I search on the console most of the time because it's much faster than using an SDK. That's the only thing I don't know how to search in visual studio maybe there are guys that explained that a little bit better how to come to a to an actual template.  So over I have to look. It's in omelette there is blown  content types. This is the package where some of the default content types of blown are from. We have our well known browser folder inside browser there is a template sub folder. And here we have some listings, summary listing tabular listing you may already know.  And there is also our document. So that's the file I want to have quick look into it pretty much nothing except a text block in there. I copied that file.  The small thing closes everything so if you're lost just click it and you start from the root. I love that button. Once in Tokyo browsers overrides, and I paste it in there. So what I have to fix now is the past to the origin of this template.  I'll just add a name. Again, add some exit save it. And if I reload, of course, nothing happens. If you add something to that overrides you have to restart your instance.  So if you look at through the windows here I use hotkeys on my keyboard I Google for the key I love them. Just stop the instance. I do clear for the window to see what happens from from a new window or from without any stuff that was already there for if you have an error in the  template or if there is something broken you will see it so an instance restart is always a good idea. And if I check this in browser now I see somewhere three access that's my indicator it works so now I can modify that template somehow.  I don't step too much into details here.  All right. I use the example I made in the documentation. This is basically the easiest or the most basic example of page template. We have the heading we have the lead paragraph the description mostly and we have our text block.  There are different ways of adding text to to something. That's not how you should do it. It's one way of doing it with some code that takes care of links relative to something.  The important thing I need to explain here is we fill slot main. So normally you fill lower slots that gives us the option to insert stuff between title description. There is a buff title below title stuff that's all available in the main template.  So, I will show that quickly. We have that actually in our main template but I'm in this point or this example I don't want to use it. So, here are the defined slots and if we use the main slot, we override everything that is inside the article stuff.  For example, we override the above content title. If you have you that's registered to that provider. Of course, you need that provider in your template. So, it starts getting complicated here. For now I want to keep the example simple.  And if I save that I restarted the instance. And now if I reload, you see the byline is gone because the provider is missing. But you have now full control of everything. And you have also control. Nothing pops up here because it is it is registered in somewhere  below. This is an approach of start making a template that everybody understands. And if you need a provider in there, you literally can copy it. So, from the main template if I need that below content title providers thingy I guess that is it, you can add it to your actual document template.  This should give us.  Again, so little bit more obvious what happens in your template when you have that different layers in one page template.  Okay, we'll move it again.  Okay.  That's about page templates.  So, if you need an override. The other option than doing an override is you can register a new template.  Basically, we set example for the main template we registered a new template, we gave it the same name that's why we have overwritten an existing template.  And if we gave that the name like name temp or main template to we have a new template. It doesn't work for the main template that way but for content type stuff you could do it that way.  I'm not stepping into that we have or Mike is talking about that later when he when he shows you the seeming based on the ISO. There is an example you can add entire views with blown CLI.  You can register them registration takes place in the configs ECML. And if you want to configure it for a specific content type, the for attribute is important for you.  So there you can like folders have two or three for different options of listing content. You can also add a second the third option for example for a document or for a news item that is selectable when you add the option or it's not selectable.  You can use it when you know how to apply the view on that. So this is when you register a new template as an option to an or as an alternative to an override of templates.  Okay.  Next part is not that interesting. I, we had the same example from Peter so I move on here a little bit more quickly.  So for example, of course, you don't want to ship funds directly from Google, Google, you probably want to download it added to your team and ship it from there. I can show you an example of how to do this.  I, it's not part of the training. That's what I have to say.  But let's see how we can extend our scene.  So I added a funds as CSS. I inside the funds I just do the import. You can use this also to make more smaller as CSS files for your project for example different components or different content types if it if it grows.  You can split it up a little bit to see what happens in the different parts.  We need just the import to get the funds in.  In the in the scene.  I have to import now our funds as CSS.  That's everything I need to do here. And before I save that's the stuff I have to copy over from the documentation.  Maybe I show you how to do it correctly.  In the documentation it's mentioned. I know there is a variable for defining funds in bootstrap. I have no clue what the name is and I have absolutely no clue what I should write in there to not break everything so that's the point where I have to look it up.  So in the documentation you have to scroll the bootstrap bootstrap stuff list inside obviously a bootstrap folder. There is a CSS folder. That's where the magic comes from.  And you should scroll all the way down you have a variable s CSS. That's all the actual variables from bootstrap and here you can pick up what you need.  And you have a command F I guess, and you have different stuff specified mono space and sans serif fonts. I copied that line. So that's a little bit long.  The example is part of the documentation. And I will add it somewhere.  Into our variables over there.  And the change is actually add open sense.  And we can keep that stuff or we can remove it doesn't matter because I don't have 20 funds in there. I keep system UI I keep. I don't know.  Let's keep everything from now.  And then we can remove the defaults tag. That's an error in the documentation I have to fix. And now if I save. I have to switch to the other tab and then you see it's compiled again.  So the background watch is still working. It sees I changed my CMS CSS and we should have a little bit different from now when I reload the window.  So to add a font and just use bootstrap variable. Of course you can also do  something like  h1 and then at styling for h1 and use apply that font only for some specific HTML tags. That's also possible. But in our example we use the bootstrap variable for that.  And here is a example of how to do this a little bit better is maybe the Tokyo CM repository. There is fonts folder. Again the example with open sense we added the truth right forms directly to the package.  And we have an SDSS file. It's surprise it's called underscore fonts. And here you see what you need to do to register that font that through type font files to be available in your package so it's not magic it's nothing you need to you have to be scared of.  So you have to do for fonts and different styles from the same font based on what you want to have or what you want to serve. So this is an example.  So today we create PloneSim.Tokyo in this training. PloneSim.Tokyo is made for Plone 5.2. And when we created that package the idea was the same. We want to use bootstrap and we want to get rid of columns we want to simplify basically seeming for  but it was 5.2. So you see in the source code of PloneSim.Tokyo of the of the main or master branch. There are tons of overrides because we had to touch a lot of stuff in Plone 5.2 to get a clean view.  I can show it quickly. So this is basically PloneSim.Tokyo with some demo content looks pretty much the same. In 5.2 there was tons of overrides necessary to get this archived.  After the training I will update that seam for Plone 6 with bootstrap 5. And as you saw in the example, it's pretty close to what you see on the website. So basically I have to delete a lot of overrides because now we have the bootstrap markup in all templates, which makes it much more easier to have a clean seam for some like that.  Okay.  Yeah.  In the documentation, font is just an example you can touch whatever you want to touch with variables or with CSS. You can tear in components from what you see here.  So if you have some minutes maybe we can archive that quickly or show an example. My, my, what I love is cards because they're tiny, they're simple.  This is bootstrap documentation. You copy this stuff. I added to my, to my page template, just as an example of how you can use bootstrap.  I can also add a page template override when for example I want to place the description inside a card. I do just this.  So we should get a bootstrap component that looks like that, but keeps our description in. So basically bootstrap to fix stuff. It's a little bit broken here.  There is no image or if you have a news item, you can add a news item image there.  And then you can add margin to the bottom that's also available in bootstrap just as class or helper classes and the three is margin bottom three, three units, units are declared in bootstrap and you can use them.  And now the margin bottom is there and the image is gone. So this is just an example of how quick you can use components from the documentation. And there are tons of documentation.  There are tons of components you can reuse, especially for your patterns you want to reuse or stuff you maybe need.  I recommend the example section from the documentation. There is for example stuff like sidebar.  We are going to use that in a project as well.  The code is pretty simple to get that and it just works out of the box. That's the good thing. So have a look at the bootstrap documentation to have really fun on that.  Okay, last step. I have here my edit bar. People that know me also know that I really don't love that bar.  So I'm going to replace them. There are definitely options. I show the way how to do this now.  In our setup py, you have an option to add a dependency.  That's what it requires. And the second thing is in our configuration. This is an example how you do it programmatically. Of course you can add the package to the build out run build out and then you have it and you can install it manually.  If you do it that way, you have it installed automatically when you install the package.  So, I, because I touched the setup py, I have to rerun build out now.  This should take care of the requirements of that package and it should fetch the package and add it to the project and activate it in the project and make it available for us.  Let's see what happens when we run the build out.  Not so much output output on the console but some output on my on my example here and there is an error now.  So, I built out tries to fetch that I can show what I basically wanted to show.  That example, we made a replacement for the sidebar for toolbar which is called sidebar. If you log in.  You can modify navigation and editing features of clone. There is one template so if you need to touch it if you need to modify it you don't have to bother with the complexity of the edit bar.  There is only one viewlet or one one page template that you can also easily override to get something like that, which is not stick next to your team.  So, if you go with custom UI or if you want to create a website layout, a modern website layout that is based on one column. This is an option for you.  I have no idea why my build out is failing here at the moment, but maybe sometimes you just have to read error messages.  And I guess the quote is missing here. I guess that isn't.  Let's give it one more minute if it's not working I will skip that.  And.  Yeah, proceed.  I see nothing in the chat I also see nothing in the slack. So I guess no questions so far.  I think there are informations about the trainer somewhere around the training page. Feel free to ping us or me if you have questions or if you need to know something.  I will push the code I created here inside my package to a branch of the closing Tokyo package so what you see in the documentation is available as code later in the closing Tokyo, I will create a branch that is called something like  the training 2021 and there is the actual code I created today. So I will push that after the training so you have it for reference if you want to try this at home or if you want to see exactly what I added here.  So build out runs through everything fine I have to start up my instance again.  And if I reload it says everything work it has to pick something because I didn't define a version. It has to pick a version 1.5 oh which is the newest and edited.  I have to create a new flow site. Or as Peter mentioned before in the site setup at one section. There is not yet on I can activate. So as our own package I have to do this, or I install or I create a new flow site then it's installed automatically.  So, I like that approach because it doesn't bother with my layout, it just an overlay. And I have to say this is code that's written for clone five to it works of course, but the styling is not bootstrap five, we will update our sidebar and use the sidebar  component for that. I also have to mention, there is work in progress on the edit bar of clone. It's part of the year six branch and I guess it's going to be merged in a couple of days or weeks. If somebody knows more, let me know.  That's from my side. Seeming from scratch. Please give us feedback. Let me know if I missed something or if I should cover something different in this part of the training.  I would say we make a short break about four minutes and proceed in at, yeah, like in like four minutes with Mike.  Thank you and have a nice conference.  So as the colleagues earlier said, if you have questions, don't hesitate to ask them.  We are there for that.  For now you can ask them in the Slack channel and the training channel.  If you have later questions, you will find us usually hanging around on Discord and the blown channels and a classic UI, for example, just ping us there.  You can find me there and Mr. Tango and the colleagues are also there.  I can share my screen already.  Can you see my screen correctly?  Yeah, it's not too small. If I should increase the fonts and things like that, just let me know.  Okay, I wrote earlier in the chat that you should upgrade the Optum Blades Plone CLI.  We said it's some last quick fixes in the Diazo routes we will use later.  If you haven't done that, you can also fix that copy paste later.  That should be an issue.  The training docs should have already the correct rules and all in place.  But it's a bit easier if you use the current Bop templates blown beta 6.0 beta 9, which has already the correct stuff.  Let's see what we will discuss today.  My use case, I want to show you is for me the classical case, a web designer comes with a layout.  You can either just Photoshop or you already have a click dummy. Another situation could be you got the web design from some websites and we will use today this sim from start bootstrap.  That's why I chose that. It's relatively simple from the content and all, and also relatively close to plain bootstrap.  Other themes I tried out, usually use a lot of jQuery plugins and other stuff and this makes the whole thing.  It's all possible, but it makes more work for us and we want to focus on what's important for now.  What you will learn, you will prepare your development environment. We will use Plone CLI a lot.  We will also create content for the sim in the Plone site. We will integrate the static layout we got from startbootswrap.com.  We will shortly see how to compile the styles and how that works.  My colleagues showed you already some of the stuff in use. We will also create some HTML snippets as tinyMC templates to achieve some of the content areas which are not so easy to achieve by just using tinyMC.  It's a nice way to just use existing HTML snippet and add it to tinyMC and then use it. What we also do is we will create content types and views for the products area.  Let's start. We will go on the terminal. Use Plone CLI create add-on to create an add-on called PloneSim Business Casual 21.  There was a different sim with the same name from startbootswrap back then which we also used in training center. I think there are even sim products on Collective.  This is the new one. It will ask you for a description. For now I leave it out. You can here give a hint for the Plone version.  Right now this does not have big effects. It was earlier used more for differentiation between Plone 4 and 5. Right now between 5 and 6 there are not many differences for the Plone CLI related.  The Python version stick to Python 3 and this code support we also want.  Now it's generating our Plone package like you have seen before.  Now we see the into the package.  And the next step will be at Plone CLI add-seam. This is a different package so it's not a sim basoneta, neither a sim basic.  Funnily enough this is one of the more basic sims also because we will not have much in it because most of our layout and resources we will use are coming with the sim we will download soon.  So we will call the sim the same as the original name.  So we will just put business casual 21. Now we have the sim. Let's fill it with the actual sim from start bootstrap.  If you follow the link from the training you will go here. You can download here but you can also click the preview button which also has the download up there.  You can also see how the sim looks we want to achieve. So you have different sites with different sections. Here you have products listed and here you have the store which is basically the open hours and again the about section.  So if you download this you will have a zip file.  And if you take this and extract that or you could actually go right from the zip file.  So this is the actual content we want. This is just the name folder and this is the stuff we care about. So if we select that and extract and go  I created a new folder so we go in our and our sim package right down to the sim folder we have now.  And here there's already some stuff in it. We don't care much about that.  So we extract that in that folder. If it asks you to overwrite files just say yes.  And now let's open VS code from this year. Yes we trust. So let's open the sim folder and inspect what we have here.  So this HTML is now the index HTML from the same. And we also have other pages like the about and products. We will not use this, but we will mainly based on the on the index HTML.  So let's have a look what's next. So the structure you can, you can look at this is basically what you have after you filled in the same you downloaded.  So the clone CLI gives us a easy command to build our complete development setup. As you can see it also shows you exactly what commands are running.  So it's creating a virtual environment Python running build out bootstrap to create the build out scripts and then it runs been built out.  So you can run all these commands from any place anywhere inside your package folder so it doesn't have to be the root folder. I will figure out where it is.  So you can run the build command later or so from a sub folder and also the other commands.  So that's basically what the CLI provides us. So while this is running. Let's look. The next step would be using plune CLI serve to to start.  You can also just do the bin instance FG, which is basically what plune CLI serve does. But again plune CLI serve works anywhere inside the folder structure. So if we go already in the folder structure to our sim folder where we do most of the work.  We still can use plune CLI serve.  It also shows us that we can open the website on this URL.  We don't need that I already have it open here.  So let me reload. We get the welcome page. For now it's in German, but will change soon.  admin admin.  So let me switch this to English.  So you could also use the advanced.  The advanced tab earlier and right away activate the same or other add ons.  But we will do it the classical way, which means we just go on the add ons.  We find our same here we will install it.  Now we see it's installed.  Right now here this still looks like like basal neta. This will also not change.  If we go on the seeming control panel.  You see now we have a seam here which is active that's our seam and we have the basal neta here.  This control panel is never seen so even if we have some serious issues in the in the seam and the other rules or whatever this will always look like this so that you can activate or dictate the activate your seam and and fix the problem.  Let me open this in a new tab so that we can have a look at the homepage, which now already looks like what we want.  This is rather static now so for now I can go on edits. That's fine.  This is all the added views are coming from from default clone. So this is basically what you have in basal neta except that the banner and the logo is cut out of this area.  But everything else the styles here in the edit form in the manage portlets or in the control panels.  This all looks like default clone. The reason why we do that is, normally you don't care how the how the back end how this control panels are styled.  You don't want to rearrange the real and and bring with your style all this and restyle that.  There are options to do that but normally it's not important and also said, it has the advantage that when you have like manuals and documentation, which use default clone style there.  Yeah, they have a better use for more people and everything looks like everybody everybody knows it.  The only difference is the same part. So we are locked in so this is this is no difference to being locked out, except, let me show you in a isolated container where we not locked in.  So the only difference is the toolbars not there.  So, okay, how are we going from here to many tabs open.  So this we went through.  For now, because this is all is static.  I would suggest we disabled the same. That's why I left this open here.  But other than that, you can always go on site setup and go there.  So to deactivate that the best is to just activate basonita again, which means now when I do the reload here I have to default clone again.  Now, to really achieve what what we have here, we want to create the products, the many, many new items.  So let's create the the free we have the home we have anyway, and let's create just one more so that so that we can later see the difference.  So when we replace this with with actually with the dynamic content coming from clones, otherwise we wouldn't see the difference is that the seems still static or is it is it something we created in clone.  So, let's just close this.  So folder about  and the next will be products.  And store  and our extra content.  So let's get rid of the other stuff of the default content blown ads.  We don't need news and events here and we can even delete users folder.  So let's just delete it.  Now our menu looks already like it should just to make sure when you put more stuff under the, the more on menu blown by default has these drop down menu but our seem doesn't provide that so to not have the menu breaking we will force it to only have.  Only have one one item.  Also, you can see here but this is a bit different than blown default this is already coming from our from our seem so there are some configurations applied already.  So when you create the seem with with clones, you know I there are some settings already in the profiles you can adjust.  And for me, this makes the most sense. So in the menu I only want to see collection folder and link.  And then I want to see types like file image. I never want to see in in the menu, or even news items for example, if you have an folder with hundreds of news items, and you have a left side navigation with the portlet.  And it just looks odd, and it doesn't make sense to show them. You can always create a folder, a folder will be good, good start for menu point and then put the page in it and set it as default.  This is what we are doing now. So we're going in the about page.  And get inspired here so this is the title.  This is that the rest we will do later so first just the title and description.  And then we will launch it. So when we go on the folder about, we can set this now as a default page.  So that when we go on about this, the page is already shown by default.  So we will create a collection, because we want to list the products here.  It's just called products. The rest we will do later so just save it.  Publish it and go on products and also set the collection as a default.  Now on store we create the last page for now.  So, set it as default page in that folder.  Let's publish this.  So this is the basic content structure for now.  The next step will be creating HTML snippets in tiny MC or for tiny MC.  The way I did that you can, if you want to go fast, you just copy it out here.  But this is basically the about page or this is the section about.  So if you go on the page here and you go on the about and you inspect that in the browser,  you will see that you have the section element here.  This is what we want. This is what we want to include because it contains all the content and also the classes which are needed for the scene to work.  So you could just go here, copy outer HTML and then go in your editor and create the file there.  But the whole thing will be wrapped by this.  So it's just for tiny MC. You need this div tag here and one below.  This is what I did with all the templates you see here.  And then we create this at the file.  So this is the section about.  So we go with the editor to our scene to the folders, tiny MC templates.  You see here we have some of the examples that Stefan showed earlier.  These are the example hero hero left and pricing from the bootstrap examples page.  So you can use this also.  They are there already.  But we will not use them for now. So section about HTML.  Copy and save.  So the next one.  Yeah, this note we will take care soon because some of them have pictures included.  And let's see if I go a bit like this.  So normally when you copy the stuff from the layout directly, this is the original path.  But for to work later so that's inside clone.  So inside our our scene, it finds these pictures.  We have to add this and this is basically plus plus seem plus plus.  And then the idea of the same recreate if you give a different seem name.  This will be different. Yeah, so this unique to your to your team.  Yeah, I think I did it in both sections already so that you have this.  I think here there was also something. Yeah, so it's it's taken care of.  If you copy it from here.  You have.  Where was it here.  And this is the section intro.  safe.  And the next one is the section promise.  And I think this is the last one.  So, which is this section opening hours.  So, our templates on place.  What we need to do next is to tell tiny MC where to find these templates.  By default, we have this registration already so let's go on the on the editor.  We have here the profiles folder so this is outside of the same folder.  And inside profiles defaults.  We have configuration options. You will find things like the same name and some other metadata.  And inside the registry folder, you can have different files. The names doesn't matter.  Because this is basically sometimes you see just registry XML but you can also have just registry folder and then have smaller files which are just taken care of some stuff so here we see display types in for the navigation.  This is the setting to change the default settings there.  And we will focus now on the tiny MC here.  So, if you look here, let me close the sidebar.  You can see we have here already a list of templates. This is a record which will register the templates fields in the config registry and this is the way how tiny MC will find our templates.  So, make sure that this is valid Jason so it's not a Python dictionary so the last comma should not be there.  To make it simple. Let's just take the complete value tag here and replace it.  Save. So now we have our name, our names for the for the different sections. And this is the path here. Still again, this is unique to your scene so this will be different and different seems.  This is the folder tiny MC templates inside your scene folder, and then the file name according to the name you chose when you created that just for you to for the info.  So, this part is right now necessary to, to register or to activate the tiny MC template plugin. This will most likely not be necessary in the future or at least it will change a bit.  So normally you can activate activate the template in the future by just checking a checkbox in the tiny MC control panel like you can do with a lot of other plugins.  It will be no longer an external plugin and you don't have to put in this way. But right now, we are still running with the first alpha of clone six.  We still have the old resource registry running here. This will change in the next couple of weeks, hopefully, when we already and merged the year six effort.  So here are some examples how you can change the HTML filter in in clone. This will change the back end filtering and also configure tiny MC to allow certain attributes or tags.  One tag I already included here is the button, which by default is not allowed.  Because in some of the bootstrap templates we have buttons so we want the buttons in there.  So far so good.  Let's have a look at the HTML.  We can best do this.  So we have the same we have the index HTML which we will use as our layout.  So this is how it comes from from the designer.  We don't need to change a lot. For production, I would also replace the, the CDNs here by not having the CDNs, at least in Europe, that's what you want for data privacy reasons, not to use external CDNs or use different ones.  There are advantages and disadvantages having that but you can also make this locally available and change the links. For now, we will just keep it here.  This, what we have here, we will remove.  Because we will include the style sheets in a different way I will show you soon.  That's one thing.  The other thing is in the, in the footer of the content on the lower part. Here we have some JavaScripts. This one has only these two.  The first, which is the bootstrap JavaScript, the, the bootstrap bundle containing the JavaScript from, from bootstrap.  This is shipped by default in clone six.  And so we don't need to include this anyway this is like jQuery and bootstrap.  JS they are globally available so you don't have to think about that.  You, you will have to bootstrap five version there. So, not our concern.  This is the JavaScript we will still include so that stays like it is.  Then one thing.  clone has this thing called global status messages. This is when you, when you go somewhere and you edit for example, and you save.  You have these info boxes here. And these portal messages, we also want to show when the same is active.  So to have that, we take this small, small HTML snippet I didn't copy it just yet.  So we copy that.  And we insert this here. So this is one change we want to make.  And another change is we want to wrap this.  So we have two sections here. For example, we see here we have two sections. And this is the whole main content area.  Many bootstrap seems kind of bad in in how the markup is structured from from the semantic point of view, which needs needs to be fixed.  So we give it the main point and this, this actually gets filled with our content area from blown.  So,  this is this. And here we see it wrapped. So you can also copy paste, in case you did some typos or anything.  So now how do we get get the styles to also to also make adjustments later.  We will, we will go to the folder where they have the styles, you can always put this differently, give different folder names and so on.  And for now, we call the seam SCSS. So we are using thus or SCSS.  And in the same you see,  we just pulling in the existing styles from the from the layout.  Save it.  So basically, what we need for now to to get in. So the next step will be having a look at the package Jason.  So, if you go inside the same folder, you will find the package Jason like you will find also and two other packages, the colleagues created before.  Pretty much looking the same or at least similar.  So, here you have some commands you can, you can use.  Most important is build and watch for now.  So, let's do it right in the VS code here.  Going inside.  Same folder.  Here we have to package Jason.  We run npm install to make sure that all the dependencies and def dependencies are installed.  This will not take too long because our list is not long.  The difference here is def dependencies are used for building for bundling resources.  And dependencies are dependencies you actually have from your team.  So, as Peter told you before, you can use for example the basoneta styles, even if in your team if you want, or even if you go that way, or this way.  So, you can do an npm install basoneta base theme.  I don't remember the correct name but you can find it in his documentation.  And then you have it in your node modules folder and you can use it and this you would put in dependencies.  Or in def dependencies depends a bit how you use it. If you're just using CSS or or thus files, usually it's enough to put them in def dependencies because you will compile them later to CSS.  And you only want to ship the CSS to the SSS is not necessary later in the browser.  Okay.  This was running.  And then let's run npm build.  We have a problem.  I think the problem is other fuller sites. Yeah, I was not, not done. Sorry.  We need to adjust the paths by default. We have the same folder name, like in the basoneta example, but in this scene, it's not called styles the folder. It's called CSS.  So they are basically for places where we have to adjust this.  Style.  That's it.  So let's try again.  Still not.  This time.  I'll see CSS. No such.  Ha.  Okay.  CSS and here.  And then I was.  So basically have to make sure that the scripts are using the correct for the name.  Another way would be just rename this CSS folder to styles that should work too. So this time it worked.  Now we have the, the styles coming from the scene, but they are actually get pulled in our seam SSS and the same SSS does compile to these files.  And then we have the CMS as a map for, for the browser to show you the real CSS and the minified version of that. And this we will use in blown.  This we did. One thing worth mention is we have a vendor folder. And inside the vendor folder, we will have all the resources we installed with npm or john.  So our everything which is not deaf dependency, but the dependency. As I mentioned earlier, will be copied in here. So that later we can when we ship our seem to to blown or delivered.  We can actually delete the node modules or not the, the one level higher.  If you look here inside the seam you have these node modules, but there's a lot of stuff in it because this is all the build tooling stuff but inside the vendor you will have no modules and when you have defined dependencies here they will be in there and you can use them from your seem like you can use the  local JavaScript we already have in the template.  So let's move on.  The next interesting thing would be to have a look at the manifest.  Manifest is the central configuration fire of the scene.  Here you have the visible seem name you will find in the, in the user interface and the description.  You can even have a preview image here, which right now is not used here but that's what you can do.  This also points to the rules file by default it's the rules XML and I wouldn't change that. Here's the prefix also which is the prefix you've seen in a lot of places this is unique to your seem and it's auto-generated generated by my plan.  Here you have production and tiny mc content CSS earlier in clone five for example you also had to like a development CSS but this was because you could you could point it to a less file and the less file would later on in the browser also be compiled and you can adjust it there.  This is not provided anymore so to revamp you can only write CSS not as CSS or less.  So we only need the registration here for the final CSS you want to ship.  And this is also because of the reason why we earlier removed the CSS inclusion in the HTML file because this is the place where we pointed to the CSS also for tiny mc so that tiny mc can include it in the iframe and looks basically the same.  So you can have additional parameters like defining the portal URL as a as a variable and this you can then also use in inside by other words later but for now this is not not that important.  So you can see here for God, yeah, we have to adjust here also the folder name.  But this, as I said depends on if you change the folder name or how you want to structure.  You can also separate the CSS and compiled files and put it in a dist subfolder as you like.  This can also change in the future the default but at the end it's easy to change and to adjust to your means.  So, when we have done this we can actually run npm run watch keep switching the wrong windows.  So, we are in the same folder so let's run npm run watch, which will run a watcher.  To the to the CSS. So, we also need to start the clone site. Let's use plunes here I serve for that doesn't matter where you're in the package.  Clones that I figured out there's something wrong. I think I have somewhere something running, which I shouldn't.  Let me see.  And the terminal here. Okay, I can leave it here is okay. I don't need to have it in the editor.  You can do it both ways. So, okay, so we have on one side, clone running and one terminal and here inside the code we have a second terminal where we have our npm watch running.  So that means we now can go to our clone again. Now we want to verify. Now we want to go to the integration side to the the other side. That's why you're here right.  So, let's go to the integration side. Let's activate our seem.  So, we want to go on the front page. So, we want to replace now some of the things in the layout so if we, if we go on home for example.  We have our sections and then our example we have it wrapped with the main, but also we have the navigation here.  And this has different stuff and somewhere in here that was the navbar.  Now, enough, enough, enough, enough, enough here it's because it's on mobile image was too small.  Now something like that.  Anyway, first thing first.  It's a good thing to know what clone actually renders.  One thing to find out is to open clone, not like we, we are doing it here, like local host 8080 blown, but using a different domain for example 127 001 will open the same page.  The difference is, there's no day as activated.  The reason is, when you go on the seeming control panel.  In the advanced settings, you will see unseen host names and by default, we have this already here you can have also online, the same. If you want to treat later and you want to have some domain names where you can have it unseen so that you can inspect that.  For now, locally this works fine, the default. And the nice thing is, let me do this, the same style.  So if I go and inspect, let's move this to the bottom.  We can actually inspect what clone has on the clone side so on and clone we will find.  Now something like not enough.  Back then it was these these classes didn't exist on phone six they are closer to what you also have on the on the same side.  So when we use the editor.  Let's make this big for now.  We are opening the HTML.  And we find the place where we want to replace the static part with the dynamic content from blown.  And this is what we want this is this URL here with the nafba naf.  So it's basically nafba naf on the same side and nafba naf on the content side.  And to achieve that, we are opening the rules file.  Let's maybe close all this sections here.  Tiny MC we don't need packages and for now also not so.  Okay.  Just to give a if you short summary the first part. This is like including the older back end like when you go on edit in your seam or when you go on the control panel everything which looks default basonata.  This comes directly from basonata.  With this include rule so just leave it there.  If you want, or basically the what this does is you have this kind of condition in basonata back end they have they have a similar thing but it's like inverse like this one.  So it says, if not content has these classes, then it's the back end.  And by default we are using this so when we have these classes in the body tech blown inject stem.  This means we are not on edits, we are not on a control panel or anything else like that.  So this is the way how you can switch from default blown to what you want to style.  Here we point to the the same file. In this case we chose the index HTML but you could also have different files you could also use something like this is the default but use a different one under a condition so you can add if condition here when the path is like this or when  somebody classes are like that use a different layout for the start. You can have different ones, but we keep it simple for now.  No seem basically means when there's no visual portal VEPA on the content side, which from blown always is there.  Then just don't seem anything that is a is a fallback so that when you have something which shouldn't be seen by the ISO.  It usually don't have this like a eject calls and things like that.  So, um,  most of the stuff you can just leave it there.  But what we actually want to do now is we want to take care of the navigation. So, we have you covered.  Let's activate this rule. This rule what it does is it uses the replace functionality from the ISO.  Because of this prefix CSS dot, we are using CSS selectors. If you remove that this part should be an expath selector. They are much more verbose, but they also much more powerful so sometimes when you want to do something tricky expath is the way to go.  But in general, I would recommend sticking with the CSS classes. They get generated or converted into expath in the background anyway but you don't want to read them and you make more mistakes if you use expath.  So, if you don't have to don't use them.  I'm not sure why this is still using this.  I thought I had this change but maybe I also have to not updated Bob templates somehow even though I updated it.  This will change so normally you don't have to adjust this because when you want to see my boots up seem it's it's a bit easier to to have it like this.  You can either say I want the elements and here we have this. This says is the same side but it says seem minus children.  Which means not the element in the template itself.  So, not this element we want to replace but we want to replace the children.  So that's what the first condition says and the second set. Give me this and then inside give me the L E's so we will replace the children of the enough bar enough in the layout with the elements coming from blown.  We could leave this like that or we could. We move this and also use the children here, which is the same.  So if we do this, we save this.  Let's go back to our browser.  Now we see we have our more button here and our menu is working so we see here the URL is changing so we're actually going right now the content still has our index HTML content so that's not so fun.  Let's fix that.  We will go to the area where we have the content.  Let's activate that.  What does this do.  It finds the content and also here is wrong.  This time we want to use content core content core is the main content area, but without the title and without the description and without the lead image for example so it's really the base, the base text area which you added with the tiny MC.  For this team we that's what we want. In most other cases you want to use the just the content not content core, which gives you a bit more of the content area.  And on the same side we have our main tech which we use to wrap the sections and we will just replace everything inside the main template with the content core area coming from blown.  Let's do a reload.  And now we see we have here now the welcome blown.  Here we don't see much for now because we are not taking over the, the headlines.  So, let's continue.  We did this we are the global message I was.  Skipping. Let's add this quickly.  We have.  All that message so that's the global status message.  This should work like this.  To test this we will just go and edit.  Save.  There's our message.  Concore we did.  The last thing we want to get over is the footer.  This is also already here so we just need to activate that.  You see there are also other rules prepared for example for the, the portlets from blown to get them and put them somewhere in the same but this seem in particular doesn't use side panels so we don't need to activate them.  Okay, the footer should also be there.  Right now it would look like this.  Now it looks a bit more fancy.  One reason for that is we don't have our styles in a way but the portlets itself, the footer portlets we can configure directly in blown what we want to do is the default ones, which are basically if you want to stick with the copyright.  You can also add more actions to that menu so you have some menu buttons down then you want to keep that but this seem doesn't have that so let's just turn it off.  We need something we want to have a static portlet and we go here.  Go there, take the content we want this is static for now but that's not important now you can create a template for that to have the 21 next year 2022 but that's not really important.  So one thing I forgot sorry.  Food is our static food.  I forgot to click this.  We want to omit the frame of the portlet.  The portlet itself in this case doesn't have like a headline or anything else this can be useful to have but for now, this is not what we want. So now this looks already much better.  This looks a bit odd here.  So let's fix that.  I think that's starting so we will.  Just take this as a starting point.  In the editor and go to our team.  Just remove this and replace this.  So what we added here now is the bootstrap SSS bootstrap good.  So, we have to make sure that we have boots web in our depth dependencies bootstrap is there so in the node modules.  Full that's there.  You don't have to give the full path to the new modules you just have to take the path inside the new modules the rest.  The compiler will will find itself.  The reason why that is is you have these loads.  Load path node modules for the sus compiling is given here and that's why this can be a bit cleaner here.  So then we have our basic grid definitions this is just what we also have in in Boston eta and breakpoints.  We can ignore that for now.  So now to fix the content.  This looks a bit.  Um, a bit complicated, but it basically says when we have something like the content core that's what we grab.  So, if we look at the content core.  Um, inside the content core here we have parent field text so that's one of the things.  And for now we don't have anything in there but we will see later when we use the tiny MC templates to have our already made snippets.  This rule should not apply but whenever there's not a snippet like this with tiny MC in so default clone content and some other options.  Then we want to have like this basic background and we just use.  We define like like a with and the outside centered and then this background fade is I copied directly from the from the seam.  The rounded and the P nine is all bootstrap stuff, and I used extend so that we don't have to.  Yeah, we can have the same effect like they are using in the same without the markup having to provide this.  This is copy this and put it in.  So, our watcher have seen this and we should now see the change.  We don't.  Oh, wasn't ready yet.  Okay, so this is much better readable and a good default.  Let's continue.  The next thing would be if we if you look at closely at this.  It doesn't look exactly like our menu.  So, this is not up a case.  And it's also here there's much more padding.  The reason why this is there are some some extra classes here.  If we inspect that we have these.  These extra classes on these enough item elements so pigs LG for for example, and also the uppercase somewhere I don't see it yet but it's there.  So, what we can do.  We could just fix that with plain CSS.  I'm not afraid of that.  I still like CSS.  But to have a quick fix we just, we just do with X, extend.  We just do the same as our markup would already provide this kind of classes so just take this.  And for our enough items we do this extend and  wait until this is finished here. There are some post processing post CSS and stuff that's  taking a bit.  So, so now our menu looks much better.  Then, let's give the portal status message.  Also a bit more space.  Because we're short on time I will not show you the before but you saw that the status message was right under the  menu.  Now it has a bit space here which looks much nicer.  So also the footer on the footer should have a bit margin to the top.  So, we also put this.  So this part we already did right away with the portlets.  This is just here for the documentation.  So, the footer itself.  This is a bug in the current alpha here.  So this is normally it should only show the page but for some reason it shows all the other content also.  So the default page setting doesn't really work here.  But here we see there's not much of a gap. So now the gap here is a bit bigger and if you go on other pages they also look better.  So let's continue.  We have our tiny mce templates.  So first of all, let's go on this stop clone and start clone again just to make sure that we have our configuration and clone there.  And one thing we want to do now is we want to uninstall and install our add-on again.  We could also use an upgrade step but for now we don't have an upgrade step so we uninstall.  And we install again. This is necessary whenever you change something in the profiles.  So the registry settings for the tiny mce we want to load.  And this way now when I go on tiny mce, not on seeming.  Tiny mce.  In the future it will just be here the template to activate but for now it's here.  And here's the list of the templates and we see our sections.  So the tiny mce should see the sections.  So let's try if that's working already.  If it's not working the first time after the reinstall we might need to.  It's working. So here we have a preview of what we are injecting.  It doesn't look exactly like the template we want.  I just forgot something.  Tiny mce is sometimes a bit strange when you have big blocks so do some spaces before and then insert.  Otherwise you cannot really get under the block you inserted.  So now I can just click under and I insert the second block we want on the homepage which is the promise.  Let's save that.  And now we have our dynamic content.  Let's also move this so that we have the full screen size.  So now we have our content that looks kind of nice.  To prove that this is actually dynamic I can go here and can say.  Drink fresh blown coffee.  So you can customize that.  And as you see it's here.  Fresh blown coffee worth drinking.  So you can adjust this also the link here for basic stuff this works if you want more complex blocks.  You rather go with mosaic and create specific mosaic tiles.  I'm planning to add this functionality also to the ploncel I so that you can just create this kind of blocks or any other kind of snippets easily in a couple of minutes for mosaic and use this in classic UI.  The other way is of course, you can use what you have more built in options there and also plugins.  But that's not the topic here.  So, yeah inserting the templates.  We were just showing this for this site now. Let me quickly do this also for the other sites.  Doesn't take long.  So edit.  Here we just need one template so I don't need to make empty space.  The product was our list so the store was the other one where we have static content.  In this store we have more than one.  So this store was opening hours.  And under the opening hours.  Again, the section about.  So we have the opening hours we have the section about.  We still have something here I don't know what this is.  Yeah, we have the DMT spaces so we have to remove them.  Otherwise, they get styled by our extra star sheets.  Because these are actually not empty spaces but ptex empty ones.  And on the homepage we should do the same.  Okay, so we have now dynamic contents created in blown.  The only thing which is still missing is the product page.  For that, we will go back to let's do it in the previous code now a second terminal.  So we have to blown CLI.  We are in our.  In our products and we create a new content type.  We should be for.  Commit our changes.  So.  So now.  Is happy and doesn't complain.  It's always good to.  Yeah, make a comment before you start working with the plunge.  Because plunge itself also does the commit and it's better if it's clean.  You can always force it to just shut up but it's better to do it this way.  This way you can.  Things you did with the plunge later easily because I will create different stuff like tests and registrations and.  To revert this manually.  This can be a lot of work.  So we create a product or a product content type not products.  And then we have a description I skip for now we will go with the Python not the XML version.  We can leave this container but we just need items so we don't need like folder rich things.  We keep the globally at edible.  Because we want to add this in the store folder.  And then we do the.  This is still yes and the next is we disabled that activate default behaviors.  This other categorization and related items and all this fields you know from standard blown, but for here in this case we don't want them so we say first, keep it, keep it deactivated.  We will activate to.  Of them.  And the next steps.  So here you have to.  All the stuff again.  So.  Now let's.  See what we have.  So we have a content folder now. So I creates for everything you create like views or behaviors and view let's usually different folders and you will find them.  So we have a product here this XML file is when you want to create through the web your your schema fields and then download it here.  And then we delete it because we said we want to go with the Python version.  And here in this Python version.  This is just example stuff.  I will just delete it.  And if you have in style clone snippets.  Visual code extension you can just write clone.  And the first thing we want to create is an image field.  So.  And we call this photo.  The rest we can just keep like it is.  The only can also adjust is the lead stuff.  We see here right away there's there's some issues so as the.  The node says we have to make sure that name file is activated.  And also we have to make sure that the message factory this underlying is loaded.  Let's clean this up a bit put the activated stuff here.  And do an I sort.  This looks much better we can also do format content which does black in this case.  It's a great thing and also the testing relies on on black later so black will auto format your Python code.  So that it looks nice and has the same rules for everybody.  So this would be one field we need another field, which would be again blown and then we want the rich text field.  We just call it text.  We could leave it like that.  So.  This is what we did.  We put this field.  Text field.  We forgot to fix the import.  So here again we have to make sure that the rich text field is actually imported.  Because this is.  Coming.  They are already here you just have to uncomment them most of them.  Not not all of them but they are there so that it's easier for you to to use this.  Okay that's it.  We clean it up here you see how it looks when you're done. The next thing would be to adjust the FTI settings.  So under profiles default types, you will find the products XML.  This is the product name you have some settings for the product itself also like this global allow these settings are all made here but what is interesting for us is this so we want to activate the basic and name from title behavior basic basically gives gives us a title and the description field and name from title uses the title field to automatically creates the short name from the title when we fill it in the title.  So this is very useful that's why we use this the rest, some of them also belong to the, by standard activate so if you don't say no to the question to the default behaviors you will have some more activate, but for now, this should be should be it.  Um, we will just restart blown and uninstall install our add on.  So, it's just do that.  Add ons.  Uninstall install.  Now we go to our products.  And don't need this anymore. Let's see we have a product here.  We can create a product.  The name of the product.  Let's see fresh coffee is the name of the product.  So,  we have a product of drinking. Then we have these pictures here they are in the in the assets so you can just choose them but you could of course use different pictures from from some websites whatever you want this is the dynamic part so whatever you want you can put in this is the text.  We will.  Now we're talking.  I was on the wrong page.  So,  coffee and tea and this is the description.  And the picture we have already in and this is the text so.  We are going.  So, let's do the next one.  Product.  So, this is  the title.  This is our description.  This is our text.  And that's the product to save it.  So we see the picture what we don't see here and the text is also here. What we don't see here is the title in the description that's because we are only pulling by default, the content core and the title and description are not part of that but we don't need that because we will use it in a different way.  We will see that shortly.  So the last products.  It's this  that  product photo and the last text.  The text can be formatted, but this is not needed for now.  So if we go on products now let's edit our collection.  Now we want to say, we want to show a specific type and the type is products.  So here we have to preview already. We want to sort them by order and folder so that we when we change the order and the products folder.  They will show in a different order.  I think that's all that we need here.  Now we see we have already the products in the right order. The only thing now is they don't look right.  So to fix that, we have to do the last step now.  Now a road trip.  We are creating a view.  So we're using clones CLI.  Stop this for now.  Also do this in the other way.  Again, get that.  It's commit.  So now  we want to pipe in class. We want to call this  products view.  We could choose your default view. This makes sense when you create a view for content type, for example, because this gives you some  nice shortcuts to show the content.  But in our case, we will replace it anyway so we can stick with the default.  We also keep the defaults. So we want the template and we also don't change the name of the view and the template.  But you could  back to the editor.  So now we have views folder.  Views folder has a template, has a Python class and has our configure.tml where we  registered the view.  One thing we have to change here is  we have to replace the  folder with the collection.  So if you want to create a view for a folder, nothing to change here.  But you can put any other  marker interface here so that it's under this name.  It's only  available for this kind of project. If you want to view on any context, you just put the Nusters and  a file card.  And that should do the trick too.  So the next thing will be  we are creating  a file in the types folder for the collection XML.  So we go on files, default types. So far there's only the products. Now we create a  collection  XML  and we fill in this.  This is a much shorter FTI because we only want to adjust one part.  If you look here, for example, in the products, we also will find the behaviors and view methods.  This is like view.  And in the collection, the collection already has some. That's why we put the purge faults here.  But we want to add another view method so that our view is in the list of selectable views for our  collection. That's what this does.  So this is the template  for our view.  Let's copy it like this just to mention.  This is basically  filling the content core area.  It's iterating over the results of the collection.  Then item is our item in each iteration. So we will fill in the description here.  We fill in the title here. We create the image path here.  We use the large scale from the image.  And the same we do here again. The reason why we do that is when you look at the blocks,  they are alternating. So it's like this combination and then you have  even an odd variance.  That's why we make it simple and we just do this.  So let's just replace the whole thing with what we had there.  So we have one thing here. Here's a condition.  We use the repeat item.  So when this is not called item but something else, this would be different here.  But the last thing is to say, okay, when this item is an even or odd item, then do this.  So in this case, if it's like the first, then this will get.  And if it's the second, then it's even then this part only happens. So we only in in insects at the time one section, but it's either one or the other.  So  one last check here is the Python thing we have to adjust. That's the last thing.  So if you look at the Python codes by default, it's our browser view.  So we will now load the collection view because we want to basically use the collection view.  We have a different template. The rest stays the same. So this stays the same.  We need to delete this because we don't use it anymore.  And that's basically it.  So we want to start again.  Since we  changed stuff in the profiles folder again, what we need to do  is uninstall install or add on.  Or when you have public stuff, then you should write an upgrade step.  Clones here I can you also help with that.  So on the products, we should now have a products view here.  So now that we switched that we have our content and it looks exactly like we want.  So I would say not bad for the first taste.  That brings us to the end of the official part.  I hope my screen sharing or you can just join and ask questions.  Also to Stefan, I think Stefan is still around. I hope.  I'm not sure.  Thank you.  Questions from your side so far.  Don't be so silent.  Sorry for the rush.  But it was a lot of  questions to go through, but yeah, we have a bit of time left.  If you have any, any questions to clarify, we can we can go over that.  Yeah.  One thing I can add is right now we have in the scene in the rules, a rule which will  basically disable require Joe S. You might ask why disabled require jazz, because in the current alpha it's still there.  So the resource registry is still working like in blown five, which would break things like the index HTML so you cannot just have like simple JavaScript included.  You would get this undefined define nasty errors from require jazz. This rule will basically inject.  No, no, this one, this one will inject like this at the very end of the of the header.  And this will disable require jazz so that when in later code like in the body of of the HTML file, you use plain simple JavaScript.  It's independent from from require jazz so there's no problem there.  But this will go. So in the final release of clone six, this will not be needed anymore because there's no require jazz so nobody can shoot you in the food.  But for now it's there.  Still there.  We will probably make some small adjustments after the trainings but it's mainly rockable like this.  If you have any questions you can, as I said, reach us on discord anytime on community plone.org.  Ask questions. Also all the Bob templates in for the plone CLI uses. They're not set in stone. So if you have wishes or ideas to make things better we have some some people already contributing to that.  So this is going step by step.  Yeah, you will find the code of this seem also already in the collective so if you search there for a plone seem business casual 21, you will find.  It's the same steps I did here so you can inspect that in case you have any trouble with with your current setup and couldn't follow with the pace we we made.  Then you can just inspect that and see what's what's wrong or just use this as an as an inspiration.  It seems I usually get more complex but this really depends on on your needs.  Okay, if nobody of you has any further questions then I would just.
Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_0_3299.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_3300_3695.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_3696_5699.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_5700_6935.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_6936_11459.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_11460_13727.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_13728_14015.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_14016_15347.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_15348_18983.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_18984_21851.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_21852_33671.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_33672_34391.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_34392_36023.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_36024_40535.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_40536_50771.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_50772_68639.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_68640_68927.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_68928_69155.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_69156_70967.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_70968_71291.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_71292_71663.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_71664_72455.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_72456_73787.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_73788_74291.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_74292_74543.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_74544_79847.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_79848_80135.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_80136_80399.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_80400_80483.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_80484_83063.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_83064_85259.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_85260_85439.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_85440_86231.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_86232_88331.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_88332_89675.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_89676_90731.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_90732_90803.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_90804_93479.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_93480_97523.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_97524_99647.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_99648_101795.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_101796_103091.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_103092_104171.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_104172_105983.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_105984_106775.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_106776_107723.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_107724_107915.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_107916_108095.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_108096_109235.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_109236_109763.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_109764_116459.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_116460_122747.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_122748_123971.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_123972_124211.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_124212_124379.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_124380_128003.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_128004_128051.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_128052_128195.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_128196_128267.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_128268_130679.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_130680_130739.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_130740_131135.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_131136_131615.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_131616_132251.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_132252_135263.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_135264_135743.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_135744_136727.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_136728_136991.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_136992_137615.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_137616_139991.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_139992_141527.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_141528_143135.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_143136_144191.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_144192_147479.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_147480_149687.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_149688_149939.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_149940_152531.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_152532_152663.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_152664_154151.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_154152_154859.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_154860_155123.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_155124_155867.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_155868_155975.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_155976_156395.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_156396_156659.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_156660_157067.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_157068_157151.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_157152_157679.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_157680_158519.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_158520_159107.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_159108_159239.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_159240_159551.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_159552_159623.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_159624_161615.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_161616_162971.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_162972_164339.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_164340_164471.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_164472_164663.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_164664_169007.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_169008_169619.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_169620_171683.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_171684_171923.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_171924_172139.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_172140_172355.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_172356_172559.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_172560_172751.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_172752_172871.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_172872_173003.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_173004_173207.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_173208_173375.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_173376_174887.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_174888_176567.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_176568_176627.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_176628_176675.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_176676_176735.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_176736_176819.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_176820_178655.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_178656_179087.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_179088_179147.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_179148_179639.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_179640_180659.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_180660_181583.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_181584_181991.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_181992_182315.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_182316_183515.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_183516_183563.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_183564_185543.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_185544_185699.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_185700_185747.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_185748_186179.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_186180_186419.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_186420_186767.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_186768_186875.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_186876_187307.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_187308_187895.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_187896_188315.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_188316_189359.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_189360_189467.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_189468_190943.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_190944_191003.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_191004_191183.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_191184_194471.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_194472_194855.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_194856_196703.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_196704_196871.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_196872_198071.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_198072_198611.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_198612_198935.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_198936_199223.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_199224_199427.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_199428_200639.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_200640_201311.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_201312_202019.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_202020_202139.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_202140_202391.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_202392_202751.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_202752_203207.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_203208_203255.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_203256_206375.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_206376_206627.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_206628_211319.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_211320_212483.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_212484_213515.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_213516_216455.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_216456_216683.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_216684_216983.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_216984_217451.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_217452_217571.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_217572_217859.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_217860_217931.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_217932_218831.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_218832_219095.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_219096_219263.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_219264_219371.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_219372_219491.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_219492_219611.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_219612_219659.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_219660_219947.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_219948_220379.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_220380_220595.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_220596_220691.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_220692_239207.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_239208_240935.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_240936_242471.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_242472_242579.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_242580_242939.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_242940_248987.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_248988_249107.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_249108_249467.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_249468_253499.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_253500_254867.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_254868_255011.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_255012_255059.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_255060_255107.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_255108_259511.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_259512_260795.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_260796_260915.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_260916_260963.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_260964_263615.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_263616_267911.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_267912_276011.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_276012_277535.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_277536_277943.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_277944_278027.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_278028_278135.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_278136_278243.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_278244_278363.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_278364_278483.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_278484_278819.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_278820_278987.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_278988_279059.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_279060_279119.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_279120_279179.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_279180_279575.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_279576_280715.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_280716_280919.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_280920_281879.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_281880_282587.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_282588_283199.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_283200_284087.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_284088_284303.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_284304_285059.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_285060_285251.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_285252_286079.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_286080_289499.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_289500_290975.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_290976_292247.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_292248_293207.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_293208_293903.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_293904_301787.png Plone_6_Classic_UI_Theming__Create_a_theme_for_Plone_6_Classic_UI_based_on_Bootstrap_5_301788_302460.png