Orchardcore: Modern Business theme

[agriffard]

Goal: Include The Start Bootstrap Modern Business template in the available themes.

Template: https://startbootstrap.com/template-overviews/modern-business/
Preview: https://blackrockdigital.github.io/startbootstrap-modern-business/index.html

The idea would be to create it as a child theme of TheTheme. Ex: SBModernBusiness.

Create the recipe that will generate the sample content items:

• Home page
• Services
• Blog home and posts
• Contact page and form
• Portfolio and projects
• Faq and Faq items
• Pricing table

The best way to achieve this will be to define the corresponding content types and make an equivalent of the preview site.
Some content alternates or Liquid templates will have to be added.
Then, create a deployment plan and export the site to obtain the json recipe that will be used as setup.

It is a very good learning exercice on creating and customizing a theme.
If anyone wants to start to contribute to it, please answer in the comments.

I can give some support if needed.

[dodyg]

Let me work on this. I need a reason to get back to this project.

[agriffard]

Ok, thank you. If you have any question, don't hesitate to ask.

[dsghi]

If you would like any additional assistance, let me know. I was just getting ready to do some theme work on my own, I'm happy to contribute at the same time.

[agriffard]

@dodyg Tell us if you made progress on this one. If you don't answer, @dsghi can contribute on it following the specs.

Fyi, we will make a separate theme, not an inherited one.

[dodyg]

I am still working on it. I am not fast but I am working on it.

[Skrypt]

Push your branch and work together 😉

[dodyg]

I understand that's ideal, but the task description says It is a very good learning exercice on creating and customizing a theme. and it's not a bottleneck for anything else. Let me figure out most of the parts myself (that's how I learn) and I'll push something soon. World Cup watching is taking too much free time.

[dsghi]

Absolutely @dodyg, I didn't mean to imply any pressure or force my way in. Take your time, I'll be around if you want any help. :)

[mdockal]

@dodyg how you coming along with this? I am a newbie and I would also like to learn how to build themes for Orchard Core.

[xperiandri]

Basically, you just install dotnet new templates and create a theme from the template.
There you have manifest which defines a theme info and recipe.json which initialized DB with content definitions and seed data. You can set content definitions up in existing theme and copy to recipe.json from database. They are saved in JSON too.

But I have no idea how Liquids are bound to data. And how can I use Razor if I want

[TonyWoo]

@dodyg @agriffard any update/news about this "Modern Business theme"? It's an very good example to create a theme. Can you push your changes so we can learn and help on this task? Thanks.

[agriffard]

Following the steps I explained, I made this theme: https://github.com/agriffard/Resume.OrchardCore :

• In an OC application (initiated with theAgencyTheme), create an equivalent of the preview site.
• Add the content types definition and the Liquid template.
• Finally, create a deployment plan and export the site to obtain the json recipe that will be used as setup.

It is based on https://startbootstrap.com/template-overviews/resume/

If you want to reference it from Nuget in an OC application, it is available here: https://www.nuget.org/packages/Resume.OrchardCore/1.0.0-beta3-1

[agriffard]

@dodyg Can you please give us some feedback on your progress.
The whole point of this issue was to explain how to create an OC theme from an existing css template and to answer the questions people have about it.
If you do not give any feedback, we miss the educational purpose.

Tell us where you are and what you can share.
If you don't answer, I will do it myself or ask for other people to help.

[ArashSade]

@agriffard Please do it yourself. I would prefer to learn from you rather than wait months.

[mdockal]

@agriffard I would like to help.

[xperiandri]

What is a deployment plan and how did you export it?

[agriffard]

@xperiandri

• Enable OchardCore.Deployment module. An 'Import/Export' menu link will appear in admin.
• Create a deployment plan.
• Add a step to export Content Types definition.
• Add a step to export Content items.
• Add a step to export custom file.
• Click on Execute => a zip file will be downloaded containing the json recipe with the corresponding steps.

[agriffard]

@mdockal You can do it.

In the same time, it will be interesting to make the documentation about how to create a website and update the theme (#2173), and about deployment plan (#2239).

[mdockal]

@agriffard OK, please forgive me, as I am a newbie at working on Github projects. I am used to working with Team Foundation Server, this git terminology is a little foreign to me. I was reading the Engineering Guidelines and I noticed it says "To create a new repo in .... org, contact @jetski5822" I have already created an OrchardCore fork under my account, can I use that one should I contact Jetski5822?

[Jetski5822]

@mdockal Oh boy - I need to revisit those! :)

You are totally fine to fork... its only when creating a new repository under the Orchard Organisation. When you fork, you create a clone of our repository under your username.

[mdockal]

Well, I'm stuck, it's a little more difficult than I thought. This template is not a one-page bootstrap template like Agency. Services and Projects need to show up on the home page and the services and portfolio pages. I can't seem to figure out how to create a projects list and a services list and display them on the home page and their respective pages without duplicating the lists. I don't know if I need to create a widget of some kind or what I need to do? Please advise!

