Considering Zones as the Obstacle - Part 1

Topics: Customizing Orchard, Writing themes
Dec 10, 2013 at 2:50 AM
Edited Dec 11, 2013 at 7:46 PM
It is clear that I was confused regarding my comments and I have removed this post.
Dec 10, 2013 at 3:21 AM
Edited Dec 11, 2013 at 7:46 PM
It is clear that I was confused regarding my comments and I have removed this post.
Coordinator
Dec 10, 2013 at 3:43 AM
I'm sorry, but I'm having real trouble following what you are trying to say. I'm suspecting that you may be asking for what Onestop.Layouts is doing.
Dec 10, 2013 at 4:46 AM
Edited Dec 11, 2013 at 7:46 PM
It is clear that I was confused regarding my comments and I have removed this post.
Coordinator
Dec 10, 2013 at 5:58 AM
Check it out, then.
Dec 11, 2013 at 6:07 PM
Edited Dec 12, 2013 at 7:43 AM
Wow what a wall of text.
Uhm... I don't know if I get you wrong but every zone that is listed in the theme.txt is displayed as a possible zone for widgets. If you don't display/implement the zone in your layout it just won't get rendered, but you can still mess with in in the backend.

If you choose to remove the zone from the theme.txt it won't be listed anymore in the backend (so it seems the content in it is "lost"). However, it's still there of course. If you add the zone again to your theme.txt all your "lost" content is back again. (So you could move it to another/new zone yay :D)

Aside from that you could also decide to implement a zone in your layout and don't list it in the backend which is nice for preventing your users to mess with certain zones.

I implemented several bootstrap based themes for frontend and admin from scratch and never had any issues with lost content or whatever.


However I still don't know if I get your point so I stop writing now ;)
Dec 11, 2013 at 8:12 PM
Xceno,

I'm glad to know that you have been able to make progress with the things that are obstacles to me.

May I ask you a few questions about your approach to using a pre-defined css library like Bootstrap or jQuery UI?
  1. Do you create your own Zone names or do you use the Theme Machine names from the Theme Machine layout.cshtml?
  2. Do you use any of the CSS styles that appear in the layout page of the Theme Machine or do all your layout styles come from your Bootstrap design?
  3. Are you creating Content Types or Widgets that represent standard Bootstrap components like a jumbotron or a button bar or an address or collapsible stack?
  4. Are you able to maintain a standard group of those content types and widgets in a module and install that module in different sites and then just add templates/views to style them differently as needed?
If so, can you give me a clue about how to get started?

Thanks,

Kimball
Dec 16, 2013 at 7:44 PM
Edited Dec 16, 2013 at 7:45 PM
Sure, and sorry for my late reply.

First, I found this on Stackoverflow today which may also be of interest to you:
http://stackoverflow.com/questions/20574419/can-we-change-the-zone-names-in-orchard-cms-themes

I try to answer your questions step-by-step ;)
  1. No, I almost never use the zones of TheThemeMachine as they just don't meet my needs most of the time. You don't have to use them anyway and can name them whatever you like. For example: In some Themes I even have nested zones. For this i created an alternate for a zone and just declared the nested ones inside there.
  2. Almost everything comes from Bootstrap. But lately I often found myself with picking just the stuff I need from Bootstrap, modify it to my needs and throw the rest away. And most of all tweak the horrible selectors.
  3. I implemented a ScrollSpy-Navigation like the one on the Bootstrap 2.3.2 page as a widget and some of my modules come along with "bootstrap-ready-components" as well. But I always make sure to have a nice fallback and do the styling inside my theme.
  4. See answer 3 ;)
In my opinion it's best to get a clear understanding of shapes first. This video helps a lot with that: http://www.youtube.com/watch?v=gKLjtCIs4GU
Then it's maybe a good thing to grab the orchard command-line, start creating a blank theme, copy a layout.cshtml and/or document.cshtml inside it and start playing around. I know this is all very vague but that's just the way I did it. What also helps a lot is digging around the source or playing with the ImmediateWindow in VS while debugging.

If you have any further questions let me know or just come to the IRC channel on freenode or the orchard room on JabbR.