hello i made a layout

Mar 10, 2010 15:31

I haven't been making graphics lately, sorry! But, hey, here's a layout I made in the meantime. :D



sea you

Journal Style : Flexible Squares
Works with : Basic, Paid
Tested in : Firefox, Safari

(image preview) | (live preview)



(installing your layout)
Choose a Flexible Squares Layout.

Make the Page Setup either 2 Column (sidebar on right) or 2 Column (sidebar on left).

Make Ad Placement either horizontal or between entries.

In Customize Your Theme, go to Style. Change Background color of the outer table to #F7F7F7.

Go to Custom CSS. Make all the drop-down menus there say "No" and paste the code to the right into the Custom Stylesheet text box.

/*----------------
SEA YOU (Flexible Squares)
(Please Credit) PIQUING_TOM (and/or) RECOLTE (at) LIVEJOURNAL
----------------*/

/* - - - - - Main Page - - - - - */

body {
margin: 0;
background-color: #f7f7f7;
}

#content {
width:100%;
background: #f7f7f7 url() repeat fixed 0 0;
}

#maincontent {
width: 850px;
margin: 0 auto 180px auto;
font: 11px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
line-height: 150%;
}

#sidebar {
width: 100%;
min-width: 850px;
position: fixed;
bottom: 80px;
background: #90c6c0;
text-align: right;
font: 9.5px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
color: #ffffff;
line-height: 150%;
z-index: auto;
}

#header, #footer {
position: fixed;
bottom: 0;
font: italic 28px 'Arial Black', Gadget, sans-serif;
color: #333333;
text-transform: lowercase;
line-height: 100%;
z-index: auto;
}

#header {
width: 100%;
background-color: #82B3AE;
text-align: left;
}

/* - - Header/Footer - - */

.title, .subtitle {
display: none;
}

ul.navheader {
padding-right: 10px;
text-align: right;
}
ul.navheader li {
display: inline;
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #ffffff;
}
div#header a:hover, div#footer a:hover {
color: #333333;
}

ul.navfooter {
padding-left: 10px;
}
ul.navfooter li {
display: inline;
}
div#footer li.viewing {
display:none;
}

/* - - Sidebar - - */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
font-variant: small-caps;
color: #ffffff;
}
div#sidebar a:hover {
color: #333333;
text-decoration: none;
}

.defaultuserpic {
display: none
}

.sbarheader {
display: none
}
.sbarbody {
padding: 5px;
}
.sbarbody2 {
width: 40%;
float: right;
margin-top: 20px;
padding: 5px;
text-align: justfy;
color: #ffffff;
letter-spacing: .5px;
}

table.calendar {
display: none
}

ul.sbarlist {
width: 300px;
padding: 0;
}
#sidebar_linklist {
float: left;
list-style-type:none;
text-transform: lowercase;
letter-spacing: 1px;
}
li.sbaritem {
display:block;
padding: 5px;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border: 1px solid;
border-color: #9bd6d0 #82B3AE #82B3AE #9bd6d0;
list-style-type: none;
text-transform: lowercase;
}
li.sbaritem:hover {
border-color: #82B3AE #9bd6d0 #9bd6d0 #82B3AE;
}

li.sbartitle {
display: none
}

/* - - - - - Entry Content - - - - - */

.datesubject {
text-align: left
}

.date {
margin-top: 40px;
font: 12px 'MS Serif', 'New York', sans-serif;
color: #2f2f2f;
text-transform: lowercase;
letter-spacing: 5px;
}

.subject {
padding-top: 5px;
font: italic 18px 'Impact', 'Charcoal', sans-serif;
color: #414141;
}
.subject a, .subject a:link, .subject a:visited {
padding-right: 15px;
color: #222222;

}
.subject a:hover {
color: #FE4365;
}

.entry {
padding: 20px;
background-color: transparent;
}
.entry_text {
min-height: 100px;
margin-right: 160px;
text-align: justify;
font: 11px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
color: #414141;
}

.entry ol li, .entry ul li {
font-style: italic;
}

/* - - Entry Userpics - - */

.userpic, .userpicfriends {
float: right;
padding: 10px;
background-color: transparent !important;
text-align: right;
font: italic small-caps 10px 'Times New Roman', 'Times', serif;
color: #333333
text-transform: lowercase;
letter-spacing: 2px;
}
.userpic img, .userpicfriends img {
width: 80px;
height: 80px;
padding: 25px;
background-color: #f7f7f7;
border: 1px solid;
border-color: #ffffff #dddddd #dddddd #ffffff;
}
.userpic img:hover, .userpicfriends img:hover {
border-color: #dddddd #ffffff #ffffff #dddddd;
}

/* - - Entry Metadata - - */

.currents {
margin-top: 20px;
display: block;
}
.currents div {
font: italic 10px 'Times New Roman', 'Times', serif;
color: #414141;
}
.currents div a {
color: #414141;
}
.currents div a:hover {
color: #FE4365;
}

.currentlocation, .ljtags, .currentmood, .currentgroups, .currentmusic {
padding: 5px 0 5px 20px;
background: transparent none no-repeat scroll 0 50%
}
.ljtags {
margin-top: 30px;
background-image: url(http://i45.tinypic.com/2elbjfb.jpg);
font: italic 10px 'Times New Roman', 'Times', serif;
color: #414141;
}
.currentlocation, .currentmood, .currentgroups, .currentmusic {
background-image: url(http://i45.tinypic.com/2elbjfb.jpg)
}

.currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong {
display: none
}

/* - - Entry Comments - - */

.comments {
float: right;
text-align: center;
font: 12px 'Courier New', 'Courier', monospace;
color: #f7f7f7;
text-transform: lowercase;
line-height: 50%;
}

div.comments a, div.comments a:link, div.comments a:visited {
display: block;
padding: 8px;
background-color: #f7f7f7;
border: 1px solid;
border-color: #ffffff #dddddd #dddddd #ffffff;
color: #444444;
}
div.comments a:hover {
border-color: #dddddd #ffffff #ffffff #dddddd;
color: #90c6c0;
text-decoration: none;
}

/* - - - - - Custom Comments Page - - - - - */

.skiplinks {
padding: 10px;
text-align: center;
font: small-caps 11px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
color: #dddddd;
}

.datesubjectcomment {
margin-top: 20px;
padding: 5px;
font: italic 12px 'Times New Roman', 'Times', serif;
color: #444444;
}

.userpiccomment {
float: left;
width: 50px;
height: 50px;
margin-right: 10px;
padding: 10px;
background-color: #f7f7f7;
border: 1px solid;
border-color: #ffffff #dddddd #dddddd #ffffff;
}

.box {
font: 12px 'Courier New', 'Courier', monospace;
}
.box a {
font: small-caps 11px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

input, textarea.textbox, input#subject, select {
margin: 3px;
background-color: #f3f3f3;
border: 1px solid #dddddd;
font: 10px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
color: #444444;
}
select {
background-color: #f7f7f7;
}
textarea.textbox, input#subject {
padding: 3px;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
}

.commentreply {
margin-left: 90px;
font: 11px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
color: #414141;
}

.commentbox {
margin-top: 10px;
padding: 10px;
background-color: #f7f7f7;
border: 1px solid;
border-color: #dddddd #ffffff #ffffff #dddddd;
font: 11px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

.commentboxpartial {
margin: 10px;
padding: 10px;
background-color: #f7f7f7;
border: 1px solid;
border-color: #ffffff #dddddd #dddddd #ffffff;
}

.commentinfo {
}

#qrform {
background: none repeat scroll 0 0;
}
#qrform table {
border: none !important;
}

/* - - - - - Tags Page - - - - - */

h2 {
display: none;
}
.ljtaglist {
text-align: left;
font: 10px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
list-style: none;
}
.ljtaglist li {
margin-bottom: 2px;
padding: 5px;
background: #90c6c0;
border: 1px solid;
border-color: #9bd6d0 #82B3AE #82B3AE #9bd6d0;
color: #414141;
}
.ljtaglist li a {
font-style: italic;
color: #ffffff;
}
.ljtaglist li a:hover {
color: #414141
}

/* - - - - - Archive Page - - - - - */

