Set Silverstripe website as Live version outside of CMS - silverstripe

Question

We have a number of clients who get confused when they use the Silverstripe CMS and then their live website displays the Draft version.
We've setup "Better Navigator" that displays whether a site is in Draft or Live but the clients still get confused (and in some view the Better Navigator button is obscured).
Ideally if the live website is being viewed outside of the CMS we want it to only display the "Live" version.
Is that possible?

Answer 1

Instead of forcing the site to always display the published version, we can add some draft only CSS to make it much more obvious to the user that they are viewing the draft version.
Create a draft.css file, which will alter the site styling on the draft version. In this example I am changing the background of the body tag to display a tiled image with the words "Draft" on it.
mysite/css/draft.css
body {
background-image: url(../images/draft-background.png);
}
mysite/images/draft-background.png
In our Page_Controller init function we load the draft.css file when the current stage is set to Stage:
Page_Controller
class Page_Controller extends ContentController
{
public function init()
{
parent::init();
// ...
if ($this->current_stage() == 'Stage') {
Requirements::css('mysite/css/draft.css');
}
}
// ...
}
The end result looks something like this:
This is just one of example of what we can do with the draft only css. Alternatively we could replace the site logo, or display a warning bar at the top of page content.
Here is some alternate css to display the above draft-background.png above all the site content instead of a background image of the body tag:
body:after {
background-image: url(../images/draft-background.png);
content: "";
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000;
pointer-events: none;
opacity: 0.25;
}
Here is some example css to display a warning bar at the top of each page:
body:after {
content: "You are currently viewing a draft version of this page";
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
pointer-events: none;
opacity: 0.75;
text-align: center;
background: #F7CA18;
color: #000000;
padding: 20px;
}
body {
margin-top: 60px;
}