Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Orchard CMS Theme Development Tutorial For Beginners

Name: Orchard CMS Theme Development Tutorial For Beginners
Rating: 4.4 (57 reviews)

Learn The Basics of Theme Development in Orchard using Twitter Bootstrap, Shapes, Shape Tracing, Url Alternates, CodGen

Created byAbhishek Luv

Last updated 4/2016

English

English [Auto],

What you'll learn

Get Started with Orchard CMS Theme Development
How to use Orchard CMS Command-Line Scaffolding
How to create themes in Orchard CMS
What are Shapes and How to override Shapes in Orchard
What are Part Templates (Overriding Content Parts)
What are EditorTemplates (Overriding EditorTemplate for Content Parts)
How to override Widgets
Placement.info : Placing shapes in a specific zone with a weight
Placement.info : Matching(DisplayType, ContentType, Path)
Styling Forms created using Orchard.CustomForms

Course content

14 sections • 48 lectures • 4h 3m total length

Course Introduction4:09
HELLO WELCOME to this course on Orchard CMS Theme Development for Beginners.

Are you confused, frustrated or intimidated about how to begin or get started with Orchard CMS theme development.

How to create themes in orchard cms

How-to and Where-to learn the basic Orchard terminologies

If your answer to all of the above questions is Yes, then this course is for YOU!

Let’s GET STARTED!

Now, why would you want to join this course?

Theme Creation in orchard can get a little bit cumbersome without having some basic knowledge about certain orchard terminologies.

In this course you’ll learn the basic Orchard terminologies like Shapes, Shape Tracing, Part Templates, Editor Templates, Placement info file and many more..

This course starts right from the scratch where we download the orchard source code from codeplex and then use visual studio to create a theme and do the entire theme development learning throughout the duration of the course.

There are some pre-requisites for this course.

Basic knowledge of Orchard CMS is required,

Basic knowledge of C# ,

Basic knowledge of ASP.NET MVC,

Basic knowledge of Razor syntax,

Basic knowledge of Bootstrap UI Framework,

Basic knowledge of HTML and

last some interest and passion to learn orchard cms theme development.

Now, lets talk about the course agenda.

We begin with Orchard theme development setup. Then, we dive into the theme txt file and its importance within an orchard cms theme. Next we talk about shapes, shapes and shapes, because everything in orchard is about learning shapes. Shapes can be override within our themes. After that we talk about Part and Editor templates and how to override them. Towards the end of the course we talk about how to override widgets, how to style custom forms and projection lists, Placement info file which allows you to control the rendering of shapes in orchard and last we create a theme package file for our orchard theme which can be used directly on a production-ready orchard website or can be uploaded to the official orchard cms theme gallery website for other orchard fellow end-users.

Before you join this course I would like to introduce myself to you.

My name is Abhishek Luv and I’m from Mumbai, India. I’m an Orchard Dojo trainer and a contributor to the official orchard cms documentation website and I have created numerous courses and tutorial videos on orchard. I’m also the founder of Orchard Beginner. Now, orchard beginner is and will be the one-stop place where you can get started with orchard cms , but orchard beginner is still in its initial stage and it will build up pretty soon. And I’m also the founder of the orchard cms india community.

I hope that I have convinced you to join this course. If you need some more encouragement then I offer you a 50% discount for this course use the coupon code “YTThemes” and get 50%off for this course. Join Now.

Thank You!

What are the requirements?

Basic Knowledge of Orchard CMS

Microsoft Visual Studio 2012 or Higher

Msysgit is required for cloning the Orchard CMS Source Code Project

Basic Knowledge of ASP.NET MVC(Optional)

Basic Knowledge of Razor View Engine

Basic Knowledge of HTML & Twitter Bootstrap CSS Classes

What am I going to get from this course?

Over 47 lectures and 4 hours of content!

Get Started with Orchard CMS Theme Development

How to use Orchard CMS Command-Line Scaffolding

How to create themes in Orchard CMS

What are Shapes and How to override Shapes in Orchard

What are Part Templates (Overriding Content Parts)

What are EditorTemplates (Overriding EditorTemplate for Content Parts)

How to override Widgets

Placement.info : Placing shapes in a specific zone with a weight

Placement.info : Matching(DisplayType, ContentType, Path)

Styling Forms created using Orchard.CustomForms
Cloning Orchard Source Code Project using Git and Installing it3:27
Orchard.DesginerTools : Module for Theme Development1:20
Modules for Theme Development in Orchard CMS

Module Name : Orchard.DesignerTools

Contains designer tools to ease the Themes development process

Feature Names :

Shape Tracing - Displays all currently displayed shapes and some information to customize them

Url Alternates - Adds shape alternates for specific urls

