Wiki on a Stick Official Forums

Stanky · 30-04-2009 09:45:31

hello,

i use woas with this extention for tabs. i also did some dirty code modifications to use it with ie8 and embedded images. further i did some css modifications. see pictures below:

http://img2.pict.com/d0/5f/2c/0d2f88c8b92523c2b4609273e2/yYLM8/300/mywoas.png

http://img2.pict.com/f1/d0/94/f721ecdcdbb497d9ff10613840/hLXoF/300/mywoasedit.png

http://img2.pict.com/3a/db/bc/a8947f7754b58c534b99b30c8e/p4eAC/300/mywoasbs.png

you can downloaded an empty woas with all the shown extentions here:

http://sourceforge.net/tracker/download … id=2815158

this is my css:

Code:

A.link {
    BORDER-BOTTOM: #c60 1px dotted;
    COLOR: #c60;
    TEXT-DECORATION: none
}
A.link:hover {
    BORDER-BOTTOM: #c33 1px solid;
    COLOR: #c33;
    TEXT-DECORATION: none
}
A.unlink {
    BORDER-BOTTOM: blue 1px dotted;
    COLOR: blue;
    TEXT-DECORATION: none
}
A.unlink:hover {
    BORDER-BOTTOM: darkblue 1px solid;
    COLOR: darkblue;
    TEXT-DECORATION: none
}
A.world {
    BORDER-BOTTOM: darkgreen 1px dotted;
    COLOR: darkgreen;
    TEXT-DECORATION: none
}
A.world:hover {
    BORDER-BOTTOM: green 1px solid;
    COLOR: green;
    TEXT-DECORATION: none
}
A {
    CURSOR: pointer
}
DIV.text_area {
    BORDER-BOTTOM: #a3c159 0pt solid;
    BORDER-LEFT: #d5e6eb 6pt solid;
    PADDING-BOTTOM: 10pt;
    LINE-HEIGHT: 1.6em;
    BACKGROUND-COLOR: white;
    PADDING-LEFT: 10pt;
    PADDING-RIGHT: 10pt;
    BORDER-TOP: #d5e6eb 6pt solid;
    BORDER-RIGHT: #d5e6eb 6pt solid;
    PADDING-TOP: 10pt
}
DIV.text_area_footer {
    BORDER-BOTTOM: #d5e6eb 6pt solid;
    FILTER: alpha(opacity=75);
    BORDER-LEFT: #d5e6eb 6pt solid;
    PADDING-BOTTOM: 10pt;
    LINE-HEIGHT: 1.6em;
    PADDING-LEFT: 10pt;
    PADDING-RIGHT: 10pt;
    BACKGROUND: #048db4;
    BORDER-TOP: #a3c159 0pt solid;
    FONT-WEIGHT: bold;
    BORDER-RIGHT: #d5e6eb 6pt solid;
    PADDING-TOP: 10pt;
    opacity: .75;
    -moz-opacity: .75
}
BODY {
    FONT-FAMILY: Georgia, "Bookman Old Style";
    BACKGROUND: url(data: image/gif;
    base64,R0lGODlhFAAUAIAAAOTv9N7r8iH5BAAAAAAALAAAAAAUABQAAAIqjI+gy+gMgUtxzVPtDVlt3n2dtI1iWKKXeVYf6LbRq64ZfcsQHqe9XSkAADsA) #ede8e2;
    COLOR: #414141;
    FONT-SIZE: 13px
}
BODY {
    PADDING-BOTTOM: 15px;
    LINE-HEIGHT: 1.6em;
    MARGIN: 0px;
    PADDING-LEFT: 0px;
    PADDING-RIGHT: 0px;
    PADDING-TOP: 15px
}
BODY {
    SCROLLBAR-ARROW-COLOR: #669966;
    SCROLLBAR-FACE-COLOR: #e9f9d6;
    SCROLLBAR-DARKSHADOW-COLOR: #336633;
    SCROLLBAR-HIGHLIGHT-COLOR: #e9f9d6;
    SCROLLBAR-SHADOW-COLOR: #a3c159;
    SCROLLBAR-TRACK-COLOR: #e4eff4;
    SCROLLBAR-3DLIGHT-COLOR: #a3c159
}
H1 {
    BORDER-BOTTOM: #fec42d 2px solid;
    PADDING-BOTTOM: 0px;
    MARGIN: 5px 0px;
    PADDING-LEFT: 0px;
    PADDING-RIGHT: 0px;
    COLOR: #009193;
    FONT-SIZE: 24px;
    PADDING-TOP: 10px
}
H2 {
    BORDER-BOTTOM: #fec42d 1px solid;
    PADDING-BOTTOM: 0px;
    MARGIN: 5px 0px;
    PADDING-LEFT: 0px;
    PADDING-RIGHT: 0px;
    COLOR: #009193;
    FONT-SIZE: 1.6em;
    PADDING-TOP: 10px
}
H3 {
    BORDER-BOTTOM: #fec42d 1px solid;
    PADDING-BOTTOM: 0px;
    MARGIN: 5px 0px;
    PADDING-LEFT: 0px;
    PADDING-RIGHT: 0px;
    COLOR: #009193;
    FONT-SIZE: 1.4em;
    PADDING-TOP: 10px
}
H4 {
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-LEFT: 0px;
    PADDING-RIGHT: 0px;
    COLOR: #009193;
    FONT-SIZE: 1.2em;
    PADDING-TOP: 10px
}
H5 {
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-LEFT: 0px;
    PADDING-RIGHT: 0px;
    COLOR: #009193;
    FONT-SIZE: 1.1em;
    PADDING-TOP: 10px
}
H6 {
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-LEFT: 0px;
    PADDING-RIGHT: 0px;
    COLOR: #009193;
    FONT-SIZE: 1em;
    PADDING-TOP: 10px
}
HR {
    BORDER-BOTTOM: 0px;
    BORDER-LEFT: 0px;
    BACKGROUND-COLOR: #fec42d;
    HEIGHT: 1px;
    COLOR: #fec42d;
    BORDER-TOP: 0px;
    BORDER-RIGHT: 0px
}
DIV.taglinks {
    BORDER-BOTTOM: #aaa 1px solid;
    BORDER-LEFT: #aaa 1px solid;
    PADDING-BOTTOM: 5px;
    MARGIN-TOP: 1em;
    PADDING-LEFT: 5px;
    PADDING-RIGHT: 5px;
    CLEAR: both;
    BORDER-TOP: #aaa 1px solid;
    BORDER-RIGHT: #aaa 1px solid;
    PADDING-TOP: 5px
}
DIV.search_results {
    BORDER-BOTTOM: #aaa 1px solid;
    BORDER-LEFT: #aaa 1px solid;
    PADDING-BOTTOM: 5px;
    BACKGROUND-COLOR: #f9f9f9;
    MARGIN-TOP: 1em;
    PADDING-LEFT: 5px;
    PADDING-RIGHT: 5px;
    CLEAR: both;
    BORDER-TOP: #aaa 1px solid;
    BORDER-RIGHT: #aaa 1px solid;
    PADDING-TOP: 5px
}
A.tag.link {
    COLOR: navy
}
DIV.locked.text_area {
    BACKGROUND-IMAGE: url(data: image/png;
    base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAAAAACMmsGiAAAALHRFWHRDcmVhdGlvbiBUaW1lAGdpbyAyOSBtYXIgMjAwNyAxMTo1MToxMCArMDEwME%2BTNUAAAAAHdElNRQfXAx0JNByGxueSAAAACXBIWXMAAAsSAAALEgHS3X78AAAABGdBTUEAALGPC%2FxhBQAAABlJREFUeNpj%2FM%2FwmYHpMwMvAxOQwcvECyQBO1oE%2BlG5iisAAAAASUVORK5CYII%3D);
    BACKGROUND-COLOR: #eeeeee
}
DIV.menu {
}
.title {
    MARGIN-TOP: 0pt;
    DISPLAY: inline;
    FONT-FAMILY: "Bookman Old Style";
    MARGIN-BOTTOM: 0pt;
    FONT-SIZE: 14pt;
    FONT-WEIGHT: bold
}
.bg {
}
#wiki_text {
    POSITION: relative;
    TEXT-ALIGN: justify;
    WIDTH: 550pt;
    LEFT: 150pt
}
#wiki_footer {
    POSITION: relative;
    TEXT-ALIGN: center;
    WIDTH: 550pt;
    LEFT: 150pt
}
TABLE.text_area {
    BORDER-BOTTOM: #a3c159 1px solid;
    BORDER-LEFT: #a3c159 1px solid;
    BORDER-SPACING: 0px;
    BACKGROUND: #ecfdce;
    FONT-SIZE: 9pt;
    BORDER-TOP: #a3c159 1px solid;
    BORDER-RIGHT: #a3c159 1px solid
}
TABLE.text_area TD {
    BORDER-BOTTOM: #a3c159 1px solid;
    BORDER-LEFT: #a3c159 1px solid;
    PADDING-BOTTOM: 2px;
    PADDING-LEFT: 2px;
    PADDING-RIGHT: 2px;
    BORDER-TOP: #a3c159 1px solid;
    BORDER-RIGHT: #a3c159 1px solid;
    PADDING-TOP: 2px
}
DIV.menu_area {
    BORDER-BOTTOM: #a3c159 1pt solid;
    BORDER-LEFT: #a3c159 1pt solid;
    PADDING-BOTTOM: 5pt;
    LINE-HEIGHT: 1.6em;
    BACKGROUND-COLOR: #ecfdce;
    PADDING-LEFT: 5pt;
    WIDTH: 110pt;
    PADDING-RIGHT: 5pt;
    FONT-SIZE: 9pt;
    BORDER-TOP: #a3c159 1pt solid;
    BORDER-RIGHT: #a3c159 1pt solid;
    PADDING-TOP: 5pt;
    LEFT: 15pt
}
DIV.menu_area A {
    BORDER-BOTTOM: #758d38 1px dotted;
    COLOR: #758d38;
    TEXT-DECORATION: none
}
DIV.menu_area A:hover {
    BORDER-BOTTOM: #c60 1px solid;
    COLOR: #c60;
    TEXT-DECORATION: none
}
DIV.menu_area A.unlink {
    BORDER-BOTTOM: blue 1px dotted;
    COLOR: blue;
    TEXT-DECORATION: none
}
DIV.menu_area A.unlink:hover {
    BORDER-BOTTOM: darkblue 1px solid;
    COLOR: darkblue;
    TEXT-DECORATION: none
}
DIV.text_area_footer A {
    BORDER-BOTTOM: darkblue 0px solid;
    COLOR: white;
    TEXT-DECORATION: none
}
DIV.text_area_footer A:hover {
    BORDER-BOTTOM: darkblue 0px solid;
    COLOR: silver;
    TEXT-DECORATION: none
}
DIV.wiki_header {
    Z-INDEX: 1;
    BORDER-BOTTOM: #a3c159 1px solid;
    BORDER-LEFT: #a3c159 1px solid;
    PADDING-BOTTOM: 10px;
    PADDING-LEFT: 5px;
    WIDTH: 99.3%;
    BACKGROUND: #ecfdce;
    FONT-SIZE: 1.4em;
    BORDER-TOP: #aaa 0px solid;
    TOP: 0px;
    BORDER-RIGHT: #aaa 1px solid;
    PADDING-TOP: 10px;
    LEFT: 0px;
    opacity: .75;
    -moz-opacity: .75
}
DIV.wiki_header A {
    BORDER-BOTTOM: #c60;
    COLOR: #c60;
    TEXT-DECORATION: underline
}
DIV.wiki_header A:hover {
    BORDER-BOTTOM: #c60;
    COLOR: #c33;
    TEXT-DECORATION: underline
}
DIV.wiki_toc {
    BORDER-BOTTOM: #aaa 1px dashed;
    BORDER-LEFT: #aaa 1px dashed;
    PADDING-BOTTOM: 5px;
    BACKGROUND-COLOR: #f9f9f9;
    PADDING-LEFT: 5px;
    WIDTH: 50%;
    PADDING-RIGHT: 5px;
    FONT-SIZE: 95%;
    BORDER-TOP: #aaa 1px dashed;
    BORDER-RIGHT: #aaa 1px dashed;
    PADDING-TOP: 5px
}
DIV.wiki_toc OL {
    PADDING-LEFT: 0em;
    MARGIN-LEFT: 1.5em
}
LI {
    PADDING-LEFT: 0em;
    MARGIN-LEFT: 0.65em
}
P.wiki_toc_title {
    TEXT-ALIGN: center;
    FONT-WEIGHT: bold
}
.search_highlight {
    BACKGROUND-COLOR: yellow
}
#loading_overlay {
    Z-INDEX: 100;
    POSITION: absolute;
    TEXT-ALIGN: center;
    BACKGROUND-COLOR: white;
    WIDTH: 100%;
    HEIGHT: 100%;
    FONT-SIZE: large;
    TOP: 0px;
    CURSOR: wait;
    PADDING-TOP: 25%;
    LEFT: 0px
}
DIV.menu_area UL LI {
    MARGIN-LEFT: -2em
}
DIV.menu_area H1 {
    BORDER-BOTTOM: #aaa 1px dashed;
    TEXT-ALIGN: center;
    FONT-SIZE: 12px;
    BORDER-TOP: #aaa 1px dashed
}
DIV.menu_area OL LI {
    MARGIN-LEFT: -2em
}
DIV.ns_menu_area UL LI {
    MARGIN-LEFT: -2em
}
DIV.ns_menu_area OL LI {
    MARGIN-LEFT: -2em
}
.wiki_preformatted {
    BACKGROUND: #ffffe6
}
#floatbox {
    BORDER-BOTTOM: #fec42d 1px solid;
    BORDER-LEFT: #fec42d 1px solid;
    PADDING-BOTTOM: 5px;
    BACKGROUND-COLOR: #fffff0;
    MARGIN: 20px;
    PADDING-LEFT: 5px;
    PADDING-RIGHT: 5px;
    FLOAT: right;
    COLOR: #000;
    BORDER-TOP: #fec42d 1px solid;
    BORDER-RIGHT: #fec42d 1px solid;
    PADDING-TOP: 5px
}
#message {
    BORDER-BOTTOM: #aaa 1px dashed;
    BORDER-LEFT: #aaa 1px dashed;
    PADDING-BOTTOM: 10px;
    BACKGROUND-COLOR: #f0f0f0;
    PADDING-LEFT: 10px;
    PADDING-RIGHT: 10px;
    FONT-FAMILY: Verdana;
    COLOR: #000;
    BORDER-TOP: #aaa 1px dashed;
    BORDER-RIGHT: #aaa 1px dashed;
    PADDING-TOP: 10px
}
#message P {
    PADDING-BOTTOM: 10px;
    PADDING-LEFT: 10px;
    PADDING-RIGHT: 10px;
    PADDING-TOP: 10px
}
#firefox {
    TEXT-ALIGN: center;
    MARGIN-TOP: 20px
}
PRE {
    BORDER-BOTTOM: #2f6fab 1px dashed;
    BORDER-LEFT: #2f6fab 1px dashed;
    PADDING-BOTTOM: 1em;
    LINE-HEIGHT: 1.1em;
    BACKGROUND-COLOR: #f9f9f9;
    PADDING-LEFT: 1em;
    FONT-FAMILY: "Courier New", Courier, Consolas, monospace;
    WHITE-SPACE: pre-wrap;
    COLOR: black;
    BORDER-TOP: #2f6fab 1px dashed;
    BORDER-RIGHT: #2f6fab 1px dashed;
    PADDING-TOP: 1em
}
.tabmenu {
    BORDER-BOTTOM: #a3c159 3px solid;
    PADDING-BOTTOM: 0px;
    LINE-HEIGHT: 1.2em;
    LIST-STYLE-TYPE: none;
    MARGIN: 12px 0px 0px;
    PADDING-LEFT: 10px;
    PADDING-RIGHT: 0px;
    PADDING-TOP: 0px
}
.tabmenu A {
    BORDER-BOTTOM-STYLE: none;
    BORDER-LEFT: #a3c159 2px solid;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-LEFT: 5px;
    PADDING-RIGHT: 5px;
    BACKGROUND: #ecfdce;
    COLOR: #a3c159;
    FONT-SIZE: 12pt;
    BORDER-TOP: #a3c159 2px solid;
    FONT-WEIGHT: bold;
    BORDER-RIGHT: #a3c159 2px solid;
    TEXT-DECORATION: none
}
.tabmenu A:hover {
    BACKGROUND: #ecfdce;
    COLOR: #a3c159
}
INPUT.wiki_button {
    BORDER-BOTTOM: #363 1px solid;
    FILTER: progid: DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');
    BORDER-LEFT: #696 1px solid;
    BACKGROUND-COLOR: #fed;
    FONT: 9pt Verdana, helvetica, sans-serif;
    COLOR: #050;
    BORDER-TOP: #696 1px solid;
    BORDER-RIGHT: #363 1px solid
}

