How To Put a Private Page On a Public Wiki-typ1

Posted by Whane The Whip on 15 Oct 2008 01:47, last edited by Helmuti_pdorf on 17 Jun 2013 12:52

Tags: private public

rating: +4+x

Hack Description:

This is a work-around to display private pages to staff members only within a public wikidot site.

This is my 3rd revision. Apologies to those that used the old code that resulted in broken sites. This code is clean, but you must follow the instructions carefully. This is recommended for users that are more familiar with the syntax and themes, though I've tried to make the instructions as clear as possible, even for less experienced users.

The most up-to-date version of this hack can be found at Whane's Wiki Lab: Private Pages in condensed form.

Overview

Lots of wikidot fans want to be able to include private staff pages within a public site. This is not possible using the default wiki syntax. Until now, users had two choices, a site that was 100% private, or a site that was 100% public. This hack lets you create pages within a public wiki that can be displayed to specific users only.

Essentially this works by creating a new private wiki, then creating a custom theme to strip away as many displayed elements as possible, then plugging that private page into your public wiki using iframe. Those with access to the private wiki will see the displayed page within the public wiki, those that only have access to the public wiki will see a landing page created by you that you can use to inform them the page is private. Since admins of private sites can manually add existing wikidot members, you can seamlessly integrate staff viewing permissions without requiring any extra leg work from your staff members.

Setup Instructions:

Note: These instructions assume that you already have a public wikidot site.

  1. Create a new private wiki.
  2. Within your new private wiki create a new category called "blank". To create a new category just create a new page that includes the category name, for example: "blank:hold" creates a new page "hold" in the new category "blank".
  3. Enter the private staff only content within the page that you just created.
  4. Using the ACP (admin control panel), create a custom theme building off of the "base" theme and enter the CSS code found at the end of this article. This code strips away all displayed elements except for the content you enter. Be sure to remove the navigation elements (nav:top, nav:side) when creating your custom theme.
  5. Now head back to the ACP and choose your new custom theme as the default theme for the "blank" category. You do this by clicking on the ACP > Appearance > Themes > Then click on the "Blank" category in the list of categories and under the part that reads "Choose a theme:" select the custom base theme that you just created. At this point you should have a very empty looking theme attached to the category that you named "blank".
  6. The next step is to create a landing page for those that don't have access to the private site. This it the page that will be displayed to anyone that does not have permission to view the page (I.E., those that have not been added as members to your private site). Under the ACP, navigate to the "Public or private" options and enter the name of your landing page, for example: "blank:landing"
  7. Now create the page you just referenced as your landing page and enter the message you wish to be displayed to any unauthorized members that access your private staff pages.

Important note regarding iframe

Be sure to remove all scrollbars using the style method, set width to 100%, and height to whatever figure you need to be able to display all information. Example:

[[iframe http://confidential.wikidot.com/blank:mysecretstaffpage style="border: 0px solid transparent; overflow: hidden" width="100%" height="1000" scrolling="no"]]

Implementation

Your private wiki is now setup and you are ready for the the final step: Using the wikidot iframe code, insert your newly created private page (blank:hold) somewhere in your public site. Now that the private site is set up, you can easily create new private pages and plug those pages into your public wikidot site too.

Sample

You can see working example of this hack by clicking the staff link found in the left navigation column. The page you see may not appear impressive; you just see a few lines of text explaining that the page is private. The private site I created to set up this hack is located at http://confidential.wikidot.com/ and since you are not a member, you will see the same message found in the staff page should you decide to visit it, but on a blank template. The main page of course is not displayed because it's a private site so the site defaults to my landing page at http://confidential.wikidot.com/blank:main.

So that's it. Using your imagination I'm sure that you can come up with other creative ways to use what I've shared (think menu's) ;-). Want multiple levels of permissions - then create multiple private wiki's.

Displaying Dynamic Content

If you want to display generated site data such as a list page using the list module then you must nest pages. To continue from the steps listed above:

  1. Enter the dynamic content on your hidden staff page on your public site.
  2. On your private wiki, create a blank page using iframe to display the content of your staff page from the public site.
  3. Return to your public site and create a new staff page using iframe to display the content of your other iframe page from your private wiki.

Does this seem redundant? We are putting an iframe inside of an iframe. The reason for this may seem confusing at first. But one of those staff pages is hidden, (I.E. not included within any list using the list page module.) The other staff page is linked to openly. In my case, I have a small staff link found in the left nav column, you can see it now. That leads to the staff page that is using an iframe. Basically, I'm sending the data to the private wiki, then back here. Seasoned wiki vets that have access to create or edit pages, or even post a message, could easily create a list page to find the hidden staff page. But most casual users wont know how to do this, much less understand the dynamics that went into this hack.

Code

WARNING: Be sure to apply this theme to a new category only, do not set it as the default theme or life will be very difficult for you on your private wiki. This theme will make your pages appear totally blank except for the content you include directly on the page, this includes the page options that appear for admins and site members near the bottom of each page. This is necessary in order to give your staff pages a seamless look, otherwise it will look like crap on your main public site (and we all want cool looking sites right?) You may want to include links to key pages within your staff page. Hint: Adding /edit/true/ to the end of any url will open the page in edit mode. Are you scared now?

#page-title{
    display: none;
}

#header {
  color: rgb(166,140,83);
  background-color: transparent;
  /*line-height: 1.25em;*/
  padding-top: 0em;
    height: 0em;
}

#header h2 span {
    display: none;
}

#header h1 a{
display: none;
}

#search-top-box{
display: none;
}

#login-status{
    display: none;
}

/* The entire left column */
#side-bar {
        background-color: transparent;    
        width: 0px;
    float: left;
    background-color: white;
    border-right: 0px solid white;
    border-bottom: 0px solid white;
    color: white;
    padding: 0px;
    margin:0;
}

#main-content {
  margin-left:0px;
  margin-right:0px;
  padding: 0px;
}

/* footer */ 

#footer{
    display:none 
}

#footer .options{
    float: right;
    font-size: 80%;
    padding: 1px 0;
}

#page-info{
    display: none;
}

#license-area {
    display:none
}

#footer {
    background-color: white;
    padding-top: 0px;
    padding-bottom: 0px;
    border-top: 0px solid white;
    color: white;
    text-align: left;
}

#footer a {
    display:none;
        color: white;
        text-decoration: none;
}
#footer a:hover {
    display:none;
        border-bottom: 0px;
        text-decoration: underline;
}

.page-options-bottom{
    display: none;

}
.page-options-bottom a{
    display: none;
}

That's it. Have fun. If you have specific questions, you should ask them here otherwise comment here. Thanks.


Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.