Piggydb Supporters Edition Launched

The Piggydb project is going to celebrate its 4th anniversary at the end of this month. On this occasion, I would like to thank you for your support. It’s because of you, Piggydb users, that I can keep developing this small project.

In the hope of continuing the project for many years to come, I decided to try one of the ideas I thought about. That is ‘Piggydb Supporters Edition’.

Piggydb Supporters Edition is a special edition, which you can buy for $10 from here. And it provides the following features in addition to the standard features:

– User CSS (Cascading Style Sheets)
— You can override the default user interface style by writing your own CSS.
— Your CSS will be saved with your knowledge fragments in the database.
— You can apply your style to part of fragment’s text.
— You can apply your style to a specific fragment by an ID.

Of course, all minor version upgrades and bug fixes will be for free.

If you are interested in this project and want to see what it will turn into in the future, please consider supporting it by buying this edition 😉

In Piggydb Supporters Edition, the “CSS” menu is added to the user menu and you can edit your own style sheets from it:

User CSS will be in effect immediately after you click on the Save button. The followings are the examples of customizing the color scheme. You can try these simply by copy and paste:

Blue:

.bgcolor-base {
 background-color: #4082BB;
}

table.fragment .header-cell {
 color: #F1F6F8;
 background-color: #24518A;
}

.fragment-header span.tags a.tag {
 color: #F1F6F8;
}

table.fragment td,
.content-box,
.content-box li.leafLastNode {
 background-color: #F1F6F8;
}

#title-banner table td {
 background-color: #143C78;
}

#page-menu #menu,
#page-menu #menu .topitem,
#page-menu #menu ul.submenu {
 color: #F1F6F8;
 background-color: #24518A;
}

#page-menu #menu .topitem a, 
#page-menu #menu .topitem a:visited {
 color: #F1F6F8;
 border: 1px solid #24518A;
}

table.fragment td.subfragments,
table.fragment td.subfragments #children-control td {
 background-color: #4082BB;
}

table.fragment,
table.fragment th, 
table.fragment td,
.content-box {
 border: 1px solid #143C78;
}

.section-title {
 border-bottom: 2px solid #24518A;
}

Brown:

.bgcolor-base {
 background-color: #9F7269;
}

table.fragment .header-cell {
 color: #F2F2F2;
 background-color: #94524A;
}

.fragment-header span.tags a.tag {
 color: #F2F2F2;
}

table.fragment td,
.content-box,
.content-box li.leafLastNode {
 background-color: #F2F2F2;
}

#title-banner table td {
 background-color: #653832;
}

#page-menu #menu,
#page-menu #menu .topitem,
#page-menu #menu ul.submenu {
 color: #F2F2F2;
 background-color: #94524A;
}

#page-menu #menu .topitem a, 
#page-menu #menu .topitem a:visited {
 color: #F2F2F2;
 border: 1px solid #94524A;
}

table.fragment td.subfragments,
table.fragment td.subfragments #children-control td {
 background-color: #9F7269;
}

table.fragment,
table.fragment th, 
table.fragment td,
.content-box {
  border: 1px solid #998D8C;
}

.section-title {
 border-bottom: 2px solid #998D8C;
}

Green:

.bgcolor-base {
 background-color: #CEF892;
}

table.fragment .header-cell {
 color: #000;
 background-color: #A9D66F;
}

.fragment-header span.tags a.tag {
 color: #000;
}

table.fragment td,
.content-box,
.content-box li.leafLastNode {
 background-color: #fff;
}

#title-banner table td {
 background-color: #385909;
}

#page-menu #menu,
#page-menu #menu .topitem,
#page-menu #menu ul.submenu {
 color: #000;
 background-color: #A9D66F;
}

#page-menu #menu .topitem a, 
#page-menu #menu .topitem a:visited {
 color: #000;
 border: 1px solid #A9D66F;
}

table.fragment td.subfragments,
table.fragment td.subfragments #children-control td {
 background-color: #CEF892;
}

table.fragment,
table.fragment th, 
table.fragment td,
.content-box {
  border: 1px solid #9FC029;
}

.section-title {
 border-bottom: 2px solid #E9CA46;
}

Soft:

.bgcolor-base {
 background-color: #ECE5CE;
}

table.fragment .header-cell {
 color: #000;
 background-color: #F1D4AF;
}

.fragment-header span.tags a.tag {
 color: #000;
}

table.fragment td,
.content-box,
.content-box li.leafLastNode {
 background-color: #fff;
}

#title-banner table td {
 background-color: #774F38;
}

#page-menu #menu,
#page-menu #menu .topitem,
#page-menu #menu ul.submenu {
 color: #000;
 background-color: #E08E79;
}

#page-menu #menu .topitem a, 
#page-menu #menu .topitem a:visited {
 color: #000;
 border: 1px solid #E08E79;
}

table.fragment td.subfragments,
table.fragment td.subfragments #children-control td {
 background-color: #ECE5CE;
}

table.fragment,
table.fragment th, 
table.fragment td,
.content-box {
  border: 1px solid #E9CA46;
}

.section-title {
 border-bottom: 2px solid #E9CA46;
}

You can also apply your style to part of fragment’s text. For example, write user css like below:

And specify part of text with the special markup when editing a fragment and the style will be applied to the text like below:

The text style will also be in effect in the document view.

The markup rule is:

  {{[class-name] Here goes the content.}}

You specify a style you want to apply to the text by “class-name”. Multiple class names can be specified by separating them with spaces.

You can apply your style to a specific fragment by an ID. For example, write user css like below:

table.fragment-17 {
 border: 2px solid red;
}

Then, the style will be applied only to the fragment number 17:

There are many other usage of this feature. I will share other tips on this blog, so please keep your eye on it.

Click here to buy Piggydb Supporters Edition (Thank you for your support ;-))