best tutorial for creating a theme from scratch

Topics: Writing themes
Sep 6, 2011 at 8:27 AM

Just wondering if there's a tutorial that shows you how to create a theme from scratch? Specifically, how you set up a custom layout.cshtml and placement.info file?

I've seen the video that someone uploaded showing how to tweak an existing theme, but i'd like to know how to create a fully customized one. Anyone know of a good tutorial for doing so?

 

thanks

Sep 6, 2011 at 1:19 PM

I don't know if there is a tutorial like that out there yet, although I don't know how necessary it is. Creating a theme is pretty simple. All you really need to start is the layout.cshtml file and the Theme.txt file. You can copy the layout.cshtml from the ThemeMachine, or any other theme, or just refer to it as you create your own from scratch. There are really only two lines of code that you'll probably want to copy, although technically even these aren't necessary:

Style.Include("site.css");
Func<dynamic, dynamic> Zone = x => Display(x); // Zone as an alias for Display to help make it obvious when we're displaying zones

The first would be to include a stylesheet called "site.css" from a Styles folder in your theme. This isn't required, but I'm assuming you'll want a base stylesheet for your theme (you don't have to call it site.css however). And the second line of code is just a helper, which as the comment says is just to make it more obvious in your layout where you're declaring the zones. Just make sure the zone names listed in your Theme.txt file match the names you use in layout.cshtml, and you're good to go.

FYI, I'll soon (hopefully within the next week) be publishing an introductory Orchard course on Pluralsight, which doesn't cover creating a theme from scratch but which does go over some different options for how to customize a theme.

Sep 20, 2011 at 6:58 PM

I went through the 'customizing a theme' stuff and found stuff about creating one based on say 'theThemeMachine' but my 'orchard.exe' doens't know what 'codegen' is and I'm using the latest install.  so how then to I create one?  now what about creating the '.nupkg' file?  how do I create a theme based on another theme and create a new nupkg file so I can upload it to my azure orchard site?

Coordinator
Sep 20, 2011 at 7:10 PM

Your command line doesn't know this command because you didn't enable the code generation feature.

Sep 20, 2011 at 7:12 PM

Codegen is a feature exposed by the CodeGeneration module. So first you need to enable that, either through the dashboard, or at the orchard command line (it's something like 'feature enable CodeGeneration' - not sure if that's exactly right). After that's enabled you can use the codegen command to generate a module or theme.

To create the package, you use (for example): 'package create YourThemeName C:\Temp' where YourThemeName is (obviously) the name of your theme and C:\Temp is the path where you want the nupkg file created.

Sep 20, 2011 at 7:13 PM

it should say that in the documentation article on creating a custom theme.  it wasn't clear to me. 

Coordinator
Sep 20, 2011 at 7:17 PM

OK, can you please file a bug and we'll update the document? Or update it if you feel like it :)

Sep 20, 2011 at 9:38 PM

http://www.youtube.com/watch?v=rk1iJJJ9Itg

I found that video useful as far as modifying an existing theme goes.