Widget Alternates - Adds shape alternates for content types stereotyped as widgets, allowing to customize shapes by widget and zone

Module Dependencies

Orchard.jQuery
Orchard.Widgets

Enabling Shape Tracing , Url Alternates and Widget Alternates
Orchard.CodeGeneration : Command-Line Scaffolding3:16
Orchard.CodeGeneration Module

The Code Generation Module in Orchard CMS is used to create Orchard components like Modules, Themes, Pages and etc etc..

Enabling the Orchard.CodeGeneration Module

orchard> feature enable Orchard.CodeGeneration

Orchard CMS Theme Scaffolding

orchard> codegen theme ThemeName /CreateProject:true /IncludeInSolution:true

right-click on the theme ThemeName and click Include in Project

/CreateProject:true - To create the theme as a project

/IncludeInSolution:true - To include the newly created theme in the Orchard solution
Downloading & Installing Twitter Bootstrap3:39
Downloading Twitter Bootstrap

Download Twitter Bootstrap

Installing Twitter Bootstrap for our newly created theme in Orchard

Fonts will go inside the Content folder
Scripts will go inside the Scripts folder
.CSS files will go inside the Styles folder

Fxing fonts for Twitter Bootstrap

Replace ../fonts with ../Content/fonts. Do this for both the .css files bootstrap.css and bootstrap.min.css

You have successfully installed Twitter Bootstrap for your newly created theme in Orchard CMS.

Theme.txt, Theme.png & ThemeZonePreview.png3:48
Theme.txt Theme Manifest file in Orchard CMS

To be valid, a theme must have a manifest that describes it to the Orchard System. The manifest is a text file named Theme.txt that is found in the root folder of the theme.

Name: ThemeName Author: Abhishek Luv Description: My First Orchard CMS Theme Version: 1.8 Tags: MyTheme Website: www.abhishekluv.in Zones: Header, Navigation, Featured, BeforeMain, AsideFirst, Messages, BeforeContent, Content, AfterContent, AsideSecond, AfterMain, TripelFirst, TripelSecond, TripelThird, FooterQuadFirst, FooterQuadSecond, FooterQuadThird, Footer

The Zones provides a list of all the zone names that are going to be available for widgets throughout the theme's Layouts and Templates.

Theme.png : Preview of a theme

A Theme.png file should be included with all Orchard themes. This image should be at least 400x400 pixels and is meant to represent the theme in gallery or in the theme administration page.

Widget Zones Preview Image

Optionally, a preview image for the widget zones can be added to the theme. The image should be placed at the root of the theme and be called ThemeZonePreview.png and it should show the different zones and their names.

Web.config for Static Resources1:06

Web.config

A theme mainly contains a number of static resources, such as CSS style sheets, JS Files and images. To enable files to be served, each of the folders that contains static files such a style sheets,image, or JS code should contain a Web.config file that contains the following content :

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
    </staticContent>
    <handlers accessPolicy="Script,Read">
      <!--
      iis7 - for any request to a file exists on disk, return it via native http module.
      accessPolicy 'Script' is to allow for a managed 404 page.
      -->
      <add name="StaticFile" path="*" verb="*" modules="StaticFileModule" preCondition="integratedMode" 
      resourceType="File" requireAccess="Read" />
    </handlers>
  </system.webServer>
</configuration>

WorkContext, Model , Layout, T-strings3:05
Shapes and Overriding Shapes3:09
What are Shapes in Orchard?

A shape is a dynamic data model. The purpose of a shape is to replace the static view model of ASP.NET MVC by using a model that can be updated at run time—that is, by using a dynamic shape. You can think of shapes as the blobs of data that get handed to templates for rendering.

Shapes are dynamic data models that use shape templates to make the data visible to the user in the way you want. Shape templates are fragments of markup for rendering shapes. Examples of shapes include menus, menu items, content items, documents, and messages.

A shape is a data model object that derives from the Orchard.DisplayManagement.Shapes.Shape class. The Shape class is never instantiated. Instead, shapes are created at run time by a shape factory. The default shape factory is Orchard.DisplayManagement.Implementation.DefaultShapeFactory. The shapes created by the shape factory are dynamic objects.

Now we can override the core shapes by creating a .cshtml file with the same name in your theme.
Using Shape Tracing & Url Alternates Feature10:29

Document Wrapper7:30
Document and Layout Template in Orchard

The layout and document templates are special template types that define the structure of a web page. These templates are most often used in themes for laying out a web page. Each web page has a Layout shape (dynamic object) associated with it. The Layout shape defines the zones that are available to hold web page contents. The layout and document templates determine how the zones defined in the Layout shape will be laid out on the web page.

