Public website custom layout #9197

vavrol1 created 28 days ago

Hello,

We are building a content management system for our client to manage content on their public website.

However, for the public-facing part of the site, we need to specifically customize the appearance and overall page layout. The client wants the design tailored exactly to their graphical requirements, so our question is:

What are the available options for fully customizing the layout of the public-facing website? According to the documentation, we know there are possibilities for modifying individual sections (menu positioning, logo changes, footer adjustments), but our client has very detailed specifications. Is there a way to create our own custom page layout while still utilizing existing built-in functionalities (login, language selection, menu management, etc.)?

We are at the very beginning of the project's preparation phase and are seeking the best approach to avoid unnecessary additional work.

Thank you very much for your assistance.

Best regards,
Lukáš Vavrouš

enisn created 28 days ago

Support Team .NET Developer

Hi,

If you build a complete custom website, I can suggest to you downloading source code of the theme and use it with local references from your application. Maybe Basic Theme may suits you better for customization purposes since it's built on top of the plain bootstrap no custom styles on it.

ABP Studio makes it in an easy way, just right click the theme module from Dependencies tree, and choose Replace with Source Code option:

If you have LeptonXTheme, right click to the LeptonX theme module.

This action will download the source code and add it to your solution. You can directly change theme layout, menu items, header, footer or whatever you wish in the theme project without overriding from your main application.

You can also implement new layouts according to your requirement by inspiring previously implemented layouts, that can make your development process much more faster

enisn created 28 days ago

Support Team .NET Developer

If you wish, you can replace source code by using ABP CLI too:
https://abp.io/docs/latest/cli#add-source-code

vavrol1 created 24 days ago

Hi,

Thank you very much for your detailed explanation and inspiration regarding the direction we can take.
Your advice helped me a lot to clarify the approach for customizing the layout according to our needs.

If I encounter any further issues during development, I will definitely reach out again.

Thanks once again for your support!

Best regards,
Lukáš Vavrouš

vavrol1 created 18 days ago

Hello again,

Thank you very much for your previous support regarding customization of the BasicTheme. Based on your recommendation, we used the “Replace with Source Code” option in ABP Studio to create a fully customized layout for the public-facing website. This approach worked very well, and we now have a Web.Public project using a modified Volo.Abp.BasicTheme module (as source code).

Now we are moving to the next phase and need your advice again.

Current Situation
We have two ABP Commercial solutions:

1. AlkaPublicSite (ABP Studio-based)
Created using ABP Studio.
Contains Web.Public project, which uses a fully customized version of Volo.Abp.BasicTheme (added as source code).
Tailored for the public-facing site with strict graphical requirements.

2. AlkaTravel (non-Studio)
Created using ABP CLI (not with ABP Studio).
Includes a CMS developed by another team.
Uses LeptonX theme in the Web(admin) project.
More mature and production-ready; under source control
Does not include a .abpsln file for ABP Studio

Goal
We now want to combine the two:
Integrate the Web.Public project (with its custom BasicTheme module) from AlkaPublicSite into the AlkaTravel solution.
Use both the CMS (LeptonX-based) and the custom public website in the same solution.
Continue development in one solution, and preferably with ABP Studio support, if possible to.

Questions
What is the recommended way to integrate a Web.Public project (with customized BasicTheme) into another solution that already uses LeptonX and was not created with ABP Studio?

Can we additionally create a .abpsln file for the combined solution to make it usable in ABP Studio, even though the original AlkaTravel solution wasn’t created in Studio and will now be extended with projects from AlkaPublicSite

We are looking for the cleanest and most maintainable integration approach moving forward.

Thanks again for your guidance!

Best regards,
Lukáš Vavrouš

enisn created 17 days ago

Support Team .NET Developer

Hi,

I showed BasicTheme as an example, you can always replace source-code of LeptonX theme, too. You can add project reference of customized theme to 2 different applications and they can use the same customized version of the theme.

It isn't important if the solution is created by ABP Studi or not, you can still get the source code of the theme by using ABP CLI:

abp get-source Volo.Abp.LeptonXTheme

If you consider using ABP Studio with your older solutions are not created with ABP Studio you can initialize them in ABP Studio by following "File > Initialize Existing Solution" menu item.

We are looking for the cleanest and most maintainable integration approach moving forward.

If you build your own theme and use it everywhere, you can pack you theme as nuget package and push to your private nuget. And your applications use your custom theme with package reference, in that way, even you made a breaking-change, you shouldn't update all the applications immdediately that uses your theme, they can still stay the previous version until you'll apply the breaking-change on them.