Edit detail for PerPageStylesHack2 revision 1 of 1

1
Editor: DanMcMullen
Time: 2003/11/18 13:55:17 GMT+0
Note: links updated after rename

changed:
-
what it is (again) <span class="chat">"**Child** of PerPageStylesHack!"</span>

 this page is a demonstration of some experimental user interface techniques in the "notebook" proto-skin.  it extends: 

 <h5>PerPageStylesHack</h5>

 - a horrible combination of TAL & DTML which is abused to magically...

 - use customized styles and floating divs for *each* page...

 - extracted from special sections of the page contents.

 even more horrible <span class="chat">"new! improved!"</span>
  
  - abuses normal user interface conventions with wierd scrollbar position

  - the embedded css is too "evolved" (bloated) for the lightweight spirit of per page styles

  - not-blame DanMcmullen
  
 ps- <span class="chat">"bzzzz..."</span>

  semi-tricky css

      may not render properly in some browsers

      now with less content so zooming to smaller font sizes eliminates the scrollbar
      and/or zooming to larger sizes displays it

      to see the proto-skin on this page the WikipageX skin must be selected in UserOptions

<h1>comments</h1>
<h9>requested...</h9>
<h8>...tia!</h8>
<!--
-->
<a name="comments"></a>

<dtml-comment> no blank lines allowed in funky multiline set() </dtml-comment>
<dtml-call "REQUEST.set('head_end','''
<style type=`text/css`>
#mainbg { position: absolute; top: 1%; left: 1%; width: 98%; height: 98%; }
#main { overflow:auto; position: absolute; top: 1%; left: 16%; right: .5%; height: 92%; 
  border: none;
}
#mainfg { 
  border-top: dotted 1px #bdf;
  position: absolute; top: 1%; left: 16%; width: 83.5%; height: 0;
}
#maincon { margin-right: 28%; }
#maincon>ul>li, #main>ul>li>ul, #main li>p  { margin-top: .3em; }
#main li { margin-left: -.5em; }
#maincon>ul { list-style-type: disc; }
#main ul ul { list-style-type: circle; }
#bar { text-align: right; font-size: smaller; position: absolute; top: 95%; left: 1%; right: 2%; }
#bar input { font-size: 90%; width: 15em; margin-top: -1px; border: solid 1px; }
.hl { position: absolute; top: 94%; left: 0%; height: 0px; width: 100%; border-top: solid 1px; }
.vl { position: absolute; top: 0%; height: 99.9%; width: 0px; border-right: dotted 1px; }
.vl0 { position:absolute; left:74.5%; width: 2.4%; top 0%; height: 99.9%; background: #fdfdfb; }
body { background: url(DMc_yellowwave2b.gif) repeat-y 2% 0%; font-family: palatino, palatino linotype; }
#maincon>p { margin-left: +1em; }
p { margin-right: 1em; }
A, A:link, A:visited, A:active, A:hover { text-decoration: none; }
A:hover { text-decoration: none;
 border-top: solid 1px; border-left: dotted 1px; 
 margin: -1px 0 0 -1px;
}
A[accesskey=`1`] {
 border: none; 
 margin: 0;
}
h1 { font: bold 140% default; font-family: inherit; 
  background: url(DMc_pinkpat.gif) repeat-x; 
  border-top: dotted 2px; border-left: dotted 1px; 
  padding-left: 2mm; margin-top: 1.5em; 
  }
h2 { font: bold 140% default; font-family: inherit;  
  background: url(DMc_pinkpat.gif) repeat-x; 
  border-top: double 3px; border-left: dotted 1px; 
  padding-left: 2mm; margin-top: 1.5em; 
  }
h3 { font: bold 120% default; font-family: inherit;  
  background: url(DMc_pinkpat.gif) repeat-x; 
  border-top: solid 1px; border-left: dotted 1px; 
  margin-left: 0.25em; padding-left: 2mm; margin-top: 1.5em; 
  }
h4 { font: bold 100% default; font-family: inherit;  
  background: url(DMc_pinkpatnarrow.gif) repeat-x; 
  border-top: dotted 1px; border-left: dotted 1px; 
  margin-left: 0.5em; padding-left: 2mm; 
  }
h5 { font: bold 90% default; font-family: inherit;  
  border-top: dotted 1px; 
  border-left: dotted 1px;
  margin: 0 0 1em .5em; padding-left: 2mm; 
  }
h6 { font: bold 90% default; font-family: inherit; 
  border-top: none; 
  border-left: dotted 1px;
  margin: 0 0 1em .5em; padding-left: 2mm; 
  }
h7 { display: block; font: bold 90% default; font-family: inherit; 
  border-top: solid 1px; border-left: dotted 1px; 
  margin-left: 0.5em; margin-right: 0; padding-left: 2mm; 
  }
h8 { display: block; font: bold 100% default; font-family: inherit; 
 background: url(DMc_pinkpatnarrow.gif) repeat-x; 
  border-left: dotted 1px; 
  margin: 0 0 1em .5em; padding-left: 2mm; padding-right: inherit;
  }
h9 { display: block; font: bold 120% default; font-family: inherit; 
  background: url(DMc_pinkpat.gif) repeat-x; 
  border-left: dotted 1px; 
  margin: 0 0 1em .25em; padding-left: 2mm;
  }
hr { height: 0; border-top: solid 1px; }
input { border: solid 1px; }
textarea { border: solid 1px; }
.chat { margin-top: -1.4em; position: absolute; right: 30.5%; font: medium normal; font-family: inherit; }
h3 > .chat { padding-top: 2px; }
#maincon>p h8 { margin-left: -.5em; margin-right: -1em; }
#margin { position: absolute; bottom: 6%; left: 78%; right: 4%; font-size: x-small; 
  padding-bottom: 1em; 
  border-top: solid 1px; border-right: double 3px;
  text-align: right; padding-right: 1mm;
}
.marginView { border-top: dotted 1px; margin-top: 2px; }
.marginIcons { float: left; }
.marginHead { }
.marginIconsH { position: absolute; left: 0%; }
/*#margin A { padding-left: 2px; }*/
#logo_minimal, #logo_full, #logo_simple { display:none; }
  #logo_float { position: absolute; top: 3%; left: 4%; }
  #pageheading table { padding-top: .5em; width: 99%; }
