Dual themes site

[changwuf31]

Hello Everyone,

Just found out and installed process wire.

I'm wondering what is the best way to create a site that serve two purpose.

1. As a normal responsive site

2. As a touch screen kiosk site.

Any help appreciated

[kongondo]

Changwuf31, welcome to PW and the forums. PW does not output any markup. If you know your CSS and HTML, you can easily create a responsive, etc site. PW does not get in your way. To get most of the system, I suggest you start with these tutorials: http://processwire.com/docs/tutorials/simple-website-tutorials/

[Joss]

HI changwuf31

As kongondo says, ProcessWire leaves not only the markup to you but also the way you structure the site. That means all the tricks that are available to the static website developer are available to the ProcessWire developer, without having to try and convert it or bend it to a particular way of doing things.

I recommend that you not only read the ProcessWire tutorial linked to above, but also the one on how to install a CSS Framework http://processwire.com/docs/tutorials/installing-a-css-framework/ 

You might also want to read up about device detection and so on. Basically, anything you could do with a static site, you can do with PW without a learning curve.

Isn't that nice?

[netcarver]

@changwuf31
 

I'm working on a touch screen club check-in kiosk at the moment. It's a fusion of Bootstrap 3 and uses the just-released MarkupCrossfade module to handle a full-screen background crossfaded slideshow where each slide is simply a page in ProcessWire. Because it's a kiosk I have control of the browser being used so I don't have to worry about cross-the-board browser compatibility.

[changwuf31]

Thank you guys for the warm welcome

Maybe I'll rephrase the question.

What I'm looking for is actually, a way to serve two site (each with their own theme), but the database is the same.

The kiosk will only be accessed via intranet, and the responsive site will be on public network.

I'm looking for a way to share the code as much as possible, but I'd like different theme for the intranet and the responsive site.

@netcarver, nice module. Will definitely check it out later

[netcarver]

I'd probably take a shot at this by assigning the kiosk a fixed IP address and then adding a check to the top of each template file that looked at the $_SERVER['REMOTE_ADDR'] variable and compared it with the known kiosk IP.  A match should be coming from your kiosk so you could then serve content (eg. different style sheets) just for that machine.

[DaveP]

Given that the kiosk browser won't have an address bar, you could use a GET query string (like example.com/?kiosk=true) and use that to decide which template to show. That way, you wouldn't be relying on IP addresses and if anyone did attach that parameter in their regular browser, they would just get the kiosk version.

[changwuf31]

@netcarver, @davep: Thanks for the input, guys.

Now, after trying both the tutorial suggested by @kongondo and @joss,

my idea is that I'd like to serve kiosk site with "site/templates/kiosk",

and the responsive site with "site/templates/web".

Any idea on how I can achive this ?

[Joss]

Template files, by default, need to be in the templates directory, not a subdirectory. But that does not mean you cannot include files from other directories.

I don't know what design differences you will make, but assuming that you have detected what device you are on (kiosk or other would be the best starting point), then just serve up the portion of the template that you need.

You could either use php to include another page (which could be in any directory for your organisational purposes - there is no technical reason for it to be anywhere particular) or just divide the page up and serve up only a portion.

For simplicity, I would probably go for the first.

So, for the home page, for instance, you have a template called home.php

The only code in this template would effectively say

<?php

// some detection stuff resulting in getting a $kiosk value -  I have no idea what!

 if($kiosk){ 
   include(./kiosk/home.inc);
 } else {
   include(./web/home.inc);

All your templates would basically have the same code. 

The .inc files would then contain everything your normal template file would.

Something like that.

[changwuf31]

@Joss, Thanks a lot, that will work.