Guidance needed for copying theme

JoshTango commented 4 years ago

We need guidance for generating a new theme using the templates and then copying over one of the theme in the Orchard Core Source.

I have tried this and it failed.

dodyg commented 4 years ago

Create a new project with this configuration

<Project Sdk="Microsoft.NET.Sdk.Razor">
  <PropertyGroup>
    <TargetFramework>netcoreapp3.0</TargetFramework>
    <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="OrchardCore.Theme.Targets" Version="1.0.0-rc1-11022" />
    <PackageReference Include="OrchardCore.DisplayManagement" Version="1.0.0-rc1-11022" />
    <PackageReference Include="OrchardCore.ContentManagement" Version="1.0.0-rc1-11022" />
  </ItemGroup>
  <ItemGroup>
    <FrameworkReference Include="Microsoft.AspNetCore.App" />
  </ItemGroup>
</Project>

dodyg commented 4 years ago

Structure the project this way

theme-1

You can ignore the various less files. They are optional.
The menu related files are optional.
You just need _ViewImports.cshtml and Layout.liquid at the Views.

dodyg commented 4 years ago

For Manifest.cs,

using OrchardCore.DisplayManagement.Manifest;

[assembly: Theme(
    Name = "My Theme",
    Author = "Enter your name",
    Website = "https://www.mytheme.com",
    Version = "0.0.1",
    Description = "My first theme"
)]

dodyg commented 4 years ago

For Package.Build.props,

<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">

  <!-- 
    This file is included in the Nuget packages as "build\$(TargetFramework)\$(AssemblyName).props" file.
    It contains the logic to be referenced as a module by the main application.
  -->
  <ItemGroup>
    <ModulePackageNames Include="$(MSBuildThisFileName)" />
  </ItemGroup>
</Project>

dodyg commented 4 years ago

For _ViewImports.cshtml,

@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@

@inherits OrchardCore.DisplayManagement.Razor.RazorPage<TModel>
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, OrchardCore.DisplayManagement
@addTagHelper *, OrchardCore.ResourceManagement
@addTagHelper *, OrchardCore.Menu

dodyg commented 4 years ago

For Layout.liquid,

<!DOCTYPE html>
<html lang="{{ Culture.Name }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{% page_title Site.SiteName, position: "before", separator: " - " %}</title>

    {% resources type: "Meta" %}
    {% if Culture.Dir == "rtl" %}
        <link rel="stylesheet" href="https://cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap.min.css" integrity="sha384-vus3nQHTD+5mpDiZ4rkEPlnkcyTP+49BhJ4wJeJunw06ZAp+wzzeBPUXr42fi8If" crossorigin="anonymous">
    {% else %}
        <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    {% endif %}

    {% style src:"~/YourThemePath.Theme.Bootstrap/css/theme.min.css", debug_src:"~/YourThemePath.Theme.Bootstrap/css/theme.min.css", append_version:"true" %}    

    {% resources type: "HeadLink" %}
    {% resources type: "Stylesheet" %}
    {% resources type: "HeadScript" %}
</head>
<body dir="{{ Culture.Dir }}">
    <header>
      {% render_section "Header", required: false %}
    </header>
    <nav class="navbar navbar-expand-lg" id="main_nav">
        <div class="container">
            <a class="navbar-brand js-scroll-trigger" href="{{ '~/#page-top' | href }}" title="{{ Site.SiteName }}"><img src="/media/your_logo.png" title="{{ "Your Logo Logo" | t }}" id="logo" /></a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                {{ "Menu" | t }} 
                <i class="fas fa-bars"></i>
            </button>
            {% shape "menu", alias: "alias:main-menu", cache_id: "main-menu", cache_tag: "alias:main-menu" %}
        </div>
    </nav>

    {% render_section "Slider", required: false %}

    <div class="container">
        {% render_body %}
    </div>

    <footer class="footer">    
    {% render_section "Footer", required: false %}
    </footer>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    {% resources type: "FootScript" %}
</body>
</html>

Anything with | t }} is just a localized string. You can remove them.

dodyg commented 4 years ago

Link this theme project with your Orchard Core project.
You will see your theme listed at the Admin section.

JoshTango commented 4 years ago

I generated a theme using the templates at the command line. I copied over the wwwroot, views, and recipie folder from the source control. I renmaed my theme in the manifest. This si all I did. I ran it and saw my theme in the admin section. I enabled it. Then when I went to my home page it failed on the home page.

JoshTango commented 4 years ago

You should copy the guidance you just gave into documentation for how to start a theme from scrath. I am looking for how to use the template and then copying over from source control.

JoshTango commented 4 years ago

This is the error I get:

An unhandled exception occurred while processing the request. InvalidOperationException: Could not find a resource of type 'script' named 'vendor-jquery' with version 'any. OrchardCore.ResourceManagement.ResourceManager.DoGetRequiredResources(string resourceType) in ResourceManager.cs, line 370

JoshTango commented 4 years ago

there is no _viewimports int he source, I wonder if there is a parent theme issue at play? is the regular bootstrap theme a parent? Does that play into things here?

deanmarcussen commented 4 years ago

You're missing the registration for the ResourceManifest.cs in the theme you're making's Startup.cs.

Copy the two files, startup, and resourcemanifiest, from whichever theme you're copying over to your new theme.

JoshTango commented 4 years ago

thank you that makes the theme work now, when I navigate to the home page I do not get the error anymore.

However not all of theme css is working, it appears to not style properly.

JoshTango commented 4 years ago

In fact it appears to be the layout part of the css is not working, the colors are working, its weird

JoshTango commented 4 years ago

just guessing but maybe its picking up the yellow from the agency theme css but not picking up the layout which is probably defined in the regular bootstrap theme, in other words the agency theme only includes the minimal modifications that differentiate it from the regular bootstrap?

JoshTango commented 4 years ago

umit could also be related to the minify extension I just used, it produced a bundleconfig.json, maybe I should remove that.

The bundleconfig.josn only says to include agency.css, that could be the problem

JoshTango commented 4 years ago

nope the bundelconfig was not the issue

the issue seems to be it is "hanging" and waiting for more style files to download which never do

JoshTango commented 4 years ago

ok found the problem, I was right,. I am getting 404 on all.css and boostrap-oc.css

JoshTango commented 4 years ago

ok solved it, I also had to run the new recipe in my new theme now all appears fine

hishamco commented 4 years ago

Thanks @dodyg for your explanation, it will be handy if you contributed to the docs if you have time

@JoshTango seems your problem is solved, so I will close this one

OrchardCMS / OrchardCore

Guidance needed for copying theme #4982