Wiki "home" page changes

[TK.]

If hotlinking is disabled pic's cannot be viewed on other sites than midibox.org

In other words: I wouldn't be able to link files from ucapps.de ;-)

Btw.: the reason why I want to restrict upload permissions "for world" is not the traffic issue, but the liability issue. We especially have to check for illegal material... frequently!

Best Regards, Thorsten.

[audiocommander]

It's very nice working with the boxes, and astonishing how fast there are results if some ppl are working together :)

http://www.midibox.org/dokuwiki/doku.php?id=start

We just need to add some extra lines to make this thing work ;)

The youTube thingy will be really nice to make great tutorials!

I just haven't found out how to activate the sidebar (but don't want to hurry noone, I think it's enough to do to set up a new start page atm)...

As I said before, I don't think that pic-uploads are so important, because it has become a really easy task to upload a pic somewhere and hotlink it. So don't make yourself too much work, admins ;)

I also like the installed code2 plugin v much!

the line-numbering, diff, highlighting, comment functions and the scroll view are great improvements!

btw: has the search box results css popup been always there? just noticed this :D

best,

Michael

[ptitjes]

ac: "The boxes are color-coded: Main (blue), Input (green), Output (red), Mixed I/O (orange)"

LOL... I find that mix of colors a little bit scary!!! We should modify the css to personalize the colors...

Also that is a pity you have to put that many \\s... will download the css when i will have time and see whether the float things can be removed!

Good work anyway!! That is yet way better than before...

[audiocommander]

hehe... scaring with pastels ;D

Agreed, but some decent color variations would be nice to quick sort the items.

If you should lay your hands on the CSS, I'd also love to see some typo spacings fixed: esp. for headlines and listings I find it always quite disturbing that the distances below are greater than above, eg:

Last sentence.

HEADLINE

Next sentence.

List:

  * item 1

  * item 2

List2:

  * item 1

  * item 2

would be a lot better readable if it were like this:

Last sentence.

HEADLINE

Next sentence.

List:

  * item 1

  * item 2

List2:

  * item 1

  * item 2

ahhh, and one more thing, that scares me:

the ugly green/purple link colors

[Durisian]

P.S.: Frequent Writers should see a new icon now:

just click on it to open the media file manager.

It's possible to create subdirectories for different projects (recommented!)

Files can be referenced with internal links: {{<filename>}}

Best Regards, Thorsten.

SWEEET! How do we create subdirectories?

[stryd_one]

I don't seem to be able to upload files, only select existing ones  :-\

And guys... it looks pretty but you killed the TOC :(

[ptitjes]

If you should lay your hands on the CSS, I'd also love to see some typo spacings fixed: esp. for headlines and listings I find it always quite disturbing that the distances below are greater than above

Will look at this too! I'll do that tomorow.

Cheers, Didier.

[TK.]

Durisian: I must say, that I don't know how to create subdirectories - maybe it's well hidden in the documentation? (has somebody already found it)

Stryd: so, it seems that I selected the wrong group (they are not named, only enumerated)

Now I selected the rights for the last group in the list - please try it again

Durisian again: I gave you user based permission (seems that I selected the "newbie" group instead of "frequent writer" group)

Best Regards, Thorsten.

[TK.]

Upload is working now

For anybody who isn't in the "frequent writer" group, but wants to upload new files quickly: just go into the chat and ask for help.

Best Regards, Thorsten.

[stryd_one]

Stryd: please try it again

Works like a charm! Big thanks mate, that is great! Is there a way to delete files also?

@Everyone: I will be happy to upload files for you. As TK said, just hit me in the chat room, or if you like, you can PM/email/call/kiss me ;)

[ptitjes]

Here is what i've done on my local copy for now:

- Headers, Paragraphs and Lists spacings fixed

- Box placement enhanced

Waiting to fix the other things to submit modified files...

hehe... scaring with pastels ;D

Agreed, but some decent color variations would be nice to quick sort the items.

Please, could give me what green, orange, red and blue you would like for boxes. I don't want make the choice myself...

ahhh, and one more thing, that scares me:

the ugly green/purple link colors

Here is how i understand the actual way links are made:

