How are navigation buttons intended to be themed?

Topics: Customizing Orchard
Jun 3, 2011 at 1:08 PM
Edited Jun 3, 2011 at 1:12 PM

I'd like to create my own theme based on a sliced up PSD(Photoshop) from a designer. I have all the images I'd like to use in various areas (banner, header, navigation, and below that a two column layout for content, and finally a footer.

Can/should this be done completely in the CSS of a newly created theme? Should this be done by reworking the source to generate new shapes? I understand layouts and zones can be customized, but should it be as easy as styling them with background-image: url(/images/myimage.png) or is there more to it? Most of the documentation describes zones as nothing more than a place to put a widget--should I create widgets for each zone with the appropriate CSS?

I'm using Orchard 1.1.30 (experimenting with both source and WPI install)

Thanks in advance!

Coordinator
Jun 3, 2011 at 7:45 PM

It's pretty hard to extrapolate the specifics of what you're trying to do from that description. The only advice I can really give from this is that CSS best practices should be applied when building an Orchard theme.

Jun 3, 2011 at 7:55 PM

Sorry for the vagueness--I guess I'm looking for some better documentation on how to create a theme for from a raw design. I can't find any good examples of creating a theme from scratch. I think one of my main concerns (or points of utter confusion) is how to create images for navigation buttons that will be added dynamically based on new pages added to the navigation menu from within the Orchard administration.

Coordinator
Jun 3, 2011 at 8:11 PM

You would probably build a layout.cshtml template first, with static HTML+CSS. Best practices for this are nothing specific to Orchard.

Then you'd go in there and add the code to define zones.

Finally, you'd override some specific templates as needed (Shape Tracing is your friend).

Does this help?

Jun 3, 2011 at 8:12 PM

From my experience of building a couple of themes, it's best to start from TheThemeMachine rather than build your own from scratch. There are a lot of things it gives you that you'll end up doing yourself a much harder way, and it really is flexible enough to accommodate most site layouts you could wish for. There are a lot of classes applied on the page that you could use already; e.g. each zone has a unique class that's automatically applied, such as zone-aside-first for the AsideFirst zone. If you take a look around the source code of a page you'll start to see how things fit.

Dec 2, 2011 at 9:23 AM

Hi randompete i am new to orchard and a also was looking to do the same things that u want to do. i have install the source code of orchard and pen it in a VS. Now i am looking for source code of Page and also the classes used by each zone. such as zone-aside-first for the AsideFirst zone. Can u help me to locate these files in a project?

Regards;

Taimoor

Dec 2, 2011 at 3:53 PM
Taimoor wrote:

Hi randompete i am new to orchard and a also was looking to do the same things that u want to do. i have install the source code of orchard and pen it in a VS. Now i am looking for source code of Page and also the classes used by each zone. such as zone-aside-first for the AsideFirst zone. Can u help me to locate these files in a project?

 

The main one is Layout.cshtml which you can find in Themes/TheThemeMachine/Views.

Coordinator
Dec 2, 2011 at 5:19 PM
Be sure to try shape tracing, which is a great way to discover and understand templates.
For zones specifically they are by default rendered by a shape method in CoreShapes but can be overridden in a template. But the definition of the zone is in layout, yes.

Sent from my TI-99/4A

From: randompete
Sent: 12/2/2011 8:54 AM
To: Bertrand Le Roy
Subject: Re: How are navigation buttons intended to be themed? [orchard:260078]

From: randompete

Taimoor wrote:

Hi randompete i am new to orchard and a also was looking to do the same things that u want to do. i have install the source code of orchard and pen it in a VS. Now i am looking for source code of Page and also the classes used by each zone. such as zone-aside-first for the AsideFirst zone. Can u help me to locate these files in a project?

The main one is Layout.cshtml which you can find in Themes/TheThemeMachine/Views.