Welcome to the Protogrid Developer Wiki. A place to gather all the documentation and tips&tricks regarding Protogrid.

Protogrid Wiki Specifics

The look/UI is generated using a fairly modified version of the vector Template for DokuWiki (see also the github page). MSC made this template (pgrid-vector) somewhat responsive.

The standard DokuWiki template is more advanced, and actually fully responsive – looks a bit more modern, too…

lib/tpl/pgrid-vector/user/screen.css
/*
   Place for user defined CSS rules (screen media) - this file can safely be
   preserved when updating. See README for details.
 
   Note: All example files are delivered with the ".dist" extensions to make
         sure your changes do not get overwritten when updating the template.
         Just remove the ".dist" extension to use them.
*/
 
body {
  height: auto;
  font-family: "Open Sans", sans-serif;
}
 
#head-base,
#page-base {
  display: none;
}
 
#bodyContent {
  font-size: 0.9em;
}
 
.code.javascript .kw1, .code.javascript .kw8 {
  color: hsla(60, 100%, 30%, 1);
}
 
.code.javascript .br0, .code.javascript .sy0 {
  color: hsla(120, 50%, 45%, 1);
}
 
div#head {
  position: relative;
  margin-top: 6px;
  padding-left: 10em;
  line-height: 0.8em;
  /* padding-bottom: 6px; */
}
 
#left-navigation {
  position: relative;
  display: inline-block;
  top: 0;
  left: 0;
}
 
#right-navigation {
  display: inline-block;
  float: none;
  margin-top: 0;
  position: relative;
}
 
#p-personal {
  position: relative;
  display: block;
  float: right;
  margin-left: 10px;
  font-size: 0.9em;
}
 
div.vectorTabs li a {
  height: 2.2em;
  padding-bottom: 0.2em;
}
 
#p-logo a {
  background-size: contain;
}
 
/* increase width of toc on larger screens */
 
div.dokuwiki #dw__toc {
  width: 24vw;
  min-width: 200px;
}
 
/* wrap long headers w/o whitespaces in toc */
 
ul.toc {
  word-wrap: break-word;
}
 
/* Give sidebar more space. Default: 10em. */
 
div#content,
div#footer {
  margin-left: 12em;
}
 
div#head {
  padding-left: 12em;
}
 
div#panel,
div#p-logo,
div#p-logo a {
  width: 12em;
}
 
.catlinks {
  font-size: 75%;
  border: 1px solid #ddd;
}
 
.bchead,
a.breadcrumbs {
  opacity: 0.6;
}
a.breadcrumbs {
  margin: 0 2px;
}
a.breadcrumbs:hover {
  opacity: 1;
}
 
/* centered footer (instead of left aligned) */
#footer #footer-info li,
#footer #footer-info .dokuwiki,
#footer #footer-info .license,
#footer #footer-places li,
#footer #footer-places .dokuwiki {
  text-align: center !important;
}
#footer #footer-places li {
  float: none !important;
}
/* highlight footer buttons on hover */
#footer #footer-places a img {
  opacity: 0.25;
  border: 0;
}
#footer #footer-places a:hover img {
  opacity: 1;
}
 
/* adjust the appearance of the list from nspages plugin */
div.plugin_nspages p.catpageheadline {
  font-size: 1.333em;
  text-decoration: none;
  margin-bottom: 0;
}
 
/* remove the extra space below the list from nspages */
div.plugin_nspages br.catpageeofidx {
  display: none;
}
 
/* larger toolbar buttons 32px instead of 16px */
div.dokuwiki button.toolbutton {
  height: 32px;
  width: 32px;
  border-radius: 4px;
}
 
/* no shading of buttons */
html > body button.toolbutton {
  background: none;
}
 
/* highlight hover on buttons */
button.toolbutton:hover {
  background: #add8e6;
  background: hsl(195, 53%, 79%);
}
 
/* larger picker for special chars */
div.picker {
  width: 360px;
}
 
/* prettify the picker a bit and include a large preview */
button.pickerbutton {
  font-size: 130%;
}
 
div.picker button.pickerbutton:hover,
button.pickerbutton:hover {
  background: hsl(195, 53%, 79%);
}
 
/* make certain buttons look more like modern buttons */
.qq-upload-button, .btn {
  background-color: #3fb618;
  background-image: none;
  border-color: #3fb618;
  border-radius: 0;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: normal;
  /* height: 43px; */
  /* line-height: 6px; */
  margin-bottom: 0;
  outline-color: #fff;
  outline-style: none;
  outline-width: 0;
  padding: 8px;
  text-align: center;
  text-decoration-color: #fff;
  text-decoration-line: none;
  text-decoration-style: solid;
  text-size-adjust: 100%;
  touch-action: manipulation;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 
.qq-upload-button:hover, .btn:hover {
  color: #ffffff;
  background-color: #2f8912;
  border-color: #2c8011;
}
 
div.picker button.pickerbutton:hover::after,
button.pickerbutton:hover::after {
  content: attr(title);
  display: block;
  position: absolute;
  top: -1.67em;
  left: 3em;
  font-size: 3em;
  background: #fff;
  border: 3px solid #eee;
  padding: 0.2em;
  border-radius: 10px;
  min-width: 2em;
}
 
/* highlight the file that has just been uploaded in the media manager */
span.qq-upload-file {
  font-size: 1.2em;
  padding: .2em;
  border: 2px dotted #8b0000;
  border-right: none;
  border-left: none;
}
 
span.qq-upload-file::before {
  content: url("/lib/images/smileys/ghemojis/arrow_right.png");
  position: absolute;
  left: -.33em;
}
Print/export