Upgrade to Bootstrap 5.3.2, periodic Orchard Core Workshops - This week in Orchard (27/10/2023)

Gábor Domonkos's avatar
Announcement, Documentation, This week in Orchard

Upgrading the Admin theme to use Bootstrap 5.3.2, displaying the Orchard Core logo in the HTML head in Admin branding, and a discussion about having Orchard Core Workshops again! Check out our post for the details!

Orchard Core updates

Upgrade to Bootstrap 5.3.2

Orchard Core is now using Bootstrap 5.3.2, which is a major upgrade because the previously used version of Bootstrap was Bootstrap 4. Most of the assets of the Admin theme were reinvented to make them compliant with Bootstrap for many reasons. One of them is the maintainability because we don't have a lot of overrides so we tried to code along instead of going against Bootstrap. If the next version of Bootstrap is released, it will be easy to update Orchard Core to use that version.

This version of Bootstrap supports themes. There is support for dark and light themes; you can also add any other theme you might want. If you want to add a blue theme, you can achieve that using Bootstrap 5.3.2. Previously we used to have our own dark mode and default theme. So, those now are supported by Bootstrap. Because of this reason, one of the breaking changes is we no longer use the phrases: theme, dark theme (from the Bootstrap perspective). It is now called dark and light. And by default, we use auto. What auto does, is it automatically honors your preferences. This means that if you are using a dark theme on your phone, your Orchard Core website will load dark by default.

Another improvement is separating Bootstrap from the Admin theme assets. Before the admin.scss used to include Bootstrap within it. And also, admin.js used to include Bootstrap within it. It means we complied them together, and we shipped them that way. With the new layout, we separated the two. The admin.scss or the admin.js are much lighter files but they are loaded after we load Bootstrap. The benefit of that is our code is completely independent of Bootstrap.

If you open up the source code of Orchard Core and check the files inside the TheAdmin theme, you will notice one main file under the Assets/scss folder, called index.scss. Here we import some main stuff and the necessary components. At the end of the file, you can see that we are including the light and the dark themes. If you need to add your custom theme, you can include it as we included the dark theme for example.

The index.scss file of the TheAdmin theme

If you check out the _index.scss file of the dark theme (under the scss/themes/dark folder,) you can see how we utilize the color-mode function to create a scope for the dark theme. And only do these overrides and make these changes when it's dark. You can do the same thing for your theme.

The index.scss file of the dark theme

Displaying the Orchard Core logo in the HTML head in Admin branding

By default, the Orchard Core logo and site name are displayed in the top navbar in the admin theme. In this change, the favicon is surrounded by zone "HeadMeta" to put it in the HTML head. The documentation is also updated to reflect this change.

Customize Admin branding

News from the community

Periodic Orchard Core Workshops

As you may remember we had a couple of workshops before in 2020. They were about various aspects of Orchard Core, including the built-in modules or the most important part of the built-in modules and how to use them, theme development, module development, deploying to Azure, etc. We think that those workshops were very useful for the community and we should do that often or at least periodically, like twice a year. Just have this as an easily accessible way of getting a bit of personalized Orchard Core training. Because we have tutorials and videos, so, currently if you want to learn on your own, you can do that from those or the code. If you want personalized training, you can get in touch with any community member or Lombiq and get one. But kind of in between, there is nothing, there are no open courses, classroom-kind courses that you can just sign up and be there with multiple people. If you are interested, jump into this GitHub discussion and tell us your opinion about this idea!

Orchard Core Workshops

Orchard Dojo Newsletter

Lombiq's Orchard Dojo Newsletter has 489 subscribers! We have started this newsletter to inform the community around Orchard of the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post is published to Orchard Dojo, including This week in Orchard of course.

Do you know of other Orchard enthusiasts who would like to read our weekly articles? Tell them to subscribe here!

If you are interested in more news about Orchard and the details of the topics above, don't forget to check out the recording of this Orchard meeting!

No Comments

Add a Comment