Last edited by Stanky (01-07-2009 17:21:34)

legolas558 · 02-05-2009 21:25:54

please report us the IE8 modifications, I am going to work on that front for the next release

Stanky · 04-05-2009 09:13:21

i checked and consolidated my changes related to ie8. for to display embedded images in the toolbar and to enable "Fixed menu area and topbar" the following changes are to be done:

Code:

// browser flags - not to be in WoaS object
var ie = false;
var ie6 = false;
var ie8 = false;                          //new for ie8
var firefox = false;
//var ff3 = false;
var opera = false;

if((navigator.userAgent).indexOf("Opera")!=-1)
    opera = true;
else if(navigator.appName == "Netscape") {
    firefox = true;
//    if (navigator.userAgent.match("Firefox/3"))
//        ff3 = true;
} else if((navigator.appName).indexOf("Microsoft")!=-1) {
    ie = true;
// is set if msie 8.x appears in the version string
    ie8 = (navigator.userAgent.search(/msie 8\./i)!=-1);
// this is necessary because msie 8.x and msie 6.x appears in the version string
// only check for ie 6 if ie 8 is not set
  if (!ie8)
    ie6 = (navigator.userAgent.search(/msie 6\./i)!=-1);
}

Code:

woas["img_display"] = function(id, visible) {
    if (!ie || ie8) {                       //displays embedded images in the toolbar for ie and all other browsers
        this._gen_display(id, visible, "img");
        this._gen_display(id, !visible, "alt");
    } else {
        this._gen_display(id, !visible, "img");
        this._gen_display(id, visible, "alt");
    }
}