The layout template (Layout.cshtml) lays out the zones for the body of the web page. The document template (Document.cshtml) wraps around the layout template and lays out the remainder of the web page.
By default, the Layout shape defines three zones for use in the document template (Head, Body, and Tail) and one shape for the layout template (Content). In the document template, the Head zone is used to define the header of the web page, the Body zone is where the layout template is inserted, and the Tail zone is used for the footer of the web page.

The layout template contains a code block that adds subzones to the Header zone. It also refers to the following new zones: Messages, Sidebar, and Footer.
Layout Shape11:35
Branding Shape1:12
BadgeOfHonor Shape1:27
Menu Shape2:39
MenuItem , MenuItemLink Shape5:33
Message Shape5:11
Breadcrumb Shape2:55
Not Found Shape3:19
User Shape6:04
Metas Shape5:11

Requirements

Basic Knowledge of Orchard CMS
Microsoft Visual Studio 2013 Express/Pro/Ultimate or Community Edition
Msysgit is required for cloning the Orchard CMS Source Code Project
Basic Knowledge of ASP.NET MVC(Optional)
Basic Knowledge of Razor View Engine
Basic Knowledge of HTML & Twitter Bootstrap CSS Classes

Description

HELLO WELCOME to this course on Orchard CMS Theme Development for Beginners.

Are you confused, frustrated or intimidated about how to begin or get started with Orchard CMS theme development.

How to create themes in orchard cms

How-to and Where-to learn the basic Orchard terminologies

If your answer to all of the above questions is Yes, then this course is for YOU!

Let's GET STARTED!

Now, why would you want to join this course?

Theme Creation in orchard can get a little bit cumbersome without having some basic knowledge about certain orchard terminologies.
In this course you'll learn the basic Orchard terminologies like Shapes, Shape Tracing, Part Templates, Editor Templates, Placement info file and many more..
This course starts right from the scratch where we download the orchard source code from codeplex and then use visual studio to create a theme and do the entire theme development learning throughout the duration of the course.

There are some pre-requisites for this course.

Basic knowledge of Orchard CMS is required,
Basic knowledge of C# ,
Basic knowledge of ASP. NET MVC,
Basic knowledge of Razor syntax,
Basic knowledge of Bootstrap UI Framework,
Basic knowledge of HTML and
last some interest and passion to learn orchard cms theme development.

Now, lets talk about the course agenda.

We begin with Orchard theme development setup. Then, we dive into the theme txt file and its importance within an orchard cms theme. Next we talk about shapes, shapes and shapes, because everything in orchard is about learning shapes. Shapes can be override within our themes. After that we talk about Part and Editor templates and how to override them. Towards the end of the course we talk about how to override widgets, how to style custom forms and projection lists, Placement info file which allows you to control the rendering of shapes in orchard and last we create a theme package file for our orchard theme which can be used directly on a production-ready orchard website or can be uploaded to the official orchard cms theme gallery website for other orchard fellow end-users.

Before you join this course I would like to introduce myself to you.

My name is Abhishek Luv and I'm from Mumbai, India. I'm an Orchard Dojo trainer and a contributor to the official orchard cms documentation website and I have created numerous courses and tutorial videos on orchard. I'm also the founder of Orchard Beginner. Now, orchard beginner is and will be the one-stop place where you can get started with orchard cms , but orchard beginner is still in its initial stage and it will build up pretty soon. And I'm also the founder of the orchard cms india community.

Thank You!

Who this course is for:

Web Developers having interest in Orchard CMS Theme Development
Web Designers
Orchard Newbies

Orchard CMS Theme Development Tutorial For Beginners

What you'll learn

Explore related topics

Course content

Introduction & Setup5 lectures • 16min

What are the requirements?

What am I going to get from this course?

Modules for Theme Development in Orchard CMS

Module Name : Orchard.DesignerTools

Feature Names :

Module Dependencies

Enabling Shape Tracing , Url Alternates and Widget Alternates

Downloading Twitter Bootstrap

Installing Twitter Bootstrap for our newly created theme in Orchard

Fxing fonts for Twitter Bootstrap

Getting Started : Orchard CMS Theme Development5 lectures • 22min

Shapes : Overriding Core Shape Templates11 lectures • 53min

Login, Registration, Change Password, Lost Password, Challenge Email5 lectures • 28min

Widgets : Widget Wrapper & Overriding1 lecture • 7min

Parts : Overriding Part Templates in Orchard7 lectures • 54min

Custom Forms : Overriding & Styling1 lecture • 7min

Projections : Styling Lists created using Queries & Projections1 lecture • 4min

Placement.info : Placement of Shapes1 lecture • 12min

Theme Packaging1 lecture • 2min

Requirements

Description

Who this course is for: