8.4 - Sample Project StylesHere are the project styles I'm using for this manual. If you look them over, you'll notice I redacted the path on my local server that points to my images; that's because it would reveal part of my internal server path structure, which no one needs to know. I created the redaction by generating the project styles into a variable named xlatedglobalstyles using the technique described here, then did this in the Page Content: [replace privatestuff,{orange [i redacted]},[v xlatedglobalstyles]]
Here's the resulting redacted style content: Canned HTML 4.01 page style configuration for gstyle "htmlpage"
--------------------------------------------------------------- [include html401.dsys] Purple bar incorporating next, previous, toc, index, notes, and glossary ------------------------------------------------------------------------ [include npbar.dsys] Canned TOC, index, glossary, foot+end notes, and figures systems ---------------------------------------------------------------- [include tocmod1.dsys] [include indexmod1.dsys] [include glossmod1.dsys] [include notesmod1.dsys] [include figurmod1.dsys] [include citesmod1.dsys] Mailto ------ [gstyle mailto [splitcount 1][split [co],[b]][a tab,mailto:fyngyrz@gmail.com?subject=[urlencode [parm 0]],[parm 1]]] Set the index flags ------------------- [global fl_bysection true] [global fl_redun true] Mod the headings to automatically index --------------------------------------- [gstyle H1 {ix [b]}{h1 [b]}] [gstyle H2 {ix [b]}{h2 [b]}] [gstyle H3 {ix [b]}{h3 [b]}] [gstyle H4 {ix [b]}{h4 [b]}] [gstyle H5 {ix [b]}{h5 [b]}] [gstyle H6 {ix [b]}{h6 [b]}] HTML Conveniences ----------------- [gstyle cent <center>[b]</center>] [gstyle nobreak <span style="white-space:nowrap;">[b]</span>] [gstyle p <p style="margin-left: 0">[b]</p>[lf]] [gstyle pi <p style="margin-left: 2em">[b]</p>[lf]] [gstyle name <a name="[b]"></a>] [gstyle q "[b]"] [gstyle tag {bu {pla}[b]{pra}}] HTML tags [gstyle stag {bu {pls}[b {purple [b]}]{prs}}] defined styles [gstyle atag {bu {plb}{green [b]}{prb}}] aa_macro built-ins [gstyle qstring {bu {white "}{darkred [b]}{white "}}] [gstyle entity {bu <span style="color:#5599FF;">&[b];</span>}] [gstyle tt <tt>[b]</tt>] [gstyle md —] [gstyle nb ] [gstyle db <br><br>] [gstyle sb <br>] How I style variables ===================== [gstyle memz <span style="background:#FFFFcc;"> [b {dgreen [b]}] </span>] [gstyle cwrap [splitcount 1][split [co],[b]]<span style="color: #[parm 0];">[parm 1]</span>] [gstyle bk <span style="background-color: #000088;">[b]</span>] [gstyle red {cwrap ff0000,[b]}] [gstyle bred [b {red [b]}]] [gstyle darkred {cwrap 880000,[b]}] [gstyle green {cwrap 00ff00,[b]}] [gstyle grey {cwrap 888888,[b]}] [gstyle gray {cwrap 888888,[b]}] [gstyle yellow {cwrap ffff00,[b]}] [gstyle orange {cwrap ff8844,[b]}] [gstyle dgreen {cwrap 008800,[b]}] [gstyle green {cwrap 00FF00,[b]}] [gstyle blue {cwrap 0000ff,[b]}] [gstyle purple {cwrap ff00ff,[b]}] [gstyle white {cwrap FFFFFF,[b]}] [gstyle aqua {cwrap 00FFFF,[b]}] [gstyle daqua {cwrap 008888,[b]}] A nice little keyboard key representation in CSS ------------------------------------------------ [gstyle csskey <style type="text/css"> .ckey [ls] display: inline-block; white-space: nowrap; border: .1em solid #000000; border-radius: 5px; min-width: 1em; border-color: #AAAAAA; background: #000000; padding-left: 3px; padding-right: 3px; color: #ffffff; [rs]</style>] [gstyle key <span class="ckey">[b]</span>] [gstyle keyhints <div style=" clear: both; width: 75%; border-style: solid; background: #ffffff; text-align: center; padding: .5em; margin: auto; "> [i Keyboard Navigation] <hr width="75%"> {key ,} Previous Page {key .} Next Page {key t} TOC {key i} Index </div>] [gstyle rawmode {nobreak {bu [b {plb}{green local} {grey ds_rawmode} 1{prb}]}}] Warning, note, and tip blocks ============================= [gstyle cblock [split |||,[b]] <div style=" width: 75%; border-style: solid; background: #[parm 0]; text-align: left; padding: .5em; margin: auto; margin-top: 1em; margin-bottom: 1em; ">[parm 1]</div> ] [gstyle warning {cblock FFDDDD|||[b]}] [gstyle caution {cblock FFFFDD|||[b]}] [gstyle note {cblock DDDDFF|||[b]}] [gstyle tip {cblock DDFFDD|||[b]}] Sidenotes ========= [gstyle sidenote [split |||,[b]] <table style=" margin-right: 20px; background: #ffffff; padding: 0; float: [parm 0];" border=1 width="33%"> <tr><td><table style="padding: .25em;" width="100%"><tr><td>[parm 1]</td></tr></table></td></tr> </table> ] [gstyle leftnote {sidenote left|||[b]}] [gstyle rightnote {sidenote right|||[b]}] Pretty-printing setup for hlit, vlit and slit: ============================================== [global ppre_lb <span style="color:#FFFF00;"><big><b>] Opening square brace [global ppos_lb </b></big></span><span style="color:#AAAAAA;">] [global ppre_rb </span><span style="color:#FFFF00;"><big><b>] Closing square brace [global ppos_rb </b></big></span>] [global ppre_ls <span style="color:#FF0000;"><big><b>] Opening squiggly brace [global ppos_ls </b></big></span><span style="color:#FF8844;">] [global ppre_rs </span><span style="color:#FF0000;"><big><b>] Closing squiggly brace [global ppos_rs </b></big></span>] [global ppre_la <span style="color:#00FFFF;"><big><b>] Opening angle brace [global ppos_la </b></big></span><span style="color:#5599FF;">] [global ppre_ra </span><span style="color:#00FFFF;"><big><b>] Closing angle brace [global ppos_ra </b></big></span>] [global ppre_quo <span style="color:#FFFFFF;"><big><b>] Opening quote [global ppos_quo </b></big></span><span style="color:#880000;">] [global ppre_cqu </span><span style="color:#FFFFFF;"><big><b>] Closing quote [global ppos_cqu </b></big></span>] Here's a nice blue container for the pretty-printed content =========================================================== [gstyle cpad 1em] [gstyle codediv <div style=" background: #000088; color: #00ff00; margin-bottom: {cpad}; padding: {cpad} {cpad} {cpad} {cpad}; ">[b]</div>] These are just quick invocations of the various styled characters ================================================================= [gstyle plb [v ppre_lb][lb][v ppos_lb]] [gstyle prb [v ppre_rb][rb][v ppos_rb]] [gstyle pls [v ppre_ls][ls][v ppos_ls]] [gstyle prs [v ppre_rs][rs][v ppos_rs]] [gstyle pla [v ppre_la]<[v ppos_la]] [gstyle pra [v ppre_ra]>[v ppos_ra]] [gstyle pquo [v ppre_quo][b "][v ppos_quo]] [gstyle pcqu [v ppre_cqu][b "][v ppos_cqu]] [global ppre_ak <span style="color:#008800; font-weight:bold;">] [global ppre_sk <span style="color:#ff00ff; font-weight:bold;">] [global ppos_ak </span>] [global ppos_sk </span>] Mouse paging ------------ [gstyle keynav <script src="mousetrap.js" type="text/javascript"></script> <script type="text/javascript"> Mousetrap.bind(",", onLeft_keyDown, "keydown"); Mousetrap.bind(".", onRight_keyDown, "keydown"); Mousetrap.bind("i", onIndex_keyDown, "keydown"); Mousetrap.bind("t", onToc_keyDown, "keydown"); function onLeft_keyDown() [ls] window.location.href = "[v prevpage]"; [rs] function onRight_keyDown() [ls] window.location.href = "[v nextpage]"; [rs] function onIndex_keyDown() [ls] window.location.href = "indexpage.html"; [rs] function onToc_keyDown() [ls] window.location.href = "tocpage.html"; [rs] </script>] Custom Stuff ------------ [gstyle github [b [a tab,https://github.com/,GitHub]]] [gstyle markdown [b [a tab,https://daringfireball.net/projects/markdown/,Markdown]]] [gstyle bu {bk [b] }] [gstyle aa_macro [b [a tab,http://ourtimelines.com/aamacrodoc/tocpage.html,aa_macro]]] [gstyle sqi [b {yellow [ls]{red [b]}[rs]}]] [gstyle squ [b {yellow [lb]{green [b]}[rb]}]] [gstyle sqx [b {yellow [lb]{red [b]}[rb]}]] [gstyle parm [b {white [b]}]] [gstyle cont [b {aqua [b]}]] [gstyle wv {white [vb]}] [gstyle old [img oldguy.gif]] [gstyle wftm {wtfm}] This gives me a nice way to show hlit, vlit and slit: ===================================================== [gstyle hlit {nobreak {bu {pls}hlit {cont content}{prs}}}] [gstyle vlit {nobreak {bu {pls}vlit {cont variable name}{prs}}}] [gstyle slit {nobreak {bu {pls}slit {cont style name}{prs}}}] Images: ======= [lipath /redacted/pics/] [wepath /wtfm/pics/] [gstyle smile [locimg smile,stock_smiley_2.png]] cpic imagename|||imagetitle -------------------------------- [gstyle cpic <div style="text-align: center;">[splitcount 1][split |||,[b]]{figure [parm 1]}{cent [locimg [parm 0]]}<br>[parm 1]</div>] rpic imagename|||imagetitle -------------------------------- [gstyle rpic <div style="float: right; margin-left: 1em; text-align: center;">[splitcount 1][split |||,[b]]{figure [parm 1]}{cent [locimg [parm 0]]}<br>[parm 1]</div>] lpic imagename|||imagetitle -------------------------------- [gstyle lpic <div style="float: left; margin-right: 1em; text-align: center;">[splitcount 1][split |||,[b]]{figure [parm 1]}{cent [locimg [parm 0]]}<br>[parm 1]</div>] Alternating colors tcolors color1,color2 --------------------- [gstyle treset [local tcount 0]] [gstyle colsp [split [co],[b]][local tc0 [parm 0]][local tc1 [parm 1]]] [gstyle tcolors {treset}{colsp [b]}] [gstyle cinc [local tcount [inc [v tcount]]]] [gstyle tcolor [odd [v tcount] [v tc0]]] [gstyle ntcolo [even [v tcount] [v tc1]]] [gstyle rowcolor {cinc}{tcolor}{ntcolo}] alt color table rows with two parms ----------------------------------- [global aparms width="20%" valign="top" align="right"] [global bparms valign="top"] [gstyle trow2 [split |||,[b]][row bgcolor="{rowcolor}", [cell [v aparms],[b [parm 0]]] [cell [v bparms],[parm 1]]]] Creates a centered div of the specified width in percentage: ctable LR-margin,LR-padding,content - this is use in the page style, next ------------------------------------------------------------------------------ [gstyle ctable [splitcount 2][split [co],[b]]<div style="color: #000000; margin: auto; padding-left: [parm 1]; padding-right: [parm 1]; padding-bottom: [parm 1]; width: [parm 0]; background-color: #FFEEDD;">[nl]<br>[nl][parm 2]</div>[nl]] Advertising =========== [gstyle goog [include googlmod1.dsys]][comment actual google ads] [gstyle xgoog [table width="150"[comment height="600"],[row ,[cell align="center",[dup 16,<br>]150x600 Google Ad Placeholder[dup 16,<br>]]]]] [gstyle sdgoog [table border="1" width="150"[comment height="600"],[row ,[cell align="center",[dup 16,<br>]150x600 Ad Placeholder<br><br> [b Ads off for slashdotters][dup 16,<br>]]]]] [gstyle ads {goog}] [gstyle adtable [table width="100%", [row ,[cell style="padding-right: 2em;" valign="top",[b]] [cell valign="top" align="center" width="175",<div style=" padding-top: 2em; position:fixed; margin-left: 6px;">{ads}</div>]] ]] Page style Body is in centered table, has html validator ---------------------------------------------------------------------------- [gstyle page {htmlpage {ctable 90%,25px, {adtable {npbar2} <div style="font-family: monospace;">[b]</div> {keyhints} {npbar2} {footnotes} {htmlval} {WTFM} } } } ] HTML Validator for HTML 4.01. You can use this to check your pages; if they don't validate when actually published, you should not include this. However, you should also try to make them validate! ---------------------------------------------------------------------- [gstyle htmlval <p style="text-align: center;"> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Loose" height="31" width="88"></a>[nl]<br> [nl]</p>] [gstyle aaugw [b <a target="_blank" style="color: {linkcolor};" href="http://ourtimelines.com/aamacrodoc/tocpage.html">{nobreak aa_macro User's Guide}</a>]] [gstyle aaug [b [a tab,http://ourtimelines.com/aamacrodoc/tocpage.html,aa_macro User's Guide]]] Kill the bar entities we don't want/have ---------------------------------------- [global GLOSSARY] And set up the extra area ------------------------- [global EXTRA {aaugw}] A button representation in CSS ------------------------------ [gstyle cssbutton <style type="text/css"> .cbut [ls] display: inline-block; white-space: nowrap; border: .1em solid #000000; border-radius: 5px; border-color: #000000; background: #FFFFFF; padding-left: 3px; padding-right: 3px; color: #000000; [rs]</style>] [gstyle button {nobreak <span class="cbut">[b]</span>}] A checkbox representation in CSS -------------------------------- [gstyle csscbox <style type="text/css"> .cchk [ls] display: inline-block; white-space: nowrap; border: .1em solid #000000; border-color: #000000; background: #FFFFFF; padding-left: 3px; padding-right: 3px; color: #000000; [rs]</style>] [gstyle checked {nobreak [b [b]] <span class="cchk">x</span>}] [gstyle unchecked {nobreak [b [b]] <span class="cchk">{white x}</span>}] [global stylage [v stylage] {csscbox} {cssbutton} {csskey} ]
Keyboard Navigation
, Previous Page . Next Page t TOC i Index
|