#searchbox { display: none; }
#commentform { font-size: smaller; }
#commentform input[name=`subject_heading`] { width: 40mm; }
#main table[cellpadding=`0`] { font-size: smaller; }
#main table[cellpadding=`0`] input[name=`subject_heading`] { width: 40mm; }
/* colors redux */
  /* links */
  A, A:link, A:visited, A:active { color: #149; }
  A:hover { color: #58c; border-color: #bdf #fad; }
  #bar A, #bar A:link, #bar A:visited, #bar A:active { color: #a84; }
  #bar A:hover { color: #fa0; }
  #margin A, #margin A:margin, #margin A:visited, #margin A:active { color: #58c; }
  #margin A:hover { color: #6af; }
  #mainfg { border-color: #bdf; }
  #bar { color: #bdf }
  #bar input { border-color: #bdf; }
  body { color: #333; background-color: #fefdf9; }
  .vl0 { background-color: #fefdf9; }
  .vl { border-color: #fad; }
  .hl { border-color: #bdf; }
  h1, h2, h3, h4, h5, h6, h7, h8, h9 { color: #555; border-color: #bdf #fad; }
  hr { border-color: #bdf; }
  input, textarea { border-color: #bdf; }
  .shade1 { background-color: #bdf; }
  .shade2 { background-color: #fffdf2; }
  #margin { color: #888; border-color: #bdf #fce; }
  .marginView { border-color: #bdf; }
  .marginIcons, .marginHead { background-color: #eee; }
  .chatpink { color: #c8b; }
  .chatgreen { color: #3b8; }
  .chatyellow { color: #eb4; }
  .chat { color: #38f; }
<</style>
'''
.replace('`',_.chr(34))
)">

<dtml-call "REQUEST.set('body_start','''
<div id=`mainbg`>
<img src=`DMc_pc3b.gif` style=`position: absolute; height: 23%; width: 40%; top: 35%; left: 22.5%;` />
</div>
<div id=`main`>
<div id=`maincon`>
<a name=`top`></a>
'''
.replace('`',_.chr(34))
.replace('THISPAGE',REQUEST.URL)
.replace('THISWIKI',REQUEST.URL1)
)">

<dtml-call "REQUEST.set('body_end','''
</div> <!-- maincon -->
</div> <!-- main -->
<a href=`foo`>
<div class=`vl0`>
<div class=`vl` style=`left: 0;`></div>
<div class=`vl` style=`left: 3px;`></div>
<div class=`vl` style=`left: 6px;`></div>
</div>
<div class=`hl`></div>
</a>
<div id=`bar`>
<span style=`float: right;`>
<form method=`GET` action=`THISWIKI/SearchPage` style=`margin: 1px;`>
<input id=`searchinput` class=`shade2` name=`expr`
         type=`text` size=`20` maxlength=`100` value=``
         title=`search all pages` accesskey=`s` />
</form>
</span>
<span>
<a href=`THISPAGE#top` title=`show top of page`>top</a>
<a href=`THISPAGE#comments` title=`show comments`>comments</a>
<a href=`THISPAGE#bottom` title=`show bottom of page`>bottom</a>
&middot;
<a href=`UserOptions?setcookies=1&amp;zwiki_displaymode=full&amp;zwiki_showhierarchy=1&amp;redirectURL=THISPAGE`
   title=`show all features` accesskey=`f`><b><u>f</u></b>ull</a>
<a href=`UserOptions?setcookies=1&amp;zwiki_displaymode=simple&amp;zwiki_showhierarchy=&amp;redirectURL=THISPAGE`
   title=`show basic features (no page hierarchy)`
   accesskey=`i` >s<b><u>i</u></b>mple</a>
<a href=`UserOptions?setcookies=1&amp;zwiki_displaymode=minimal&amp;zwiki_showhierarchy=&amp;redirectURL=THISPAGE`
   title=`hide all non-essential features` accesskey=`m`><b><u>m</u></b>inimal</a>
&middot;
<a href=`THISPAGE/editform`
     title=`edit this page`
     accesskey=`e`><b><u>e</u></b>dit</a>
&middot;&nbsp;
</span>
</div>
<div id=`logo_float`>
<a href=`THISWIKI`
   title=`go to home page` accesskey=`1`>
<img src=`THISWIKI/pc3.gif` alt=`` title=`` border=`0` /></a>
</div>
<div id=`margin`>
<div class=`marginView`>
  <div class=`marginHead`>
  <span class=`marginIconsH`><a title=`minimize`>&nbsp;0 </a>&middot;<a title=`maximize`> 1 </a>&middot;<a title=`goto MoTD`> @&nbsp;</a></span>
  MoTD
  </div>
  `margin` &middot; context &middot; navigation &middot; organization  
  <a href=`THISWIKI/THISUSER` style=`color:#fa0;`>:-)</a>
</div>
<div class=`marginView`>
  <div class=`marginHead`>
  <span class=`marginIconsH`><a title=`normalize` style=`color: #fa0;`>&nbsp;0 </a>&middot;<a title=`maximize`> 1 </a></span>
  page family
  </div>
</div>
<div class=`marginView`>
  <span class=`marginIcons`><a title=`minimize`>&nbsp;0 </a>&middot;<a title=`maximize`> 1 </a>&middot;<a title=`goto QuickLinks`> @&nbsp;</a></span>
  <a href=`/`>home</a>
  <a href=`RecentChanges`>changes</a>
  <a href=`IssueTracker`>issues</a>
  <a href=`THISPAGE/contents`>contents</a>
  <a href=`UserOptions`>prefs</a>
  <a href=`HelpPage` title=`go to HelpPage` accesskey=`h`><b><u>h</u></b>elp</a>
</div>
</div>
<div id=`mainfg`></div>
'''
.replace('`',_.chr(34))
.replace('THISPAGE', REQUEST.URL)
.replace('THISWIKI', REQUEST.URL1)
.replace('THISUSER', _.getattr(REQUEST,'zwiki_username','DanMcmullen'))
)">

<!--
<img src="DMc_pc3.jpg" />
<img src="yellowwave2.jpg" />
<img src="antipink.gif" />
<img src="bg4x.gif" />
<img src="bg.gif" />
<img src="bg1.gif" />
<img src="pinkpat.gif" />
<img src="gc.jpg" />
<img src="pinkpatnarrow.gif" />
<img src="DMc_bluepat.gif" />
<img src="DMc_yellowwave2b.gif" />
-->


From DanMcmullen Mon Nov 10 14:22:46 -0800 2003
From: DanMcmullen
Date: Mon, 10 Nov 2003 14:22:46 -0800
Subject: a few new bits...
Message-ID: <20031110142246-0800@zwiki.org>

...tweeks n mockups.  the proto-skin starts to almost look like what i'm imagining, so far.

as always, TKOYFIR*

(*The Kindness Of Your Feedback Is Requested)





what it is (again) "Child of PerPageStylesHack!"

this page is a demonstration of some experimental user interface techniques in the "notebook" proto-skin. it extends:

PerPageStylesHack

  • a horrible combination of TAL & DTML which is abused to magically...
  • use customized styles and floating divs for each page...
  • extracted from special sections of the page contents.

even more horrible "new! improved!"

  • abuses normal user interface conventions with wierd scrollbar position
  • the embedded css is too "evolved" (bloated) for the lightweight spirit of per page styles
  • not-blame DanMcmullen

ps- "bzzzz..."

semi-tricky css

may not render properly in some browsers

now with less content so zooming to smaller font sizes eliminates the scrollbar and/or zooming to larger sizes displays it

to see the proto-skin on this page the WikipageX skin must be selected in UserOptions?

comments

requested... ...tia!


comments:

a few new bits... --DanMcmullen, Mon, 10 Nov 2003 14:22:46 -0800 reply
...tweeks n mockups. the proto-skin starts to almost look like what i'm imagining, so far.

as always, TKOYFIR*

(*The Kindness Of Your Feedback Is Requested)