Skip to content

Instantly share code, notes, and snippets.

@matteoferla

matteoferla/Blogger_LCARS

Created October 4, 2015 22:53
Show Gist options
  • Save matteoferla/5f851c9d0037a6a95dde to your computer and use it in GitHub Desktop.
Save matteoferla/5f851c9d0037a6a95dde to your computer and use it in GitHub Desktop.
Download ZIP
A prototype to make Blogger look like Star Trek's LCAR using a modified version of the CSS from https://github.com/Garrett-/lcars
Raw
Blogger_LCARS
<?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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment