<<list untagged>>

config.macros.list["untagged"] = {prompt: "Tiddlers that are not tagged"};\n\nconfig.macros.list.untagged.handler = function(params)\n{\n//displayMessage("Building list of untagged tiddlers");\n var results = [];\n for(var t in store.tiddlers) {\n var tiddler = store.tiddlers[t];\n if(tiddler.getTags() == "")\n results.push(t);\n }\n results.sort();\n return results;\n}

version.extensions.listTags = {major: 0, minor: 1, revision: 0};\n\nconfig.macros.listTags = {\n text: "Hello"\n};\n\nconfig.macros.listTags.handler = function(place,macroName,params) {\n var tagged = store.getTaggedTiddlers(params[0]);\n for(var r=0;r<tagged.length;r++){\n createTiddlyLink(place,tagged[r].title,true);\n createTiddlyElement(place,"br",null,null,"");\n }\n}

Its useful to understand the structure of a web page so you can 'describe' in your styles which element (like div, a, or #contentWrapper) you are coloring. For simplicity I'll only include elements that you would want to style. (Firefox extensions make this easier and somwhat automated.) I hope to make this list collapsable in the future to improve legibility.\n\n*html\n**body\n***div#contentWrapper //Use this for [[Centering the TiddlyWiki]] or [[Increasing specificity]]//\n****div#header\n*****div#titleLine\n******span.siteTitle //The site's title (content is controlled by the SiteTitle tiddler)// \n******span.siteSubtitle //The site's subtitle (content is controlled by the SiteSubtitle tiddler)//\n****div#sidebar //The sidebar on the right//\n*****div#sidebarOptions //The sidebar that contains the seach box (content is controlled by the SideBarOptions tiddler)//\n******div.sliderPanel //This is the panel containing the option checkboxes (content is controled by the OptionsPanel tiddler)//\n*****div#sidebarTabs //The sidebar with the tabs (content is controlled by the SideBarTabs tiddler) //\n******div.txtMainTab //The class name is determined by the tab generating macro//\n*******div.tabset //The tabs are contained in the tabset//\n********a.tab.tabSelected\n********a.tab.tabUnselected\n*******div.tabContents\n****div#mainMenu\n****div#displayArea\n*****div#messageArea\n*****div#tiddlerDisplay\n******div#tiddlerTiddlerName.tiddler //The TiddlerName part of the id is customized per tiddler (See [[Tiddler IDs]]) //\n*******div.unselectedTiddler //This div's class changes to .unselected when the mouse hovers over it. //\n********div#toolbarTiddlerName.toolbar\n********div#titleTiddlerName.title\n********div#bodyTiddlerName.body //This div and its children (.viewer and .footer) change when editing (see [[Editor Structure]]) //\n*********div#viewerTiddlerName.viewer\n**********div#popup //The popup is generated in a number of places but it uses the same code (see [[Styling the popup]]) //\n***********hr //The horizontal rule exists in all popups//\n*********div#footerTiddlerName.footer\n**********div //This div holds the tags listing//

config.macros.search.handler = function(place,macroName,params)\n{\n var lastSearchText = "";\n var searchTimeout = null;\n var doSearch = function(txt)\n {\n closeAllTiddlers();\n var matches = store.search(txt.value,config.options.chkCaseSensitiveSearch,config.options.chkRegExpSearch,"title","excludeSearch");\n for(var t=matches.length-1; t>=0; t--)\n displayTiddler(null,matches[t].title,1,txt.value,config.options.chkCaseSensitiveSearch,false,false);\n var q = config.options.chkRegExpSearch ? "/" : "'";\n if(matches.length > 0)\n displayMessage(matches.length + config.macros.search.successMsg + q + txt.value + q);\n else\n displayMessage(config.macros.search.failureMsg + q + txt.value + q);\n lastSearchText = txt.value;\n };\n var clickHandler = function(e)\n {\n doSearch(this.nextSibling);\n };\n var keyHandler = function(e)\n {\n if (!e) var e = window.event;\n switch(e.keyCode)\n {\n case 27:\n this.value = "";\n clearMessage();\n break;\n }\n if((this.value.length > 2) && (this.value != lastSearchText))\n {\n if(searchTimeout)\n clearTimeout(searchTimeout);\n var txt = this;\n searchTimeout = setTimeout(function() {doSearch(txt);},200);\n }\n };\n var focusHandler = function(e)\n {\n this.select();\n };\n var txt = createTiddlyElement(place,"input",null,null,null);\n if(params[0])\n txt.value = params[0];\nvar btn = createTiddlyButton(place,this.label,this.prompt,clickHandler);\n txt.onkeyup = keyHandler;\n txt.onfocus = focusHandler;\n txt.setAttribute("size",this.sizeTextbox);\n txt.setAttribute("autocomplete","off");\n if(navigator.userAgent.toLowerCase().indexOf("safari") == -1)\n txt.setAttribute("type","text");\n else\n {\n txt.setAttribute("type","search");\n txt.setAttribute("results","5");\n }\n}\n

<<tabs txtMainTab\nTimeline Timeline TabTimeline\nAll "All tiddlers" TabMoreAll\nMore "More tabs" TabMore\n>>\n

<<tabs txtMoreTab\nUntagged "Untagged tiddlers" TabMoreUntagged\nMissing "Missing tiddlers" TabMoreMissing\nOrphaned "Orphaned tiddlers" TabMoreOrphans\n>>

version.extensions.smiley = {major: 0, minor: 1, revision: 1, date: new Date("Jul 20, 2005")};\nconfig.macros.smiley = {}\nconfig.macros.smiley.handler = function(place,macroName,params)\n{\n var palette = ["transparent","#000000","#1a1507","#352e18","#464646","#666666","#a3141e","#b06b63","#cc9900","#dd9030","#dddddd","#e89d00","#edc32a","#f3cb3c","#fdf201","#fdf526","#ff3149","#ffac00","#ffbf06","#ffc846","#ffcc66","#ffd758","#ffdd01","#ffea7b","#ffed55","#ffffff"];\n var data = params;\n var imageMap = null;\n if(!data[0] || data[0] == ":-)" || data[0] == ":)")\n imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyffyffuujbaadyyyeeyeetttdabppppddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwboooowwwbllbbwwwboooowbrllbacwwwbbbbbrllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";\n else if(data[0] == ":-(" || data[0] == ":(")\n imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyyyyyyuujbaadyyyeeyeetttdabppppddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwoooooowwrllbbwwwwbbbbbsrllbacwwbwwwwsbllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";\n else if(data[0] == ";-)" || data[0] == ";)")\n imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyxxxxxuujbaadyyyxxxeetttdabppphddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwboooowwwbllbbwwwboooowbrllbacwwwbbbbbrllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";\n else if(data[0] == ":-|" || data[0] == ":|")\n imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyffyffuujbaadyyyeeyeetttdabppppddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwoooooowwrllbbwwwwbbbbbsrllbacwwwwwwwsrllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";\n else if(data[0] == ":-D" || data[0] == ":D")\n imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyeeyeeuujbaadyyyeeyeetttdabppppyyyyypmmlbbwbbbbbbbbbbblbbwbkzzzzzzzkbwbbwbfzzzzzzzfbwbbwbkzzzzzzzkbwbacwbkzzzzzkblcaablsbkzzzkblibaaablsbbbbblibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";\n else\n createTiddlyElement(place,"span",null,"errorNoSuchMacro","unknown smiley");\n if(imageMap)\n {\n var box = createTiddlyElement(place,"span",null,"smiley",String.fromCharCode(160));\n box.style.position = "relative";\n box.style.width = "15px";\n box.style.height = "15px";\n box.style.marginLeft = "1px";\n box.style.marginRight = "1px";\n box.style.paddingRight = "12px";\n box.style.verticalAlign = "top";\n\n //now divide into 15x15 grid and create each pixel\n // rows\n for(r=0; r<15; r++)\n {\n // columns\n for(c=0; c<15; c++)\n {\n //create each pixel with the correct background\n var pix = document.createElement("img");\n pix.className = "smileyPixel";\n pix.style.position = "absolute";\n pix.border = 0;\n pix.style.top = r + "px";\n pix.style.left = c + "px";\n pix.style.width = "1px";\n pix.style.height = "1px";\n pix.style.backgroundColor = palette[imageMap.charCodeAt((r*15)+c)-97];\n pix.src = "data:image/gif,GIF89a%01%00%01%00%91%FF%00%FF%FF%FF%00%00%00%C0%C0%C0%00%00%00!%F9%04%01%00%00%02%00%2C%00%00%00%00%01%00%01%00%40%02%02T%01%00%3B";\n box.appendChild(pix);\n }\n }\n }\n}\n

version.extensions.email = {major: 0, minor: 1, revision: 1, date: new Date("Jul 22, 2005")};\nconfig.macros.email = {}\nconfig.macros.email.handler = function(place,macroName,params)\n{\nvar temp = params.join(" ");\ndata = temp.split("?");\nvar recipient = data[0];\nrecipient = recipient.replace(" at ","@").replace(" dot ",".");\nrecipient = recipient.replace(/\ss/g,"");\nvar optional = data[1] ? "?" + data[1] : "";\nvar theLink = createExternalLink(place,"ma"+"il"+"to:"+recipient+optional);\ntheLink.appendChild(document.createTextNode(recipient))\n}

!Heading 1\n!!Heading 2\n!!!Heading 3\n!!!!Heading 4\n!!!!!Heading 5\n{{{\n!Heading 1\n!!Heading 2\n!!!Heading 3\n!!!!Heading 4\n!!!!!Heading 5\n}}}\n\n----\n!Monospaced Text\n{{{This text is in-line monospaced}}}, while this part isn't.\n{{{\nThis is a block of monospaced text.\nIt permits display of code, or other monospaced material.\n}}}\n\n----\n[[External link to skinyourscreen.com|http://www.skinyourscreen.com]]\n\n----\n#This is a numbered list.\n##Just precede any line with {{{#}}}.\n###The symbol can be used multiple times to indent.\n\n----\n!Html Tables\n*sample:\n|!th1111111111|!th2222222222|\n|>| colspan |\n| rowspan |left|\n|~| right|\n|bgcolor(#a0ffa0):colored| center |\n|caption|c\n*another sample: see PeriodicTable.\n\n\n----\nHorizontal rules are made by typing 4 dashes in a row.\n\n\n---\n!Basic Formatting\n''Bold''\n==Strike==\n__Underline__\n//Italic//\n2^^3^^=8\na~~ij~~ = -a~~ji~~\n@@highlight@@\n@@color(green):green colored@@\n@@bgcolor(#ff0000):color(#ffffff):red colored@@\n\n\n----\n!Embedded Images\n[img[This is an embedded picture|http://www.skinyourscreen.com/hostedimages/mrbiotechsig1.jpg]]\n\n\n----\n!Bulleted Lists\n* Just stick an asterisk in front of typed text.\n** Bullets can be layered\n*# They can even be paired with numbers?\n*# I wonder what else they can be comboed with?\n***And they work for multiple tiers.\n\n\n----\n!Block Quotations\nThis is how you make a block quotation:\n<<<\nA single block quotation is started by entering three left arrows. The text in between is then added. The end of the block quotation is accomplished by creating three more left arrows.\n<<<\n\n>Block quotations...\n>>...support up to...\n>>>...three levels of quotation.\n>>All done by using right-arrows,\n>preceding the text.

http://www.skinyourscreen.com/mrbiotech/

!In the beginning...\nMy first themes for LiteStep, SEQ(uencer) and [[Singularity]] were made around 2002. They were developed under LiteStep 0.24.6 using OTS1 standards.\n\nSEQ(uencer) started off around the concept of a curved taskbar. I wanted a feature-rich but simple theme, one that would provide access to a few EVARs, require minimal scripting, but still be able to have plenty of configurability for wallpapers and color themes. The goals were met, but it still lacked certain features I would have preferred, such as AntiAliasing in the graphics, AlphaTransparency, and true ResolutionIndependence.\n\n[[Singularity]] was my second theme, and a much more ambitious project. It made heavy use of the AntiAliasing desired for SEQ(uencer). The primary concept, however, was not the unique graphics. //The core reason the theme was made was to accentuate the GUI concept of ConfigurableHotspots, in accordance with FittsLaw about interface design.// This entailed creating shortcuts to programs or system-functions which could be the most easy to reach. This meant using the corners of the screen as HotSpots, hover the mouse over them and they activate. They gain their efficiency from the fact that no click is required, and the mouse is naturally collected at any screen corner if you move the mouse with sufficient velocity in any direction. These HotSpots could then be configured by the user to control various functions, like activating WinAmp, switching VWMs, or more. This concept functioned quite well with the heavy graphics of the [[Singularity]] theme, which sprawled over several corners of the screen but could instantly be whisked away or Z-Order flipped to the desktop to permit full access to actual productivity programs.\n\nOther projects quickly followed as I became overly infatuated with LiteStep. [[Prion]], NonDisjunction, PhenotypeII and Recombinant all followed suit, aiming to use the ConfigurableHotspots concept for user interaction.\n\n\n!The nagging.\nI mentioned already in [[Hello World]] that there are probably hundreds of people who have sent in requests to update my LiteStep themes since the arrival and predominance of OTS2. In addition, there have probably been about 30 individuals who have attempted, with permission or without, to post updates of my theme. I appreciate the fact that people enjoy the themes, but I'm always a little leary of permitting others to do work that I myself should be doing, //especially// when it involved my own creative endeavors.\n\nOTS2 turned out to be a mixed bag for me. It simplified the end-user experience, but I fear did so at the themer's expense. It's an excellent set of standards, but for me it was difficult to grasp, especially after taking the time to get familiar with OTS1. This hampered progress principally by eroding my will to continue with LiteStep.\n\nAround this time, the gracious AstonShell community came knocking, asking for some themes in return for free keys to their software. AstonShell was one of the first skinnables I had a desire to design for, nearly a year before even attempting to skin LiteStep. My skills, however, were tremendously lacking at the time. I actually submitted an AltDesk and AstonShell theme as the first skins I ever made for anything (all rejected). When the time came a year and a half later to get free keys and skin for them, I jumped on it. <<smiley :-)>>\n\nStill the emails from LiteStep users kept coming. Putting up my own site, http://www.skinyourscreen.com simply intensified this. But here's where the true nagging started... My conscience... well, it kept telling me how much I enjoyed the absolute free-form skinning freedom found in LiteStep. My old themes were getting older by the minute, more outdated, less desirable, and yet //still// there were people requesting them.\n\nSo, under some gentle prodding by some people recently, I've decided to remake these old themes and document the process.\n\n''The first theme to be recreated will be [[Singularity]],'' the theme I receive the most requests for. For the sake of brevity (long since expended), I've been working on it for about two weeks so far, so I'll do individual write-ups on the design concepts, the module-selection process and creation of the graphics.

Fitts' Law states:\n>The time to acquire a target is a function of the distance to and size of the target.\n\nThere are a horde of principles that emanate from this central dogma of interface design\n# The easiest pixel for an user to reach on screen is the pixel right under their cursor.\n** That's why LiteStep's popup-menu, accessed by right-clicking the desktop is such an effective means of system navigation.\n# The next-easiest pixels for any user to reach onscreen are the corner pixels, because a cursor, given sufficient velocity, will end up trapped in a corner.\n** The reason ConfigurableHotspots are such a priority in my theming.\n# Larger buttons are easier targets than smaller ones because they provide more surface-area to hit.\n** Buttons with an icon AND text on them are easier to hit because they are more easily recognizable, but primarily because they are simply bigger.\n# Larger buttons //placed on a screen-edge// are even easier to get to, because the mouse cursor will stop at a screen edge, sitting the cursor right on top of a button.\n# Circular popup-menus are quicker to navigate than linear ones (sorry LiteStep, congrats Maya).\n\n* [[Here's Fitts Law.|http://www.asktog.com/basics/firstPrinciples.html#fitts's%20law]]\n\nThink you're good at interface design?\n* [[Try this quiz based on Fitts Law and be humbled.|http://shell-shocked.org/article.php?id=191]]

ConfigurableHotspots are a GUI concept manifested in the LiteStep field at approximately the same time by DrWorm and myself ([[mrbiotech]]) which employs using the corner pixels of the screen as shortcuts to other functions. These shortcuts could be activated simply by placing the mouse over them, and represent one of the fastest methods of activation available in a GUI.\n\nThe //configurable// part of the hotspot is the fact that users can select which functions are assigned to which hotspot.\n\nMacOSX makes use of ConfigurableHotspots via their Expose program, enabling users to display all open programs, all visible windows, the Dashboard, or desktop via putting the mouse cursor in one of the screen corners.

AlphaTransparency is also known as //per-pixel blending// or //true-transparency// and permits effects such as drop-shadows, translucency effects and AntiAliased edges.\n\n* To learn more about AlphaTransparency and what file formats support it, see the entry at [[SkinWiki|http://www.skinyourscreen.com/skinwiki]].

EVARs are system-wide shortcut variables in LiteStep defining commonly accessed programs such as the file-manager, graphics-editor, text-editor, chat client, web-browser, and so forth.

AltDesk is a skinnable Virtual Window Manager ([[VWM|VWMs]]) by the makers of AstonShell. It presents boxes which represent different virtual desktops. It's kind of like having a multi-monitor setup using just one monitor and switching between them using a program.\n\n* [[Check out AltDesk at the AstonShell website|http://www.astonshell.com]].

AntiAliasing is the use of semi-transparent (or AlphaTransparency) pixels at the edge of a curved shape to make it appear to curve more believably. This is opposed to MagicPink transparency, which uses only one color, magenta, to represent transparent parts of the image, resulting a less believable rendering.\n\n* [[Get more information on AntiAliasing at Skinwiki|http://www.skinyourscreen.com/skinwiki/index.php/Anti-aliased]]

See AntiAliasing

AstonShell is a commercial ($28) AlternativeShell for the Windows operating system. It specializes in incredible stability, small memory footprint, the inherent use of AlphaTransparency, and its broad selection of plugins.\n\n* [[Learn more about AstonShell here.|http://www.astonshell.com]]

Before defining what an alternate shell is, it's important to know what a [[Shell]] is.\n\nAn AlternativeShell is a graphical user environment that replaces Explorer.exe. Thus, LiteStep and AstonShell are AlternativeShell's while WindowBlinds is not, because it runs over the default Window's shell.\n\n* See more information on [[Alternative Shells|AlternateShell]] at [[SkinWiki|http://www.skinyourscreen.com/skinwiki/index.php/Alternate_Shells]].

!Preface\nLet me preface this entry by stating that I've been working on the rebuild of the [[Singularity]] theme for two weeks already, so what I'm writing here is, in actuality, old news. It's still going to be included, however, to give anyone interested a sense of the overall work-flow.\n\n----\n!Design intentions\nBefore even touching the computer for graphic or code design I try to envision what I want it to do, how the theme should work. Luckily, because this is a remake of an older theme, much of this guess-work has already been accomplished. Here are some of the things I wanted this time.\n\n* ''I want the re-created theme to retain much of the functionality of the original:''\n** The ConfigurableHotspots must remain.\n** The ConfigurableHotspots must retain their original configuration via a popup GUI.\n** The ConfigurableHotspots should activate after a predetermined amount of time, so not every casual bump into the corner of the screen activates them.\n*** This will require the [[Timer]] module and ckHotSpots.\n** The configurable nature of the theme will require scripting:\n*** MzScript is my scripting module of choice.\n*** LsLua is an alternate scripting module, although using it will require me to learn a new scripting language.\n*** TextEdit2 may be needed.\n*** Would prefer the theme "remembers" the users settings so they don't have to continually reselect theme options when they recycle.\n* ''The graphic-feel of the theme should remain similar:''\n** I'd prefer something a little more rounded, more organic in shape.\n** The corner-based orientation of GUI elements should be retained.\n** Many of the same LayerStyles from the original Photoshop images can be used here, with some additional tweaking.\n** Still needs to be blue crytalline thingies over a metallic base.\n** AlphaTransparency will again be required, due to the curved shapes and drop-shadows employed by the theme elements.\n*** This will require the use of either the ShortCut3 module, or the LayerCuts module.\n* ''Some theme elements will have to be changed altogether:''\n** The [[bPopup]] module used for the quicklaunch icons (the tabs at the left side of the theme) is //obsolete// now that Andymon has published the all-powerful [[xPopup]].dll module, which supports multiple popup formats.\n** While using [[xPopup]], might as well recreate a better-looking primary popup menu.\n*** The new popup-menu can use AlphaTransparency with [[xPopup]]!\n** //I want desktop icons!// Need to implement a module that will allow this, perhaps Andymon's xDeskTop module.\n** Probably don't need a second WinAmp control in the upper-left control cluster.\n** Can use [[xLabel]] to display song information instead of the ever-buggy JampToo module.\n** ''MUST be truly OTS2 compliant.''\n\n\n----\n!Required tools\nSo now that I know what the theme should do in relation to the previous version, we need to know what tools I'll have to employ to get this thing assembled and functional.\n*''LiteStep''\n**You're not going to get very far making LiteStep themes if you don't have LiteStep. If you click on LiteStep, you'll find a link to Omar Hussain's excellent installer package.\n*''Graphical Editor''\n**I prefer [[Adobe Photoshop]]. Specifically, I use version 6.0 because it's what I've had for years and does well (coupled to the fact that I can't afford the full CS2 version). My style makes heavy use of the LayerStyles in Photoshop to accomplish the visual effects.\n*''Text/Code Editor''\n**I've switched almost entirely to [[jEdit]] for my code-editing purposes. It's syntax-highlighting and expandability are literally amazing, like an Emacs that's easy to use and configure. Because it's JAVA based, it'll run on my Mac or my PCs. I used to use Stardock's ObjectEdit for editing code and LiteStep RC files, but setting up it's syntax-highlighting was a pain, and more often than not, it simply displayed everything in plain black-and-white anyway.\n\nSo now that we know what's needed, I'll move on to the [[Graphic Design|Singularity: Graphic Design]]

[[Adobe Photoshop]] is the industry-standard for graphical editing and digital design. Although originally intented as a tool for scanned photo editing, it's power and flexibility have exceeded this niche to fulfill roles in web-design, //de-novo// art creations and even imitation mixed-media renderings.\n\n* [[Learn more about Adobe Photoshop here.|http://www.adobe.com]]

To create the effect of transparency in images, MagicPink, or the RGB color #FF00FF (magenta) is often employed. Any MagicPink areas in a bitmap or jpg image are interpreted as transparent areas by the skinning-enabled program that makes use of them.\n\n* [[Learn more about MagicPink at SkinWiki|http://www.skinyourscreen.com/skinwiki/index.php/Magic_pink]]

Open Theme Standards version 2 (OTS2) are a set of standards for LiteStep which determine the file structure, required files, and organization of themes. OTS2 is meant to ease installation of themes and create more uniform methods for theme circulation and enhanced compatibility.\n\n* [[See the official OTS2 specifications here.|http://o-t-s.sourceforge.net/specification.html]]

TiddlyWiki is the HTML/Javascript engine that powers this blog. It is an open source project that is maintained by Jeremy Ruston. Its home online is at http://www.tiddlywiki.com

LiteStep is an extensive, themeable, freeware AlternativeShell for the Windows operating system.\n\n*[[Download the LiteStep installer here.|http://beyondconvention.net/ohussain/lsinstaller/]]\n*[[Litestep.net|http://www.litestep.net]]\n*[[LS-Universe|http://www.ls-universe.info]]\n*[[SkinYourScreen.com|http://www.skinyourscreen.com]]

HotSpots are areas of your screen that are activated simply by moving the mouse over them. Because of this instant activation, they can be a powerfully efficient method for getting to common shortcuts, as employed in ConfigurableHotspots.\n\nMy [[Singularity]], [[Prion]], NonDisjunction and PhenotypeII themes make use of ConfigurableHotspots.

Adobe Creative Suite 2, the latest (2005) release of Photoshop, Illustrator, and all those other profession graphic tools.\n\n* [[Here's the link to Adobe.|http://www.adobe.com]]

JampToo is a module for LiteStep that gives themes the ability to display WinAmp information, such as song title, song duration, time remaining, etc.\n\nIt's now largely obsolete, in my opinion. There are other modules like Andymon's [[xLabel]] that will do the same thing with a lot more flexibility and function.

LayerCuts is one of my favorite LiteStep modules. It's used to create desktop shortcuts with AlphaTransparency. For it to do this, however, it must be run on either Windows2000 or WindowsXP. Windows95, 98, and Me are out of luck on this one.

LayerStyles are unique effects that can be selectively activated and deactivated for any given layer in [[Adobe Photoshop]]. This permits the non-destructive application of visual effects (drop-shadows, glows, satin effects, patterns, etc.) without actually modifying a layer.

A [[Shell]] is a program that handles user-interaction in an operating system. In Windows, the program is called Explorer.exe (//the same program used to create your file manager windows//). MacOSX, Unix and Linux all have graphical user interfaces ([[GUI's|GUI]]) available as well, although Unix and Linux are firmly entrentched in non-graphical, Dos-like shells with names like //tcsh// and //bash//.\n\nThe [[Shell]] program in Windows can be replaced with [[alternate shells|AlternativeShell]] which can afford decreased memory consumption, enhanced graphics, and easier, more customized system navigation.\n\nChanging your shell in Windows2000 or Windows Xp requires editing of your system registry, so it's recommended you use an installer to replace your shell. Gratefully, most [[alternate shells|AlternativeShell]] come bundled with an installer to take care of all the hard stuff your you <<smily :-)>>.

version.extensions.favicon = {major: 0, minor: 1, revision: 0, date: new Date("Jul 18, 2005")};\nvar n = document.createElement("link"); \nn.rel = "shortcut icon"; \nn.href = "http://www.skinyourscreen.com/images/favicon.ico"; \ndocument.getElementsByTagName("head")[0].appendChild(n);

[[mrbiotech]]

!Meta\n<<closeAll>><<permaview>><<saveChanges>><<slider chkSliderOptionsPanel OptionsPanel options "Change TiddlyWiki advanced options">>

.: a themer's blog :.

See MagicPink.

In Photoshop it's relatively easy to center a graphic on a layer to the overall image, or to another layer.\n\n!Center to the whole image\n# In your Layers Palette click on the layer you want to move to the middle of the image.\n# Press //Ctrl+A// (//Apple+A// on the Mac) to select the whole image.\n# In the menus, select //Layer// -> //Align to selection// -> //Vertical Centers//.\n# Again, in the menus, select //Layer// -> //Align to selection// -> //Horizontal Centers//.\n\n!Centering to another layer\nThe majority of my centering occurs in relation to two layers. For instance, I'll commonly have circular shapes nested within each other, and I want them all centered relative to one another. Rather than composing all the circles centered relative to the center of the entire image, I'll often center them in relation to one shape, on a separate layer:\n\n!!What's assumed:\n* One layer contains the graphic to be centered.\n* A separate layer contains a the graphic the first one should be centered within.\n\n!!Centering to the other layer.\n# //Ctrl+Click// on the layer you want the second graphic centered on. This creates a marquee selection the size of the graphic.\n# Click on the layer to be centered in your layers palette to select it.\n# In the menus, navigate to //Layer// -> //Align to selection// -> //Vertical Centers//.\n# Again, in the menus, select //Layer// -> //Align to selection// -> //Horizontal Centers//.

''Created:'' <<today>>\n\nNow that concept has been [[previously been established|Singularity: Getting Started]], we can move on to something just a fun, the //graphic design.// <<smiley :-)>>\n\n!The Original Singularity\nLet's take a look at how the original Singularity graphics were composed:\n# Circular and Rectangular Marquee tools were used to create blocky grey shapes in [[Adobe Photoshop]].\n# The blocky shapes were then refined by using circular selection tools and the erase tool to round edges.\n# Once the shapes were settled upon, the layer-styles were applied and successively refined.\n\nBelow is a snapshot from the original [[Singularity]] Photoshop file, showing the design at step 2. All the shapes are essentially refined to what they will be in the final rendering.\n\n''Note:'' There are quite a few overlapping shapes that are exactly the same color, so some theme elements aren't visible here, but will be when the LayerStyles are applied:\n[img[Photoshop snapshot of the original singularity, just the shapes.|oldsingularityshapes.gif]]\n\n\nNow, here is the same image with the LayerStyles activated and finalized (step 3 of the graphic design):\n[img[Original singularity with final LayerStyles applied.|oldsingularity.jpg]]\n\n\n!The NEW Singularity\nIn the [[previous blog|Singularity: Getting Started]] I outlined the goals of the revised theme. Specifically, a more rounded/organic shaping of the theme was desired. Here's my mockup in Photoshop, showing the shapes that will become the theme:\n[img[The NEW Singularity- shapes and forms.|newsingularityshapes.gif]]\n\n\nNow here's a preview of the new design, showing the upper-left control cluster and the new popup-menu:\n[img[Sketch 1 of the New Singularity|newsingularitysketch1.jpg]]\n\nAs you can see, the general form and style of the theme are all still there. The graphics have changed slightly, as my skills have (hopefully) improved from where they were 4 years ago.\n\n!Making the Graphics: Rounding Technique\nNow, let's see in more detail how this is done. We'll go over Steps 1 and 2 for the time being, and I'll try to pick up more on the LayerStyles (Step 3) for the next blog.\n\nIn [[Adobe Photoshop]] I created a file 500 pixels by 500 pixels with a transparent background. The first (and only) layer was then filled in with a uniform grey, although any color will suffice. The CircularMarqueeTool was then selected with the following parameters: ''Mode: Fixed, Width: 80px, Height: 80px.'' On a new layer (//Ctrl+Shift+N//) I made the selection and then filled it in with a blue color. This shape was then moved to the upper left of the image, equidistant from both the top and left edges of the image. Yup, you guessed right: it will be the big-blue orb characteristic of the theme:\n[img[This is an embedded picture|circtechnique1.gif]]\n\n\nIn advance, I know that this theme will have elements designed that may go beyond the edge of the Photoshop image. when Photoshop tries to process LayerStyles on layers that lay on the border of the image, wierd things can happen (especially with bevels). To compensate for this, I'll often create a total-image border that will represent the actual screen-edge for the finished theme graphics. On a new layer I created a 40px border around the entire image using the RectangularMarqueeTool.\n[img[This is an embedded picture|circtechnique2.gif]]\n\n\nWhat would [[Singularity]] be without some cool looking metal? Let's start making it by first creating a circular area on a new layer that's 130px by 130 px and filling it with a medium-grey color:\n[img[This is an embedded picture|circtechnique3.gif]]\n\n\nNow the circle that will be metal should be moved underneath the blue orb layer, and <<slider chkSlider Centering centered "Centering Technique">> relative to the blue orb layer.\n[img[This is an embedded picture|circtechnique4.gif]]\n\n\nNow that the metal circle is centered to the blue orb and behind it, the metallic shape is expanded. You could use marquee selection tools for this, but I just used a brush set on pencil mode and boosted up the thickness to around 20-30 pixels. Then I started from the top center of the metal ring and drew out to the right of it, or down from it, both lines drawn flush to the artificial screen-edge (the red part).\n[img[This is an embedded picture|circtechnique5.gif]]\n\n\nTo round this shape off I used some oval selections, sized either 200x100 pixels, or 100x200 pixels. In the below image, the selection areas are simple shown as ''black'' ovals. These selections were positioned to that one edge butts up against the lines we created in the last step, while one of the pointed ends touches the metallic-grey shapes.\n[img[This is an embedded picture|circtechnique6.gif]]\n\n\nThe selection area is reversed (//Ctrl+Shift+I//) so that everything outside our ovals is selected. Then using another pencil/brush tool, I stroked in the empty area on the metal layer to round out the shape:\n[img[This is an embedded picture|circtechnique7.gif]]\n\n\nNext blog will likely be on the use of LayerStyles. Below is a test-render of the image applying some of my favorite LayerStyles. LayerStyles are so effective because they simply change the effect of a shape in real-time, permitting fine-tuning. They're also non-destructive, and may be turned off at any point or deleted without effecting the actual layer contents.\n[img[This is an embedded picture|circtechnique8.jpg]]

config.views.editor.tagChooser.text = "add a tag";\n\nwindow.createTiddlerEditor_mptw_tagstop = window.createTiddlerEditor;\nwindow.createTiddlerEditor = function(title) {\ncreateTiddlerEditor_mptw_tagstop(title);\nvar theEditor = document.getElementById("editorWrapper"+title);\nvar theTitleBox = document.getElementById("editorTitle"+title);\nvar theBodyBox = document.getElementById("editorBody"+title);\nvar theTagsBox = document.getElementById("editorTags"+title);\nvar tagPrompt = document.getElementById("editorFooter"+title);\ntheEditor.insertBefore(theTagsBox,theBodyBox);\ntheEditor.insertBefore(theEditor.childNodes[3],theBodyBox);\n\n\n}

config.macros.toolbarCloseOthers = {};\n\nconfig.views.wikified["toolbarCloseOthers"] = { text: "close others", tooltip: "Close other tiddlers"};\n\nconfig.macros.toolbarCloseOthers = {};\nconfig.macros.toolbarCloseOthers.handler = function(place,macroName,params)\n{\nlingo = config.views.wikified;\ncreateTiddlyButton(place,lingo.toolbarCloseOthers.text,lingo.toolbarCloseOthers.tooltip,onClickToolbarCloseOthers);\n}\nfunction onClickToolbarCloseOthers(e)\n{\nif (!e) var e = window.event;\nclearMessage();\nif(this.parentNode.id)\ncloseAllBut(this.parentNode.id.substr(7));\n}\n\nfunction closeAllBut(keeptitle)\n{\nclearMessage();\nvar place = document.getElementById("tiddlerDisplay");\nvar tiddler = place.firstChild;\nvar nextTiddler;\nwhile(tiddler)\n{\nnextTiddler = tiddler.nextSibling;\nif(tiddler.id)\nif(tiddler.id.substr(0,7) == "tiddler")\n{\nvar title = tiddler.id.substr(7);\nif(title != keeptitle && !document.getElementById("editor" + title))\nplace.removeChild(tiddler);\n}\ntiddler = nextTiddler;\n}\n}

These options for customising TiddlyWiki are saved in your browser\n\n<<option chkSaveBackups>> SaveBackups\n<<option chkAutoSave>> AutoSave\n<<option chkGenerateAnRssFeed>> GenerateAnRssFeed\n<<option chkRegExpSearch>> RegExpSearch\n<<option chkCaseSensitiveSearch>> CaseSensitiveSearch\n<<option chkAnimate>> EnableAnimations\n\nSee AdvancedOptions\n\nYour username for signing your edits. Write it as a WikiWord (eg LiteStep)\n\n<<option txtUserName>>

//Greets & treats://\n\nThere hasn't a month gone by in the last two years where I don't get emails where someone has attempted to update or adapt my LiteStep themes to the OTS2 theme standards or requested that I do so. I find it mildly entertaining that people go ahead porting something and then ask after the fact for permission to post it publically. <<smiley ;-)>>\n\nFor the record: I've been slowly (//and covertly//) working on OTS2 updates of my LiteStep themes for the better part of a year. Themes in progress include [[Singularity]], NonDisjunction, [[Prion]], and PhenotypeII. This is one of the principale reasons no permission has been given to others to post their OTS2 ports: I've got my own in progress. Quality control is another issue- the last time I permitted someone else to release an update on one of my themes there were about 30 other people that felt that the graphics somehow became open-source and that anybody could use them without any form of permission. I've invested a lot of man-hours in my themes and take great pride in them. Maintaining the integrity of the suites is very important to me, and so I opt to only permit ports of my skins in software that I do not use.\n\n//Back to the purpose of this blog...//\nRather than simply updating the themes to OTS2, I thought I'd completely rebuild them. They are so outdated at this point (not entirely outmoded, however). In addition, the graphics will also be created from scratch. So herein I present to you the steps of graphical creation, the slicing, the coding, the module selection, in short: all the nitty-gritty of my theme-building process. Perhaps this will be of use to someone. My honest hope is to assist budding skinners, the next generation of graphic artists and interface designers.\n\nI'll do my best to keep this updated daily, perhaps just weekly as time permits. Take a peek into my theming thoughts...\n\n''If you've got a comment, suggested revision, or diatribe regarding the material on this site, I'll publish it for anyone. Email me [[here|mailto:mrbiotech@skinyourscreen.com]].''

<<today>>\nHere's a site I only just discovered: [[LitestepWiki|http://wiki.litestep.com/Index]]. Great information about theme installation, configuration, OTS2, and module documentation. This will prove useful, methinks <<smiley :-)>>

LsLua is a scripting module for LiteStep that uses the Lua scripting language instead of a proprietary format.\n\n* [[Check out LsLua here.|http://www.loose-screws.com/comment.php?type=mod&id=408]]\n* [[Find out more about the Lua scripting language here|http://lua.org]]

MacOSX (OS X for Apple computers) is my favorite operating system. That's right, I'm a brand-new Mac Accolyte, and prefer it tremendously to any version of Windows I've used. Not necessarily as skinnable as Windows, but incredibly simple to use, efficient, and utterly beautiful.\n\n//"It just works."//\n\n* [[Find out more about Mac OS X here.|http://www.apple.com/macosx/]]

MzScript is a proprietary scripting module for LiteStep. It supports dynamic variables, saveable variables, and a host of other features. In my opinion, it can be a bit difficult to work with, but it's the one that's used most for theme-scripting. \n\nHave been tempted to try out LsLua, but fear a steep learning curve there as well.\n\n* [[Here's a link to MzScript|http://loose-screws.com/comment.php?type=mod&id=189]]

ObjectEdit is a quick-to-load, but feature-rich text editor for Windows. It is a commercial product from Stardock, and must be purchased as part of an ObjectDesktop subscription. This used to be my text-editor of choice, but has recently been supplanted by [[jEdit]], which I feel does a better job of syntax-highlighting and is more extendable via a large set of addons.\n\nObjectEdit has the following features:\n* Can change the font AND background.\n* Can open files of any size.\n* Syntax highlighting for basic file types.\n* Word-wrap.\n\n* [[Find out more about ObjectEdit here.|http://www.stardock.com/products/odnt/oe.html]]

[[jEdit]] is a remarkable programmer's text editor written in Java. This means it'll run on any platform, and I use it regularly under MacOSX, Windows, and Linux.\n\nThe power of jEdit is its macro language. Through a built-in, interface-driven download utility, you can download scripts, macros, and plugins directly into jEdit from the web. These include color-selectors, CSS editors, PHP scripting assistants, Javascript assistants and tools. ~HTML, ~XML, and just about any other common language or data type are readily handled. It can even read ~SQL databases!\n\nI love it because of the web-editing tools, and also for the exceptional syntax-highlighting. Makes it real easy to pick your way through code. The scripting language is fantastic: after learning a few basics I was able to put together a few scripts to turn CVS files into full-blown ~MySQL.\n\nIt comes with my full recommendation.\n\n* [[Check out jEdit here.|http://www.jedit.org/]]

VWMs, or //Virtual Window Managers// are programs that give a single monitor computer a fake multi-monitor capability. They're quite handy. LiteStep can include VWMs, at the themer's discretion. Other [[VWM|VWMs]] programs are available, such as AltDesk, or ~VirtuaWin.\n\nThey function by creating virtual desktops which are accessed via some sort of shortcut. In LiteStep and AltDesk, there are boxes which represent several desktops. Clicking on one selects it as the active desktop.\n\nIf your desktop always feels like there aren't enough pixels to put everything, using VWMs is a great way to extend your available space. Imagine having your word-processor open full-screen in one, a chat client and notepad open in another, and the last containing Photoshop, full-screen. It's downright useful!

WinAmp is a multi-functioned multimedia player for Windows. It's completely skinnable. There's a free version as well as a commercial version.\n\n* [[Check out WinAmp here.|http://www.winamp.com]]

[[xPopup]] is a LiteStep module that creates a menu accessed by //right-clicking// the desktop.\n\n[[xPopup]] permits AlphaTransparency in its graphics, enabling drop-shadow and translucency effects. It can tile or stretch a given graphic, and gives a great deal of control over sizing, position, and hue/saturation of individual popup elements.\n\n* [[Check out xPopup here.|http://loose-screws.com/comment.php?type=mod&id=388]]

The BlendingOptions panel of LayerStyles provides access to the layer opacity and blend mode (overlay, multiply, etc.) for a given layer. //It can do much more, however.//\n\n*In addition to altering a layer's ''Opacity'', you can use the ''Fill Opacity'' settings to have only the LayerStyles for a layer show, while the actual layer graphics are invisible. This permits the designer to use the same layer-style type (i.e. BevelAndEmboss) multiple times for one graphic. The initial layer containing the graphic is simply duplicated, the duplicate layer's ''Fill Opacity'' set to 0, and the additional layer-styles applied.\n*Below is an example showing the base layer with a BevelAndEmboss style applied, and the next 3 images showing duplicated or alternate Beveling set through this method:\n\n [img[Multiple Bevels|images/blendingoptions1.jpg]]\n\n\n*The BlendingOptions can also be used to ''Knock Out'' layers beneath. The ''Knockout'' mode can be set to shallow (knock out the layer immediately under this one) or deep (knock out all layers in this layer folder). This can be beneficial if you have a nice smooth layer-style applied to one layer, but want to punch through it to see a layer below. In the below example, Part A is the shape that will knock out part of the layer in Part B. Part C demonstrates the completed knock out. Part D demonstrates the unfavorable result of simply erasing Part B instead of knocking it out. Notice how the Bevel is affected?:\n\n [img[Knocking out layers|images/blendingoptions2.jpg]]

Adding a drop-shadow to your graphics can improve the perception of depth, especially when the graphic is composed of multiple parts on different Z-orders. The key is to keep it just light enough that it's believable, as not to obscure features beneath. (I tend to gob my drop-shadows on liberally, or at least that's what people tell me). <<smiley ;-)>>\n\nBelow is an example image containing variations of drop-shadows. No, your shadow doesn't have to be black, and no, the standard curve isn't always the most interesting one.\n\n[img[Different Drop shadows|images/dropshadows.jpg]]\n\n|!Image item|!Drop-shadow settings|\n|1|No layer-style applied.|\n|2|Photoshop's default drop-shadow.|\n|3|Distance=3px, Size=3px, Contour=Guassian.|\n|4|Blend Mode=Screen, Color=White, Distance=3px, Spread=100%, Size=7px, Contour=Guassian.|\n|5|Angle=-60 (Global Light unchecked).|\n|6|Distance=1px, Size=0px.|\n|7|Two layers, 1st with Blend Mode=Screen, Color=White, Distance=2px, Size=7px contour=Guassian; 2nd with Multiply, Black, Angle=-60 (Global Light unchecked), Distance=2px, Size=7px, Contour=Guassian.|\n|8|Opacity=100%, Size=9px, Noise=19%.|\n\nUsing the BlendingOptions technique to employ multiple drop-shadows on item 7 yields an artificial beveling technique. Doing this permits greater flexibility in the distance, spread and size of the dark part of a bevel versus the light part. I've used this technique in situations where an odd-shaped bevel is on the underside of a 3-dimensional shape and I want to emphasize one of the shine differently than the shadow.

<<search>>\n\n!Menu\n*[[Hello World]]\n*[[RSS|http://www.skinyourscreen.com/mrbiotech/index.xml]]\n\n!Categories\n*<<tag blogs>>\n*<<tag litestep>>\n*<<tag singularity>>\n*<<tag software>>\n*<<tag definitions>>\n*<<tag techniques>>\n*<<tag help>>\n\n!Blog!\n*<<newTiddler>>\n*<<newJournal "DD MMM YYYY">>

The ''Inner Shadow'' style can be applied for a variety of purposes beyond just creating inset depth.\n\n*The InnerShadow style can assist metallic layer-styles by providing angle-specific highlighting or shadowing.\n*It can create greater depth when used in conjunction with gel or glass effects.\n*It can render quick-and-dirty 3D-effects without the use of the gradient tool.\n\n[img[Inner Shadow examples|images/innershadows.jpg]]\n\n|!Image item|!Inner-shadow settings|\n|1|No layer-style applied.|\n|2|Photoshop's default inner-shadow.|\n|3|Angle=-60 (Global Light unchecked), Distance=7px, Size=16px, Contour=Guassian.|\n|4|Opacity=35%, Angle=-90 (Global Light unchecked), Distance=11px, Size=13px, Contour=Ring.|\n|5|Blend Mode=Screen, Color=White, Opacity=80%,Angle=90 (Global Light unchecked), Contour=Cone, OuterGlow set to Multiply and Black, and default GradientOverlay.|\n|6|Angle=-60 (Global Light unchecked), Distance=8px, Size=13px, Contour=Cone, Custom InnerGlow and ColorOverlay.|\n|7|Distance=10px, Size=13px, DropShadow, BevelAndEmboss, and a ContourEffect.|\n|8|Distance=3, Size=6, BevelAndEmboss set to Down.|\n\n''Note:'' Variations 1-4 contain just the InnerShadow effects alone. Variations 5-6 use InnerShadow styles in conjunction with other LayerStyles to demonstrate how they work synergistically.

Key thing to note about the OuterGlow: the default settings suck. I've used the light glow a few times for digital buttons or controls, but a far more effective use of this style is the creation of slight shadows. This is great for offsetting overlapping features, like a very subtle spank shadow. Use it with the Mode set to //Multiply// or //Normal// and the Color set to black. This style is a condiment, use just a dash in your graphics to dimensionalize overlapping graphics.\n\n[img[Outer glow examples|images/outerglows.jpg]]\n\n|!Image item|!Outer-glow settings|\n|1|No layer-style applied.|\n|2|Photoshop's default outer glow.|\n|3|Mode=Multiply, Color=Black.|\n|4|Mode=Multiply, Color=Black, combined with SatinEffect and GradientOverlay styles.|

The Contour layer-style can only be used in conjunction with the BevelAndEmboss layer-style. All it really does is determine the "curvature" or shape of the bevel itself. Think of the Contour as the drill-bit that would be used in a routing machine to create moulding for a wall or piece of furniture: it determines the cross-section of the bevel.\n\nAs far as my glass-effects go, I stick to the ''Half Round'' contour.

The Texture option only affects the BevelAndEmboss layerstyle. It will apply any texture in your texture to the bevel. Interesting if you want a gritty bevel, I suppose. Have never used this in a theme, however.

The InnerGlow style, like the OuterGlow style, seeme to work best if you DON'T use the default settings. As demonstrated in the InnerShadow write-up, when the color is set to black and the mode to multiply it can render some convincing spherical effects. Subtle use of this style in this manner can add additional depth to your graphics.\n\nWhen multiple [[inner glows|InnerGlow]] are overlapped (using the BlendingOptions technique), one can generate pseudo-metallic effects (example #4).\n\n[img[Inner glow examples|images/innerglows.jpg]]\n\n|!Image item|!Inner-glow settings|\n|1|No layer-style applied.|\n|2|Photoshop's default inner glow.|\n|3|Mode=Multiply, Color=Black.|\n|4|Layer 1: Mode=Multiply, Color=Black, size=16. Layer 2 (top): Fill Opacity=0%, size=16, Contour=Cone.|

//One of the most versatile, attractive, and useful LayerStyles you will use is the BevelAndEmboss style, coupled to the ContourEffect and perhaps the TextureEffect styles.//\n\nSamples 1-5 show essentially the default bevels possible by simply trying different combinations of ''Up/Down'' and ''Inner/Outer bevel''. These are pretty common (a.k.a. "boring") applications of the bevel effect. By themselves, these styles are frequently used for basic web-buttons, and varying from the //up// vs. //down// bevel methods can yield convincing unpressed and pressed states.\n\nThe true power of the bevel, however, lies in the ''Angle'' and ''Altitude''. Try taking the default inner/up bevel settings, unchecking //"Use Global Light"// and then setting the altitude to 60. It should make the shine appear like it's more towards the center of the shape. If you activate the ContourEffect [[layer style|LayerStyles]] and select the "Half Round" contour, it should create an ever more believable effect, almost like a drop of water. Varying the //Depth// and the //Size// of the Bevel can create some very believable jelly/glass effects. ''This is the principle technique of my style in Photoshop.''\n\nIn addition to glassy effects, this method can be used for broad, subtle insets, or even raised/recessed combo features (as seen in example 7).\n\nIf you use a brush (like the air-brush tool) with reduced drawing opacity and a bevel effect added, you can create some interesting subtle features. For more details on this particular technique, consult my [[Subtle Insets and Bevels Tutorial|http://www.skinyourscreen.com/server/content.php?article.8]].\n\n[img[Bevel examples|images/bevels.jpg]]\n\n|!Image item|!Bevel/Emboss/Contour settings|\n|1|No layer-style applied.|\n|2|Photoshop's default bevel (inner bevel, up).|\n|3|Inner bevel, direction=down.|\n|4|Outer bevel, direction=up.|\n|5|Outer bevel, direction=down.|\n|6|Inner bevel, direction=up, Depth=41%, Size=21px, Use Global Light unchecked, Altitude 63. Contour Layer-style: Contour=Half Round.|\n|7|''Advanced layer-style:'' Outer bevel, Depth=51%, Direction=up, Size=27px. Dark inner-glow, GradientOverlay, and an inner gradient stroke of 3-pixels were also added. //This style is all over the Singularity theme.//|\n|8|''Advanced layer-style:'' Many layerstyles on at least 2 different layers creating an inset glass button with a shine bevel, and a reflected shine bevel.|

In my skins, the ColorOverlay style serves three primary purposes:\n#''Lightening or darkening of a layer'', using either the Multiply, Screen, or Overlay modes with either White or Black. It's a quick easy, non-destructive way of quickly changing the luminescence of a particular layer without permanently altering it.\n#''Swapping out colors for color-schemes:'' Typically I'll create all my shapes layers in shades of grey so that color applications don't end up with semi-unpredictable results.\n#''Alternate Button States:'' Simply lightening, darkening, or changing the color of a button or graphic can be enough to indicate a hover, active, or clicked state. Although this is really just a variation of the first two uses, I do use it A LOT<<smiley :-)>>. Rather than creating a separate set of graphics on different layers and applying all-new layer-styles to represent the clicked state of buttons, I simply turn on a ColorOverlay style and VOILA!

This is another versatile little effect that makes its way into so many of my skins. Believe it or not, I typically use this one with almost the default settings! (Okay, minor variations).\n\n[img[Different uses of the GradientOverlay style|images/gradientoverlays.jpg]]\n\n#''Metallic Tubes:'' (Example 1) Rather than use the formal Gradient Tool to apply gradients in a selection area, it's much easier (and non-destructive) to use the GradientOverlay style to create unidirectional tubes and hoses.\n**The gradient editor for the GradientOverlay style is the same as that used for the Gradient Tool.\n**Using this style applies gradients dynamically, so if you're not totally satisfied with your gradient, you can change it at a whim, days later even.\n#''Chisels, insets, and divits:'' (Example 2) Using the basic black to white fade, existing shapes can be made to appear as though chiselled out of a layer beneath them.\n**The direction of the Gradient should be applied to the layer such that the black part of the gradient is in the direction of the light-source.\n**I commonly use the Overlay mode with this, provided I'm applying the gradient to a layer with a color other than black.\n#''Glass effects:'' (Example 3) To create truly cool glass shine effects, I'll often use the BevelAndEmboss method coupled to a layer that uses a manually drawn shine. This is just another shape layer with LayerStyles applied to it.\n**The shine graphic itself is usually drawn in white.\n**The //Fill Opacity// is reduced to 0-20%.\n**A GradientOverlay is set from White to Black, White in the direction of the light source.\n**The GradientOverlay mode is set to //Screen//.

Another one of my favorite LayerStyles. I've created probably 10-20 patterns that I use regularly in my themes. typically, these are applied to a layer using the //Overlay// mode, or perhaps //Screen// or //Multiply//. Most of these are simply geometric patterns composed in boxes of between 2x2 up to 40x40 pixels, things which are easy to tile or repeat.\n\nOne of my favorite patterns to apply are T.V. Lines, the simplest pattern. Create a new graphic that is 2 pixels tall by 1 wide, and fill the top pixel with black. Select the whole thing and save it as a pattern. BAM!! Instant lined pattern. Quite often I'll save a version using black, and then using white, just in case I want to use the //Screen// vs. //Multiply// modes.\n\nThink simple in making your patterns. Most of mine are simply repeating boxes, circles, or other geometric shapes. Try using both White and Black and then setting the PatternOverlay mode to //Overlay//. Take a look at Treetog's Sputnik theme and you'll see a variation of this all over. <<smiley :-)>.

The StrokeEffect can also be used to produce external or internal chiselled areas by setting it to produce a gradient. The inset look around some of the blue orbs was generated this way.\n\nIn [[Singularity]], the Stroke effect was used to generate some of the dark rings present around the blue orbs. This was accomplished by setting the stroke color to black, the mode to //Overlay// or //Multiply// and then tweaking the size until the desired effect was reached.\n\nThis style can also be used to create tubes, if you think creatively enough. By setting the stroke to produce a //Shape-burst Gradient//, and selecting something as simple as the black-to-white gradient, any shapes you draw will create a tubular outline. For this to be most effective, you need to reduce the layer's //Fill Opacity// to 0, and be sure to use an anti-aliased tool, such as a hard-edged paintbrush.

The SatinEffect can be used for a variety of metallic textures, or to produce symmetrical shines on rounded or irregularly-shaped objects, like text.\n\nI prefer to use the ''Contour=Cone'' settings for these, using either the multiply mode with black, or the screen mode with white. The size and distance are adjusted for the size of the shape in question: text will require different settings than small spheres. //Hint: these are great for small metallic buttons or screws.//\n\n[img[Satin Effects|images/satineffects.jpg]]\n\n|!Image item|!Satin settings|\n|1|No layer-style applied.|\n|2|Photoshop's default satin effect.|\n|3|Angle=-60, Distance=3px, Size=10px, Contour=Cone, Invert is checked.|\n|4|Mode=Screen, Color=White, Angle=-60, Distance=4px, Size=10px, Contour=Cone, Invert is unchecked. Dark OuterGlow, Dark and InnerGlow added to enhance appearance as a button.|\n|5|It's a baseball: Mode=Screen, Color=white, Angle=-42, Distance=28, Size=1, Contour=Cone, Invert is checked.|\n|6|Psychedelic design using wierd contour.|\n|7|Another psychedelic design using the contours.|\n|8|Same as #4, but using a high-angle BevelAndEmboss/ContourEffect, some ColorOverlay, and a 3px external StrokeEffect using the gradient option.|

!Purpose\nThe [[previous blog|Singularity: Graphic Design 1]] outlined the shapes that will make up the new [[Singularity]] theme. This entry will focus on the LayerStyles applied to these shapes to create the 3-dimensional feel.\n\nRather than describing each [[Layer Style|LayerStyles]] used in this theme in excruciating detail, I'm going to demonstrate some of the usage principals of LayerStyles. This way I don't end up with a ton of instant imitators. More importantly, however, this should assist individual users in coming up with their own characteristic styles and designs.\n\n!The ~LayerStyles\nLayerStyles are non-destructive, dynamic effects that can be added, altered, and removed from individual layers in [[Adobe Photoshop]]. They're convenient because they can be stored in a palette, applied on a whim, or exported to libraries of layer styles. The true power, however, resides in their infinite variation and their non-destructive nature. This is why my themes are composed as groups of shapes that can then be stylized later.\n\nClick on the links below for explanations, examples and comments on each of the LayerStyles present in Photoshop 6.0, and how they can be used in skinning:\n\n*<<slider chkBlending BlendingOptions BlendingOptions "Blending Options">>\n\n*<<slider chkDropShadow DropShadow DropShadow "Drop Shadow">>\n\n*<<slider chkInnerShadow InnerShadow InnerShadow "Inner Shadow">>\n\n*<<slider chkOuterGlow OuterGlow OuterGlow "Outer Glow">>\n\n*<<slider chkInnerGlow InnerGlow InnerGlow "Inner Glow">>\n\n*<<slider chkBevel BevelAndEmboss BevelAndEmboss "Bevel and Emboss">>\n\n*<<slider chkContour ContourEffect Contour "Contour">>\n\n*<<slider chkTexture TextureEffect Texture "Texture">>\n\n*<<slider chkSatin SatinEffect Satin "Satin">>\n\n*<<slider chkColor ColorOverlay ColorOverlay "Color Overlay">>\n\n*<<slider chkGradient GradientOverlay GradientOverlay "Gradient Overlay">>\n\n*<<slider chkPattern PatternOverlay PatternOverlay "Pattern Overlay">>\n\n*<<slider chkStroke StrokeEffect Stroke "Stroke">>\n\nHopefully after reading all those entries you'll be able to look at my themes and tell me what Layerstyles you suspect were applied. The key here is to not be limited by your tools. The stock bevel makes me sick, and yet it ends up in so many themes around the web. If you just tweak things a little bit you'll end up with some nice variety. If you try changing the entire paradigm of a style (like using inner-glows to darken instead of lighten) you might surprise yourself with what you can do! <<smiley :-)>>

!Starting some coding\nNow that some of the graphics have been generated, I want to try 'em out. This means starting the coding of the OTS2 compliant theme. Approaching it from scratch, I layed out the following directory structure in my ''litestep\sprofiles\sshelltest\sthemes'' folder:\n\n*Folder: //SingularityV0.004//\n**Folder: //images//\n**Folder: //config//\n**New Text File: ''theme.rc''\n**Copied File: ''Singularity-ReadMe.txt''\n\nWithin the ''theme.rc'' file (which I edit using [[jEdit]]) I added the following text:\n\n{{{\nOTSMajorVersion 2\nOTSMinorVersion 0\n\nThemeName "Singularity v0.004"\nThemeAuthor "mrbiotech"\n\nConfigDir "$ThemeDir$config\s"\nLSImageFolder "$ThemeDir$images\s"\n}}}\n\nWe're essentially setting LiteStep variables here. The variable name is on the left, while the contents are on the right. Spaces and tabs between the variable and its data don't matter.\n\nThe first two, //~OTSMajorVersion// and //~OTS2MinorVersion// help LiteStep know that the theme should be OTS2 compatible. The next two provide information onwho the author is, what the name of the theme is. The last two define the location of the folders created earlier //ConfigDir// and //LSImageFolder//. The variables come in quite handy, as they will eliminate the need to continually rewrite entire paths to configuration and graphic files needed by the theme. You'll notice that the last two pieces of data actually contain a LiteStep variable themselves (the ''$ThemeDir'' variable, which defines the //SingularityV0.004// folder).\n\nAfter this are three statements to include outside files that will be created later:\n{{{\ninclude "$ConfigDir$qlpopup.rc"\ninclude "$ConfigDir$popuptheme.rc"\ninclude "$ConfigDir$popup-$popupStyle$.rc"\n}}}\nThe first will load any settings present in a file called ''qlpopup.rc'' that will be created in the theme's //config// folder, containing settings pertaining to a quicklaunch menu The other two will load settings pertaining to the theme's configuration popup-menu, and a theme-style specific menu configuration (this theme may have more than one style of menu).\n\nAfter this, it's time to load a module <<smiley :-)>>. I think the bare minimum modules that any theme should include are a popup-menu module and a desktop module to activate the popup-menu. I've been dying to try Andymon's [[xPopup]] and already am fond of the jdesk module, so here's the code to get them loaded at theme startup:\n{{{\n*NetLoadModule jdesk-0.73\n*NetLoadModule xpopup-1.1.9\n}}}\n\n!Configuring jDesk\nLuckily, the OTS2 setup centralizes some of the Jdesk settings to the user's ''personal.rc'' folder. This means that all we really need to configure for this module is the size of the desktop that applications can take up. From the graphics I made for the theme I have an idea that the taskbar at the screen top will be about 30 pixels high, and the vertical system tray at the screen's left will be about 30 pixels wide. I'd like at least the taskbar visible at all times meaning the screen area will be 30 pixels shorter on top. If I want both the Tray and the Taskbar visible at all times, I'll need to reduce the area of the screen useable by applications by 30 pixels from the left side as well.\n\nHere are the entries in the ''theme.rc'' file:\n{{{\n;----[ jDesk ]----\njDeskWorkArea "30,30,0, 0"\n*jDeskMButton3 [.none;!popupql;!none;!none]\n}}}\n\nThe first line is simply a comment, a title to let me know what configuration this section is for. The next button instructs the jDesk module to leave 30 pixels of space on the left and top of the screen for the tray and taskbar. Maximized applications will not move into those territories. The last line is something I added for testing purposes, allowing me to test a second popup-menu type devoted directly to quicklaunch items that will be accessible by middle-clicking the desktop.\n\n!Configuring xPopup\nLet the fun begin: This is where I apply the theme's first graphic. The xPopup module functions quite a bit differently than earlier popup modules. It permits full AlphaTransparency, meaning I can create a popup with AntiAliased edges and drop shadows. It also can use just a single graphic and stretch or tile it. Here's are two Photoshop mockup of what I want the popup to look like:\n\n[img[xPopup prototype I|images/singularitypopupbg-h.png]] [img[xPopup prototype II|images/singularitypopupbg-v.png]]\n\nThe left one was my first idea, and I actually implemented all the code on it before realizing the design sucked. The second was the one I settled on, and the one I'll show the code for. Both will actually be included in the theme, for user preference.\n\nHere's the xPopup configuration code for the second popup prototype:\n{{{\n;----[ xpopup ]----\n; These settings are in the POPUP-V.RC and POPUP-H.RC files in $configdir$\nxpopupcompatibilitymode\nxpopupAutoMenuBreak true\nxpopupmoveable\nxPopupFolderOpenDelay 150\nxPopupAlphaMap\nxPopupBalloonTip true\nxPopupTooltipDurations 200 1000\nxPopupAutoMenuBreak\nxPopupEnableDragnDrop\nxPopupShadeable\nxPopupCloseAfterAction\n\nqlAddToGroup ""\nqlAlphaMap\nqlQuickLaunchMode .horizontal\nqlEntryUseBigIcon\nqlEntryIconSize 32\nqlQuickLaunchItemSize 64\nqlQuickLaunchOpenTo .right\nqlQuickLaunchWrapCount 10\nqlImage $LSImageFolder$qlbg.png\nqlActiveEntryImage $LSImageFolder$qlactive.png\n\nqlEntryIconX 16\n\nqlImageMode tile\nqlImageLeftEdge 16\nqlImageRightEdge 16\nqlImageTopEdge 26\nqlImageBottomEdge 26\n\nqlActiveEntryImageMode tile-horizontal\nqlActiveEntryImageLeftEdge 22\nqlActiveEntryImageRightEdge 22\n\nqlOverlapY 10\n\nqlBalloonTooltip true\nqlTooltipMode .all\n}}}\n\nThis contains some of the general module parameters at the top and then the definition of the quicklaunch test popup. (''Note:'' //I'm still experimenting at this point, so although the quicklaunch is implemented here using graphics from another one of my themes, it will change significantly. The location of the quicklaunch configuration will also likely be moved to an external file//).\n\nInside the //config// folder of the theme I created a new file called ''popup-1.rc''. This contains the configuration parameters for the second (preferred) popup prototype, which I show below:\n\n{{{\n;-----[ xPopup settings for popup style 2 ]-----\nxPopupImage $LSImageFolder$popupbg-v.png\n;xPopupActiveEntryImage $LSImageFolder$popup_a2.png\n;xPopupSeparatorImage $LSImageFolder$popup_sep.png\n\n;xPopupImageTrueTransparent false\nxPopupImageMode tile\nxPopupImageTopEdge 54\nxPopupImageBottomEdge 26\nxPopupImageLeftEdge 68\nxPopupImageRightEdge 26\n\n;xPopupActiveEntryImageMode tile\n;xPopupActiveEntryImageLeftEdge 22\n;xPopupActiveEntryImageRightEdge 22\n;xPopupActiveEntryImageTopEdge 0\n;xPopupActiveEntryImageBottomEdge 0\n\n;xPopupSeparatorImageMode tile-horizontal\n;xPopupSeparatorImageLeftEdge 30\n;xPopupSeparatorImageRightEdge 30\n\nxPopupTitleHeight 54\nxPopupTitleFont "Tahoma"\nxPopupTitleFontColor c1c1c1\nxPopupTitleFontHeight 16\nxPopupTitleFontLeftBorder 45\nxPopupTitleFontRightBorder 25\nxPopupTitleFontTopBorder 14\nxPopupTitleFontBottomBorder 5\nxPopupTitleFontAlign center\n;xPopupTitleFontOutline\n;xPopupTitleFontOutline Color ffffff\nxPopupTitleFontShadow\nxPopupTitleFontShadowColor 111111\nxPopupTitleFontBold\n\nxPopupEntryFont "Tahoma"\nxPopupEntryFontHeight 12\nxPopupEntryFontColor c1c1c1\nxPopupEntryFontAlign left\n;xPopupEntryFontTopBorder 48\n;xPopupEntryFontBottomBorder 36\nxPopupEntryFontLeftBorder 36\nxPopupEntryFontRightBorder 26\nxPopupEntryFontShadow true\nxPopupEntryFontShadowColor 000000\nxPopupEntryFontShadowX 1\nxPopupEntryFontShadowY 1\nxPopupEntryIconX 10\n\nxPopupActiveEntryFontColor ffffff\nxPopupActiveEntryFontAlign left\nxPopupActiveEntryFontBold\nxPopupActiveEntryShowIcon \nxPopupActiveEntryFontOutline true\nxPopupActiveEntryFontOutline Color 333333\nxPopupActiveEntryIconSize 24\n\nxPopupFolderShowIcon\n\n;xPopupOverlapX 0\n\nxPopupEntryHeight 20\nxPopupActiveEntryHeight 20\nxPopupFolderHeight 20\nxPopupActiveFolderHeight 20\n\nxPopupMaxWidth 500\nxPopupMinWidth 140\nxPopupTopBorder 50\nxPopupBottomBorder 28\n;xPopupLeftBorder 50\n;xPopupRightBorder 12\n;xPopupAlphaFade\n;xPopupCustomAlphaFade 20 20\n\nxPopupArrowImage $LSImageFolder$popupfolder.png\nxPopupArrowOffset 9\nxPopupArrowOnLeft false\nxPopupActiveArrowImage $LSImageFolder$popupfolderactive.png\n;xPopupActiveArrowOffset 6\n;xPopupArrowOnLeft false\n}}}\n\nYou'll see that there are a lot of commented lines (nonfunctional lines preceded by ''";"''). I tend to throw in more options than are necessary at the beginning, using a template file that contains ALL the configuration parameters for a given module. Then later I can delete what I don't need. The code as it stands here is capable of rendering the popup the way I want, so the commented lines will probably get the axe soon.\n\nThere is also a similar configuration file called ''popup-2.rc'' which contains the parameters and definitions required for the initial popup design, should the user select them.\n\nIf you've got questions or comments about the coding here, please [[email me|mailto:mrbiotech@skinyourscreen.com]]. I'll include your question in this entry to clarify.\n\n!Conclusion\nSomething that's very difficult to capture in a blog is the //trial-and-error// nature of this. To get to the settings you see above took about 2 days of tweaking, changing single parameters and recycling the theme to see what the end effect is. After about 100 recycles, it ended up the way I wanted, at least for now. I suppose I could have been more organized in the Photoshop mockup, measuring out exactly where I wanted the text and icons to sit, but it seemed like too much trouble. In 20/20 hindsight, however... <<<smiley :-)>>. Oh well.\n\nAt least there's a working popup.\n\nNext time I'll make a system tray and a basic taskbar.

More updates to come shortly. Have been busy in the lab trying to get presentations ready and finish experiments. [[Also got up Skinyourscreen.com's first Podcast.|http://www.skinyourscreen.com/podcasts/SYSPodcast1.mp3]]. The AstonShell guys are expecting Nerio and I to hand over SkinWiki for some reason (I'm still a little stymied by their motivations)... needless to say, been a busy week.\n\nHave started coding the system-tray and the taskbar for [[Singularity]], however. The tray is very simple, so my next blog will cover that. As I worked on the taskbar, however, I decided it would be more fun to present several taskbar variations. The xTaskbar module also permits "on-the-fly" parameter changing, so theoretically a user could switch taskbar themes instantly, without recycling. I'm really curious to try out this feature.\n\nMore to come. Big presentation on Thursday, September 15th, and after that I should be able to devote more time to [[Singularity]].

!Making the System Tray\nCreating the system tray for [[Singularity]] was probably one of the easiest parts. Andymon's [[xTray]] module is really easy to setup, but still provides a lot of flexibility that previous tray modules didn't necessarily offer.\n\n!!Desired System Tray Features\n*Want the graphic to use AlphaTransparency.\n**Will require drop-shadows and anti-aliased edges.\n**Here's the graphic:\n[img[Singularity's system-tray.|images/traybg.png]]\n*Want the system tray against the left-side of the screen, like the early Photoshop mockup image demonstrated.\n*Graphic must auto-size.\n**Middle part of image must tile (more efficient to render).\n**Top 18 pixels (where it says "TRAY") must remain fixed.\n**Bottom 29 pixels should remained fixed and outside icon area for the bottom shadow and curved part to be rendered properly.\n*Would be nice if the icons could be dimmed, somehow, to make them less visible.\n**Putting the mouse cursor over a tray icon should highlight it, probably by brightening it up to its default appearance.\n\n!!Getting the tray image situated.\n#The above graphic for the tray was selectively copied from my Photoshop file.\n##The selection was done by turning off any bottom layers so that the grid indicating transparency was visible.\n##The rectangular marquee selection tool was then used to create a big rectangle surrounding the desired part of the graphic, starting a little above where it says "TRAY", but going very wide to the right and to the bottom of the image (to preserve any drop-shadow).\n##The ''Copy-Merged'' option was then used.\n##A new file was created (CTRL+N). New files are, by default, sized to the same dimensions as the current image in the clipboard. This will be the minimum area required to properly render the drop-shadow.\n##The copied section was then pasted into this new file, and the file saved as a 24-bit PNG image.\n#The ''traybg.png'' image was then copied to the ''images'' folder of the theme.\n\n!!Coding in Theme.RC\nThis is the part I tend to do by trial and error. Generally, I start off by sticking in every single configuration parameter for the module, getting the positions of everything set right, and then selectively chopping unnecessary parameters. Probably not the most efficient method, but I'm no coder, and this is the method that seems to work for me.\n\nThese parameters tell the tray where to position on the screen and how big to make it. I knew where to put it onscreen because I sized things out in Photoshop first:\n{{{\n;----[ xTray ]----\nxTrayX 0\nxTrayY 320\nxTrayAutoSize 20 20\nxTrayWidth 38\nxTrayHeight 300\n}}}\n\nThese parameters tell xTray where to find the image and how to tile it. The tray will be dynamically sized vertically to contain the tray items. The different ''xxxxxEdge'' parameters tell the module what part not to tile. For instance, because I want the top of the image to say "TRAY", but not have that part tiled, the image doesn't start to tile until the 19th pixel from the top (''xTrayImageTopEdge'' is set to 18):\n{{{\nxTrayImage $LSImageFolder$traybg.png\nxTrayImageMode tile\nxTrayImageLeftEdge 15\nxTrayImageRightEdge 22\nxTrayImageTopEdge 18\nxTrayImageBottomEdge 39\n}}}\n\nThese are a lot of the basic configuration options. Of note, the ''xTrayAlphaMap'' setting is critical here because our PNG image uses AlphaTransparency. The borders determine where the icons are actually drawn in our image. The spacing and wrap parameters determine some of the tray behaviors as icons are added or removed. The tooltip parameters have been specified here, 'cuz I like to be able to find out what an icon's for without having to activate it. Read the xTray documentation for a more detailed description of parameters.\n{{{\nxTrayAlphaMap\nxTrayBorders 8 12 14 30\nxTrayLines 1\nxTrayMaxLines 2\nxTrayXSpacing 2\nxTrayYSpacing 4\nxTrayLayout .vertical\nxTrayDirection .right\nxTrayWrapDirection .top\nxTrayWrapCount 10\nxTrayShowTooltip\nxTrayShowInfoTip\nxTrayBalloonTooltip\nxTrayTooltipDurations 100 1000\nxTrayToolTipColor c1c1c1\nxTrayTooltipTextColor 111111\nxTrayCleanUpInterval 10000\n}}}\n\n...And these parameters dim the color and brightness of normal tray icons, but change to full color and brightness if the mouse hovers over them:\n{{{\nxTrayIconSize 16\nxTrayIconHueIntensity 150\nxTrayIconHueColor 000000\nxTrayHoverIconHueIntensity 00\nxTrayHoverIconHueColor ffffff\n}}}\n\nThat's it for the tray! If the rest of Andymon's ''x'' modules configure this intuitively, the theme should be well on its way to completion (wish he had a shortcut module).\n\nNext blog will probably tackle at least a basic rendition of the taskbar.

!Reorganizing xModule settings\nI'm discovering that the documentation for modules like [[xTray]] and [[xTaskbar]] could be made easier to follow. After being away from LiteStep coding for so long, the documentation looked alien.\n\nOne of the problems/tools I've run up against is that of multiple states on multiple taskbars. I initially put together a template ''xTaskbar parameters'' file that contained empty parameters for the module that could be copied and pasted into new themes as they're being made. Unfortunately, when I made these templates, I entered all the parameters in a linear fashion for each particular button state.\n\nHere's an example:\n{{{\ntasks1NormalFontAlign left\ntasks1ActiveFontAlign left\ntasks1MinimizedFontAlign left\ntasks1FlashingFontAlign left\ntasks1HoverFontAlign left\ntasks1GroupedFontAlign left\n\ntasks1NormalFontVertAlign center\ntasks1ActiveFontVertAlign center\ntasks1MinimizedFontVertAlign center\ntasks1FlashingFontVertAlign center\ntasks1HoverFontVertAlign center\ntasks1GroupedFontVertAlign center\n}}}\n\nThe problem with this is that when I'm tweaking the settings, I'll typically do it one element at a time, in this case, the //hover// state button, or the //normal// button state. For this reason, I've been rebuilding the structure of the module parameters. Here's what happens to the above code:\n{{{\ntasks1NormalFontAlign left\ntasks1NormalFontVertAlign center\n\ntasks1ActiveFontAlign left\ntasks1ActiveFontVertAlign center\n\ntasks1MinimizedFontAlign left\ntasks1MinimizedFontVertAlign center\n\ntasks1FlashingFontAlign left\ntasks1FlashingFontVertAlign center\n\ntasks1HoverFontAlign left\ntasks1HoverFontVertAlign center\n\ntasks1GroupedFontAlign left\ntasks1GroupedFontVertAlign center\n}}}\n\nNow if I want to edit just a particular button, all the parameters are grouped, rather than hunting for the shadow settings here, the outline settings there...\n\nIt's a small change in design paradigm, but it's dramatically improved the speed at which I can tweak the [[xTaskbar]] parameters.

Wow, it's been a busy weekend. I seem to skin the most when I'm sick, and this weekend unveiled a massive kidney-stone attack. At 29 years old, this shouldn't even be happening, but it's a pain that's unrivaled. Tried to be productive, however.\n\nIn brief, [[Singularity]] now has a working taskbar, albeit basic, some of the graphics blitted to the screen via LayerCuts, and a functional VWM using RabidVWM. Here are the details:\n\n!Taskbar\nSetting up xTaskbar requires more parameters than any other module I've ever set up, but the degree of control is truly impressive. I daresay I'll not use another taskbar module. It's got so much control over each button state (normal, active, minimized, hover, group, and flash). Once I grouped all the parameters together according to my scheme in the previous blog, it becomes a lot easier to deal with. Here's an example of the Active button state:\n{{{\n;----Active button state----\n;tasks1ButtonBorderMethod .none\n;tasks1ButtonAlphaTransparency 255\n;tasks1ButtonTrueTransparent\ntasks1ActiveButtonImage $LSimagefolder$taskbtn2.png\ntasks1ActiveButtonImageLeftEdge 34\ntasks1ActiveButtonImageRightEdge 1\ntasks1ActiveButtonImageTopEdge 0\ntasks1ActiveButtonImageBottomEdge 0\ntasks1ActiveButtonImageMode tile-horizontal\n;tasks1ButtonSaturationIntensity 255\n;tasks1ButtonHueIntensity 0\n;tasks1ButtonHueColor ffffff\n\ntasks1ActiveIconX 4\ntasks1ActiveIconY 4\ntasks1ActiveIconSize 24\ntasks1ActiveIconSaturationIntensity 255\ntasks1ActiveIconHueIntensity 0\ntasks1ActiveIconHueColor ffffff\n\ntasks1ActiveFont Arial\ntasks1ActiveFontSmoothing\ntasks1ActiveFontHeight 14\ntasks1ActiveFontLeftBorder 34\ntasks1ActiveFontTopBorder 4\ntasks1ActiveFontBottomBorder 10\ntasks1ActiveFontColor ffffff\ntasks1ActiveFontBold\ntasks1ActiveFontItalic false\ntasks1ActiveFontUnderline false\ntasks1ActiveFontShadow\ntasks1ActiveFontShadowColor 444444\ntasks1ActiveFontShadowX 1\ntasks1ActiveFontShadowY 1\n;tasks1ActiveFontOutline\n;tasks1ActiveFontOutlineColor 555555\n;tasks1ActiveFontNoEllipsis false\ntasks1ActiveFontAlign left\ntasks1ActiveFontVertAlign center\n}}}\n\nSomething else that's becoming entertaining is that xTaskbar permits multiple taskbars. In the above example, you can see that each line is preceded by ''"tasks1"''.This means I can fulfill my vision of having 3 taskbar types that the user can select between on-the-fly. The first version I implemented has 24x24 icons and text, the next will just be 32x32 icons, and perhaps a final version just showing 24x24 icons.\n\nThe hardest part of setting up the taskbar was getting the graphics set right. Below are two graphics, the first corresponding to the //normal button state// and the second to the //active button state//:\n[img[Normal taskbar button state|images/taskbtn1.png]] [img[Active taskbar button state|images/taskbtn2.png]]\nTo give each kind of a "chiselled" appearance, I used a Photoshop layer which was set to the "overlay" blending method and 25-50% opacity and drew a white vertical line along the left edge of each graphic, and a black line against the right. This meant that to complete the look, a similar dark line must be drawn on the graphic that will appear immediately to the left of the taskbar, and a similar white line must be drawn on the end-part of the taskbar background graphic. Took a bit to decide where the lines should be positioned to maximize the effect with the minimum of effort. Ended up being the long way after all.\n\nHere's what the current taskbar actually looks like when implemented:\n[img[Singularity taskbar type 1|images/singularitytaskbarpreview.gif]]\n\n\n!Graphic shortcuts using LayerCuts\nStarted carving up graphics from the Photoshop file into PNG images with AlphaTransparency to start plunking graphics onto the desktop. My next blog will probably be a review of the techniques I use to //slice// the images. I should also mention that although LayerCuts is a shortcut module, not all of the graphics I'm sticking on the desktop are active buttons. There are quite a few I'm using just as graphics; this is a common method with many graphically-rich themes. Some will eventually become buttons, but there are some just to look pretty and provide visual continuity between the buttons. The graphics below are non-functional types inserted just to provide drop-shadows and fill in graphics between the buttons:\n{{{\n*shortcut "ac1":ac1 175 34 ac1.png .none .none #1 a:255 .none .none .none\n*shortcut "ac2":ac2 141 34 ac2.png .none .none #1 a:255 .none .none .none\n*shortcut "ac3":ac3 91 18 ac3.bmp .none .none #1 a:255 .none .none .none\n*shortcut "ac4":ac4 102 62 ac4.png .none .none #1 a:255 .none .none .none\n*shortcut "ac5":ac5 91 81 ac5.png .none .none #1 a:255 .none .none .none\n*shortcut "ac6":ac6 58 101 ac6.png .none .none #1 a:255 .none .none .none\n*shortcut "ac7":ac7 0 156 ac7.png .none .none #1 a:255 .none .none .none\n}}}\nThese are just non-functional shortcuts used as eye-candy. Just wanted to see how things are going to look in relation to one another on the screen. Here's how they look altogether:\n[img[Singularity shortcuts preview|images/singularitycornerpreview.jpg]]\n\n!Setting up RabidVWM\nThe center of that largest sphere will be the VWM, 4 virtual desktops presented in a square configuration. Many themers use the same graphic tiled to represent each desktop, but that won't float in this theme because the VWM background must look seemless to the rest of the sphere.\n\nLuckily, RabidVWM provides all this flexibility. The VWM here is just represented by one indexed bitmap:\n[img[Singularity VWM graphic|images/vwmbg.bmp]]\nThe miniwindows (graphics drawn to resemble windows on a given desktop) will be drawn dynamically using transparent flat-color boxes.\n\nWhen coding, a key point I had to look our for is that OTS2 themes now store some RabidVWM settings in the user's ''personal.rc'' file, something that's getting my old OTS1 themes in trouble when users try to use them with the new installer. The settings used for the VWM in this theme just specify the graphics, none of the behaviors. This way the user can tweak their own file to change behavior for each theme, rather than hacking each theme to get the behavior they want. Here's the coding in Singularity's ''theme.rc'':\n{{{\n;----[ rabidvwm ]----\nVWMPos 31 41\nVWMSize 60 40\nVWMDesks 2 2\nVWMBackBmp vwmbg.bmp\n\nVWMWinColor aaaaaa\nVWMWinBorderColor ffffff\nVWMWinBevel 1\nVWMWinAlpha 180\nVWMTitleColor ffffff\n\nVWMSelColor cccccc\nVWMSelBorderColor ffffff\nVWMSelBorder 1\nVWMSelAlpha 100\n\nVWMShowIcons\nVWMScaleIconToFit\n}}}\nJust 15 parameters! Not bad.

/*\n{{{\n*/\n\n\n*{\n margin: 0;\n padding: 0;\n}\n\na,.viewer a.tiddlyLink,.viewer a.button,.tiddler .viewer a:hover{\n color: #06c;\n text-decoration: none;\n background: transparent;\n}\n\na:hover{\n color: #147;\n text-decoration: underline;\n}\n\nbody {\n font-size: 62.5%; /* Resets 1em to 10px */\n font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;\n background-color: #004A80;\n color: #333;\n text-align: left;\n width: 760;\n margin: 0 auto;\n}\n\n#titleLine{\n background: transparent;\n padding: 0;\n width: 745px;\n text-align: center;\n}\n\n#siteTitle{\n display: block;\n margin: 30px auto .2em;\n font-size: 3em;\n font-weight: bold;\n}\n\n#siteTitle a, #siteSubtitle a{\n color: #555555;\n}\n\n#siteTitle a:hover, #siteSubtitle a:hover{\n text-decoration: underline;\n}\n\n#siteSubtitle{\n display: block;\n color: #666666;\n margin: 0em auto 1em;\n}\n/*=================Header and footer=======*/\n#contentWrapper{\n background: url("bg.gif") repeat-y 0px 0px;\n border: 0;\n width: 760px;\n margin: 0;\n}\n\n#otherContentWrapper{\nmargin: 0 auto;\n width: 760px;\n}\n\n#header {\n background: url("header.jpg") no-repeat bottom center; \n margin: 0 !important;\n margin: 0 0 0 1px;\n padding: 1px;\n height: 230px;\n width: 758px;\n}\n\n#contentFooter {\n clear: both;\n background: url("footer.jpg") no-repeat bottom;\n border: none;\n padding: 2em;\n height: 3em;\n}\n\n/*=========================================Sidebar====*/\n#sidebar, #mainMenu, #sideBarOptions{\n background: transparent;\n margin: 0 20px 0 0;\n _margin-right: 15px; /*IE Hack :-((((((((((( */\n width: 210px;\n text-align: left;\n}\n\n#contentWrapper #sidebar a.tiddlyLink,\n#contentWrapper #sidebar a.button{\n color: #06c !important;\n}\n\n#sidebar a.tiddlyLink:hover,#sidebar a.button:hover{\n background: transparent;\n color: #147;\n text-decoration: underline;\n}\n\n#mainMenu a.tiddlyLink:hover, #mainMenu a.button:hover{\n text-decoration: underline;\n }\n\n#sidebar h3{\n background: transparent;\n}\n\n#mainMenu{\n margin: 0;\n text-align: left;\n}\n\n#mainMenu h1,#mainMenu h2, #mainMenu h3{\n font-family: Arial, Helvetica, Sans-Serif;\n font-size: 1em;\n}\n\n#mainMenu .tabset{\n padding: 0;\n}\n\n#mainMenu div.txtTagsTab{\n margin-left: -3px;\n}\n\n#mainMenu a.tab{\n background: transparent;\n font-family: Arial, Helvetica, Sans-Serif;\n font-size: 1em;\n font-weight: bold;\n margin: 0 .5em 0 0;\n color: #000;\n}\n\n#mainMenu a.tab:hover{\n cursor: default;\n text-decoration: none;\n}\n\n#mainMenu .tabContents{\n margin: -.5em 0 -1.5em 0;\n background: transparent;\n}\n\n#mainMenu ul{\n margin: -.5em 0 1em .5em;\n}\n\n#mainMenu li{\n list-style: none;\n font-size: .8em;\n margin-bottom: -.5em;\n}\n\n#mainMenu li a, #sidebarOptions a{\n font-size: .8em;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n#mainMenu .tabContents a{\n font-size: .7em;\n margin-left: .2em;\n}\n\n#mainMenu ul li:before{\n color: #000;\n content: "\s00BB \s0020";\n} \n#mainMenu .tabContents a:before,#sidebarOptions a:before{\n font-size: 10px;\n color: #000;\n content: "\s00BB \s0020";\n} \n\n\n#sidebarOptions{\n margin-left: .75em;\n}\n\n#sidebarOptions h1{\n font-size: 1.3em;\n}\n\n#sidebarOptions .sliderPanel{\n background-color: transparent;\n font-size: 1em;\n}\n\n#sidebarOptions .sliderPanel a:before{\n content: "";\n}\n\n#sidebarTabs{\n background: transparent;\n}\n\n#sidebarTabs .tab,#contentWrapper .viewer .tab{\n border: 1px solid #ccc;\n}\n\n#sidebarTabs .tabSelected,#contentWrapper .viewer .tabSelected{\n background: #ccc;\n color: #333;\n}\n\n#sidebarTabs .tabUnselected,#contentWrapper .viewer .tabUnselected{\n background: #e6e6e6;\n color: #333;\n padding-bottom: 0;\n}\n\n#sidebarTabs .tabContents,#contentWrapper .viewer .tabContents{\n background: #ccc;\n color: #333;\n border: 1px solid #ccc;\n}\n\n#sidebar #sidebarTabs .tabContents a,#contentWrapper .viewer .tabContents a{\n color: #06c;\n}\n\n#sidebar #sidebarTabs .tabContents a:hover,#contentWrapper .viewer .tabContents a:hover{\n color: #147;\n background: transparent;\n}\n\n#sidebarTabs a.tabSelected:hover,#contentWrapper .viewer a.tabSelected{\n cursor: default;\n text-decoration: none;\n}\n\n#contentWrapper #sidebar .txtMoreTab .tab,#contentWrapper #displayArea .txtMoreTab .tab{\n border: 1px solid #aaa;\n color: #333;\n}\n\n#contentWrapper .txtMoreTab .tabSelected{\n background: #aaa;\n color: #333;\n}\n\n#contentWrapper #sidebar .txtMoreTab a.tabSelected:hover,#contentWrapper #displayArea .txtMoreTab a.tabSelected:hover{\n background: #aaa;\n color: #333\n}\n\n#contentWrapper #sidebar .txtMoreTab .tabUnselected,#contentWrapper #displayArea .txtMoreTab .tabUnselected{\n background: #ccc;\n color: #333;\n padding-bottom: 0;\n}\n\n#contentWrapper #sidebar .txtMoreTab .tabUnselected:hover,#contentWrapper #displayArea .txtMoreTab .tabUnselected:hover{\n color: #333;\n}\n\n#contentWrapper .txtMoreTab .tabContents{\n background: #aaa;\n color: #333;\n border: 1px solid #aaa;\n}\n\n/*==============================================Main Area====*/\n#messageArea {\nbackground-color: #eee;\n border: 1px solid #ccc;\n color: #bbb;\n margin-right: 1em;\n}\n\n#messageArea a:link{\n color: #bbb;\n}\n#messageArea a:hover{\n color: #06c;\n}\n\n#displayArea{\n margin: 1em 23em 1em 3em;\n text-align: left;\n}\n\n/*=========================================Tiddler====*/\nh1, h2, h3, .title{\n font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;\n font-weight: bold;\n \n}\n\n.viewer h1,.viewer h2,.viewer h3,.viewer h4,.viewer h5,.viewer h6{\n background: transparent;\n border-bottom: 1px dotted #ccc;\n}\n\n.title{\n background-color: #B0B7Bd;\n font-size: 1.6em; \n position: relative;\n top: -0em;\n}\n\n.title a:hover, h3 a:hover {\n color: #06c;\n text-decoration: none;\n\n}\n\n.tiddlerDate{\n color: #777;\n font-size: .8em;\n margin-bottom: 1em;\n}\n\n.toolbar{\n padding-left: 0;\n margin-left: 0;\n}\n\n.toolbar a:link,.toolbar a:visited{\n background: #e6e6e6;\n border: 1px solid #ccc;\n color: #aaa;\n padding: 1px 3px;\n}\n\n.toolbar a.button:hover{\n background: #ccc;\n border-color: #bbb;\n color: #06c;\n}\n\n.viewer a.tiddlyLinkNonExisting:link{\n color: #b85b5a;\n font-style: normal;\n}\n\n.viewer a.tiddlyLinkNonExisting:hover{\n text-decoration: underline; \n}\n\n.viewer a.tiddlyLinkExisting:link,#displayArea .viewer a.externalLink{\n font-weight: normal;\n color: #06c;\n}\n\n.viewer a.tiddlyLinkExisting:hover,.viewer a.externalLink:hover{\n color: #147;\n text-decoration: underline; \n}\n\n.editor {\n font-size: 8pt;\n color: #402c74;\n font-weight: normal;\n padding: 10px 0;\n}\n\n.editor input, .editor textarea {\n display: block;\n font: 11px/110% "Andale Mono", "Monaco", "Lucida Console", "Courier New", monospace;\n margin: 0 0 10px 0;\n border: 1px inset #333;\n padding: 2px 0;\n}\n\n.editor textarea {\n height: 500px;\n}\n\n.footer, .footer a.button,.editorFooter, .footer a.button{\n color: #ddd;\n}\n\n.selectedTiddler .footer,.selectedTiddler .footer a{\n color: #777;\n}\n\n.selectedTiddler .footer a.button,.selectedTiddler .editorFooter a.button{\n color: #06c;\n}\n\n.footer a.button:hover,.editorFooter a.button:hover{\n color: #147;\n background: transparent;\n} \n\n\n#contentWrapper #popup,#contentWrapper #popup a{\n font-size: 9px;\n padding: 0;\n background-color: #ccc;\n color: #333;\n}\n\n#contentWrapper #popup a.button,#contentWrapper #popup a.tiddlyLink, #popup hr{\n padding: 1px 3px;\n margin: 0;\n text-decoration: none;\n color: #06c; \n font-weight: normal;\n border-color: #999\n}\n\n#contentWrapper #popup a.button:hover,#contentWrapper #popup a.tiddlyLink:hover{\n color: #147;\n background-color: #aaa;\n}\n\n#sidebar #popup a.button:link,#sidebar #popup a.tiddlyLink:link{\n text-decoration: none;\n}\n\n#sidebar #popup a:before{\n content: "";\n}\n\n/*\n}}}\n*/

//Move mainMenu into the sidebar\nvar sidebar = document.getElementById('sidebar');\nsidebar.insertBefore(document.getElementById('mainMenu'),document.getElementById('sidebarOptions'));\n\n\n//Create footer\nvar contentFooter = document.createElement('div');\ncontentFooter.id = 'contentFooter';\ncontentFooter.style.verticalAlign = 'bottom'\nvar footerContent = document.createElement('p');\n\nfooterContent.innerHTML = '...Powered by <a href="http://tiddlywiki.com/">TiddlyWiki</a> by Jeremy Ruston. Theme modified by mrbiotech from <a href="http://15black.bluedepot.com/styles/kubricktiddly.html">TiddlyKubrick</a> by Clint Checketts';\ncontentFooter.appendChild(footerContent);\nvar contentWrapper = document.getElementById('contentWrapper');\ncontentWrapper.appendChild(contentFooter);

It's been a bit since my last entry, and mulestem's been kindly checking for updates on the [[Singularity]] theme. Here's a brief update on some stuff I did last night:\n\nHave been working on pull-out tabs for the shortcuts on the left-side of the screen:\n[img[Tabs prototype 1|images/cutsprototype1.jpg]]\nEventually, I'd like to use a second xPopup config to create user-configured popups in more of a holographic style. The top part, and perhaps bottom, would be metallic, as seen in the above image. The middle, however would be more digital blue stuff with liberal transparency. Haven't sketched it out in Photoshop yet, but I have a clear idea in mind.\n\nOnce these shortcuts are figured out I can start work on the scripting required to swap the theme's Z-order, hide/reappear, etc. Can't wait to start coding the hotspots! That's the core functionality of the theme, after all.\n\nThe other graphical item I've been working on is a second form of the taskbar. Eventually the little button to the left of the taskbar will switch between different taskbar forms. Below is a prototype for a taskbar containing just 32x32 icons, no text:\n[img[Taskbar prototype |images/tasksprototype2.jpg]]\nFor the inactive-state I'm imagining it containing just a 24x24 icon that will sit in the old taskbar. This way the active task will be very readily discernible.

!The skinny on the skinning\nDidn't think producing [[Podcasts|http://www.skinyourscreen.com/podcasts/]] would be as time consuming as it is. Lots o' post-production work. Still fun, though.\n\nI've taken another unplanned hiatus from skinning to work on, well, my job, but also goofing around with CSS and Strict XHTML. I'm thinking the Google/Sun partnership may be telling of the future of skinning... If we'll all eventually be using standards-compliant web-interfaces for even full-blown desktop applications, makes sense to learn the GUI intricacies of 'em, 'cuz that's what we'll be skinning in a decade.\n\nHere's a mock-up of the new podcast site interface I'm piecing together as an experiment:\n[img[SYS Podcast Site Preview|images/podcastsitepreview.jpg]]\n\nTonight, I'm gonna try and get the secondary xPopups and shortcuts configured for the upper-left control module. Then I'll try putting some RainMeter stuff together for the two smaller blue orbs.

[img[Singularity Color variations|images/singularitycolors.png]]\n\nYup, I realize I've been lax on updating this. At work I'm trying to get a manuscript ready for publication in the Journal of Bacteriology, been working on a corporate site and obtaining sponsors for the site and podcast. Its been a lot to do lately. Haven't forgotten the LiteStep stuff, however, and have been trying to get some of my fellow themers interested in LiteStep. I think Nerio will give it a go (good for you Nerio!!).\n\nAnyway, above are some color variations I'm putting together for the theme. The original Singularity just offered the one color. Once I offered the NonDisjunction theme, requests for color-variations on the other themes started building. Four color variations are shown above, These were simple bulk recolorizations using the Hue/Saturation tool in Photoshop 6.0, so they're pretty crude interpretations of what the final colors will be, but it does give an idea. There will also be a 5th color variation that will be much darker, something more foreboding. That will require more than a simple Hue/Saturation workup... will have to remake all the colored features by hand for that one, but I'm pleased with how it's turning out (I'll save a preview for my beta-testers).\n\nOff to my GameBoy... MegaMan Network3 is beckoning...

Have been working on getting the shortcuts and LSXCommand up and running on the left side of [[Singularity]].\n\nThe fold-out shortcuts (quicklaunch, etc...) are still pretty messy looking, so I'll show those later. Here's the LSXCommand area, though:\n[img[LSXCommand|images/singularitylsx.png]]\n\nThere are two versions in the image. The top was the original sketch I threw together in Photoshop. I wanted it to look like the top and bottom panels kind of swung-out from the center, but the pointy areas to the left and right just looked crappy, didn't match the rest of the theme. The other is approaching the final version. Again, the swing-out panels are present, as are struts to attach them to the rest of the structure. The sharp lines on the inside of the panels, however, strike me as unlike the rest of the theme as well: not the sweeping curves and rounded shapes. It may undergo another revision, but it's getting closer to what I want.\n\nWill be working on the shortcuts/quicklaunch things next.\n\nWord of note: This blog will probably be moving to http://mrbiotech.blogspot.com - I've been searching for a solution that will permit better commenting without unwanted spam (like Wordpress attracts). This blog is currently using TiddlyWiki, which is quickly proving to be a poor solution for a graphics-intensive blog. Does great for microcontent, but sucks for larger applications. The Blogger account seems to be just what I'm looking for, rather than setting up a blog on my own server. Hopefully I can redirect some of the band-width this way as well.

!Here are the categories:\n<<tag blogs>> <<tag litestep>> <<tag singularity>> <<tag software>> <<tag definitions>> <<tag help>>\n\n!Click a blog entry to get more detail:\n[[4 November 2005]]\n*LSXCommand graphics [[Singularity]].\n\n\n[[27 October 2005]]\n*Color variations for [[Singularity]].\n\n\n[[11 October 2005]]\n*Putting together some CSS/XHTML for the Podcast site.\n*Check out the [[SYS Podcasts|http://www.skinyourscreen.com/podcasts/]]\n\n\n[[4 October 2005]]\n*Working on the side shortcuts [[Singularity]].\n*Another taskbar prototype.\n\n\n[[18 September 2005]]\n*Added a basic taskbar to [[Singularity]].\n*Some shortcuts working using LayerCuts.\n*The VWM is now functional, using RabidVWM.\n\n\n[[17 September 2005]]\n*Reorganizing the ''theme.rc'' parameters for the [[xTray]] and [[xTaskbar]] modules to facilitate faster tweaking of button states and alternate taskbars.\n\n\n[[14 September 2005]]\n*Making the system tray for [[Singularity]] using Andymon's [[xTray]] module.\n*Methods for carving the tray graphic out of Photoshop and preserving the AlphaTransparency of the drop-shadow.\n*Coding the [[xTray]] settings in [[Singularity]]'s ''theme.rc''.\n\n\n[[13 September 2005]]\n*Quick progress check.\n*[[Skinyourscreen.com Podcasts|http://www.skinyourscreen.com/podcasts/SYSPodcast.xml]]\n*Aston wants us to give them [[SkinWiki|http://www.skinyourscreen.com/skinwiki]] why?\n\n\n[[9 September 2005]]\n*Starting coding of [[Singularity]].\n*Coding the basic theme parameters\n*Coding ''jDesk''.\n*Making the [[xPopup]] graphics.\n*Coding the [[xPopup]] parameters.\n\n\n[[Singularity: Graphic Design 2]]\n*Graphic design aims.\n*Outline of various LayerStyles used to make [[Singularity]]\n\n\n[[Singularity: Graphic Design 1]]\n*What the original [[Singularity]] theme was all about.\n*Preview of the ''NEW'' [[Singularity]].\n*Using the ''rounding technique'' to create the shapes used in the theme.\n\n\n[[Singularity: Getting Started]]\n*Design principles for the new theme.\n*Tools needed to make the theme.\n\n\n[[3 September 2005]]\n*My LiteStep skinning history.\n*Why remake these themes?\n\n\n[[Hello World]]\n*Welcome to the blog.\n*Purpose of the blog is to outline the recreation of my LiteStep themes from scratch to conform to OTS2 standards, but also to update the look and coding.

[[4 November 2005]]\n[[27 October 2005]]\n[[11 October 2005]]\n[[4 October 2005]]\n[[The Menu]]\n[[18 September 2005]]\n[[17 September 2005]]\n[[14 September 2005]]