External not-visited: dark blue (as in the toc)

External visited: purple

Internal not-visited: green

Internal visited: green

Internal non-existing page: red

What colors would you prefer ? We could use the same colors for external and internal links as external links are denoted by a "ucapps" or earth icon.

So i propose:

All not-visited links: light blue

All visited links: dark blue (a bit lighter than in the toc)

Internal non-existing page: red

I made that in local, and it's pretty and understandable.

What do you think about it ?

Cheers, Didier.

[audiocommander]

Hi Didier,

Thanks, mate. That's so cool, that you do this!

The link colors seem very plausible to me, looking so forwad to ;D

About the box-colors: as I understand, the color you can choose for the boxes (eg by writing "blue"), is simply picking up a css-type called "blue"; maybe we could also add some more?

eg. I'd really like a grey one (so color "black", maybe?)

and some variations of blue.

For the rest, I recommend stronger colors for the title only:

blue: #0070ef

red: #f12800

green: #84b50d

orange: #ff8000

yellow: #ffd100 would be very nice to have, too (for red->orange->yellow)

grey: #92aab5 , a cool grey would also be nice to have (for blue->grey->green)

if we'd add then for example two more classes named "bluelight" and "bluelighter" (just for example, maybe also "blue2" and "blue3" with decreased saturation, this could give a nice blue box ensemble:

100% Saturation: #0070ef,

~75% Sat: #34a7f1

~50% Sat: #77c7f2

-> or we could go and instead use colors used in electronics, eg. from a green PCB:

green (different greens), gold (yellow with a slight note of green), silver, white (light grey).

(the more I think about that last option, the more I'd prefer it :D )

what do you think?

Best,

Michael

ahh, and I got one more wish =)

could we disable the block-sentence? with very short lines this is always looking very messy. better to have a nice left-aligend text block than an ugly text block with huge white spaces in between...

[ptitjes]

Thanks, mate. That's so cool, that you do this!

The link colors seem very plausible to me, looking so forwad to ;D

No probs! That is a long time i was thinking that the Wiki had so much informations i could not find anything quickly in it. So i'm happy there is a move in a better direction, and if i might help...

About the box-colors: as I understand, the color you can choose for the boxes (eg by writing "blue"), is simply picking up a css-type called "blue"; maybe we could also add some more?

eg. I'd really like a grey one (so color "black", maybe?)

and some variations of blue.

For the rest, I recommend stronger colors for the title only:

blue: #0070ef

red: #f12800

green: #84b50d

orange: #ff8000

yellow: #ffd100 would be very nice to have, too (for red->orange->yellow)

grey: #92aab5 , a cool grey would also be nice to have (for blue->grey->green)

if we'd add then for example two more classes named "bluelight" and "bluelighter" (just for example, maybe also "blue2" and "blue3" with decreased saturation, this could give a nice blue box ensemble:

100% Saturation: #0070ef,

~75% Sat: #34a7f1

~50% Sat: #77c7f2

While you were typing your message, i made some stronger colors experiments that i find quite good. See screenshot. I think that you might like those too!

I changed also the three other colors of the boxes (not only the title bar because it had a very strange look just changing the title color)

As for other colors, i don't know whether the box plugin filter or not the classes you give it...

But i will try... yellow and grey. But i don't know if different blue would be really usefull. And surely finding sets of color so that it is coherent would be difficult! Are you sure you want other blue ???? (please no!!! :))

-> or we could go and instead use colors used in electronics, eg. from a green PCB:

green (different greens), gold (yellow with a slight note of green), silver, white (light grey).

(the more I think about that last option, the more I'd prefer it :D )

what do you think?

I think that we might start with the above until you find color hex values for "colors in electronics" ;) But that would be a good idea!

ahh, and I got one more wish =)

could we disable the block-sentence? with very short lines this is always looking very messy. better to have a nice left-aligend text block than an ugly text block with huge white spaces in between...

Sorry i don't understand what you are talking about... :(

[ptitjes]

Ok i just have understand what you meant by changing the title color... All blue but the title! Right ?

[seppoman]

Hi,

about the colors: at least on my monitor I like ACs colors better. The other suggestion is too aggressive in my eyes.

