InsaneJournal

Tweak says, "My god, I'm gorgeous!"

Suzaku Kururugi (

black_as_knight) wrote in

marina_ooc,
@ 2009-07-23 11:22:00

Customizable Layouts
ETA on April 5, 2011: Hey, people. :D FYI, I am still totally available to answer any layout questions you might have! I've edited the code provided below to try and help people avoid a mistake that seemed very common, sob, and also just for consistency because some of my font sizes were in pixels before. >>

These layouts will look best with at least one image, provided by you! First, a header graphic -- and second, optionally, a tiling background image (this is a fantastic resource).

1. Go here, and set your Style System to S2.
2. Under Layout & Language, choose "Complete Style" from the dropdown menu. Leave your Theme as "(Default Layout)".
3. Then...

Bordered

One Column | Header Image-Compatible | Title/Subtitle Compatible
[ LIVE ]

First, set your layout to One Column. Then...

1. Set "Show Day Header" to No.
2. Set all Text items appropriately.
3. Make a header image! Figure out its width and height. (Be sure to also make or find a tiling background image.)
4. Choose a color scheme (or make up your own).
5. Open up any text editor (Notepad, Word, etc) and do a Find and Replace to change the colors and heights/widths appropriately.
6. Paste everything into your Custom Stylesheet box!
7. Admire the end result, and tweak it however you like.

If you have any questions or problems (or you have a paid account and want a custom comment page!), just let me know and I'll see what I can do for you. :D

* {
font-family: "lucida sans", "lucida grande", sans-serif;
}

a:link, a:visited {
color: #HIGHLIGHT !important;
}

a:hover, a:active {
color: #LOWLIGHT !important;
}

html, body {
height: 100%;
}

body {
background: #FORECOLOR url(URL_OF_BG_IMAGE) fixed;
color: #FORECOLOR;
margin: 0;
padding: 0;
}

#container {
background-color: #FORECOLOR;
min-height: 100%;
width: LAYOUTWIDTHpx;
margin: 0 auto;
padding: 8px 0 5px 0;
border-left: 15px solid #BACKCOLOR;
border-right: 15px solid #BACKCOLOR;
}

#container-inner {
border-left: 15px solid #FORECOLOR;
border-right: 15px solid #FORECOLOR;
}

#header {
background: transparent url(URL_OF_HEADER_IMG) no-repeat bottom;
height: (HEADERHEIGHT+35)px;
margin: 0 0 15px 0;
padding: 0;
}

#header-text {
background: transparent;
border-style: none;
}

#header-text h1, #header-text p {
margin: 0;
text-shadow: rgba(0,0,0,1) 1px 1px 5px, rgba(0,0,0,.5) -1px -1px 5px,
rgba(0,0,0,.5) 1px 1px 0, rgba(0,0,0,.5) -1px -1px 0;
}

#header-text h1 {
opacity: 0.8;
letter-spacing: 2px;
text-align: left;
}

#header-text p {
opacity: 0.7;
font-weight: bold;
font-style: italic;
}

#nav-above {
background-color: #BACKCOLOR;
font-size: 8pt;
height: 17px;
margin: 0;
padding: 3px 0 0 0;
text-align: center;
}

#nav-above li {
padding: 0 10px 0 0;
border: 0;
}

#nav-above li:last-child {
padding: 0;
}

#alpha {
background: none;
min-height: 100%;
margin: 0 !important;
padding: 0;
border: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
}

.content-nav {
font-size: 7.5pt;
margin: -10px 0 0 0;
padding: 0;
}

.nav-bottom {
margin-bottom: -10px;
}

.date-header {
display: none;
}

.entry {
background-color: #BACKCOLOR;
margin: 0;
padding: 0;
}

.entry-inner {
margin: 0 10px;
padding: 0;
}

.entry-header {
background: none;
padding: 0 10px 0 0;
border: 0;
}

.entry-header h3 a {
font-family: "century gothic", sans-serif;
font-size: 20pt;
font-weight: normal;
}

.entry-datetime {
color: #HIGHLIGHT;
font-size: 6.5pt;
padding-top: 5px;
border-top: 2px solid #FORECOLOR;
}

.inner-entry-userpic {
margin: 0 0 0 5px;
padding: 0;
}

.entry-text {
font-size: 8pt;
min-height: 10px;
margin: 0;
text-align: justify;
overflow: hidden;
}

.entry-text .ljtags, .entry-metadata * {
font-size: 6.5pt;
}

.entry-metadata div div strong {
font-weight: normal;
text-transform: capitalize;
}

.entry-linkbar {
margin-top: 5px;
border-top: 2px solid #FORECOLOR;
}

.entry-linkbar ul {
margin: 0;
padding: 0;
text-align: center;
}

.entry-linkbar ul li {
border: 0;
margin: 0;
padding: 0 20px 0 0;
}

.entry-linkbar ul li a {
font-family: "century gothic", sans-serif;
font-size: 15pt;
margin: 0;
padding: 0;
}

.entry-footer {
height: 10px;
margin: 0 0 15px 0;
padding: 0;
}

.entry:last-child .entry-footer {
margin: 0;
}

.yeartable, .yeartable td {
border: 0;
}

.yeartable td {
font-size: 8pt;
height: 10px;
}

.yeartable .monthlable, .yeartable .viewmonth a {
font-size: 10pt;
font-family: "century gothic", sans-serif;
}

.yeartable .dayname {
font-size: 9pt;
}

dl dt a {
font-size: 10pt;
font-family: "century gothic", sans-serif;
}

dl dd {
font-size: 8pt;
}

.lj-view-tags #alpha {
margin: 0 !important;
}

.lj-view-tags h2 {
font-size: 20pt;
font-family: "century gothic", sans-serif;
font-weight: normal;
margin: -20px 0 0 -15px;
}

.lj-view-tags .ljtaglist {
font-size: 8pt;
font-weight: normal;
margin-left: 15px;
padding-left: 0;
}

And here's the run-down on customizing:

#HIGHLIGHT: the green on Suzaku's layout (links and entry-date)

#LOWLIGHT: the "hover" color of links on Suzaku's layout

#FORECOLOR: the white on Suzaku's layout

#BACKCOLOR: the black on Suzaku's layout

LAYOUTWIDTH: a number representing the width of Suzaku's layout in pixels

URL_OF_BG_IMAGE: the background of Suzaku's layout

URL_OF_HEADER_IMG: the header image of Suzaku's layout

(HEADERHEIGHT+35): take the height of your image, add 35 pixels for spacing, and remove the ()'s

#header-text: do you want to move this around on your image? apply margins! "margin-top: 50px; margin-left: 200px;" (without quotes) will move the text down 50 pixels and left 200 pixels; play around, have fun!

If you don't want the subtitle / title of your journal to be visible, find this code:

#header-text {
background: transparent;
border-style: none;
}

#header-text h1, #header-text p {
margin: 0;
text-shadow: rgba(0,0,0,1) 1px 1px 5px, rgba(0,0,0,.5) -1px -1px 5px,
rgba(0,0,0,.5) 1px 1px 0, rgba(0,0,0,.5) -1px -1px 0;
}

#header-text h1 {
opacity: 0.8;
letter-spacing: 2px;
text-align: left;
}

#header-text p {
opacity: 0.7;
font-weight: bold;
font-style: italic;
}

and replace THE WHOLE THING with this:

#header-text {
display: none;
}

Frog Green

Wine Red

Sailing

Ultraviolet

On Fire

And...!

Boxy Revisited

* {
font-family: verdana;
}

a:link, a:visited {
color: #HIGHLIGHT !important;
}

a:active, a:hover {
color: #LOWLIGHT !important;
}

body {
background: #BGCOLOR;
color: #FORECOLOR;
}

#container {
background: none;
width: LAYOUTWIDTHpx;
margin: auto;
}

#header {
margin-bottom: 5px;
padding: 10px 0 0 0;
}

#header-text {
background: none;
margin: 0;
padding: 0;
border: 0;
}

#header-text h1 {
margin: 0;
}

#header-text p {
color: #FORECOLOR;
font-style: italic;
margin: 0 0 10px 0;
text-indent: 60px;
}

#nav-above {
display: none;
}

#nav-below {
display: inline;
font-size: 8pt;
font-style: italic;
margin: 0;
text-align: left;
}

#nav-below li {
border: 0;
}

#alpha {
background: none;
width: 73%;
height: auto !important;
margin: 0 3% !important;
padding: 0;
border: 0;
float: left;
}

#beta {
width: 21% !important;
float: left;
}

.module {
background: none;
color: #FORECOLOR;
font-size: 8pt;
margin: 0 auto;
padding: 0;
border: 0;
}

.module-about .module-header, .module-about .journalname, .module-about .username, .module-syndicate, .module-powered {
display: none;
}

.module-header {
background: #ACCENTCOLOR;
border: 0;
text-align: center;
}

.module-header h3 {
color: #BACKCOLOR;
font-style: italic;
font-weight: normal;
}

.module-about .module-content {
padding: 0;
}

.module-about .module-header, .module-about .journalname, .module-about .username {
display: none;
}

.module-about .module-content {
padding: 0;
}

.module-about .userpic {
background: none;
max-width: 100px;
max-height: 100px;
border: 10px solid #ACCENTCOLOR;
}

.module-about .userpic img {
width: 100%;
height: 100%;
}

.module-categories .all-link {
text-align: center;
}

.module-calendar table {
margin-top: 7px;
}

.module-calendar th {
color: #777;
}

.content-nav {
font-size: 7pt;
text-transform: uppercase;
}

.content-nav a {
border: 0;
}

.date-header {
margin: 0;
}

.date-header h2 {
font-size: 12pt;
font-weight: normal;
font-style: italic;
text-align: right;
}

.entry {
background-color: #BACKCOLOR;
margin: 10px 0 0 0;
padding: 0;
border: 1px solid #ACCENTCOLOR;
}

.entry-inner {
margin: 10px;
}

.entry-header {
background: none;
border: 0;
}

.entry-datetime {
color: #MINORACCENT;
font-size: 7.5pt;
font-style: italic;
text-align: right;
}

.inner-entry-userpic {
margin: 0 0 0 5px;
padding: 0;
border: 5px solid #ACCENTCOLOR;
}

.inner-entry-userpic > img {
width: 80px;
height: 80px;
margin: 0;
padding: 0;
}

.entry-text {
font-size: 8pt;
min-height: 10px;
margin: 0;
text-align: justify;
overflow: hidden;
}

.ljtags, .entry-metadata * {
font-size: 7pt;
}

.entry-metadata div div strong {
font-weight: normal;
text-transform: capitalize;
}

.ljtags, .entry-metadata div div strong {
color: #MINORACCENT;
}

.entry-linkbar ul {
font-size: 7.5pt;
text-align: center;
}

.entry-linkbar ul li {
border: 0;
padding: 10px;
}

.yeartable, .yeartable td {
border: 0;
}

.yeartable td {
font-size: 8pt;
height: 10px;
}

.yeartable .monthlable, .yeartable .viewmonth {
font-size: 10pt;
}

.yeartable .monthlable {
font-style: italic;
}

.yeartable .dayname {
font-size: 9pt;
}

Want to change your colors? Or add a header image? These are what the codes in your code mean:

#HIGHLIGHT: links

#LOWLIGHT: the "hover" color of links (and a color on your sidebar calendar you'll probably never see)

#BGCOLOR: the background color of the page

#ACCENTCOLOR: border around icons

#MINORACCENT: the color of the datetime and the metadata titles

#FORECOLOR: most of the text (entry, etc)

#BACKCOLOR: the background color of entries

LAYOUTWIDTH: a number representing the width of your layout in pixels

Optionally:
URL_OF_BG_IMAGE: the background image of your layout

URL_OF_HEADER_IMG: the header image of your layout

(HEADERHEIGHT+10): take the height of your image, add 10 pixels for spacing, and remove the ()'s

If you want a background image instead of a background color, find this line:

body {
background: #BGCOLOR;
color: #FORECOLOR;
}

And replace it with:

body {
background: #BGCOLOR url(URL_OF_BG_IMAGE) fixed;
color: #FORECOLOR;
}

(The image will cover up the color, but you'll probably see the color sometimes while the image loads, so make sure it coordinates to keep yourself from going briefly blind. ;)

If you want a header image, find this line:

#header {
margin-bottom: 5px;
padding: 10px 0 0 0;
}

#header-text {
background: none;
margin: 0;
padding: 0;
border: 0;
}

#header-text h1 {
margin: 0;
}

#header-text p {
color: #FORECOLOR;
font-style: italic;
margin: 0 0 10px 0;
text-indent: 60px;
}

And replace it (yes, ALL of it) with:

#header {
background: transparent url(URL_OF_HEADER_IMG) no-repeat top;
height: 30px;
margin: 10px 0 0 0;
padding: (HEADERHEIGHT+10)px 0 0 0;
}

#header-text {
display: none;
}

Unfortunately, due to the limitations of this layout, if you want to put a border around your image, you're going to have to do it yourself with a program like Photoshop.

Flowing Revisited

* {
font-family: arial;
}

a:link, a:visited {
color: #HIGHLIGHT !important;
}

a:active, a:hover {
color: #LOWLIGHT !important;
}

blockquote {
font-style: normal;
margin-top: 0;
padding: 10px;
border-top: 1px solid;
border-bottom: 1px solid;
}

body {
background: #BGCOLOR url(URL_OF_BG_IMAGE);
color: #FORECOLOR;
}

#container {
background: none;
width: LAYOUTWIDTHpx
margin: auto;
}

#header {
padding: 0;
}

#header-text {
background: none;
margin: 0;
padding: 0;
border: 0;
}

#header-text h1 {
font-weight: normal;
margin: 0;
}

#header-text h1 a, #header-text p {
font-family: "palatino linotype", "book antiqua", palatino, serif;
}

#header-text h1 a {
display: block;
letter-spacing: 2px;
}

#header-text h1 a::first-letter {
font-weight: bold;
color: #ACCENTCOLOR;
}

#header-text h1 a:active::first-letter, #header-text h1 a:hover::first-letter {
color: #HIGHLIGHT;
}

#header-text p {
color: #FORECOLOR;
margin: -2px 0 18px 0;
text-transform: lowercase;
text-indent: 60px;
}

#nav-above, #nav-below {
display: none;
}

#alpha {
background: none;
width: 54%;
height: auto !important;
margin: 0 0 0 23% !important;
padding: 0;
border: 0;
}

#beta, #gamma {
width: 20% !important;
}

#beta div, #gamma div {
margin: auto;
}

.module {
background: none;
color: #FORECOLOR;
font-size: 8pt;
margin: 0;
padding: 0;
border: 0;
}

.module-header, .module-about .journalname, .module-about .username, .module-syndicate, .module-powered {
display: none;
}

.module-categories .all-link {
text-align: center;
}

.module-about .module-content {
padding: 0;
}

.module-about .userpic {
background: #ACCENTCOLOR;
max-width: 100px;
max-height: 100px;
border: 15px solid #ACCENTCOLOR;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.module-about .userpic img {
width: 100%;
height: 100%;
}

.module-typelist .module-list {
margin: 0;
padding: 0;
}

.module-typelist .module-list li {
display: block;
background-color: #ACCENTCOLOR;
font-size: 7.5pt;
margin: 2px 0 0 0;
padding: 5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.module-typelist .module-list li a {
display: block;
letter-spacing: 2px;
}

.module-typelist .module-list li a::first-letter {
font-weight: bold;
color: #BACKCOLOR;
}

.module-typelist .module-list li a:active::first-letter, .module-typelist .module-list li a:hover::first-letter {
color: #HIGHLIGHT;
}

.module-calendar table {
margin-top: 7px;
}

.module-calendar th {
color: #LOWLIGHT;
}

.content-nav {
display: inline-block;
font-size: 7pt;
width: 50%;
height: 10px;
margin: 0 0 5px 0;
text-align: left;
vertical-align: bottom;
}

.date-header {
display: block;
height: 22px;
margin: 0 0 5px 0;
text-align: right;
vertical-align: bottom;
}

.content-nav + .date-header {
display: inline-block;
width: 45%;
}

.date-header h2 {
display: inline;
font-size: 12pt;
font-weight: normal;
font-family: "palatino linotype", "book antiqua", palatino, serif;
margin: 0;
text-align: right;
}

.entry {
background-color: #BACKCOLOR;
margin: 0 0 10px 0;
padding: 5px 0 5px 0;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}

.entry-inner {
margin: 0 10px 10px 10px;
}

.entry-header {
background: none;
border: 0;
}

.entry-header h3 a {
font-family: "palatino linotype", "book antiqua", palatino, serif;
}

.entry-datetime {
color: #MINORACCENT;
font-size: 6pt;
font-family: "palatino linotype", "book antiqua", palatino, serif;
margin: -10px auto auto 10px;
}

.inner-entry-userpic {
margin: 0 0 0 5px;
padding: 0;
}

.inner-entry-userpic > img {
width: 80px;
height: 80px;
margin: 0;
padding: 0;
}

.entry-text {
font-size: 8pt;
min-height: 10px;
margin: 0;
text-align: justify;
overflow: hidden;
}

.ljtags, .entry-metadata * {
font-size: 7pt;
}

.entry-metadata div div strong {
font-weight: normal;
text-transform: capitalize;
}

.ljtags, .entry-metadata div div strong {
color: #MINORACCENT;
}

.entry-linkbar ul {
font-size: 7.5pt;
text-align: center;
}

.entry-linkbar ul li {
border: 0;
padding: 10px;
}

.yeartable, .yeartable td {
border: 0;
}

.yeartable td {
font-size: 8pt;
height: 10px;
}

.yeartable .monthlable, .yeartable .viewmonth {
font-size: 10pt;
}

.yeartable .monthlable {
font-family: "palatino linotype", "book antiqua", palatino, serif;
}

.yeartable .dayname {
font-size: 9pt;
}

Want to change your colors? Or add a header image? These are what the codes in your code mean:

#HIGHLIGHT: links

#LOWLIGHT: the "hover" color of links (and a color on your sidebar calendar you'll probably never see)

#BGCOLOR: the background color of the page

#ACCENTCOLOR: border around icons

#MINORACCENT: the color of the datetime and the metadata titles

#FORECOLOR: most of the text (entry, etc)

#BACKCOLOR: the background color of entries

LAYOUTWIDTH: a number representing the width of your layout in pixels

URL_OF_BG_IMAGE: the background image of your layout

Optionally:
URL_OF_HEADER_IMG: the header image of your layout

HEADERWIDTH: a number representing the width of your header image in pixels

HEADERHEIGHT: a number representing the height of your header image in pixels

If you want a header image, find this line:

#header {
padding: 0;
}

#header-text {
background: none;
margin: 0;
padding: 0;
border: 0;
}

#header-text h1 {
font-weight: normal;
margin: 0;
}

#header-text h1 a, #header-text p {
font-family: "palatino linotype", "book antiqua", palatino, serif;
}

#header-text h1 a {
display: block;
letter-spacing: 2px;
}

#header-text h1 a::first-letter {
font-weight: bold;
color: #ccc;
}

#header-text h1 a:active::first-letter, #header-text h1 a:hover::first-letter {
color: #HIGHLIGHT;
}

#header-text p {
color: #FORECOLOR;
margin: -2px 0 18px 0;
text-transform: lowercase;
text-indent: 60px;
}

And replace it (yes, ALL of it) with:

#header {
background: transparent url(URL_OF_HEADER_IMG) no-repeat top;
width: HEADERWIDTHpx;
height: HEADERHEIGHTpx;
margin: 20px auto;
padding: 0;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}

#header-text {
display: none;
}

(Read comments)

InsaneJournal

Post a comment in response: