InsaneJournal

Tweak says, "The most famous shower scene"

Suzaku Kururugi (black_as_knight) wrote in marina_ooc,
@ 2009-07-23 11:22:00

Entry tags:

cool stuff, design and coding

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;
}

(Post a new comment)

	mrflowerpetals 2009-07-24 02:20 am UTC (link)
	Thanks so much, Li! ♥ This was an invaluable reference for me! I managed to turn THIS (the default Botanical theme) into THIS! \o/ I posted the CSS changes I made here in case anyone wants to use/look at them. :D (Reply to this)

	onelevelmeaner 2009-07-24 03:22 pm UTC (link)
	Thank you for this awesomeness. ♥ The layout I used for Hikaru at inksome wouldn't work here because it had special layers and stuff that IJ doesn't allow, and this bordered one is so close to it! So I be happy, YAY~ (Reply to this) (Thread)

	black_as_knight 2009-07-24 05:42 pm UTC (link)
	...I'm such a loser, do you mind if I try and make that exact layout work? It wouldn't have the "top of page" link at the bottom, and it'd have more links on the entries. But otherwise that looks totally feasible using Complete Style. (Reply to this) (Parent) (Thread)

	onelevelmeaner 2009-07-24 06:06 pm UTC (link)
	I don't mind. XD Original layout. And then the additional stuff x, x In case you need all that. ;O (Reply to this) (Parent) (Thread)

black_as_knight
2009-07-25 07:37 am UTC (link)

♥

?

As a purely random limitation, apparently Complete Style doesn't have a header on its link box. I'm mystified by that, since making it not display would be easy if you didn't want to. But because of that (and for example the fact that the date is in a completely separate div from the entry header), the layout isn't identical. Pretty close though, right?

I went ahead and made the outline on your "sidebar" area circle without breaking, but if you liked the way that looked, I can break it. (I also made it so that the lj user name actually shows up in blue, like other links in the entry.) Another thing I deliberately changed is that the "sidebar" doesn't overlap the subtitle and the title is all on one line; if you wanted those to do that, let me know.

Verdict.....? :D

(Reply to this) (Parent) (Thread)

	onelevelmeaner 2009-07-25 10:05 pm UTC (link)
	... You are amazing. That is so close to the original! (Reply to this) (Parent) (Thread)

1/3

black_as_knight
2009-07-25 10:36 pm UTC (link)

♥

The lack of link title is the only thing that really saddens me. But here's what I did:

1. Layout Type = Two Columns (Sidebar on Right)
2. Show Day Header = No
3. Title to use for custom text sidebar module = "Absolutely Zero"
4. Body of custom sidebar module = "So who am I to say this situation isn't great? It's my time to make the most of it. Of course I didn't know that it would happen to me."
6. Display of Tags in Sidebar = List
7. 1st-4th items in primary sidebar = Page Summary, Tags, Custom Text, Links
8. 5th-12th items = (none)

And then...

(Reply to this) (Parent)

This goes in the Custom CSS box (1/2, just paste them right on top of each other)

black_as_knight
2009-07-25 10:36 pm UTC (link)

* {
color: #333;
font-family: arial, sans-serif;
}

a {
font-weight: bold;
text-decoration: none !important;
}

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

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

html, body {
height: 100%;
}

body {
background: #95ccfb;
margin: 0;
padding: 0;
}

#container {
background: #fff;
min-height: 100%;
width: 654px;
margin: 0 auto;
padding: 20px 0 5px 0;
border-left: 20px solid #d4ddee;
border-right: 20px solid #d4ddee;
}

#container-inner {
background: transparent url(http://i43.tinypic.com/6jj404.png) no-repeat top;
padding-top: 265px;
margin: 0 5px;
}

#header {
height: 55px;
margin: 0;
padding: 0;
border: 0;
}

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

#header-text, #header-text h1 {
margin: 0;
}

#header-text h1 a {
color: #000 !important;
font-size: 20px;
font-family: "times new roman", times, serif;
text-transform: uppercase;
}

#header-text p {
color: #888;
font-size: 12px;
font-family: arial !important;
font-weight: bold;
letter-spacing: 2px;
}