"Fixed menu area and topbar" is automaticaly enabled if it is not ie6 .

all other hacks for ie i have not checked at the moment, but with this changes it works fine with ie8.

best regards

Last edited by Stanky (04-05-2009 09:17:06)

afrodeity · 15-06-2009 00:14:56

Love the css modifications, look amazing. Hope you don't mind me posting them to my Indlovu - Wisdom with Ubuntu site? The Ubuwiki Project has shifted focus somewhat towards getting users to submit modifications and content for distribution to people with little or no Internet access. The "MP3 of Data" is bigger than any one OS and needs to be shared with everybody.

Stanky · 21-06-2009 17:22:37

don't mention afrodeity. i posted it do share and inspirate. if you have problems to include the code for using tabs i can sent you an empty wiki. with all modifications.

afrodeity · 30-06-2009 01:30:48

thank you stanky, that would be good. been snowed under so no time, but now I am excited!

Stanky · 01-07-2009 14:00:03

an empty woas with an sandbox page can be downloaded here:

http://sourceforge.net/tracker/download … id=2815158

Snaga · 12-11-2009 09:39:38

Stanky thanks for posting the TAB syntax that works. Last time I tried it from SVN I could not include pages, and now it looks like I can.

See this post for my reaction.

Another thought: This still does not give us the ability to tab multiple wiki pages open at once; that is, a dynamic tabbing system. Instead, I have to put a link in my main menu like this and work with a whole new instance of the wiki using the FF tabs instead of staying within the page. And doing this it's easy to lose edits if you don't refresh both pages.

