These are actually my notes and not a how to. The reason why I am posting is that I am curious to see what happens when I post code —turns out pre and code tags are munted).
The first page google finds is http://www.lcars.org.uk/. This has loads of images, text and animation, but requires Flash, which is being abandoned thanks to CSS3. And as the page shows it does feel very Netscape. I want to add CSS setting to a Blogger hosted blog. The modern web is made in github. So I googled both "LCARS CSS" and "LCARS github".
https://github.com/Garrett-/lcars looks very promising. It's readme seems like its is a work in progress and it actually was. I changed the code a bit to remove the floating which caused issues with length (I don't know how long my vertical bits are) and I added a vertical variant of the striping. I also used this page http://postoneeighth.blogspot.co.uk/2012/09/creating-your-own-blogger-template-from.html to figure out what the actual code of the elements are...
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8" ?> | |
| <!DOCTYPE html> | |
| <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> | |
| <head> | |
| <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> | |
| <b:if cond='data:blog.isMobile'> | |
| <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> | |
| <b:else/> | |
| <meta content='width=1100' name='viewport'/> | |
| </b:if> | |
| <b:include data='blog' name='all-head-content'/> | |
| <title> | |
| <data:blog.pageTitle/> | |
| </title> | |
| <b:skin/> | |
| <!--<link rel="Stylesheet" href="//dl.dropboxusercontent.com/s/b3dpcg6c8gt6hcq/lcars.min.css" type="text/css" media="all"/>--> | |
| <link rel="Stylesheet" href="//dl.dropboxusercontent.com/s/c4jomaaautu9rrj/lcars.mod.css" type="text/css" media="all"/> | |
| </head> | |
| <body> | |
| <b:section id='header' class='header' maxwidgets='1' showaddelement='yes'> </b:section> | |
| <table class="lcars-container" ><!--split into two--> | |
| <tr><td style="width:70%;"> | |
| <table class="lcars-container"> | |
| <!-- TOP ROW | |
| =========================================================== --> | |
| <tr class="lcars-row spaced"> | |
| <td class="lcars-column u-1-8 lcars-elbow left bottom lcars-blue-bg"></td> | |
| <td class="lcars-column u-6-8 lcars-divider lcars-blue-tan-divide"> | |
| <div class="lcars-row"> | |
| <div class="lcars-column u-1-2"> </div> | |
| <div class="lcars-column u-1-2"> | |
| <h1 class="right">Title</h1> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="lcars-column u-1-8 lcars-elbow right bottom lcars-tan-bg "></td> | |
| </tr> | |
| <!-- Main ROW | |
| =========================================================== --> | |
| <tr class="lcars-row spaced"> | |
| <td class="lcars-column u-1-8 mod-v"><div class="lcars-menu left lcars-orange-grayBlue-vdivide mod-fill"></div></td> | |
| <td class="lcars-column u-6-8"> | |
| <b:section id='main' class="main" maxwidgets='' showaddelements='yes'> | |
| <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> | |
| </b:section> | |
| </td> | |
| <td class="lcars-column u-1-8 mod-v"><div class="lcars-menu right lcars-orange-grayBlue-vdivide mod-fill"></div></td> | |
| </tr> | |
| <!-- Bottom ROW | |
| =========================================================== --> | |
| <tr class="lcars-row spaced"> | |
| <td class="lcars-column u-1-8 lcars-elbow left top lcars-tan-bg"></td> | |
| <td class="lcars-column u-6-8 lcars-divider bottom lcars-tan-blue-divide"></td> | |
| <td class="lcars-column u-1-8 lcars-elbow right top lcars-blue-bg"></td> | |
| </tr> | |
| </table> | |
| </td> | |
| <!--- side bar--> | |
| <td style="width:30%;"><div class="lcars-divider lcars-salmon-tan-divide" style="margin: auto"> | |
| <b:section id='sidebar' class='sidebar' maxwidgets='' showaddelements='yes'> | |
| <b:widget id='CustomSearch1' locked='false' title='Search' type='CustomSearch'/> | |
| <b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/> | |
| </b:section></div> | |
| </td></tr> | |
| </table> | |
| <div class="lcars-container"> | |
| <div class="lcars-salmon-tan-divide bottom"><b:section id='footer' class='footer' maxwidgets='' showaddelements='yes'> | |
| <b:widget id='Attribution1' locked='false' title='' type='Attribution'/> | |
| </b:section></div> | |
| </div> | |
| </body> | |
| </html> |