[agriffard]

Indeed, it is a bit different than just a making a landing page.

You could start by doing the Portfolio pages, creating the alternate .liquid views of their ListPart. Take example on the Blog-ListPart.liquid in theBlogThemeViews.

Then, I think the homepage should be a Page that has a FlowPart with these widgets:

• A Slider (do it at the end, it will be the most difficult)
• A widget with Liquid using a query that lists the services for the 'Welcome to Modern Business'
• A widget with Liquid using a query that lists 6 portfolio items for the 'Portfolio Heading'.
• A paragraph with the 'Modern Business Features' text, taking 50% of the width.
• A Image widget on the right, taking 50% of the width.
• A Html Widget with the Call to Action.

[psijkof]

https://github.com/psijkof/ModernBusiness.OrchardCore

[psijkof]

We have made some progress. After some initial learning moments (:)) we are now working on the portfolio.
Oh, and although advised differently, the slider is done too!

Please try it out and report any issues if you find!

[sebastienros]

Should this "template" be based on a module and use Razor Pages like I did last week? Would be a nice sample too. And it would still have the setup recipe available. The default theme would be the SafeMode one or TheTheme, to support the Login pages (or as a fallback to any controller that requires a theme).

[psijkof]

Sure, we could do that too, if we see that using OC in a decoupled fashion gets more do-able/supported.

In the current way we do it, would demonstrate:

Flow part
Widgets
Liquid part
Pager
Alternates

Some topics that are not so obvious from the docs or other samples currently available

[larremp]

Hi Antoine, do you still help with this project? I will have time this weekend to start looking at this. Please tell me how you want to move this forward. I will try to contribute. Thanks.

[larremp]

@psijkof @agriffard Sorry I didn't see the updated messages on the main gitter page. @psijkof, I will look at the work you've already done and try to learn it. If you need help, please tell me and I will try to contribute. Thanks.

[psijkof]

@larremp Updated the readme in the repo. Thanks for checking it out!

[larremp]

Thanks, @psijkof. I will dig deeper this weekend. Once I am capable, I will try to help you with some of the items you listed under the "Issues" section.

[psijkof]

      Should this "template" be based on a module and use Razor Pages like I did last week? Would be a nice sample too. And it would still have the setup recipe available. The default theme would be the SafeMode one or TheTheme, to support the Login pages (or as a fallback to any controller that requires a theme).

We're making some progress: https://github.com/psijkof/ModernBusiness.OC.RazorPages

[larremp]

@agriffard @psijkof Here's my take:

1. I started by taking the existing TheBlogTheme and using it as a starting point.
2. I started with Blog and BlogPost.
3. I documented the steps at http://www.basicstostart.com/
4. The public repo is at https://github.com/larremp/DemoModernBusiness
5. I still work on this repo to just show the specific Theme project and not the entire solution.
6. I will continue to add the other functionalities until I complete the entire ModernBusiness template.

Please tell me what you think. This process is actually a very good learning experience for me.

Thanks.

[psijkof]

@larremp Agrreed it's a great learning process. We made it with the 'Standard CMS' approach (everything in OC backoffice and some alternates in the theme project) and in 'Decoupled' scenario, which we found easier (YMMV). See the links in this thread.
Great you documented it, we didn't (ashamed face)

[larremp]

Thanks for your feedback, @psijkof. As I go deeper into more functionalities, I will definitely reference your work.
I wanted to document it for a number of reasons:

1. I forget stuff myself. My day job is doing MVC 4 work. Then I switch to OC. I forget stuff--maybe age is catching up :-).
2. To help other folks get started with OC. OC is great, but the learning curve is high. So if we have a basic step-by-step procedure that people can follow, we might get more people to use OC.
   Later, I will put more info on why stuff is done and why stuff happens. For now, there is no explanation, just a process/steps. Maybe, I will ask for your help in this area because I am very new to OC.
   Thanks.

[larremp]

Hi @psijkof , can you please help me? How do I tell OC that my liquid page will use a different Layout.
What I did was:

1. Create a site using TheBlogTheme
2. Added a new Liquid Page.
3. I tried creating a template for my Liquid Page "Content__LiquidPage" and put {% layout "LayoutLandingPage" %} to tell OC to use a different layout, but it doesn't work.

Thanks for your help.

[larremp]

@psijkof , I got it working. I defined it on a file in the Views folder. I thought I should also work on the template. Thanks.

[sebastienros]

I am closing this issue as it has been taken care of by @psijkof and the repository is linked.

The idea is that it can't become a Core template as it's much a set of patterns to show how to do things, than a reusable final site targeting a specific audience. I'd love to see it evolving into a blog post (or a series of posts) explaining how it was built and what solutions were used for each problem.