graphic goodies and such

S2 Flexible Squares: Love Lines

Tue, 13 Feb 2007 03:08:43 GMT

Inspired by upcoming Valentine's Day! A revised, better (in my opinion) version of my first layout here, Leftover. Because layouts these days all look the same, I thought I'd stick with this style. So enjoy! I like feedback! ;)

Live preview: rushedtogether

Instructions:

1. Customize > Make sure it is set to S2.
2. Look and Feel tab > Select "Flexible Squares" from drop-down menu.
3. Custom Options tab > Custom CSS > All drop-down menus set to No.
4. Copy & Paste stylesheet:

CSS Stylesheet:

body {
        background-color: #F8F8F8;
        background-image: url(http://img440.imageshack.us/img440/2767/bgru9.png);
        text-align: center;
        color: #999;
        font-family: "Arial";
        font-size: 11px;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-right: auto;
        margin-left: 0px;
        }

a, a:link, a:visited {
        color: #FC5E83;
        text-decoration: none;
        cursor: default;
        }

a:hover {
        color: #CCC;
        text-decoration: none;
        cursor: default;
        }

p, td {
       font-size: 11px;
        }

blockquote {
       font-size: 11px;
       margin-left: 25px;
       margin-right: 15px;
       padding: 10px;
       color: #999;
       border: 0px solid #999;
        }

code, kbd, pre, tt {
            font-family: monospace;
        }

#content  {
        width: 750px;
        background-color: #FFF;
        border-left: 210px solid #333;
        padding-right: 15px;
       }

#maincontent {
        width:  615px;
        font-family: "Arial";
        font-size: 11px;
        background-color: #FFF;
        color: #999;
        text-align: left;
        }

#sidebar {
        background-color: #FFF;
        font-size: 11px;
        font-family: "Arial";
        color: #999;
        text-align: left;
        float: right;
        margin-left: 15px;
        padding-top: 10px;
        width: 150px;
        }

#header {
        display: none;
        padding: 5px;
        text-align: left;
        font-family: "Arial";
        font-size: 11px;
        list-style: none;
        background-color: #FFF;
        color: #FFF;
        }

#footer {
        text-align: center;
        font-family: "Arial";
        font-size: 11px;
        background-color: #FFF;
        color: #999;
        z-index: 100;
        clear: both;
        }

/* header -- links to views; title of journal; subtitle of journal */

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
        padding-left: 3px;
        color: #FC5E83;
    }

div#header a:hover, div#footer a:hover {
        padding-left: 3px;
        color: #CCC;
        text-decoration: none;
    }

li.view
        {
         list-style: none;
         }

ul.navheader
        {
        padding: 0px;
        margin: 0px;
        }

ul.navheader li  {
        padding: 0 3px 0 3px;
        }

.title    {
        display: none;
        }

.subtitle{
        display: none;
        }

/* sidebar */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
	color: #FC5E83;
	line-height: 26px;
	border-bottom: 1px solid #E7E7E7;
	padding-bottom: 4px;
	display: block;
    }

div#sidebar a:hover {
	color: #CCC;
	text-decoration: none;
	line-height: 26px;
	border-bottom: 1px solid #E7E7E7;
	padding-bottom: 4px;
	display: block;
    }

.defaultuserpic {
        }

.sbarheader {
	padding: 0px 5px 0px 5px;
        }

.sbarbody {
            text-align: center;
	padding-top: 5px;
        }

.sbarbody2 {
	padding: 0px;
    }

#sidebar_summary li.sbaritem {
	display: none;
    }

table.calendar {
	margin-right: auto;
	margin-left: auto;
        }

.sbarcalendar {
	border-color: #999;
	border: 1px solid #999;
	text-align: center;
	font-family: Arial;
	font-size: 11px;
        }

.sbarcalendarposts {
	border-color: #999;
	border: 1px solid #999;
	text-align: center;
	font-family: Arial;
	font-size: 11px;
        }

ul.sbarlist
    {
	margin: 0px;
	padding: 0px;
	text-align: left;
	list-style: none;
    }

li.sbaritem, .tagcloud
    {
	list-style: none;
    }

li.sbartitle
    {
	display: none;
	text-align: left;
	list-style: none;
	border: 0px;
	background-color: transparent;
    }

/* maincontent */

.subcontent {
       padding-top: 15px;
       margin-right: 20px;
    }

.entry    {
        padding: 15px;
        background-color: #FFF;
        color: #999;
        font-family: "Arial";
        font-size: 11px;
        text-align: justify;
        line-height: 15px;
        }

.userpic {
        display: none;
        position: relative;
        float: left;
        background-color: #FFF;
        padding: 5px;
        z-index: 15;
        }

.userpicfriends {
        position: relative;
        float: right;
        padding: 3px;
        border: 1px solid #EEE;
        margin: 10px;
        text-align: center;
        font-family: "Arial";
        font-size: 11px;
        z-index: 15;
        }

.userpicfriends font {
        color: #999;
        }

.date {
        display: inline;
        color: #CCC;
        font-family: "Arial";
        font-size: 11px;
        text-transform: lowercase;
        }

.subject {
        color: #FC5E83;
        font-size: 16px;
        text-transform: lowercase;
        font-family: Trebuchet Ms;
        }

.subject a, .subject a:link, .subject a:visited {
        color: #ffffff;
        }

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

.datesubject {
        padding-left: 10px;
        background-color: #FFF;
        }

.currents, .currentmood, .currentmusic {
        font-family: "Arial";
        font-size: 11px;
        text-transform: lowercase;
        }

.comments {
        font-family: "Arial";
        font-size: 11px;
        text-align: center;
        background-color: #FFF;
        position: relative;
        margin-top: 10px;
        text-align: left;
        color: #FFF;
        }

div.comments a, div.comments a:link, div.comments a:visited{
        color: #FC5E83;
    }

div.comments a:hover {
        color: #CCC;
        text-decoration: none;
        text-transform: 
    }

.ljtags {
        padding-top: 10px;
        text-transform: lowercase;
    }

/* maincontent --  entry, reply pages */

.datesubjectcomment {
            background-color: #FFF;
            padding: 5px;
            }

.userpiccomment {
        position: relative;
        border-width: 5px;
        border-style: solid;
        border-color: #999;
        background-color: #FFF;
        top: -30px;
        left: 0px;
        padding: 5px;
        margin: 10px 10px -20px 10px;
        z-index: 15;
        float: left;
        }

.box {
        border-style: solid;
        border-width: 1px 0px 0px 0px;
        border-color: #999999;
        padding: 10px;
        clear: left;
        }

input, textarea {
        background-color: #FFF;
        color: #999;
        }

textarea.textbox  {
          width: 95% !important;
           }

.reply    {
        position: relative;
        margin: 20px 30px 10px 30px;
        padding: 25px 10px 10px 10px;
        text-align: left;
        font-family: "Arial";
        font-size: 11px;
        line-height: 125%;
        background-color: #FFF;
        color: #999;
        }

.replytosubject {
        font-weight: bold;
        }

.commentreply {
        position: relative;
        margin: 10px;
        font-size: 11px;
        font-family: "Arial";
        color: #999;
        }

.commentbox {

border-color: #999999;
        border-width: 1px;
        border-style: solid;
        padding: 10px;
        margin: 10px;
        background-color: #FFF;
        }

.datesubjectcomment a:link, .datesubjectcomment a:visited {
        color: #ffffff;
        }

.datesubjectcomment a:hover {
        color: #CCC;
        }

.commentboxpartial {
        border-color: #999999;
        border-width: 1px;
        border-style: solid;
        padding: 10px;
        margin: 10px;
        background-color: #FFF;
        }

.commentinfo {
        background-color: #FFF;
        margin-top: 10px;
        width: 100%;
        }

/* maincontent -- year/achive pages */

ul.year {
        text-align: center;
        padding-bottom: 40px;
        }

ul.year li {
        display: inline;
        }

table.yeartable {
        margin-left: auto;
        margin-right: auto;
        }

table.yeartable td.yeardate, table.yeartable td.yearday {
        border-width: 1px;
        border-style: solid;
        border-color: #999999;
        }

table.yeartable td.yearday {
        background-color: #FFF;
        text-align: center;
        }

td.yearmonth {
        border-style: none;
        }

/* footer */

ul.navfooter{
        padding: 0px;
        margin: 0px;
        }

ul.navfooter li  {
        display: inline;
        margin: 0 5px 0 5px;
        }

.clearfoot {
        clear: both;
        }

/* replaces default lj images */
    /* code generated thanks to tinyicon gen @ http://rhaxma.com/tinyicongen */

.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
		width: 0;
		height: 0;
		padding: 10px 8px 0px 0px;
		background: url(http://img135.imageshack.us/img135/6374/lockgq5em7.gif);
		}

.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
		width: 0;
		height: 0;
		padding: 10px 8px 0px 0px;
		background: url(http://img135.imageshack.us/img135/6374/lockgq5em7.gif);
		}

.ljuser img { 
  		width: 0;
  		height: 0;
  		background-repeat: no-repeat;
  		background-color:transparent;
  		/* so that IE users will still see an image */
  		background-image: url(http://img402.imageshack.us/img402/2092/usergrey2byexcentricxm6.gif); 
  		padding: 8px 6px 0 2px;
		}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
		background-color:transparent;
  		background-image: url(http://img402.imageshack.us/img402/2092/usergrey2byexcentricxm6.gif);
  		padding: 8px 6px 0 2px;
		}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
		background-color:transparent;
 		background-image: url(http://img402.imageshack.us/img402/2092/usergrey2byexcentricxm6.gif);
 		padding: 8px 6px 0 2px;
		}

/* misc  */

.clear {
        height: 5px;
        }

.skiplinks {
        text-align: center;
        }

.headerimage {
        /* for formatting header image */
        }

.separator{
        /* for formatting separators between entries */
        height: 19px;
    }

5. PLEASE REMEMBER TO CREDIT heyromance IN YOUR USERINFO!

6. COMMENT if you are using or saving! I love feedback!

LOOKS BEST WITH:
- No userpics in entries
- No calendar in sidebar
- 1024x768 (preferably higher) resolution
- Better for personal journals

CAN I EDIT THE COLORS/HEADER?
Customize the colors however you'd like. Try and fiddle with a header if you really want, but looks best without one!

PROBLEMS?
If you experience any problems, please let me know. I'll try and help you out.

Let me know how you like it, I'd love to see how some of you use it!

ADD the journal, don't join! ♥
Resources: Adobe Photoshop CS2, Tinyicon Gen, Mini Icons S3, Background by me

S2 Flexible Squares: Leftover

Sat, 10 Feb 2007 01:56:56 GMT

Moved here from dummytext. Hopefully there will be more updates here!
Here's a layout to start off. Thought I'd share something different form the regular centered ones.

Live preview: monospaces

Instructions:

1. Customize > Make sure it is set to S2.
2. Look and Feel tab > Select "Flexible Squares" from drop-down menu.
3. Custom Options tab > Custom CSS > All drop-down menus set to No.
4. Copy & Paste stylesheet:

CSS Stylesheet:

body {
        background-color: #FFF;
        text-align: center;
        color: #999;
        font-family: "Arial";
        font-size: 10px;
        margin: 100px auto 20px;
        }

a, a:link, a:visited {
        color: #AFD38A;
        text-decoration: none;
        }

a:hover {
        color: #CCC;
        text-decoration: none;
        }

p, td {
       font-size: 10px;
        }

blockquote {
       font-size: 10px;
       margin-left: 25px;
       margin-right: 15px;
       padding: 10px;
       color: #999;
       border: 0px solid #999;
        }

code, kbd, pre, tt {
            font-family: monospace;
        }

#content  {
        width: 600px;
        background-color: #FFF;
        border-left: 150px solid #AFD38A;
       }

#maincontent {
        width:  500px;
        font-family: "Arial";
        font-size: 10px;
        background-color: #FFF;
        color: #999;
        text-align: left;
        }

#sidebar {
        background-color: #FFF;
        font-size: 10px;
        font-family: "Arial";
        color: #999;
        text-align: left;
        float: right;
        margin-top: 20px;
        }

#header {
        display: none;
        padding: 5px;
        text-align: left;
        font-family: "Arial";
        font-size: 10px;
        list-style: none;
        background-color: #FFF;
        color: #FFF;
        }

#footer {
        text-align: center;
        font-family: "Arial";
        font-size: 10px;
        background-color: #FFF;
        color: #999;
        z-index: 100;
        clear: both;
        }

/* header -- links to views; title of journal; subtitle of journal */

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
        padding-left: 3px;
        color: #FFF;
    }

div#header a:hover, div#footer a:hover {
        padding-left: 3px;
        color: #FFF;
        text-decoration: none;
    }

li.view
        {
         list-style: none;
         }

ul.navheader
        {
        padding: 0px;
        margin: 0px;
        }

ul.navheader li  {
        padding: 0 3px 0 3px;
        }

.title    {
        display: none;
        }

.subtitle{
        display: none;
        }

/* sidebar */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
        color: #AFD38A;
    }

div#sidebar a:hover {
	color: #CCC;
	text-decoration: none;
    }

.defaultuserpic {
	display: none;
        }

.sbarheader {
	padding: 0px 5px 0px 5px;
        }

.sbarbody {
            text-align: center;
	padding-top: 10px;
        }

.sbarbody2 {
	padding: 0px;
    }

#sidebar_summary li.sbaritem {
	display: none;
    }

table.calendar {
	margin-right: auto;
	margin-left: auto;
        }

.sbarcalendar {
	border-color: #999;
	border: 1px solid #999;
	text-align: center;
	font-family: Arial;
	font-size: 10px;
        }

.sbarcalendarposts {
	border-color: #999;
	border: 1px solid #999;
	text-align: center;
	font-family: Arial;
	font-size: 10px;
        }

ul.sbarlist
    {
	text-align: left;
	padding-left: 0px;
	margin-left: 0px;
	list-style: none;
    }

li.sbaritem, .tagcloud
    {
	padding-left: 15px;
	list-style: none;
    }

li.sbartitle
    {
	font-weight: bold;
	padding-left: 10px;
	list-style: none;
	border: 0px;
	background-color: transparent;
    }

/* maincontent */

.subcontent {
       margin-right: 25px;
    }

.entry    {
        padding: 15px;
        background-color: #FFF;
        color: #999;
        font-family: "Arial";
        font-size: 10px;
        text-align: justify;
        }

.userpic {
        display: none;
        position: relative;
        float: left;
        background-color: #FFF;
        padding: 5px;
        z-index: 15;
        }

.userpicfriends {
        position: relative;
        float: right;
        padding: 5px;
        margin: 10px;
        text-align: center;
        font-family: "Arial";
        font-size: 10px;
        z-index: 15;
        }

.userpicfriends font {
        color: #999;
        }

.date {
        display: inline;
        color: #999;
        font-family: "Arial";
        font-size: 10px;
        }

.subject {
        color: #AFD38A;
        font-size: 10px;
        text-tranform: lowercase;
        font-weight: bold;
        }

.subject a, .subject a:link, .subject a:visited {
        color: #ffffff;
        }

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

.datesubject {
        padding-left: 10px;
        background-color: #FFF;
        }

.currents, .currentmood, .currentmusic {
        font-family: "Arial";
        font-size: 10px;
        text-transform: lowercase;
        }

.comments {
        font-family: "Arial";
        font-size: 10px;
        text-align: center;
        background-color: #FFF;
        position: relative;
        margin-top: 10px;
        text-align: left;
        color: #FFF;
        }

div.comments a, div.comments a:link, div.comments a:visited{
        color: #AFD38A;
    }

div.comments a:hover {
        color: #CCC;
        text-decoration: none;
        text-transform: 
    }

.ljtags {
        padding-top: 10px;
        text-transform: lowrcase;
    }

/* maincontent --  entry, reply pages */

.datesubjectcomment {
            background-color: #FFF;
            padding: 5px;
            }

.box {
        border-style: solid;
        border-width: 1px 0px 0px 0px;
        border-color: #999999;
        padding: 10px;
        clear: left;
        }

input, textarea {
        background-color: #FFF;
        color: #999;
        }

textarea.textbox  {
          width: 95% !important;
           }

.reply    {
        position: relative;
        margin: 20px 30px 10px 30px;
        padding: 25px 10px 10px 10px;
        text-align: left;
        font-family: "Arial";
        font-size: 10px;
        line-height: 125%;
        background-color: #FFF;
        color: #999;
        }

.replytosubject {
        font-weight: bold;
        }

.commentreply {
        position: relative;
        margin: 10px;
        font-size: 10px;
        font-family: "Arial";
        color: #999;
        }

.commentbox {

border-color: #999999;
        border-width: 1px;
        border-style: solid;
        padding: 10px;
        margin: 10px;
        background-color: #FFF;
        }

.datesubjectcomment a:link, .datesubjectcomment a:visited {
        color: #ffffff;
        }

.datesubjectcomment a:hover {
        color: #CCC;
        }

.commentboxpartial {
        border-color: #999999;
        border-width: 1px;
        border-style: solid;
        padding: 10px;
        margin: 10px;
        background-color: #FFF;
        }

.commentinfo {
        background-color: #FFF;
        margin-top: 10px;
        width: 100%;
        }

/* maincontent -- year/achive pages */

ul.year {
        text-align: center;
        padding-bottom: 40px;
        }

ul.year li {
        display: inline;
        }

table.yeartable {
        margin-left: auto;
        margin-right: auto;
        }

table.yeartable td.yeardate, table.yeartable td.yearday {
        border-width: 1px;
        border-style: solid;
        border-color: #999999;
        }

table.yeartable td.yearday {
        background-color: #FFF;
        text-align: center;
        }

td.yearmonth {
        border-style: none;
        }

/* footer */

ul.navfooter{
        padding: 0px;
        margin: 0px;
        }

ul.navfooter li  {
        display: inline;
        margin: 0 5px 0 5px;
        }

.clearfoot {
        clear: both;
        }

/* replaces default lj images */
    /* code generated thanks to tinyicon gen @ http://rhaxma.com/tinyicongen */

.ljuser img { 
  		width: 0;
  		height: 0;
  		background-repeat: no-repeat;
  		background-color:transparent;
  		/* so that IE users will still see an image */
  		background-image: url(http://img124.imageshack.us/img124/5007/userbyexcentricxq3.gif); 
  		padding: 8px 6px 0 2px;
		}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
		background-color:transparent;
  		background-image: url(http://img124.imageshack.us/img124/5007/userbyexcentricxq3.gif);
  		padding: 10px 6px 0 2px;
		}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
		background-color:transparent;
 		background-image: url(http://img124.imageshack.us/img124/5007/userbyexcentricxq3.gif);
 		padding: 9px 6px 0 2px;
		}

/* misc  */

.clear {
        height: 5px;
        }

.skiplinks {
        text-align: center;
        }

.headerimage {
        /* for formatting header image */
        }

.separator{
        /* for formatting separators between entries */
        height: 25px;
    }

5. Please CREDIT heyromance in your userinfo! Thanks!

6. COMMENT if you are using or saving! I love feedback!

SOME NOTES:
- Personally, I think it's best without userpics in the entries
- Better for personal journals, rather than communities

CAN I ADD A HEADER/CHANGE COLORS?
Sure you can, as long as you credit me. And in my opinion this layout looks best header-less ;)

PROBLEMS?
If you experience any problems, please let me know. I'll try and help you out.

Let me know how you like it, I'd love to see how some of you use it!

ADD the journal, don't join! ♥
Resources: Adobe Photoshop CS2, Tinyicon Gen, Mini Icons S3

hello world

Sat, 10 Feb 2007 01:09:51 GMT

This is my little place for layouts and other miscellaneous goods.

Comment if you take. I like feedback.
Credit in your userinfo.
~~Claim as your own work.~~

Hope you like it here. Add this journal for future updates!