This topic targets, and was tested with, the Orchard 1.8 release.
This walkthrough provides a glimpse of the features that Orchard has to offer, provided as a step-by-step guide. If this is your first time using Orchard, this document is for you!
This topic assumes that you have already installed Orchard and set up your website. If you haven't, follow the instructions in Installing Orchard.
Changing The Layout Of The Home Page
Out of the box, Orchard applies a theme to your website known as the "Theme Machine". The Theme Machine includes CSS styles and a layout. Orchard allows you to selectively include or exclude portions (zones) of the layout on each page of your website. By default, the zones highlighted in blue are enabled on the home page.
The Navigation zone contains a menu with a single tab, Home. The TripelFirst, TripleSecond and TripleThird zones at the bottom of the page are populated with dummy text in the First Leader Aside, Second Leader Aside and Third Leader Aside paragraphs.
In addition to zones, every page has a central region (In this case, the text from "Welcome to Orchard" to "Thank you for using Orchard") which, for this tutorial, will be referred to as the Body of the page.
Although the Theme Machine has many possible zones defined, on a given page the only zones visible will be zones that have had widgets added to them (you can learn more about widgets here). The Navigation, TripelFirst, TripelSecond and TripelThird zones are visible on the home page because they contain widgets.
1) Select Widgets from the Dashboard.
The Widgets management page opens with the Default layer selected. Any zone that is visible in the Default layer will appear on all pages. Therefore, the Navigation zone is visible on all web pages and has a Main Menu widget. The Main Menu widget is annotated in green because it has been added to a zone in the current layer.
2) Select the HomePage layer to see which zones are visible for the home page.
Widgets which have been added to zones in the selected layer will be annotated in green (FirstLeaderAside, SecondLeaderAside and ThirdLeaderAside). Widgets which have been added to zones in other layers will be annotated in gray (Main Menu).
The TripelFirst, TripelSecond, and TripelThird zones on the home page have widgets in them and are visible. Removing all of the widgets in a zone will make the zone invisible.
3) Select Remove for the Third Leader Aside widget.
The TripelThird zone will no longer be visible on the home page.
4) Select Add for the TripelThird zone to add a widget to the zone.
5) Select the HTML Widget to add this type of widget to the TripelThird zone.
6) Enter a title for your widget and some content.
7) Save the new widget.
8) Select Your Site in the upper-left side of the Dashboard to view the modified home page with the new TripelThird zone.
Editing The Content Of The Home Page
Orchard provides a feature that makes it easy for you to edit the content in a zone or the page body. To turn on this feature you must enable the Content Control Wrapper and Widget Control Wrapper modules
1) Select Modules on the Dashboard.
2) Enable Content Control Wrapper
3) Enable Widget Control Wrapper
Once these modules are enabled, you can edit the contents of an individual zone by clicking the Edit link (at the top right) in the zone.
4) Select the Edit link for the TripelFirst zone of the home page.
5) Change the title, and optionally, change or remove the existing body text for the zone.
6) Select Insert Media Item.
7) Click Create Folder.
8) Name the folder myImages and click Save.
9) Click the folder myImages, and then click Import
10) Click My Computer and then click in the central zone to browse for an image. If you prefer you can drop your image into the central zone.
11) Close the dialog.
12) Click the image and click Select.
13) If needed, resize the image using the handlers so that later it fits nicely into the zone. Then click Save to save the changes to the widget.
The home page is automatically displayed with the updated zone.
14) Select the Edit link for the Body of the page.
Orchard will display the Edit Page screen.
Note: The Edit Page screen can also be reached from the Dashboard by selecting Content on the Dashboard and then selecting Edit for the page you are interested in.
15) Enter some text for the content.
16) Select Publish Now at the bottom of the page to make the updates to the page visible immediately.
Adding a New Page to Your Site
1) In the Orchard Dashboard, under New, select Page.
2) Enter a title for the page. When you enter a title for the page and save it (for example, "Download"), the permalink (URL) for the page will be filled in automatically ("download"). You can edit this link if you prefer a different URL.
3) Enter some text for the content page body.
4) In the Tags field, add comma-separated tags such as "download" and "Orchard" so that you can search and filter using those tags later.
5) Check Show on main menu and enter the menu text ("Downloads") to use in the site's main menu.
6) Select Publish Now to make the updates to the page visible immediately. You can also save the page as a draft (to edit later before publishing), or you can choose to publish the page at a specific date and time.
7) Select Your Site in the upper-left side of the Dashboard to view the modified home page with the new menu. Clik Downloads and you will see your new page.
Changing The Layout Of Your Page
To change the layout of your new page without affecting the rest of the site you can create a new layer, that will be applied only to the Downloads page. Then you can place some widgets on that layer and they will be visible only in the Downloads page.
1) Go to the Dashboard and select Widgets. Then click add a new layer to add a new layer for this page which will allow you to customize the layout for the new page at a later point in time.
2) Write a name for the layer, a description, and a layer rule: url"~/download". This will instruct the Orchard System to show the widgets in this layer only when the url of the browser is pointing to "download". Select Save.
3) To check that your layer rule is working you can add a widget to it. Ensure that Current Layer is Download. Click Add in AsideFirst.
4) Add a new Html Widget.
5) Write a title and a body for it. Save it.
6) Select Your Site in the upper-left side of the Dashboard. Navigate to Downloads. You should see the custom layout.
Selecting A Theme
To customize the look and feel of the Orchard website you change the theme.
1) On the Orchard Dashboard, select Themes. The currently installed themes are listed.
2) To download new themes, select the Gallery tab.
3) Search for Contoso to find the Contoso Theme. Install the Contoso theme.
4) Select the Installed tab.
After a theme has been installed it appears as an option in the Available section on the Installed tab. In the following illustration, the Contoso theme has been installed so it appears in the Available section. (The current theme for the site is The Theme Machine.)
5) To see how your site will look with an available them, select Preview for the theme. To apply an available theme to your site select Set Current for the theme. For more details, see Previewing and Applying a Theme and Installing Themes.
Extending Orchard With Modules And Features
A key feature of Orchard is the ability to add new features in order to extend the functionality of your site. The primary way to do this is by installing modules. You can think of a module as a package of files (in a .zip folder) that can be installed on your site. To view the modules that are included with Orchard, in the Orchard Dashboard, click Modules and then click the Installed tab in the Modules screen.
Individual modules can expose features that can be independently enabled or disabled. To view the features exposed by the built-in modules in Orchard, click the Features tab in the Modules screen.
Each feature has an Enable or Disable link (depending on its current state), as well as an optional list of dependencies that must also be enabled for a specific feature. The documentation throughout this site describes the variety of features in Orchard and how you can use them to customize your site's user interface and behavior.
- Updates for Orchard 1.8
- 4-22-14: Media selection is different now, updated that part. Adding a widget layer is not suggested anymore when adding a new page, updated that part. Link to registering additional gallery feeds was not working. Updated several screenshots. Added capitalization to section headers.
- Updates for Orchard 1.6
- 11-25-12: Added section describing how to change the layout for a page by enabling/disabling zones. Removed section on Creating a Blog (which already has it's own topic).
- Updates for Orchard 1.1
- 3-14-11: Updated screen shots showing updated menus, and updated dashboard and settings options.