Flexible Squares: Flying Unicorns
Live Preview | Original Post
Layout Name: Flying Unicorns
Style: S2 Flexible Squares
Author: aprilclydel_ac or Lysianthus
Version: 1.0
Accounts: Basic, Plus, Paid
Ad Placement: Horizontal
Sidebar Placement: Two Column (Sidebar on Left or Right)
Compatible Browsers: Google Chrome, Mozilla Firefox, Safari, Internet Explorer 10
Description: “Flying Unicorns” is a minimalistic LiveJournal layout inspired by this website. There are only one font and one color used. A serif font is used to coincide with the storytelling theme. The whole #maincontent belonging to a single box signifies continuity. Flying Unicorns aims to impart calmness with the single color used.
/* @font-face */
@font-face {
font-family: 'Sorts Mill Goudy';
font-weight: 400;
font-style: normal;
src: local('Sorts Mill Goudy Regular'), local('SortsMillGoudy-Regular'), url(http://themes.googleusercontent.com/static/fonts/sortsmillgoudy/v3/JzRrPKdwEnE8F1TDmDLMUkQF8YaxoHnTBii2CPCdpvk.woff) format('woff');
}
@font-face {
font-family: 'Sorts Mill Goudy';
font-weight: 400;
font-style: italic;
src: local('Sorts Mill Goudy Italic'), local('SortsMillGoudy-Italic'), url(http://themes.googleusercontent.com/static/fonts/sortsmillgoudy/v3/UUu1lKiy4hRmBWk599VL1b2c95eZKbds6ayw__-73Og.woff) format('woff');
}
/* global & default overrides */
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #EDEDED;
font-family: 'Sorts Mill Goudy', serif;
color: #333;
}
a {
text-decoration: none;
color: #00BE83;
-webkit-transition: color 0.3s linear;
-moz-transition: color 0.3s linear;
-ms-transition: color 0.3s linear;
-o-transition: color 0.3s linear;
transition: color 0.3s linear;
}
a:hover {
color: #333;
}
strong, b {
font-weight: bold;
}
i, em {
font-style: italic;
}
u {
text-decoration: underline
}
s {
text-decoration: line-through;
}
blockquote {
padding: 15px;
border: #EDEDED 1px solid;
}
/* wrappers */
#content-outer {
margin: 0;
padding: 0;
}
#content {
margin: 100px auto 0;
padding: 0;
}
/* header */
#header {
margin: 0 100px 0 auto;
padding: 0;
background-color: #FFF;
width: 720px;
}
.navheader {
margin: 0;
padding: 30px 0;
border-bottom: #EDEDED 1px solid;
list-style: none;
font-family: 'Sorts Mill Goudy', serif;
font-size: 16px;
font-variant: small-caps;
line-height: 1.5;
}
.navheader li {
margin: 0 5px;
padding: 10px;
display: inline;
}
.title {
margin: 0;
padding: 30px 15px 0;
font-family: 'Sorts Mill Goudy', serif;
font-size: 30px;
}
.subtitle {
margin: 0;
padding: 0 15px 30px;
border-bottom: #EDEDED 1px solid;
font-family: 'Sorts Mill Goudy', serif;
font-size: 18px;
font-style: italic;
}
/* sidebar */
#sidebar {
margin: 0;
padding: 30px 0 30px 15px;
position: absolute;
right: 820px;
background-color: #333;
width: 485px;
}
#sidebar_calendar, #sidebar_tags, .sbartitle { display:none; }
.defaultuserpic {
margin: 0 10px;
padding: 0;
float: left;
}
.defaultuserpic img {
border: #111 10px solid;
width: 50px;
height: 50px;
}
.sbarbody2 {
margin: 0;
padding: 10px;
display: none;
float: left;
font-family: 'Arial', 'Helvetica', sans-serif;
font-size: 11px;
text-align: justify;
color: #FFF;
}
#sidebar_linklist {
margin: 0 0 0 90px;
padding: 0;
}
#sidebar_linklist ul {
margin: 0;
padding: 0;
list-style: none;
}
.sbaritem {
margin: 0 0 5px 0;
padding: 10px 15px;
border-bottom: #999 1px solid;
font-family: 'Sorts Mill Goudy', serif;
font-size: 13px;
font-variant: small-caps;
}
.sbaritem a {
color: #DDD;
}
/* maincontent */
#maincontent {
margin: 0 100px 0 auto;
padding: 0;
background-color: #FFF;
width: 720px;
position: relative;
z-index: 15;
}
.subcontent {
margin: 0;
padding: 30px 10px;
border-bottom: #EDEDED 1px solid;
}
.userpic, .userpicfriends {
margin: 10px -40px 10px 10px;
padding: 0;
float: right;
}
.userpicfriends {
background: transparent!important;
text-align: center;
}
.userpic img, .userpicfriends img {
margin: 0;
padding: 0;
border: #333 5px solid;
width: 60px;
height: 60px;
}
.userpicfriends font {
color: #999 !important;
}
.datesubject {
margin: 0;
padding: 0;
font-family: 'Sorts Mill Goudy', serif;
}
.date {
margin: 0 0 0 -10px;
padding: 5px 0 5px 100px;
background-color: #333;
width: 270px;
font-size: 13px;
text-transform: uppercase;
color: #FFF;
}
.subject {
margin: 0;
padding: 20px;
font-size: 28px;
}
.entry {
margin: 0;
padding: 10px 10px 20px;
font-family: 'Sorts Mill Goudy', serif;
font-size: 16px;
line-height: 1.75;
text-align: justify;
}
.ljtags {
margin: 0;
padding: 15px 0 0;
font-family: 'Sorts Mill Goudy', serif;
font-size: 12px;
color: #999;
}
.currents {
margin: 20px -20px 20px;
padding: 15px 30px;
background-color: #FCFCFC;
font-size: 12px;
color: #666;
}
.comments {
margin: 0 -100px 0 auto;
padding: 0;
width: 200px;
font-family: 'Sorts Mill Goudy', serif;
font-size: 16px;
text-align: right;
color: transparent;
line-height: 1;
}
.comments a {
margin: -10px 0 5px;
padding: 5px 10px;
display: block;
background-color: #333;
color: #DDD;
}
.year {
margin: 0;
padding: 30px 100px;
list-style-type: circle;
}
.skiplinks {
margin: 0;
padding: 0 0 20px;
border-bottom: #EDEDED 1px solid;
text-align: center;
}
.box {
margin: 0;
padding: 20px;
}
.commentbox {
margin: 0;
padding: 20px;
border-bottom: #EDEDED 1px solid;
}
.datesubjectcomment {
margin: 0 -40px 10px;
padding: 10px;
background-color: #FCFCFC;
}
.userpiccomment {
margin: 0 0 10px 10px;
padding: 0;
float: right;
border: #333 5px solid;
width: 60px;
height: 60px;
}
.commentreply {
margin: 0;
padding: 0;
}
/* footer */
#footer {
margin: -50px 0 0;
padding: 50px;
position: relative;
z-index: 10;
bottom: 0;
right: 0;
left: 0;
background-color: #333;
}
.navfooter {
margin: 0;
padding: 0;
list-style: none;
}
.navfooter li {
margin: 0 5px;
padding: 10px;
background-color: #111;
display: inline;
}
.navfooter a, .viewing {
color: #DDD;
}
/* input & output */
input, select, textarea, button {
padding: 10px;
background-color: #EDEDED;
border: none;
font-family: 'Sorts Mill Goudy', serif;
font-size: 13px;
color: #666;
}
code, pre, textarea {
font-family: 'Consolas', 'Courier New', 'Courier', monospace;
font-size: 12px;
}
/* extra */
.clear {
clear: left;
}
.clearfoot {
clear: both;
}
/* Generated by Malionette's Tiny Icon Generator
http://malionette.net/generator/tinylite.html */
span.i-ljuser img[src*="img/userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/0215l9R.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
span.i-ljuser img[src*="img/community.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/Bz3f2wG.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
Five Simple Steps for Installation×Go to Select Journal Style and choose any Flexible Squares theme and apply it on the journal.×Set the Ad Placement and Sidebar Placement as specified in the layout information. Save changes.×Go to Customize Journal Style » Custom CSS.×Select NO for all dropdown boxes.×Copy the stylesheet codes, and then paste them on the text area for the custom CSS. Save changes.
The one and only font used in this layout is Sorts Mill Goudy. Tiny icons were created by Yusuke Kamiyamane.
For support or if you encounter problems with the layout, please drop your comments on the original post on calvione.