#beta {
width: 642px !important;
height: 156px;
margin: 0 auto !important;
padding: 0;
border-top: 1px solid #d4ddee;
border-right: 1px solid #d4ddee;
border-bottom: 1px solid #d4ddee;
border-left: 1px solid #d4ddee;
float: none !important;
}

#beta-inner {
margin: 2px;
}

#beta .module {
background: none;
width: 152px;
height: 146px;
margin: 0;
border: 0;
border-left: 1px solid #d4ddee;
float: left;
}

#beta .module:first-child {
border: 0;
}

#beta .module-header {
background: none;
border: 0;
}

#beta .module-header h3 {
color: #000;
font-family: "times new roman", times, serif;
text-transform: uppercase;
line-height: 8px;
padding-bottom: 5px;
border-bottom: 1px solid #d4ddee;
text-align: center;
}

#beta .module-content {
color: #454545;
height: 132px;
overflow: auto;
text-align: center;
}

#beta ul {
margin: 2px 0 0 0 !important;
padding: 0 !important;
}

#beta li {
display: block !important;
}

#beta li a, #nav-below li a {
display: block;
font-size: 11px;
letter-spacing: .5px;
text-transform: uppercase;
border-bottom: 1px dotted #d4ddee;
}

#beta li a:active, #beta li a:hover, #nav-below li a:active, #nav-below li a:hover {
background-color: #d4ddee;
}

#beta .all-link {
display: none;
}

#nav-above {
display: none;
}

#nav-below {
display: block;
font-size: 11px;
position: absolute;
top: 532px;
width: 644px;
margin: 0;
padding: 8px 0;
text-align: center;
border-top: 1px solid #d4ddee;
border-bottom: 1px solid #d4ddee;
}

#nav-below li {
padding: 0;
border: 0;
}

#nav-below li a {
display: inline;
padding: 8px;
border: 0;
letter-spacing: 2px;
border-right: 1px solid #d4ddee;
}

#nav-below li.first a {
border-left: 1px solid #d4ddee;
}

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

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

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

.date-header {
display: none;
}

.entry {
background: none;
margin: 0;
padding: 0;
}

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

.entry-header {
background: none;
padding: 0;
border: 0;
border-top: 1px solid #d4ddee;
}

.entry-header h3 a {
color: #000 !important;
font-family: "times new roman", times, serif;
font-size: 14px;
text-transform: uppercase;
}

.entry-datetime {
color: #777;
font-size: 8px;
padding: 8px 0 0 0;
text-transform: uppercase;
border-top: 1px solid #d4ddee;
}

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

(Reply to this) (Parent)

3/3

black_as_knight
2009-07-25 10:37 pm UTC (link)

.entry-text {
font-size: 12px;
min-height: 10px;
margin: 0;
text-align: justify;
}

.entry-text a:link, .entry-text a:visited, .entry-text a b {
color: #4264f7 !important;
}

.entry-text a:hover, .entry-text a:active, .entry-text .lj-user a:hover, .entry-text .lj-user a:active, .entry-text a b:hover {
color: #505050 !important;
}

.entry-text .ljtags {
padding-top: 15px;
border-top: 1px dotted #d4ddee;
}

.entry-text .ljtags a:link, .entry-text .ljtags a:visited {
color: #888 !important;
border-top: 1px solid #d4ddee;
border-bottom: 1px solid #d4ddee;
padding: 1px 4px;
border-top: 1px solid #d4ddee;
border-bottom: 1px solid #d4ddee;
}

.entry-text .ljtags a:hover, .entry-text .ljtags a:active {
color: #505050 !important;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}

.entry-text .ljtags, .entry-metadata * {
font-size: 12px;
}

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

.entry-linkbar {
margin-top: 5px;
}

.entry-linkbar ul {
margin: 0;
padding: 5px 0;
border-top: 1px dotted #d4ddee;
border-bottom: 1px dotted #d4ddee;
text-align: center;
}

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

.entry-linkbar ul li a {
font-size: 12px;
padding: 5px;
text-transform: uppercase;
border-left: 1px dotted #d4ddee;
}

.entry-linkbar ul li a:hover, .entry-linkbar ul li a:active {
background-color: #d4ddee;
}

.entry-linkbar ul li.first-el a {
border: 0;
}

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

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

.yeartable {
border: 0 !important;
}

.yeartable, .yeartable td {
border: 1px solid #d4ddee !important;
}

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

.yeartable .monthlable, .yeartable .viewmonth a {
font-size: 13px;
font-family: "times new roman", times, serif;
}

.yeartable .dayname {
font-size: 12px;
}

dl dt a {
font-size: 13px;
font-family: "times new roman", times, serif;
}

dl dd {
font-size: 11px;
}

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

.lj-view-tags h2 {
font-size: 26px;
font-family: "times new roman", times, serif;
font-weight: normal;
margin: -20px 0 0 -15px;
}

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

(Reply to this) (Parent) (Thread)

	onelevelmeaner 2009-07-26 12:55 am UTC (link)
	I'll definitely give this a try. ^ (Reply to this) (Parent)

	trappedinresin 2009-07-27 06:08 am UTC (link)
	Thank you SO much for making everything so easy on us. It was really sweet and generous. Pretty layoutness without hardly any work. Lovely mods~ ♥ (Reply to this) (Thread)

	black_as_knight 2009-07-27 06:43 am UTC (link)
	You're very welcome. ♥ (Reply to this) (Parent)

tomorrowsky
2009-07-28 06:48 pm UTC (link)

First of all I want to thank the hell out of you for sharing all these for us who are CSS impared. Second of all I need to request some help.

;_; I've been fiddling with it for a while and this is what I have, and this is what I want it to look like. I can't find how to divvie up the block where the entry is and where the uhh subject thinger is. I suck at this obv.

Here's my CSS if that'll help any:

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

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

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

html, body {
height: 100%;
}

body {
background: #FFF url(http://i250.photobucket.com/albums/gg278/warplanesicon/Untitled-1.png) fixed;
color: #FFF;
margin: 0;
padding: 0;
}

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

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

#header {
background: transparent url(http://i250.photobucket.com/albums/gg278/warplanesicon/corneliaeuphie-2.png) no-repeat bottom;
height: 380px;
margin: 0 0 15px 0;
padding: 0;
}

#header-text {
display: none;
}

#banner-text {
background-color: #000;
padding: 3px 0;
}

#nav-above {
font-size: 11px;
margin: 0;
padding: 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: 10px;
margin: -10px 0 0 0;
padding: 0;
}

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

.date-header {
display: none;
}

.entry {
background-color: #000;
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: #FFF;
font-size: 6.5pt;
padding-top: 5px;
border-top: 2px solid #FFF;
}

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

.entry-text {
font-size: 11px;
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 #FFF;
}

.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: 11px;
height: 10px;
}

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

.yeartable .dayname {
font-size: 12px;
}

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

dl dd {
font-size: 11px;
}

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

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

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

(Reply to this) (Thread)

black_as_knight
2009-07-28 07:44 pm UTC (link)

Okay. Don't worry, it's not that hard. ♥ It probably won't look exactly the same, though, because the date isn't part of the header block in Complete Style.

First:

body {
background: #FFF url(http://i250.photobucket.com/albums/gg278/warplanesicon/Untitled-1.png) fixed;
color: #FFF;
margin: 0;
padding: 0;
}

needs to be:

body {
background: #FFF url(http://i250.photobucket.com/albums/gg278/warplanesicon/Untitled-1.png) fixed;
color: #000;
margin: 0;
padding: 0;
}

This:

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

needs to be to this:

.entry {
background: none;
margin: 0;
padding: 0;
}

And this:

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

to this.

.entry-header {
background-color: #000;
padding: 0 10px 0 0;
border: 0;
}

Finally, cleanup color changes:

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

to:

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

And:

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

to:

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

How does that work?

(Reply to this) (Parent) (Thread)

	tomorrowsky 2009-07-28 08:03 pm UTC (link)
	you are so beautiful to me (Reply to this) (Parent)