Olive CMS Theme

[MikeKry]

Hi,

we have just published as opensource package our Olive CMS Theme that you could see for example at Harvest 2024 as part of my presentation.

It is a bootstrap based theme, that utilizes & overrides bootstrap theme, so there are no changes needed in HTML. It could be used as an inpiration for new theme development as initiated here #17327

For now, we have focused primarily on the content items listing and detail.

Here is link to our repo: https://github.com/puxdesign/PuxOrchard.Theme.OliveCMS
Or nuget: https://www.nuget.org/packages/PuxOrchard.Theme.OliveCMS

[hishamco]

Thanks for the great work you did @MikeKry and your team as PuxDesign for the Orchard Core community, I appreciate your effort!!

@Piedone can PuxDesign be a part of the new admin them revolution? It has been awhile that I didn't see the updates in #17327

[Piedone]

We've been in touch with Michal, yes.

[Piedone]

Is this the whole codebase? Just it's curious that almost all the code is SCSS, there's no JS, and just a handful of templates.

[MikeKry]

@hishamco

Are you missing something specific?

It contains everything that can be seen here https://olive.puxdesign.cz/en/for-developers/olive-theme
We did not modify html structure - it would be too hard to maintain when development on orchardcore is so active. That means no overriden views,

Only the views that were changed in structure is:

• Layout.chtml - had to be changed to include custom styles
• ToggleTheme.cshtml - we do not support dark theme yet, so we removed it from selector

Sure, we could do a lot more changes to Admin if we would modify also the HTML structure, but that would mean breaking changes with every update and that is impossible to maintain when the Theme is not a part of OC.

This is also something I would like to be kept in mind, when there will be development on new admin theme for orchard - currently we can override any view, but doing that just for the purpose of changing styles is way too much work :)

[hishamco]

Frankly, I haven't tried the theme yet, but from the first glance as a normal OC developer I expected to see the admin menu override views.

Could you please elaborate on your approach to styling the theme?

[Piedone]

FYI you don't need a Layout override to include something with the Resource Manager. See https://github.com/Lombiq/Orchard-Training-Demo-Module/blob/dev/Lombiq.TrainingDemo/Filters/ResourceInjectionFilter.cs for some inspiration and this to check if you're on the admin:

OrchardCore/src/OrchardCore/OrchardCore.Admin.Abstractions/AdminAttribute.cs

Line 57 in 4eff752

public static bool IsApplied(HttpContext context)

[MikeKry]

@Piedone
Thanks for example, but I think it is not possible to remove original bootstrap scripts without overriding Layout view, or is it?

https://github.com/OrchardCMS/OrchardCore/blob/main/src/OrchardCore.Themes/TheAdmin/Views/Layout.cshtml
line 30-39

we need those gone as we build our custom bootstrap styles file.

@hishamco
Feel free to look at the readme, I think it should be explained well-enough. Overriding views is something we wanted to avoid in the first place :) That is the reason we took the whole bootstrap sourcecode and modified components we needed.

I think it is the only way how to do admin themes, because you just can't go and modify every admin view and keep it up to date. Anyway if there is something unclear, I think we can possibly attend some community call and provide further QA.

[Piedone]

Indeed, if you want to also remove resources, then apart from something hackish, this is the solution.

[Piedone]

I've added the theme to OC as a PoC here, just to see it in action: https://github.com/Lombiq/OrchardCore/tree/task/olive-admin-theme-test Didn't change anything apart from making it build and run.

I see the following tasks before the theme could be used as a baseline for the new OC admin experience:

• Add dark theme support.
• Add RTL support.
• It seems to me that the whole of Bootstrap is added as SCSS. Instead, it should use BS from an NPM package, as TheAdmin also does, and only include custom code.
• Fix this UI glitch:
  
• Fix the menu flickering on navigation (previously the text besides the logo in the top-left was also in one line for a moment on load, and then got realigned, but that's not visible here).

2025-02-17_19h04_51.mp4

I see the first two on the roadmap. Are these things that you inted to do in the foreseeable future, @MikeKry?

Then, as part of integrating into OC, this would be needed:

• Move the code into TheAdmin.
• Update csproj and Manifest to be in line with how a built-in theme should be.
• Integrate with the new assets pipeline (New Assets Build Tool (Assets Manager) #17262). TS is not needed, since there's no custom JS code.
• Remove things that are superfluous in the OC context, e.g. icon, linter configs, unneeded dependencies from packages.json. Keep the license.

And this is the point where the real work would begin :).

[MikeKry]

@Piedone

Thanks you for feedback, it is valuable for us. We will surely fix that in next release as we are finally migrating to OC 2x on our projects.