Modifying the Look and Feel of Piggydb

Piggydb user Jerome J. Slote kindly shared his tips for modifying the existing look and feel of Piggydb, and moreover, an interesting way of extending the text formatting beyond the wiki markup set.

You may recall that I was looking for ways to insert invisible metadata into fragments: in particular, dates and tags that carry over from other systems when importing.

It turns out Piggydb has a “backdoor” capability that advanced users might find quite useful: text formatting in fragments, beyond the wiki markup set. This includes font changes, colors and highlighting, as well as the format I was seeking, invisibility.

The key is in the Stylish extension to Firefox, which superimposes style sheet specs that can be edited and toggled within the browser. I’d been using Stylish previously to customize Piggydb’s overall look and feel: serif font, eye-saving green background, a larger edit box, a smaller H1 display font in document view, and, most relevant to broader text formatting, the removal of internal tag highlighting in document view.

Style sheets, as you know, can alter the formatting of linking text according to the link’s target. So extended formatting can be accomplished by using dummy links whose format specs have been set up in the Stylish system.

Appended below is my Stylish sheet for Piggydb. You’ll notice a date format “dt”, a highlighting format “s1”, and an invisibility format “s0”. Within a fragment, any text that links to #dt, #s1 and #s0 is displayed in these formats if the style is toggled on. The hash mark makes for a more graceful response to an inadvertent click. Of course, these formatting links can be searched, so it’s easy to locate fragments with highlighted text, for example.

Piggydb’s integration with the browser and its extensions is a core advantage over standalone systems. Thanks for your vision, and for all you’ve done to make it real.

I think it is an amazing idea to add new formatting using a “href” attribute of a link. You can even add invisible metadata, which can be used for searching, to fragments.

The Stylish extension to Firefox:
https://addons.mozilla.org/ja/firefox/addon/stylish/

The Stylish extension is really cool and I think it’s also very useful for web designers and developers to test their styles.

And the following is the Jerome’s Stylish sheet for Piggydb:

@-moz-document url-prefix("http://localhost:8080/") {
  * {
    background-color: #9fa583 !important;
    font-family:"georgia" !important;
  }
  a:link {
    color: black  ! important;
    border: transparent !important;
  }
  a[href$='s1'] {
    text-decoration: none !important;
    background-color:#CDBE70 !important;
  }
  a[href$='s0'] {
    display: none !important;
  }
  a[href$='dt'] {
    text-decoration: none !important;
    font-weight:bold;
    font-style:italic;
    font-size:small;
  }
  a[href$='tag.htm?id=777'] {
    background-color:orange !important;
    border: red !important;
    font-variant:small-caps!important;
    color: #777 !important;
  }
  body, span,  div, td,  h1, h2, h3, h4, h5, h6, li {
   background-color:#9fa583 !important;
   color: #011
  }
  * textarea {
    background-color : #9a9a9a!important;
    width: 4.5in !important;
    height: 3.2in !important;
  }
}
@-moz-document url-prefix("http://localhost:8080/document-view.htm") {
  * {
    background:#9fa583 !important;
  }
  body, span,  div, td,  h1, h2, h3, h4, h5, h6, li {
   background-color:#9fa583  !important;
   color: #011
  }
  H1 {font-size:medium!important;}
  H2 {font-size:small!important;}
}

The image below is how the page looks like with the additional style sheet: