S2 FLEXIBLE SQUARES: City Neon [3 Variants]
Live Preview (Temporary) // Static Preview // Blue Preview // Green Preview
City Neon
s2flexiblesquares
Instructions
+ Go to CUSTOMIZE and choose any S2 Flexible Squares layout, apply it, then scroll down and make sure ads are set to HORIZONTAL and sidebar placement is on the RIGHT.
+ Go to CUSTOMIZE JOURNAL STYLE and then to CUSTOM CSS.
+ Set dropdown menus to NO, NO, YES, paste the code in and save!
Codes
Pink:
/*--------City Neon by Tessisamess--------*/
/*--Made On: October 2011--*/
/*--S2 Style: Flexible Squares--*/
/*--------CREDITS---------*/
/*--Coding + Design + Tinyicons: tessisamess@LJ--*/
/*--Tessisamess Layout Comm: layouttesst@LJ--*/
body {
background-color: #111111;
text-align: center;
color: #F1F1F1;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
background-image: url('http://i.imgur.com/ycfiw.png');
background-repeat: repeat;
background-attachment: fixed;
background-position: center;
padding: 10px;
}
a, a:link, a:visited {
color: #DC143C;
text-decoration: none;
}
a:hover {
color: #E3385B;
text-decoration: line-through;
}
p, td, blockquote {
font-size: 11px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*--General page alignment and width--*/
#content {
width: 83%;
margin-left: auto; margin-right: auto;
background-color: #333333;
border-width: 0px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 1px 1px 10px 3px rgba(227, 56, 91, 0.5);
-moz-box-shadow: 1px 1px 10px 3px rgba(227, 56, 91, 0.5);
box-shadow: 1px 1px 10px 3px rgba(227, 56, 91, 0.5);
}
#maincontent {
margin-top: 45px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: transparent;
color: #F1F1F1;
border-width: 0px;
text-align: justify;
}
#sidebar {
width: 22%;
padding-top: 15px;
margin-top: 15px;
background-color: #111111;
border-style: none;
font-size: 11px;
font-family: Monospace;
color: #F1F1F1;
float: right;
text-align: left;
-webkit-border-radius: 10px;
-moz-border-: 10px;
border-radius: 10px;
}
/*--Header - you can add a header image with either #header or .headerimage--*/
#header {
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
font-family: 'Coda', Impact;
font-size: 23px;
text-transform: uppercase;
letter-spacing: 2px;
border-width: 0px;
background: transparent;
color: #F1F1F1;
text-shadow: 1px 1px 5px #1a1a1a;
filter: dropshadow(color=#1a1a1a, offx=1, offy=1);
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #DC143C;
}
div#header a:hover, div#footer a:hover {
color: #E3385B;
text-decoration: line-through;
}
/*title and subtitle*/
.title {
display: none;
}
.subtitle{
display: none;
}
/*--Header - top navigation--*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader {
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*--Entry stuff--*/
.subcontent {
width: 75%;
margin: 0;
border: 0;
padding-right: 3px;
}
.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #111111;
color: #F1F1F1;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: justify;
border-width: 0px;
line-height: 150%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.userpic {
position: relative;
float: left;
background-color: transparent !important;
padding: 0px;
margin: 0px;
z-index: 15;
border-style: none;
}
.userpic img {
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
}
.date {
line-height: 5px;
top: 5px;
color: #F1F1F1;
font-family: monospace;
font-size: 9px;
padding-top: 10px;
}
.subject {
font-weight: bold;
padding: 0px;
text-align: right;
color: #F1F1F1;
font-family: 'Coda', Impact;
font-size: 20px;
line-height: 2px;
text-transform: uppercase;
text-shadow: 1px 1px 5px #1a1a1a;
filter: dropshadow(color=#1a1a1a, offx=1, offy=1);
}
.subject a, .subject a:link, .subject a:visited {
color: #DC143C;
}
.subject a:hover {
color: #E3385B;
}
.datesubject {
background-color: transparent;
padding: 5px;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
h1 {
color: #E3385B;
font-family: 'Coda', Impact;
font-size: 19px;
}
h2 {
color: #E3385B;
font-family: 'Coda', Impact;
font-size: 17px;
}
h3 {
color: #E3385B;
font-family: 'Coda', Impact;
font-size: 15px;
}
code {
color: #E3385B;
}
blockquote {
background-color: #E3385B;
padding: 8px;
font-family: Monospace;
font-size: 11;
}
/*--Entry Stuff - Current Mood, Music and Location--*/
.currents, .currentmood, .currentmusic {
font-family: monospace;
font-size: 11px;
}
.ljtags {
font-family: monospace;
padding-top: 35px;
padding-bottom: 0px;
margin-bottom: -8px;
text-align: left;
}
/*--Entry Stuff - Comments--*/
.comments {
font-family: 'Coda', Impact;
font-size: 15px;
text-align: center;
text-transform: uppercase;
background-color: #DC143C;
padding: 7px;
position: relative;
float: right;
bottom: 5px;
width: 40%;
text-shadow: 1px 1px 5px #E3385B;
filter: dropshadow(color=#E3385B, offx=1, offy=1);
-webkit-box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.2);
}
div.comments a, div.comments a:link, div.comments a:visited {
color: #F1F1F1;
}
div.comments a:hover {
color: #E3385B !important;
text-decoration: line-through;
}
/*--Entry Stuff - Separator--*/
.separator{
/* for formatting separators between entries */
height: 35px;
}
/*--Special friends page customization--*/
.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px;
text-align: center;
background-color: transparent !important;
padding: 0px;
margin: 0px;
z-index: 15;
border-style: none;
z-index: 15;
}
.userpicfriends a {
display: none;
}
.userpicfriends img {
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
}
/*--Sidebar--*/
.defaultuserpic {
text-align: center;
padding: 0px;
margin: 0px;
z-index: 15;
border-style: none;
}
.defaultuserpic img {
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
text-align: justify;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #DC143C;
}
div#sidebar a:hover {
color: #E3385B;
text-decoration: line-through;
}
/*--Sidebar - Calendar--*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-style: none;
text-align: center;
font-family: monospace;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #DC143C;
border-width: 1px;
border-style: dashed;
background-color: #111111;
text-align: center;
font-family: Monospace;
font-size: 11px;
}
/*--Sidebar - link box contents and sidebar box titles--*/
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
padding-left: 15px;
list-style: none;
}
li.sbartitle {
padding-left: 15px;
list-style: none;
border-width: 0px;
background-color: transparent;
margin-bottom: 10px;
margin-top: 10px;
font-family: 'Coda', Impact;
font-size: 18px;
color: #E3385B;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 5px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}
/*--Footer--*/
#footer {
width: 100%;
text-align: center;
font-family: 'Coda', Impact;
font-size: 18px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: transparent !important;
color: #DC143C;
border-width: 0px;
z-index: 100;
clear: both;
text-shadow: 1px 1px 5px #1a1a1a;
filter: dropshadow(color=#1a1a1a, offx=1, offy=1);
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*--Archive Pages--*/
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
background-color: #111111;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: dashed;
border-color: #E3385B;
font-family: Monospace;
}
table.yeartable td.yearday {
background-color: #111111;
text-align: center;
}
td.yearmonth {
border-style: none;
font-family: 'Coda', Impact;
font-size: 17px;
}
/*--Tags Page--*/
.ljtaglist {
background-color: #111111;
border-style: none;
line-height: 150%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 30px;
width: 65%;
}
/*--Comments pages--*/
.datesubjectcomment {
background-color: #DC143C;
padding: 5px;
margin-top: 20px;
font-family: monospace;
}
.userpiccomment {
position: relative;
background-color: transparent !important;
padding: 0px;
margin: 0px;
z-index: 15;
border-style: none;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-style: none;
}
.box {
border-style: none;
padding: 10px;
clear: left;
}
.box center b {
display: none;
}
input, textarea {
background-color: #111111;
color: #F1F1F1;
border-style: none;
-webkit-box-shadow: 1px 1px 10px 1px rgba(227, 56, 91, 0.5);
-moz-box-shadow: 1px 1px 10px 1px rgba(227, 56, 91, 0.5);
box-shadow: 1px 1px 10px 1px rgba(227, 56, 91, 0.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
textarea.textbox {
width: 90% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #111111;
color: #F1F1F1;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #F1F1F1;
}
.commentbox {
border-style: none;
padding: 10px;
margin: 10px;
background-color: #111111;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #F1F1F1;
font-family: monospace;
}
.datesubjectcomment a:hover {
color: #b0b9c8;
font-family: monospace;
}
.commentboxpartial {
border-color: #777777;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #111111;
}
.commentinfo {
background-color: #111111;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--Misc--*/
.clear {
height: 15px;
}
@font-face {
font-family: 'Coda';
font-style: normal;
font-weight: 800;
src: local('Coda-Heavy'), url('http://themes.googleusercontent.com/static/fonts/coda/v5/NSKszig3lQPRMZg0f0ghaw.woff') format('woff'), url('http://fancyandthefury.net/files/Coda.ttf') format('ttf');
}
::selection {
background: #E3385B;
}
::-moz-selection {
background: #E3385B;
}
/*--Generated by Malionette's Tiny Icon Generator + Icons by Tessisamess @ Layouttesst--*/
img[src*="img/userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/PDj63.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
img[src*="img/community.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/L0zyp.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
img[src*="img/icon_protected.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/a2hzz.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
img[src*="img/icon_private.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/sKlpe.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
img[src*="img/icon_groups.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/a2hzz.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
Blue:
/*--------City Neon by Tessisamess--------*/
/*--Made On: October 2011--*/
/*--S2 Style: Flexible Squares--*/
/*--------CREDITS---------*/
/*--Coding + Design + Tinyicons: tessisamess@LJ--*/
/*--Tessisamess Layout Comm: layouttesst@LJ--*/
body {
background-color: #111111;
text-align: center;
color: #F1F1F1;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
background-image: url('http://i.imgur.com/OzYdT.png');
background-repeat: repeat;
background-attachment: fixed;
background-position: center;
padding: 10px;
}
a, a:link, a:visited {
color: #0B61A4;
text-decoration: none;
}
a:hover {
color: #3F92D2;
text-decoration: line-through;
}
p, td, blockquote {
font-size: 11px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*--General page alignment and width--*/
#content {
width: 83%;
margin-left: auto; margin-right: auto;
background-color: #333333;
border-width: 0px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 1px 1px 10px 3px rgba(11, 97, 164, 0.5);
-moz-box-shadow: 1px 1px 10px 3px rgba(11, 97, 164, 0.5);
box-shadow: 1px 1px 10px 3px rgba(11, 97, 164, 0.5);
}
#maincontent {
margin-top: 45px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: transparent;
color: #F1F1F1;
border-width: 0px;
text-align: justify;
}
#sidebar {
width: 22%;
padding-top: 15px;
margin-top: 15px;
background-color: #111111;
border-style: none;
font-size: 11px;
font-family: Monospace;
color: #F1F1F1;
float: right;
text-align: left;
-webkit-border-radius: 10px;
-moz-border-: 10px;
border-radius: 10px;
}
/*--Header - you can add a header image with either #header or .headerimage--*/
#header {
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
font-family: 'Coda', Impact;
font-size: 23px;
text-transform: uppercase;
letter-spacing: 2px;
border-width: 0px;
background: transparent;
color: #F1F1F1;
text-shadow: 1px 1px 5px #1a1a1a;
filter: dropshadow(color=#1a1a1a, offx=1, offy=1);
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #0B61A4;
}
div#header a:hover, div#footer a:hover {
color: #3F92D2;
text-decoration: line-through;
}
/*title and subtitle*/
.title {
display: none;
}
.subtitle{
display: none;
}
/*--Header - top navigation--*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader {
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*--Entry stuff--*/
.subcontent {
width: 75%;
margin: 0;
border: 0;
padding-right: 3px;
}
.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #111111;
color: #F1F1F1;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: justify;
border-width: 0px;
line-height: 150%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.userpic {
position: relative;
float: left;
background-color: transparent !important;
padding: 0px;
margin: 0px;
z-index: 15;
border-style: none;
}
.userpic img {
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
}
.date {
line-height: 5px;
top: 5px;
color: #F1F1F1;
font-family: monospace;
font-size: 9px;
padding-top: 10px;
}
.subject {
font-weight: bold;
padding: 0px;
text-align: right;
color: #F1F1F1;
font-family: 'Coda', Impact;
font-size: 20px;
line-height: 2px;
text-transform: uppercase;
text-shadow: 1px 1px 5px #1a1a1a;
filter: dropshadow(color=#1a1a1a, offx=1, offy=1);
}
.subject a, .subject a:link, .subject a:visited {
color: #0B61A4;
}
.subject a:hover {
color: #3F92D2;
}
.datesubject {
background-color: transparent;
padding: 5px;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
h1 {
color: #3F92D2;
font-family: 'Coda', Impact;
font-size: 19px;
}
h2 {
color: #3F92D2;
font-family: 'Coda', Impact;
font-size: 17px;
}
h3 {
color: #3F92D2;
font-family: 'Coda', Impact;
font-size: 15px;
}
code {
color: #3F92D2;
}
blockquote {
background-color: #3F92D2;
padding: 8px;
font-family: Monospace;
font-size: 11;
}
/*--Entry Stuff - Current Mood, Music and Location--*/
.currents, .currentmood, .currentmusic {
font-family: monospace;
font-size: 11px;
}
.ljtags {
font-family: monospace;
padding-top: 35px;
padding-bottom: 0px;
margin-bottom: -8px;
text-align: left;
}
/*--Entry Stuff - Comments--*/
.comments {
font-family: 'Coda', Impact;
font-size: 15px;
text-align: center;
text-transform: uppercase;
background-color: #0B61A4;
padding: 7px;
position: relative;
float: right;
bottom: 5px;
width: 40%;
text-shadow: 1px 1px 5px #3F92D2;
filter: dropshadow(color=#3F92D2, offx=1, offy=1);
-webkit-box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.2);
}
div.comments a, div.comments a:link, div.comments a:visited {
color: #F1F1F1;
}
div.comments a:hover {
color: #3F92D2 !important;
text-decoration: line-through;
}
/*--Entry Stuff - Separator--*/
.separator{
/* for formatting separators between entries */
height: 35px;
}
/*--Special friends page customization--*/
.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px;
text-align: center;
background-color: transparent !important;
padding: 0px;
margin: 0px;
z-index: 15;
border-style: none;
z-index: 15;
}
.userpicfriends a {
display: none;
}
.userpicfriends img {
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
}
/*--Sidebar--*/
.defaultuserpic {
text-align: center;
padding: 0px;
margin: 0px;
z-index: 15;
border-style: none;
}
.defaultuserpic img {
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
text-align: justify;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #0B61A4;
}
div#sidebar a:hover {
color: #3F92D2;
text-decoration: line-through;
}
/*--Sidebar - Calendar--*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-style: none;
text-align: center;
font-family: monospace;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #0B61A4;
border-width: 1px;
border-style: dashed;
background-color: #111111;
text-align: center;
font-family: Monospace;
font-size: 11px;
}
/*--Sidebar - link box contents and sidebar box titles--*/
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
padding-left: 15px;
list-style: none;
}
li.sbartitle {
padding-left: 15px;
list-style: none;
border-width: 0px;
background-color: transparent;
margin-bottom: 10px;
margin-top: 10px;
font-family: 'Coda', Impact;
font-size: 18px;
color: #3F92D2;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 5px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}
/*--Footer--*/
#footer {
width: 100%;
text-align: center;
font-family: 'Coda', Impact;
font-size: 18px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: transparent !important;
color: #0B61A4;
border-width: 0px;
z-index: 100;
clear: both;
text-shadow: 1px 1px 5px #1a1a1a;
filter: dropshadow(color=#1a1a1a, offx=1, offy=1);
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*--Archive Pages--*/
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
background-color: #111111;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: dashed;
border-color: #3F92D2;
font-family: Monospace;
}
table.yeartable td.yearday {
background-color: #111111;
text-align: center;
}
td.yearmonth {
border-style: none;
font-family: 'Coda', Impact;
font-size: 17px;
}
/*--Tags Page--*/
.ljtaglist {
background-color: #111111;
border-style: none;
line-height: 150%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 30px;
width: 65%;
}
/*--Comments pages--*/
.datesubjectcomment {
background-color: #0B61A4;
padding: 5px;
margin-top: 20px;
font-family: monospace;
}
.userpiccomment {
position: relative;
background-color: transparent !important;
padding: 0px;
margin: 0px;
z-index: 15;
border-style: none;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-style: none;
}
.box {
border-style: none;
padding: 10px;
clear: left;
}
.box center b {
display: none;
}
input, textarea {
background-color: #111111;
color: #F1F1F1;
border-style: none;
-webkit-box-shadow: 1px 1px 10px 1px rgba(11, 97, 164, 0.5);
-moz-box-shadow: 1px 1px 10px 1px rgba(11, 97, 164, 0.5);
box-shadow: 1px 1px 10px 1px rgba(11, 97, 164, 0.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
textarea.textbox {
width: 90% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #111111;
color: #F1F1F1;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #F1F1F1;
}
.commentbox {
border-style: none;
padding: 10px;
margin: 10px;
background-color: #111111;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #F1F1F1;
font-family: monospace;
}
.datesubjectcomment a:hover {
color: #b0b9c8;
font-family: monospace;
}
.commentboxpartial {
border-color: #777777;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #111111;
}
.commentinfo {
background-color: #111111;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--Misc--*/
.clear {
height: 15px;
}
@font-face {
font-family: 'Coda';
font-style: normal;
font-weight: 800;
src: local('Coda-Heavy'), url('http://themes.googleusercontent.com/static/fonts/coda/v5/NSKszig3lQPRMZg0f0ghaw.woff') format('woff'), url('http://fancyandthefury.net/files/Coda.ttf') format('ttf');
}
::selection {
background: #3F92D2;
}
::-moz-selection {
background: #3F92D2;
}
/*--Generated by Malionette's Tiny Icon Generator + Icons by Tessisamess @ Layouttesst--*/
img[src*="img/userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/LcCN7.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
img[src*="img/community.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/LcCN7.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
img[src*="img/icon_protected.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/5q1QM.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
img[src*="img/icon_private.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/sKlpe.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
img[src*="img/icon_groups.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/5q1QM.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
Green:
/*--------City Neon by Tessisamess--------*/
/*--Made On: October 2011--*/
/*--S2 Style: Flexible Squares--*/
/*--------CREDITS---------*/
/*--Coding + Design + Tinyicons: tessisamess@LJ--*/
/*--Tessisamess Layout Comm: layouttesst@LJ--*/
body {
background-color: #111111;
text-align: center;
color: #F1F1F1;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
background-image: url('http://i.imgur.com/Y5eyp.png');
background-repeat: repeat;
background-attachment: fixed;
background-position: center;
padding: 10px;
}
a, a:link, a:visited {
color: #39E639;
text-decoration: none;
}
a:hover {
color: #67E667;
text-decoration: line-through;
}
p, td, blockquote {
font-size: 11px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*--General page alignment and width--*/
#content {
width: 83%;
margin-left: auto; margin-right: auto;
background-color: #333333;
border-width: 0px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 1px 1px 10px 3px rgba(57, 230, 57, 0.5);
-moz-box-shadow: 1px 1px 10px 3px rgba(57, 230, 57, 0.5);
box-shadow: 1px 1px 10px 3px rgba(57, 230, 57, 0.5);
}
#maincontent {
margin-top: 45px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: transparent;
color: #F1F1F1;
border-width: 0px;
text-align: justify;
}
#sidebar {
width: 22%;
padding-top: 15px;
margin-top: 15px;
background-color: #111111;
border-style: none;
font-size: 11px;
font-family: Monospace;
color: #F1F1F1;
float: right;
text-align: left;
-webkit-border-radius: 10px;
-moz-border-: 10px;
border-radius: 10px;
}
/*--Header - you can add a header image with either #header or .headerimage--*/
#header {
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
font-family: 'Coda', Impact;
font-size: 23px;
text-transform: uppercase;
letter-spacing: 2px;
border-width: 0px;
background: transparent;
color: #F1F1F1;
text-shadow: 1px 1px 5px #1a1a1a;
filter: dropshadow(color=#1a1a1a, offx=1, offy=1);
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #39E639;
}
div#header a:hover, div#footer a:hover {
color: #67E667;
text-decoration: line-through;
}
/*title and subtitle*/
.title {
display: none;
}
.subtitle{
display: none;
}
/*--Header - top navigation--*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader {
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*--Entry stuff--*/
.subcontent {
width: 75%;
margin: 0;
border: 0;
padding-right: 3px;
}
.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #111111;
color: #F1F1F1;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: justify;
border-width: 0px;
line-height: 150%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.userpic {
position: relative;
float: left;
background-color: transparent !important;
padding: 0px;
margin: 0px;
z-index: 15;
border-style: none;
}
.userpic img {
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
}
.date {
line-height: 5px;
top: 5px;
color: #F1F1F1;
font-family: monospace;
font-size: 9px;
padding-top: 10px;
}
.subject {
font-weight: bold;
padding: 0px;
text-align: right;
color: #F1F1F1;
font-family: 'Coda', Impact;
font-size: 20px;
line-height: 2px;
text-transform: uppercase;
text-shadow: 1px 1px 5px #1a1a1a;
filter: dropshadow(color=#1a1a1a, offx=1, offy=1);
}
.subject a, .subject a:link, .subject a:visited {
color: #39E639;
}
.subject a:hover {
color: #67E667;
}
.datesubject {
background-color: transparent;
padding: 5px;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
h1 {
color: #67E667;
font-family: 'Coda', Impact;
font-size: 19px;
}
h2 {
color: #67E667;
font-family: 'Coda', Impact;
font-size: 17px;
}
h3 {
color: #67E667;
font-family: 'Coda', Impact;
font-size: 15px;
}
code {
color: #67E667;
}
blockquote {
background-color: #67E667;
padding: 8px;
font-family: Monospace;
font-size: 11;
}
/*--Entry Stuff - Current Mood, Music and Location--*/
.currents, .currentmood, .currentmusic {
font-family: monospace;
font-size: 11px;
}
.ljtags {
font-family: monospace;
padding-top: 35px;
padding-bottom: 0px;
margin-bottom: -8px;
text-align: left;
}
/*--Entry Stuff - Comments--*/
.comments {
font-family: 'Coda', Impact;
font-size: 15px;
text-align: center;
text-transform: uppercase;
background-color: #39E639;
padding: 7px;
position: relative;
float: right;
bottom: 5px;
width: 40%;
text-shadow: 1px 1px 5px #67E667;
filter: dropshadow(color=#67E667, offx=1, offy=1);
-webkit-box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.2);
}
div.comments a, div.comments a:link, div.comments a:visited {
color: #F1F1F1;
}
div.comments a:hover {
color: #67E667 !important;
text-decoration: line-through;
}
/*--Entry Stuff - Separator--*/
.separator{
/* for formatting separators between entries */
height: 35px;
}
/*--Special friends page customization--*/
.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px;
text-align: center;
background-color: transparent !important;
padding: 0px;
margin: 0px;
z-index: 15;
border-style: none;
z-index: 15;
}
.userpicfriends a {
display: none;
}
.userpicfriends img {
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
}
/*--Sidebar--*/
.defaultuserpic {
text-align: center;
padding: 0px;
margin: 0px;
z-index: 15;
border-style: none;
}
.defaultuserpic img {
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
text-align: justify;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #39E639;
}
div#sidebar a:hover {
color: #67E667;
text-decoration: line-through;
}
/*--Sidebar - Calendar--*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-style: none;
text-align: center;
font-family: monospace;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #39E639;
border-width: 1px;
border-style: dashed;
background-color: #111111;
text-align: center;
font-family: Monospace;
font-size: 11px;
}
/*--Sidebar - link box contents and sidebar box titles--*/
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
padding-left: 15px;
list-style: none;
}
li.sbartitle {
padding-left: 15px;
list-style: none;
border-width: 0px;
background-color: transparent;
margin-bottom: 10px;
margin-top: 10px;
font-family: 'Coda', Impact;
font-size: 18px;
color: #67E667;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 5px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}
/*--Footer--*/
#footer {
width: 100%;
text-align: center;
font-family: 'Coda', Impact;
font-size: 18px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: transparent !important;
color: #39E639;
border-width: 0px;
z-index: 100;
clear: both;
text-shadow: 1px 1px 5px #1a1a1a;
filter: dropshadow(color=#1a1a1a, offx=1, offy=1);
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*--Archive Pages--*/
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
background-color: #111111;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: dashed;
border-color: #67E667;
font-family: Monospace;
}
table.yeartable td.yearday {
background-color: #111111;
text-align: center;
}
td.yearmonth {
border-style: none;
font-family: 'Coda', Impact;
font-size: 17px;
}
/*--Tags Page--*/
.ljtaglist {
background-color: #111111;
border-style: none;
line-height: 150%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 30px;
width: 65%;
}
/*--Comments pages--*/
.datesubjectcomment {
background-color: #39E639;
padding: 5px;
margin-top: 20px;
font-family: monospace;
}
.userpiccomment {
position: relative;
background-color: transparent !important;
padding: 0px;
margin: 0px;
z-index: 15;
border-style: none;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-style: none;
}
.box {
border-style: none;
padding: 10px;
clear: left;
}
.box center b {
display: none;
}
input, textarea {
background-color: #111111;
color: #F1F1F1;
border-style: none;
-webkit-box-shadow: 1px 1px 10px 1px rgba(57, 230, 57, 0.5);
-moz-box-shadow: 1px 1px 10px 1px rgba(57, 230, 57, 0.5);
box-shadow: 1px 1px 10px 1px rgba(57, 230, 57, 0.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
textarea.textbox {
width: 90% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #111111;
color: #F1F1F1;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #F1F1F1;
}
.commentbox {
border-style: none;
padding: 10px;
margin: 10px;
background-color: #111111;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #F1F1F1;
font-family: monospace;
}
.datesubjectcomment a:hover {
color: #b0b9c8;
font-family: monospace;
}
.commentboxpartial {
border-color: #777777;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #111111;
}
.commentinfo {
background-color: #111111;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--Misc--*/
.clear {
height: 15px;
}
@font-face {
font-family: 'Coda';
font-style: normal;
font-weight: 800;
src: local('Coda-Heavy'), url('http://themes.googleusercontent.com/static/fonts/coda/v5/NSKszig3lQPRMZg0f0ghaw.woff') format('woff'), url('http://fancyandthefury.net/files/Coda.ttf') format('ttf');
}
::selection {
background: #67E667;
}
::-moz-selection {
background: #67E667;
}
/*--Generated by Malionette's Tiny Icon Generator + Icons by Tessisamess @ Layouttesst--*/
img[src*="img/userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/TJC0j.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
img[src*="img/community.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/TJC0j.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
img[src*="img/icon_protected.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/a2hzz.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
img[src*="img/icon_private.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/ceFdD.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
img[src*="img/icon_groups.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/a2hzz.png) no-repeat !important;
padding: 16px 0 0 16px !important;
}
Download all layouts + all images used + customization guides to change colors, fonts, widths and images here.
Notes
Nothing in the sidebar is disabled, so you can use all, some, or none of the sidebar options; there are custom comment pages, tags page and archive page. This most likely won't look too awesome with a header image, but if anyone needs to know how to put one in I'll be happy to help.
Hidden:
Title and subtitle.
Layout looks best on:
Chrome & Firefox
Credit
Credit when using this layout is a must, no matter how much you change in the code. There are three main ways to credit:
+ In your profile with text and an LJ user link or HTML link to the layout.
+ In your profile with a button.
+ In your journal's linklist or blurb.
Basically anything visible. It doesn't have to be big, but it does need to be there.
Like my stuff? Join my comm!