Install Silverstripe website as Live version outside of CMS
We have a few clients who get confused when they use Silverstripe CMS and then their website displays a live version of the project.
We have installed " Best Navigator " which shows if the site is in Draft or Live, but clients are still confused (and in some they see that the "Best Navigator" button is closed).
Ideally, if the live site is viewed outside of the CMS, we want it to only display the "live" version.
Is it possible?
source to share
Rather than forcing the site to always display the published version, we can only add a draft CSS to make it much more obvious to the user to view the draft.
Create a file draft.css
that will change the style of the draft site. In this example, I change the background of the tag body
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 function, Page_Controller
init
we load the file draft.css
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 example of what we can do with a css-only project. Alternatively, we could replace the site logo or display a warning bar at the top of the page content.
Here are some alternative css to display above draft-background.png
, primarily the site content, instead of the background tag image body
:
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's an 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;
}
source to share