And I´d keep the text background neutral.

Seppoman

[Wilba]

nebula: thanks for the motivation (aka. kick up the ass) to get people interested in wiki documentation again.

[audiocommander]

Sorry i don't understand what you are talking about...

I mean "text-align:left" instead of "text-align:justify":

left:

------

---------

---

------

-------

justified (theory):

----------

----------

----------

----------

justified (practically in our wiki):

---  --   --

-       ----

---   --  --

-----

Ok i just have understand what you meant by changing the title color... All blue but the title! Right ?

yeah, I thought this would look a bit less-scaring ;D

(I think I took the blue background of the blue box and copied it to the rest of the backgrounds)

and for the titles, we should also:

- set the font-color to white,

- make it bold and maybe also

- 120% font-size, so that's it's a real title.

Cheers,

Michael

[ptitjes]

The new plugin:box css code (i don't know whether you have to replace it in /dokuwiki/lib/plugins/plugin_style.css or if the plugin manager does it for you and you have only to change in the plugin itself -- do not know dokuwiki at all).

/* plugin:box */
div.box {
  width: 50%;
  margin: 1em auto;
  border: 1px solid;
  padding: 4px;
  overflow: hidden;
}

/* rounded corners styles from Stu Nicholls snazzy borders, http://www.cssplay.co.uk/boxes/snazzy.html */
.xtop, .xbottom {background:transparent; font-size:0; line-height: 1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden; border-style: solid;}
.xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {border-width:0 1px;}
.xb1 {height: 0; margin:0 5px; border-width:1px 0 0 0;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

div.box .xtop, div.box .xbottom {display: none;}
div.box.round > .xtop, div.box.round > .xbottom {display: block;}

div.box.round { border: none; padding: 0;}
div.box.round > .xbox {display:block; border-width:0 1px; border-style: solid; padding: 0 4px; }

div.box p.box_title, div.box p.box_caption {
  font-size: 90%;
  margin: 0;
  padding: 2px 6px;
  line-height: 1.2;
}

div.box p.box_title { margin-bottom: 4px;}
div.box p.box_caption { margin-top: 4px;}

div.box .box_content {
  margin: 0;
  padding: 0 6px;
  border-width: 1px;
  border-style: dashed;
  line-height: 1.2;
}

/* floating alignment */

div.box.left {
  float: left;
  margin-left: 0;
  margin-right: 0%;
}

div.box.right {
  float: right;
  margin-left: 1%;
  margin-right: 0;
}

/* colours */
/* default */
div.box, div.box .box_content, div.box .xbox, div.box .xb1, div.box .xb2, div.box .xb3, div.box .xb4 {
  border-color:  #8cacbb;
}

div.box, div.box .xbox, div.box .xb1, div.box .xb2, div.box .xb3, div.box .xb4 {
  background: #DEE7EC;
}

div.box p.box_title, div.box p.box_caption { background: #000; color: #FFF; font-weight: bold;}
div.box .box_content { background: #EEF;}

/* blue */
div.box.blue > * > p.box_title, div.box.blue > * > p.box_caption {background: #0070ef; color: #000;}

/* red */
div.box.red > * > p.box_title, div.box.red > * > p.box_caption {background: #f12800; color: #000;}

/* green */
div.box.green > * > p.box_title, div.box.green > * > p.box_caption {background: #84b50d; color: #000;}

/* orange */
div.box.orange > * > p.box_title, div.box.orange > * > p.box_caption {background: #ff8000; color: #000;}

/* yellow */
div.box.yellow > * > p.box_title, div.box.yellow > * > p.box_caption {background: #ffd100; color: #000;}

/* grey */
div.box.grey > * > p.box_title, div.box.grey > * > p.box_caption {background: #92aab5; color: #000;}

/* must come last to override coloured background when using rounded corners */

div.box.round {
  background: transparent !important;
}

/* IE fixes for unsupported child selector \*/

* html div.box div.box, * html div.box div.box .box_content, * html div.box div.box .xbox, 
* html div.box div.box .xb1, * html div.box div.box .xb2, 
* html div.box div.box .xb3, * html div.box div.box .xb4 {
  border-color:  #8cacbb;
}

* html div.box div.box, * html div.box div.box .xbox, 
* html div.box div.box .xb1, * html div.box div.box .xb2, 
* html div.box div.box .xb3, * html div.box div.box .xb4 {
  background: #DEE7EC;
}

* html div.box div.box p.box_title, * html div.box div.box p.box_caption { background: #000; color: #FFF; font-weight: bold;}
* html div.box div.box .box_content { background: #EEF;}

* html div.box.round .xtop, * html div.box.round .xbottom {display: block;}
* html div.box.round .xbox {display:block; border-width:0 1px; border-style: solid; padding: 0 4px; }

/* blue */
* html div.box.blue p.box_title, * html div.box.blue p.box_caption {background: #0070ef; color: #000;}

/* nested blue */
* html div.box div.box.blue p.box_caption {background: #0070ef; color: #000;}

/* red */
* html div.box.red p.box_title, * html div.box.red p.box_caption {background: #f12800; color: #000;}

/* nested red */
* html div.box div.box.red p.box_title, * html div.box div.box.red p.box_caption {background: #f12800; color: #000;}

/* green */
* html div.box.green p.box_title, * html div.box.green p.box_caption {background: #84b50d; color: #000;}

/* nested green */
* html div.box div.box.green p.box_title, * html div.box div.box.green p.box_caption {background: #84b50d; color: #000;}

/* orange */
* html div.box.orange p.box_title, * html div.box.orange p.box_caption {background: #ff8000; color: #000;}

/* nested orange */
* html div.box div.box.orange p.box_title, * html div.box div.box.orange p.box_caption {background: #ff8000; color: #000;}

/* yellow */
* html div.box.yellow p.box_title, * html div.box.yellow p.box_caption {background: #ffd100; color: #000;}

/* nested yellow */
* html div.box div.box.yellow p.box_title, * html div.box div.box.yellow p.box_caption {background: #ffd100; color: #000;}

/* grey */
* html div.box.grey p.box_title, * html div.box.grey p.box_caption {background: #92aab5; color: #000;}

/* nested grey */
* html div.box div.box.grey p.box_title, * html div.box div.box.grey p.box_caption {background: #92aab5; color: #000;}

/* end plugin:box */

/dokuwiki/lib/tpl/default/design.css

/**
 * Design elements for default Template
 *
 * @name Andreas Gohr <andi@splitbrain.org>
 * @name Anika Henke <henke@cosmocode.de>
 */

/* -------------- general elements --------------- */

body {
  font: 80% "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
  background-color: White;
  color: Black;
  margin: 0;
  padding: 0;
}

/* the document */
div.page {
  margin-top: 4px;
  margin-left:  1em;
  margin-right: 2em;
  text-align: justify;
}

table {
  font-size: 100%;
  padding:0;
  margin:0;
}

tr,td,th {padding:0; margin:0;}

img {border:0}

p {padding:0; margin: 0.8em 0 0.8em 0;}

hr {
  border: 0px;
  border-top: 1px solid #8cacbb;
  text-align:center;
  height: 0px;
}

div.nothing {
  text-align:center;
	margin: 2em;
}

/* ---------------- forms ------------------------ */

form {
  border: none;
  margin: 0;
  display: inline;
}

label {
  display: block;
  text-align: right;
  font-weight: bold;
}

label.simple {
  text-align: left;
  font-weight: normal;
}

label input.edit {
  width: 50%;
}

fieldset {
  width: 300px;
  text-align: center;
  border: 1px solid #8cacbb;
  padding: 0.5em;
}

textarea.edit {
  font-family:monospace;
  border: 1px solid #8cacbb;  
  color: Black;
  background-color: white;
  font-size:14px;
  padding: 3px;
  width:100%;
}

input.edit,select.edit {
  font-size: 100%;
  border: 1px solid #8cacbb;
  height: 18px !important;
  max-height: 22px !important;
  min-height: 22px !important;
  color: Black;
  background-color: white;
  vertical-align: middle;
  padding: 1px;
  display: inline;
}

input.missing {
  font-size: 100%;
  border: 1px solid #8cacbb;
  height: 18px !important;
  max-height: 22px !important;
  min-height: 22px !important;
  color: Black;
  background-color: #ffcccc;
  vertical-align: middle;
  padding: 1px;
  display: inline;
}

/* --------- buttons ------------------- */


input.button, button.button{
  border: 1px solid #8cacbb;  
  color: Black;
  background-color: white;
  vertical-align: middle;
  text-decoration:none;
  font-size: 100%;
  cursor: pointer;
  height: 22px !important;
  max-height: 22px !important;
  min-height: 22px !important;
  margin: 1px;
  display: inline;
}

div.secedit input.button {
  border: 1px solid #8cacbb;
  color: Black;
  background-color: white;
  vertical-align: middle;
  text-decoration:none;
  margin: 0px;
  padding: 0px;
  font-size: 10px;
  cursor: pointer;
  height: 15px !important;
  max-height: 15px !important;
  min-height: 15px !important;
  float:right;
  display: inline;
}

/* ----------- page navigator ------------- */

div.pagenav {
	margin-top:1em;
}

div.pagenav-prev {
	text-align:right;	
	float:left;
	width:50%
}

div.pagenav-prev input.button {
	margin-right:5px;
}

div.pagenav-next {
	text-align:left;
	float:right;
	width:50%
}

div.pagenav-next input.button {
	margin-left:5px;
}

/* --------------- Links ------------------ */

a {
  color:#436976;
  text-decoration:none;
}
a:hover {color:#436976;
  text-decoration:underline;
}

/* external link */
a.urlextern{
    background: transparent url(images/link_icon.gif) 0px 1px no-repeat;
    padding: 1px 0px 1px 16px;
    color:#43BBFF;
    text-decoration:none;
}
a.urlextern:visited {
  color:#4369AA;
}
a.urlextern:hover {
	color:#436976;
  text-decoration:underline;
}

/* windows share */
a.windows{
    background: transparent url(images/windows.gif) 0px 1px no-repeat;
    padding: 1px 0px 1px 16px;
    color:#43BBFF;
    text-decoration:none;
} 
a.windows:visited {
  color:#4369AA;
}
a.windows:hover { 
	color:#436976;
  text-decoration:underline;
}

/* interwiki link */
a.interwiki{
    background: transparent url(images/interwiki.png) 0px 1px no-repeat;
		padding-left: 16px;
    color:#43BBFF;
    text-decoration:none;
}
a.interwiki:visited {
  color:#4369AA;
}
a.interwiki:hover {
	color:#436976;
  text-decoration:underline;
}

/* link to some embedded media */
a.media {
  color:#43BBFF;
  text-decoration:none;
}
a.media:hover {
  color:#436976;
  text-decoration:underline
}

/* email link */
a.mail {
  background: transparent url(images/mail_icon.gif) 0px 1px no-repeat;
  padding: 1px 0px 1px 16px;
  color:#436976;
  text-decoration:none;
}
a.mail:hover {
  text-decoration:underline;
}

/* existing wikipage */
a.wikilink1:link    { color:#43BBFF; text-decoration:none }
a.wikilink1:visited { color:#4369AA; text-decoration:none }
a.wikilink1:hover   { color:#436976; text-decoration:underline }

/* not existing wikipage */
a.wikilink2:link    { color:#FF3300; text-decoration:none }
a.wikilink2:visited { color:#FF3300; text-decoration:none }
a.wikilink2:hover   { color:#FF3300; text-decoration:underline }


/* ------------- Page elements ----------------- */

div.preview{
  background:#f7f9fa;
  margin-left:2em;
  padding: 4px;
  border: 1px dashed #000000;
}

div.breadcrumbs{
  background-color: #f5f5f5;
  font-size:80%;
  color: #666666;
  padding-left: 4px;
}

span.user{
  color: #cccccc;
  font-size: 90%;
}

/* embedded images */
img.media {
  margin: 3px;
}

img.medialeft {
  border: 0;
  float: left;
  margin: 0 1.5em 0 0;
}

img.mediaright {
  border: 0;
  float: right;
  margin: 0 0 0 1.5em;
}

img.mediacenter {
  border: 0;
	display: block;
  margin-left: auto;
  margin-right: auto;
}

acronym {
  cursor: help;
  border-bottom: 1px dotted #000;
}

/* general headline setup */
h1, h2, h3, h4, h5 {
    color: Black;
    background-color: transparent;
    font-family: "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-weight: normal;
    margin-left:    0;
    margin-right:   0;
    margin-top:     0;
    margin-bottom:  1em;
    padding-left:   0;
    padding-right:  0;
    padding-top:    0.5em;
    padding-bottom: 0;
    border-bottom: 1px solid #8cacbb;
    clear: left;
}

/* special headlines */
h1 {font-size: 160%; margin-left: 0px; font-weight: bold;}
h2 {font-size: 150%; margin-left: 20px;}
h3 {font-size: 140%; margin-left: 40px; border-bottom: none; font-weight: bold;}
h4 {font-size: 120%; margin-left: 60px; border-bottom: none; font-weight: bold;}
h5 {font-size: 100%; margin-left: 80px; border-bottom: none; font-weight: bold;}

hr {clear: both; border:none;}

/* indent different sections */
div.level1 {margin-left: 3px;}
div.level2 {margin-left: 23px;}
div.level3 {margin-left: 43px;}
div.level4 {margin-left: 63px;}
div.level5 {margin-left: 83px;}

/* unordered lists */
ul { 
  line-height: 1.5em;
  list-style-type: square;
  margin: -0.5em 0 0.5em 1.5em;
  padding: 0;
  list-style-image: url(images/bullet.gif);
}

/* ordered lists */
ol {
  line-height: 1.5em;
  margin: -0.3em 0 0.5em 1.5em;
  padding: 0;
  color: #638c9c;
  font-weight: bold;
  list-style-image: none;
}

/* the list items overriding the ol definition */
.li {
  color: #000000;
  font-weight: normal;
}

ol {list-style-type: decimal}
ol ol {list-style-type: upper-roman}
ol ol ol {list-style-type: lower-alpha}
ol ol ol ol {list-style-type: lower-greek}

li.open {
  list-style-image: url(images/open.gif);
}

li.closed {
  list-style-image: url(images/closed.gif);
}

blockquote {
  border-left: 2px solid #8cacbb;
  padding-left: 3px;
  margin-left: 0;
}

/* code blocks by indention */
pre.pre {
  font-size: 120%;
  padding: 0.5em;
  border: 1px dashed #8cacbb;
  color: Black;
  background-color: #f7f9fa;
  overflow: auto;
}

/* code blocks by code tag */
pre.code {
  font-size: 120%;
  padding: 0.5em;
  border: 1px dashed #8cacbb;
  color: Black;
  background-color: #f7f9fa;
  overflow: auto;
}

/* inline code words */
code {
  font-size: 120%;
}

/* code blocks by file tag */
pre.file {
  font-size: 120%;
  padding: 0.5em;
  border: 1px dashed #8cacbb;
  color: Black;
  background-color: #dee7ec;
  overflow: auto;
}

/* inline tables */
table.inline {
  background-color: #ffffff;
  border-spacing: 0px;
  border-collapse: collapse;
}

table.inline th {
  padding: 3px;
  border: 1px solid #8cacbb;
  background-color: #dee7ec;
}

table.inline td {
  padding: 3px;
  border: 1px solid #8cacbb;
}

.leftalign{
  text-align: left;
}

.centeralign{
  text-align: center;
}

.rightalign{
  text-align: right;
}

/* ---------- table of contents ------------------- */

div.toc {
  margin-left: 2em;
  margin-top: 1.2em;
  margin-bottom: 0;
  float:right;
  width: 200px;
  font-size: 80%;
  clear:both;
}

div.tocheader {
  padding: 3px;
  border: 1px solid #8cacbb;
  background-color: #dee7ec;
  text-align: left;
  font-weight:bold;
  margin-bottom: 2px;
}

div.toctoggle {
  float:right;
  margin-top:0.3em;
  margin-right:3px;
}

div.toctoggle img {
  width:0.8em;
  height:0.8em;
}

#tocinside {
  border: 1px solid #8cacbb;
  background-color: #ffffff;
  text-align: left;
  padding-top: 0.5em;
  padding-bottom: 0.7em;
}

ul.toc {
  list-style-type: none;
  list-style-image: none;
  line-height: 1.2em;
  margin: 0;
  padding: 0;
  padding-left: 1em;
}

ul.toc li {
  background: transparent url(images/tocdot2.gif) 0 0.6em no-repeat;
  padding-left:0.4em;
}

ul.toc li.clear {
  background-image: none;
  padding-left:0.4em;
}

a.toc {
  color: #436976;
  text-decoration:none;
}

a.toc:hover {
  color: #000000;
  text-decoration:underline; 
}

/* ---------------------------- Diff rendering --------------------------*/
table.diff { background:white; }
td.diff-blockheader {font-weight:bold}
td.diff-header {
  border-bottom: 1px solid #8cacbb;
  font-size:120%;
}
td.diff-addedline {
    background:#ddffdd;
    font-family: monospace;
    font-size: 100%;
}
td.diff-deletedline { 
    background:#ffffbb;
    font-family: monospace;    
    font-size: 100%;
}
td.diff-context {
    background:#f7f9fa;
    font-family: monospace;
    font-size: 100%;
}
span.diffchange { color: red; }

/* --------------------- footnotes -------------------------------- */

div.footnotes{
  clear:both;
  border-top: 1px solid #8cacbb;
  padding-left: 1em;
  margin-top: 1em;
}

div.fn{
  font-size:90%;
}

a.fn_top{
  vertical-align:super;
  font-size:80%;
}

a.fn_bot{
  vertical-align:super;
  font-size:80%;
  font-weight:bold;
}

/* insitu-footnotes */
div.insitu-footnote {
  font-size: 80%;
  line-height: 1.2em;
  border: 1px solid #8cacbb;
  background: #eef3f8;
  text-align: left;
  padding: 4px;
  max-width: 40%;    /* IE's width is handled in javascript */  
}

/* overcome IE issue with one line code or file boxes which require h. scrolling */
* html .insitu-footnote pre.code, * html .insitu-footnote pre.file {
  padding-bottom: 18px;
}

/* --------------- search result formating --------------- */
.search_result{
  margin-bottom: 6px;
  padding-left: 30px;
  padding-right: 10px;
}

.search_snippet{
  color: #999999;
  font-size: 12px;
  margin-left: 20px;
}

.search_sep{
  color: #000000;
}

.search_hit{
  color: #000000;
  background: #FFFF99;
}

div.search_quickresult{
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px dashed #8cacbb;
  margin-left: 30px;
  padding-right: 10px;
}

div.search_quickhits {
  margin-left: 1em;
  float:left;
  background: transparent url(images/bullet.gif) 0px 1px no-repeat;
  padding: 1px 0px 1px 8px;
  width: 30%;
}

/* ------------------ Additional ---------------------- */
.footerinc a img {
    opacity: 0.5;
}

.footerinc a:hover img {
    opacity: 1;
}

/* ---- Admin --- */

div.acladmin label {
  text-align: left;
  font-weight: normal;
  display: inline;
}

div.acladmin table{
  margin-left: 10%;
  width: 80%;
}

/* ---------- AJAX quicksearch ----------- */

div.ajax_qsearch {
  position:absolute;
  right:237px;;
  width: 200px;
  opacity: 0.9;
  display:none;
  font-size: 80%;
  line-height: 1.2em;
  border: 1px solid #8cacbb;
  background: #eef3f8;
  text-align: left;
  padding: 4px;
}

/* ---------- Spellchecking ------------- */

a.spell_error {
  color: #ff0000;
  text-decoration: underline;
}

div#spell_suggest {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  background-color: #fff;
  padding: 2px;
  border: 1px solid #000;
  font-size:80%;
  z-index: 2;
}

div#spell_result {
  display:none;
  font-family:monospace;
  border: 1px solid #8cacbb; 
  color: Black;
  font-size:14px;
  padding: 3px;
  background-color: #f7f9fa;
  overflow: auto;
  z-index: 1;

  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

span.spell_noerr {
  color: #009933;
}

span.spell_wait {
  color: #0066cc;
}

/* ---------------  Image Details  ----------------- */

div.img_big {
  float: left;
  margin-right: 0.5em;
}

dl.img_tags dt {
  font-weight: bold;
  background-color: #dee7ec;
}
dl.img_tags dd {
  background-color: #f5f5f5;
}

div.imagemeta {
  color: #666;
  font-size: 70%;
  line-height: 95%;
}

div.imagemeta img.thumb{
  float:left;
  margin-right: 0.1em;
}

/* -------------- Media Popup ---------------------- */

div.mediaselect-right li, div.uploadform { 
  clear: both;
}

div.mediaedit div.data label{
	display: block;
  text-align: right; 
  width: 20%;
  float: left;
  margin-right: 0.5em;
}

div.mediaedit div.data input, div.mediaedit div.data textarea{
  width: 75%;
  padding: 0.1em;
  margin: 0.1em;
}

div.mediaedit div.data input.button {
  width: 10em;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

- AC's color suggestions

- New colors: yellow and grey. Not specifying a color makes it black background with white font.

- Box placement should be better also with these new values: 99% size for a large box, and 48% size for a half box

- Don't use lots of "\\" (aka <br/>) to make the box don't cross the headers. Because depending on the width of the windows this make ugly space before the headers. Instead, i hacked the <hr> style with a css clear:both. So just put "----" after lots of boxes so that the header just flow under the boxes. (I will modify the new start page before the MBHP header to demonstrate how) I just hope nobody was using the horizontal rule for. Else i would have to modify the html generator of dokuwiki and i surely don't want to spend all my time on this, so i find this hack cool. Also now there are boxes i'm sur people won't need horizontal rule.

[ptitjes]

Box caption text was made bold in the previous version...

But i attached a design.css with left text align, and a plugin_style.css with white box caption text.

I think we should try it like this and see... (BTW i find this having a lot a kind of Window$ style... brrrr... but it's not so uggly!)

MidiBox DokuWiki Style.zip

MidiBox DokuWiki Style.zip

[Twin-X]

Box caption text was made bold in the previous version...

But i attached a design.css with left text align, and a plugin_style.css with white box caption text.

I think we should try it like this and see... (BTW i find this having a lot a kind of Window$ style... brrrr... but it's not so uggly!)

Files uploaded.

Are the boxes shown in the examples on your local pc's only or is it in the wiki allready (as i do not see then)

[ptitjes]

Files uploaded.

Are the boxes shown in the examples on your local pc's only or is it in the wiki allready (as i do not see then)

Great that works!! I think you have to update your browser's cache to see the changes...

[ptitjes]

Hi TK and Twin-x,

I found a redirect plugin:

http://wiki.splitbrain.org/plugin:goto

That would be great while reorganizing the wiki to make a smooth transition and tell people to update their bookmarks.

Thanks all for the good work!

Cheers, Didier.

[audiocommander]

Are the boxes shown in the examples on your local pc's only or is it in the wiki allready (as i do not see then)

the boxes are here:

http://www.midibox.org/dokuwiki/doku.php?id=start

I will download the css and make some additional tweaks (eg, I think the link color is a lot better than before, but a bit too bright)...

but it's really gotten a lot better! Thanks Didier!

A redirect will be a good thing, because if we're using the sidebar somewhen, we can then easily update old pages to use new namespaces :)

Cheers,

Michael

[ptitjes]

ac: i just fixed the box sizes, removed the "\\"s and added a rule to make the "MBHP" flow correctly under the boxes. Just edit the page to see how it is done!

BTW, for the link colors, i was forced to make them a bit bright, in order to have two blue for visited and not-visited.

Light blue = not-visited

Blue = visited

If you want them darker, you won't be able to differenciate between normal text and visited links.

Edit: I propose that we now little by little move modules and projects to namespaces as you have done for MB Seq v3.

[ptitjes]

Also Twin-X is it possible to enable URL rewriting ?? So that we have url like:

http://www.midibox.org/wiki/Start

http://www.midibox.org/wiki/Projects:Synthesizers:Midibox FM

...