Orchard CMS Theme Development Tutorial For Beginners

Learn The Basics of Theme Development in Orchard using Twitter Bootstrap, Shapes, Shape Tracing, Url Alternates, CodGen
4.4 (43 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,399 students enrolled
Free
Start Learning Now
  • Lectures 48
  • Length 4 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2014 English

Course 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!

What are the 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

What am I going to get from this course?

  • 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

What is the target audience?

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction & Setup
04: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 it
03:27
01:20
Modules for Theme Development in Orchard CMS

Module Name : Orchard.DesignerTools

Contains designer tools to ease the Themes development process

Feature Names :
  1. Shape Tracing - Displays all currently displayed shapes and some information to customize them
  2. Url Alternates - Adds shape alternates for specific urls
  3. 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
03: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

03: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.

Section 2: Getting Started : Orchard CMS Theme Development
03: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.

01: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-strings
03:05
03: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 Feature
10:29
Section 3: Shapes : Overriding Core Shape Templates
07: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 Shape
11:35
Branding Shape
01:12
BadgeOfHonor Shape
01:27
Menu Shape
02:39
MenuItem , MenuItemLink Shape
05:33
Message Shape
05:11
Breadcrumb Shape
02:55
Not Found Shape
03:19
User Shape
06:04
Metas Shape
05:11
Section 4: Login, Registration, Change Password, Lost Password, Challenge Email
LogOn Shape
09:16
Register & RegistrationPending Shape
07:09
ChangePassword & ChangePasswordSuccess Shape
03:58
LostPassword & RequestLostPassword Shape
04:02
Challenge Email - Sent, Fail, Success
03:56
Section 5: Widgets : Widget Wrapper & Overriding
Widget Wrapper & Overriding Widgets
06:50
Section 6: Parts : Overriding Part Templates in Orchard
Overriding Part Template : Title Part
06:40
Overriding Common Metadata Part
06:46
Overriding Common Body Part
04:51
Overriding Blog Archive, Post List & Recent Post Parts
07:17
Overriding Comment and Comment Form Part
09:43
Overriding EditorTemplates for Parts - Comment Part
08:52
Overriding Search & Search Form Part
09:59
Section 7: Custom Forms : Overriding & Styling
Creating a Form using CustomForms & Applying Styling
07:03
Section 8: Projections : Styling Lists created using Queries & Projections
Styling List created using Queries & Projections
03:47
Section 9: Placement.info : Placement of Shapes
Placement.info : shape name, zone & weight, matching
12:03
Section 10: Theme Packaging
Creating Theme.nupkg Nuget Package
02:10
Section 11: Managing Content using Markdown
Managing Content and Blogging using Markdown
04:07
Section 12: Download FIles
Download OrchardBS Theme Package
IFrame
Section 13: DotNest - The Saas Provide for Orchard CMS
DotNest - The SaaS Provider for Orchard CMS
Article
DotNest Intro
02:37
Dotnest Tenant Dashboard Area Overiew
02:45
Overriding Base Theme Using Theme Override
02:51
Styling a Tenant with Empty Theme using Theme Override
12:12
Styling Dotnest Tenant Using Media Theme
10:24
Section 14: Summary
Summary
03:18
Let's Stay Connected
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Abhishek Luv, ASP.NET MVC Freelance Trainer

Abhishek Luv is currently a Freelance ASPNET MVC Trainer and provides training services to training companies, corporate's and institutes all over India and also on individual basis for students and freshers in Mumbai.

Abhishek Luv was a ASPNET MVC Freelance Consultant developing web applications using ASP.NET MVC, Entity Framework, Bootstrap & Azure.

Abhishek Luv has been developing and designing websites and web applications for the last 3 years. During these years Abhishek has been involved in technologies such as C#, ASPNET MVC, Visual Studio, and Entity Framework and now is mostly working on the Microsoft stack.

In his work so far, Abhishek has designed, developed and deployed software and products using Microsoft Technologies and worked with people from countries like Canada, India, Switzerland, United Kingdom, among others.


Instructor Biography

Orchard Beginner, Orchard CMS Recipes, Theme Development, Workflows Tutorials

Are you confused, frustrated or intimidated about how to begin or get started with Orchard? Have no fear Orchard Beginner is here.

Orchard Beginner is created with the aim to provide users and developers to have a Beginner's Guide to learn the ins and outs of Orchard.

Ready to start learning?
Start Learning Now