Piggydb V6.16 Supporters Edition: Embed GitHub Gist

Another bonus feature to the Supporters Edition: embedding a snippet from Github Gist, which is a popular website where you can share snippets and pastes with others.

To embed a snippet, just put a Gist URL:

Github Gist allows you to share not only program code snippets, but also plain HTML documents written in Markdown:

If you are new to the Piggydb Supporters Edition, please check out the articles in the ‘supporters’ directory: https://piggydb.net/category/supporters/

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

Piggydb V6.15 Supporters Edition: Embed Ustream Videos

Finally, though it is a small one, I’ve added a new feature, which is exclusive to the Supporters Edition.

You can now embed Ustream videos into your knowledge fragments just by putting video URL like: http://www.ustream.tv/recorded/38909163

With this as a starting point, I’m going to add further Wiki-formatting extensions in coming versions of Supporters Edition.

If you are new to the Piggydb Supporters Edition, please check out the articles in the ‘supporters’ directory: https://piggydb.net/category/supporters/

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

Piggydb 6.2 Supporters Edition Released!

I’ve just released Piggydb 6.2 Supporters Edition with two bonuses.

1) Predefined inline style CSS (a kind of wiki extension) that you can easily import by @import rule.

Just put the following line in your CSS:

 @import "http://piggydb.sourceforge.net/theme/inline.css";

Then, you can use the following predefined styles:

Font Size:

- {{[xx-small] xx-small font size}}
- {{[x-small] x-small font size}}
- {{[small] small font size}}
- default font size
- {{ medium font size}}
- {{[large] large font size}}
- {{[x-large] x-large font size}}
- {{[xx-large] xx-large font size}}

----
Font Family:

- serif: {{[serif] The quick brown fox jumps over the lazy dog}}
- sans-serif: {{[sans-serif] The quick brown fox jumps over the lazy dog}}
- cursive: {{[cursive] The quick brown fox jumps over the lazy dog}}
- fantasy: {{[fantasy] The quick brown fox jumps over the lazy dog}}
- monospace: {{[monospace] The quick brown fox jumps over the lazy dog}}

----
Font Color:

- {{[gray] gray}}
- {{[silver] silver}}
- {{[white] white}} (''white'')
- {{[red] red}}
- {{[yellow] yellow}}
- {{[lime] lime}}
- {{[aqua] aqua}}
- {{[blue] blue}}
- {{[fuchsia] fuchsia}}
- {{[maroon] maroon}}
- {{[olive] olive}}
- {{[green] green}}
- {{[teal] teal}}
- {{[navy] navy}}
- {{[purple] purple}}

----
Vertical Align:

- {{[x-large] Vertical Align}}{{[v-super] super}}
- {{[x-large] Vertical Align}}{{[v-sub] sub}}
- {{[x-large] Vertical Align}}{{[v-baseline] baseline}}
- {{[x-large] Vertical Align}}{{[v-middle] middle}}

----
Combination:

{{[x-large cursive teal] The quick brown fox jumps over the lazy dog}}

2) The source code for the additional features.

From this version, the Supporters Edition contains the source code for the additional features. Since the source code for the standard features is available on GitHub, it’s become a full open source software.

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

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 ;-))