ul.year {
padding: 0;
font: 20px 'Arial Black', 'Gadget', sans-serif;
color: #414141;
text-align: center;
}
ul.year li {
display: inline;
padding: 3px;
}
ul.year li a {
color: #90c6c0
}
ul.year li a:hover {
color: #414141;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
text-align: center;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border: 1px solid;
border-color: #ffffff #dddddd #dddddd #ffffff;
}
table.yeartable td.yeardate {
text-align: center;
}

dt {
font: small-caps 18px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
dt a b {
color: #333333;
}
dt a b:hover {
color: #FE4365;
}
dd {
background-color: #f7f7f7;
border: 1px solid;
border-color: #dddddd #ffffff #ffffff #dddddd;
font-style: italic;
}
dd a, dd a:link, dd a:visited {
color: #90c6c0;
}
dd a:hover {
color: #414141;
}

/*------------------------MISCELLANEOUS------------------------*/

a, a:link, a:visited {
color: #FE4365;
text-decoration: none;
}
a:hover {
color: #414141;
text-decoration: none;
}

.ljtags a {
color: #414141;
}
.ljtags a:hover {
color: #FE4365
}
.ljuser {
font-family: 'MS Serif', 'New York', sans-serif;
}
.ljuser a b {
color:#414141;
font-variant: small-caps;
}
.ljuser a b:hover {
color: #FE4365;
text-decoration: none;
}

b, strong, h4 {
font-family: 'MS Serif', 'New York', sans-serif;
}
u {
color: #444444;
}
i, em {
color: #777777;
}

blockquote {
padding: 15px;
font-family: Tahoma, Geneva, sans-serif;
font-style: italic;
border: 1px solid;
border-color: #dddddd #ffffff #ffffff #dddddd;
}

textarea {
padding: 3px;
background-color: #f3f3f3;
border: 1px solid #dddddd;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
font: 10px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
color: #444444;
}

code {
display:block;
padding:5px;
background-color: #1f1f1f;
font-size: 11px;
color: #f3f3f3;
}
code, kbd, pre, tt {
font-family: 'Lucida Console', Monaco, monospace;
}

.clear {
height: 0
}
.separator{
height: 60px;
}

/* - - Contextual Popup - - */

div.ContextualPopup div.Inner {
width: 250px;
margin: 10px 0 0 0px;
padding: 10px;
background-color: #90c6c0 !important;
border: 1px solid;
border-color: #9bd6d0 #82B3AE #82B3AE #90c6c0;
font: italic 9px "Times" !important;
color: #414141 !important;
letter-spacing: 1.5px;
text-align: left;
}
div.ContextualPopup .Userpic {
margin-left: 12px;
padding: 8px;
background: transparent;
border: 1px solid;
border-color: #9bd6d0 #82B3AE #82B3AE #90c6c0;
}
div.ContextualPopup .Content {
padding: 5px;
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color: #414141 !important;
text-decoration: none !important;
}
div.ContextualPopup div.Inner a:hover {
color: #f3f3f3 !important;
text-decoration: none !important;
}

/* - - Navigation Strip - - */

#lj_controlstrip {
width: 100%;
background: #90c6c0 url();
}
#lj_controlstrip td {
max-width:800px;
border: none;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
}
#lj_controlstrip a {
color: #f3f3f3;
}
#lj_controlstrip a:hover {
font-style: italic;
color: #414141;
text-decoration: none;
}
#lj_controlstrip_statustext {
font: small-caps 12px 'Arial Black', Gadget, sans-serif;
color: #f7f7f7;
}
#lj_controlstrip input {
padding: 2px;
background: #90c6c0;
border: 1px solid;
border-color: #9bd6d0 #82B3AE #82B3AE #9bd6d0;
color: #f3f3f3;

}
#lj_controlstrip_search_input_text, #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember {
background-color: #f7f7f7 !important;
color: #cccccc !important;
}

/* - - Tiny Icons (Pinvoke) - - */

