383) { $sidebartext = $lowcolour; } else { $sidebartext = $highcolour; } $holderbackground = << 383) { $headertext = $lowcolour; } else { $headertext = $highcolour; } $headerbackground = << 383) { $maintext = $lowcolour; } else { $maintext = $highcolour; } $mainbackground = << 383) { $footertext = $lowcolour; } else { $footertext = $highcolour; } $footerbackground = << html {border:0;} /* removes window edge in IE6! */ * {font-family:'Trebuchet MS',Arial,Helvetica,sans serif;} html, body { margin:0; padding:0; background-color:#fff; color:#000; } body { font-size:14px; z-index:0; line-height:19px; padding:30px; width:900px; } h1 {font-size:21px;} h2 {font-size:19px;} h3 {font-size:17px;} h4 {font-size:15px;} h5, h6 {font-size:14px;} input, textarea { font-family:'Courier New',Courier,monospace; font-size:0.9em; } input {width:2.5em;} ins, code ins {text-decoration:none;} code, code *, var { font-family:'Courier New',Courier,monospace; } var {font-style:normal;} dt, dd {display:inline;} dt {font-weight:bold;} dd {font-weight:normal; margin-left:0;} small {font-size:0.89em;} abbr {cursor:help;} /* - - - IDS - - - */ #holder { width:900px; } /* setting fixed width stops sidebar dropping down if screen narrow */ #main { float:left; height:auto; width:570px; } #sidebar { float:left; width:240px; /* should be more but IE can drop the column */ } #header, #main, #sidebar, #footer { padding:10px 20px 10px 20px; } #footer { clear:both; width:860px; } #footer h3.first {padding-top:0;} #footer h3 {padding-top:20px;} /* #footer, #lastupdated {font-size:87%;} */ /* - - - CLASSES - - - */ /* indents for code */ .s1 {padding-left:2em;} .s2 {padding-left:4em;} .s3 {padding-left:6em;} .s4 {padding-left:8em;} .s5 {padding-left:10em;} .clear {clear:both;} .center {text-align:center;} .left {text-align:left;} .indent {margin-left:30px;} .comment { font-weight:normal; font-style:italic; } /* - - - random colours generated by PHP - - - */ html, body {background-color:$bodybackground;} #holder { background-color:$holderbackground; border:1px solid $headertext; } #header { color:$headertext; background-color:$headerbackground; border-bottom:1px solid $headertext; } #main { color:$maintext; background-color:$mainbackground; border-right:1px solid $headertext; } #sidebar { color:$sidebartext; background-color:transparent; /* holder background colour used to get max height */ } #footer { color:$footertext; background-color:$footerbackground; border-top:1px solid $headertext; } :link, :visited {text-decoration:none;} #header :link { border:1px solid $headertext; color:$headertext; } #header :visited { border:1px dotted $headertext; color:$headertext; } #header :link:hover, #header :visited:hover { color:$headerbackground; background-color:$headertext; } #main :link { border:1px solid $maintext; color:$maintext; } #main :visited { border:1px dotted $maintext; color:$maintext; } #main :link:hover, #main :visited:hover { color:$mainbackground; background-color:$maintext; } #sidebar :link { border:1px solid $sidebartext; color:$sidebartext; } #sidebar :visited { border:1px dotted $sidebartext; color:$sidebartext; } #sidebar :link:hover, #sidebar :visited:hover { color:$holderbackground; background-color:$sidebartext; } #footer :link { border:1px solid $footertext; color:$footertext; } #footer :visited { border:1px dotted $footertext; color:$footertext; } #footer :link:hover, #footer :visited:hover { color:$footerbackground; background-color:$footertext; } input, textarea {color:#000;} blockquote { padding:10px 20px 10px 20px; margin:8px; font-style:italic; border:3px double $maintext; } $title

"Like any Harlequin, Duchamp didn't fight against randomness and uncertainty: he had used it to create his art."
—From The Traveller by John Twelve Hawks.

Introduction

As with the quotation here, I have created a layout that uses random background colours. I found it gave many pleasing combinations. Many colours were ones I would never have thought to use before.
The text colour for each area is set to a light or dark shade depending on the random background colour chosen, so hopefully the content remains readable.
The colours generated for the page this time are below. Refresh the browser to see them change. Feel free to copy any pleasing colour schemes you see.

html, body:
background-color:rgb($bodyred,$bodygreen,$bodyblue);

#header:
background-color:rgb($headerred,$headergreen,$headerblue);

#main:
background-color:rgb($mainred,$maingreen,$mainblue);

#holder:
background-color:rgb($holderred,$holdergreen,$holderblue);

#footer:
background-color:rgb($footerred,$footergreen,$footerblue);

Even the colour range chosen from is generated randomly. I found 0-255 gave overly bright colours, so I used 30-225 instead. (You can change this in the code.) The range chosen at random this time was:

Low (from $low-127):
$l

High (from 128-$high):
$h

View the code used to generate the page here.

HTML; ?>