Abp: Theming documentation

[ugurozturk]

Hi,

i looked at open issues, yet i couldn't find theming documentation. So i opened this one as keeping it in milestones

https://abp.io/documents/abp/latest/AspNetCore/Theming

[hikalkan]

Thanks.

[vnetonline]

Any idea when theming feature will be available?

[hikalkan]

Feature is available (not feature complete, but works), however documentation is not.
In the next weeks, we'll focus on documentation.

[sheng-jie]

Any progress on this?

[hikalkan]

Not yet.

[KidoPlay]

Hi I am currently implementing abp vnext with angular.
Trying to find a different theme
Any examples or samples for angular theme?

[maliming]

@KidoPlay
please see:
https://github.com/abpframework/abp/blob/dev/npm/ng-packs/README.md
https://github.com/abpframework/abp/tree/dev/npm/ng-packs/packages

[AlphaComposite]

What's the status of this? Seems like a lot of interest but not many substantive responses.

[GerryGe]

Any idea when theming doc will be available?

[hikalkan]

Understanding theming is easy actually. See the source code https://github.com/abpframework/abp/tree/dev/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic
to understand it. There are people understood it and created new themes: https://github.com/liangshiw/Lsw.Abp.AspNetCore.Mvc.UI.Theme.Stisla

We continue to the documentation by priority and will write this document too.

[chadboettcher]

Understanding theming is easy actually. See the source code https://github.com/abpframework/abp/tree/dev/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic
to understand it. There are people understood it and created new themes: https://github.com/liangshiw/Lsw.Abp.AspNetCore.Mvc.UI.Theme.Stisla

We continue to the documentation by priority and will write this document too.

I find this reply to be very unhelpful. I have been struggling for hours to figure out how to override the theme components. I've looked at the Stisla example that you referred to as well as the Basic theme in the code. But every time I override a layout for example, all of the styles and scripts disappear from the source and all I am left with is in the rendered HTML.

To me, the whole concept of a boilerplate template is to get you up and running fast with a solid framework (which it is!) and the next logical step is to theme the UI to suit your project or client's requirements. I feel that documenting Theming and/or overriding an existing theme with clearer examples should be given higher priority. Granted, there are hints in https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-User-Interface, but I'm still struggling.

Any insight in to resolving the bundling issue I described would much appreciated.

[jack-gaojz-zz]

Understanding theming is easy actually. See the source code https://github.com/abpframework/abp/tree/dev/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic
to understand it. There are people understood it and created new themes: https://github.com/liangshiw/Lsw.Abp.AspNetCore.Mvc.UI.Theme.Stisla
We continue to the documentation by priority and will write this document too.

I find this reply to be very unhelpful. I have been struggling for hours to figure out how to override the theme components. I've looked at the Stisla example that you referred to as well as the Basic theme in the code. But every time I override a layout for example, all of the styles and scripts disappear from the source and all I am left with is in the rendered HTML.

To me, the whole concept of a boilerplate template is to get you up and running fast with a solid framework (which it is!) and the next logical step is to theme the UI to suit your project or client's requirements. I feel that documenting Theming and/or overriding an existing theme with clearer examples should be given higher priority. Granted, there are hints in https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-User-Interface, but I'm still struggling.

Any insight in to resolving the bundling issue I described would much appreciated.

I have this issue before.
The bundle tag cannot work in the customized layout file. Check the source code the bundle tag did not convert to the script tag and still "abp-script-bundle" tag.
After I added the "_ViewImports.cshtml" file and it works for me.

Hope it will help you.
FYI.

[chadboettcher]

Thank you so much @jack-gaojz ! It's working for me now.

[hikalkan]

Started to the theming document for the aspnet core mvc UI: https://github.com/abpframework/abp/blob/rel-3.3/docs/en/UI/AspNetCore/Theming.md

I will complete it in a short time.

[hikalkan]

Done: https://docs.abp.io/en/abp/latest/UI/AspNetCore/Theming

I will continue to complete the missing documents for the MVC / Razor Pages UI.