.subject img {
vertical-align: middle !important;
}
img[src*="icon_protected.gif"]{
width: 0;
height: 0;
padding: 0px 0px 28px 24px !important;
background: transparent url(http://i50.tinypic.com/1t8n7s.jpg) no-repeat scroll 0 0;
}
img[src*="icon_private.gif"]{
width: 0;
height: 0;
padding: 0px 0px 28px 24px !important;
background: transparent url(http://i45.tinypic.com/2cxjiw5.jpg) no-repeat scroll 0 0;
}
img[src*="icon_groups.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 28px 24px !important;
background: transparent url(http://i46.tinypic.com/2vu0hud.jpg) no-repeat scroll 0 0;
}

.ljuser img {
width: 0;
height: 0;
vertical-align: baseline !important;
padding: 14px 18px 0 0px !important;
background: transparent url(http://i46.tinypic.com/24zyi6u.jpg) no-repeat scroll 0 0;
}
.ljuser img[src*="userinfo.gif"] {
padding: 14px 18px 0 0px !important;
background: transparent url(http://i46.tinypic.com/24zyi6u.jpg) no-repeat scroll 0 0 !important;
}
.ljuser img[src*="community.gif"] {
width: 0;
height: 0;
padding: 16px 17px 0 0px !important;
background: transparent url(http://i30.tinypic.com/2q0vi1u.jpg) no-repeat scroll 0 0 !important;
}

.ljuser img[src*="syndicated.gif"] {
width: 0;
height: 0;
padding: 16px 16px 0 2px !important;
background: transparent url(http://i28.tinypic.com/sbsio4.jpg) no-repeat scroll 0 0 !important;
}
.ljuser img[src*="newsinfo.gif"] {
width: 0;
height: 0;
padding: 16px 16px 0 2px !important;
background: transparent url(http://i28.tinypic.com/24pi5ms.jpg) no-repeat scroll 0 0 !important;
}
.ljuser img[src*="partnercomm.gif"] {
width: 0;
height: 0;
padding: 16px 16px 0 0px !important;
background: transparent url(http://i47.tinypic.com/2nqz794.jpg) no-repeat scroll 0 0 !important;
}
.ljuser img[src*="sponcomm.gif"] {
width: 0;
height: 0;
padding: 16px 16px 0px 2px !important;
background: transparent url(http://i46.tinypic.com/2aagf2v.jpg) no-repeat scroll 0 0 !important;
}

img[src*="btn_edit.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i47.tinypic.com/157dr37.jpg) no-repeat scroll 0 0; }
img[src*="btn_del.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i48.tinypic.com/x22gwh.jpg) no-repeat scroll 0 0;
}
img[src*="btn_scr.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i48.tinypic.com/14alobr.jpg) no-repeat scroll 0 0;
}
img[src*="btn_unscr.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i45.tinypic.com/35d6vs8.jpg) no-repeat scroll 0 0;
}
img[src*="btn_freeze.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i45.tinypic.com/eg2rsy.jpg) no-repeat scroll 0 0;
}
img[src*="btn_unfreeze.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i47.tinypic.com/4hbbr5.jpg) no-repeat scroll 0 0;
}
img[src*="btn_track.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i49.tinypic.com/10d84s5.jpg) no-repeat scroll 0 0;
}
img[src*="btn_tracking.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i47.tinypic.com/10qca68.jpg) no-repeat scroll 0 0;
}
img[src*="btn_tracking_thread.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i47.tinypic.com/10qca68.jpg) no-repeat scroll 0 0;
}
img[src*="anonymous.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i48.tinypic.com/148qijp.jpg) no-repeat scroll 0 0;
}
img[src*="openid-profile.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i48.tinypic.com/xqckdz.jpg) no-repeat scroll 0 0;
}
img[src*="userinfo.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i49.tinypic.com/2u6z29h.jpg) no-repeat scroll 0 0;
}
img[src*="talk/none.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i49.tinypic.com/91jhpv.jpg) no-repeat scroll 0 0;
}
img[src*="help.gif"] {
width: 0px;
height: 0px;
padding: 0px 0px 15px 16px !important;
background: url(http://i45.tinypic.com/xdbm29.jpg) no-repeat scroll 0 0;
}

some notes
Comments are nice but not necessary.
Please credit either recolte or piquing_tom.
If you have any trouble with the layout, please feel free to leave a comment or PM me.

★ layouts

Previous post Next post
Up