I know this was a design choice of the WoaS developers and I kind of understand. IMHO what you are reaching for with this TAB feature is something like what Wikipedia has, a series of tabs within every page that brings up Discussion or History. That's something that has to be implemented in the DOM rather than in pages. It doesn't mean that the one-page-at-a-time ideal for WoaS has to change; it's just an alternate navigation.

Keeping track of the breadcrumbs for each tab and deciding how and when to open a link in a new tab might take some doing.

Thanks

CaffeineRush · 15-12-2009 18:03:43

Stanky, I'm having an issue with your revamp of the woas.
For some reason I'm not able to embed any images or file.

After I browse for the file, then click Embed nothing happens.

I ran the debug and I get this error:
Exception while attempting to load
ReferenceError: ActiveXObject is not defined

The embed feature works in the original woas.

How do I go about correcting?

Thank you for any help
PS: Love the styling you did to the UI

Stanky · 18-12-2009 16:08:24

which browser you are using?

i have always problems with embedding pictures. only browser it seems for me where everything is working is http://kmeleon.sourceforge.net.

never the less seems to be the saqme problem as in this thread:
http://woas.iragan.com/viewtopic.php?pid=1370#p1370

Last edited by Stanky (24-12-2009 11:31:56)

Wiki on a Stick Official Forums

#1 30-04-2009 09:45:31

My user interface

Code:

#2 02-05-2009 21:25:54

Re: My user interface

#3 04-05-2009 09:13:21

Re: My user interface

Code:

Code:

#4 15-06-2009 00:14:56

Re: My user interface

#5 21-06-2009 17:22:37

Re: My user interface

#6 30-06-2009 01:30:48

Re: My user interface

#7 01-07-2009 14:00:03

Re: My user interface

#8 12-11-2009 09:39:38

Re: My user interface

#9 15-12-2009 18:03:43

Re: My user interface

#10 18-12-2009 16:08:24

Re: My user interface

Board footer