LJ Style Overrides by francey's Journal

(Latest 7 entries) (Calendar) (Friends) (User info)

Thursday, January 20, 2005

11:22AM - Lysergic Bliss

I've finally updated. There's a live preview (although it's not exactly the same)here.

Images are here:
bliss1.gif
bliss2.gif

GLOBAL_HEAD<= <style type="text/css"> <!-- html{ padding: 0px; margin: 0px; border: 0px;} body{ background-image: url(http://francey.web1000.com/bliss2.gif); backgrounnd-repeat: repeat-y; margin: 0px; padding: 0px; background-position: top center; font-family: verdana, sans-serif; font-size: 0.7em;} h1{ background-image: url(http://francey.web1000.com/bliss1.gif); width: 595px; height: 212px; position: relative; top: 0px; left: 50%; margin-left: -297px; font-size: 0px; color: #fff;} p.Navigation{ font-family: georgia, serif;} p.Navigation a{ color: #333; text-decoration: none; font-weight: bold;} p.Navigation a:hover{ color: #800;} p.Navigation span.Active{ color: #333; background-color: #fff; font-weight: bold;} h2{ font-family: georgia, serif; background-color: #fff; color: #333; width: 580px; position: relative; top: 0px; left: 50%; margin-left: -290px; border-bottom: 3px double #ccc;} div.H3Holder{ width: 580px; position: relative; top: 0px; left: 50%; margin-left: -290px; padding: 0px; border: 0px;} div.Picture{ border: 0px;} h3{ background-color: #fff; font-family: georgia, serif;} h3 span{ background-color: #fff; border: 0px; color: #333;} h3 em{ background-color: #fff; color: #333;} p.Bottom{ width: 580px; border: 0px; position: relative; top: 0px; left: 50%; margin-left: -290px;} table.Month{ width: 580px; position: relative; top: 15px; left: 50%; margin-left: -290px;} th.MonthHeader{ font-family: georgia, serif; text-align: left;} th.MonthHeader a:link{ color: #333; text-decoration: none; font-size: 1.2em;} td{ background-color: #f5f5f5;} a:link{ color: #800;} a:visited{ color: #800;} a:hover{ color: #333;} --> </style> <=GLOBAL_HEAD

Current mood: awake

Current music: none

(13 comments | comment on this)

Thursday, December 23, 2004

3:29PM - Another Oldie - Blackbird

I've re-coded another oldie for LJ. I would like to add here that I have thus far been so lazy and insensitive to not check whether these layouts work in anything other than Opera (7.1 I think). So if you're browsing in Mozilla/firefox or Safari, and something is very screwed up for you, please let me know. If you're using IE, especially IE 5.0 Mac, screw you.

Just kidding, I'll fix stuff for IE and Netscape too, to the best of my ability.


There's also a live preview (although it's not exactly the same) here.

Blackbird, off of the White Album. I *know* that the lyrics are wrong. I was lazy and didn't look them up when I was making this (oh, it must have been 9-10 months ago, I don't remember). Sorry.

To use this, switch to the S1 style system. Then switch all your templates to "magazine". At the very bottom, where it says "style overrides", paste the following:

GLOBAL_HEAD<= <style type="text/css"> <!-- html{ border: 0px; padding: 0px;} body{ background-color: #404040; background-image: url(http://home.insightbb.com/~franceydesign/blackbird2.gif); background-position: left top; font-family: garamond, serif; font-size: 0.9em; color: #000; margin: 0px; padding: 0px;} h1{ font-size: 0em; color: #fff; background-image: url(http://home.insightbb.com/~franceydesign/blackbird1.gif); width: 800px; height: 350px; position: relative; top: 0px; left: 0px; border-right: 2px groove #999; margin: 0px; padding: 0px;} h2{background-color: #fff; border-right: 2px groove #999; width: 450px; margin: 0px 0px 0px 0px; padding: 10px 310px 15px 40px; font-family: garamond, serif; color: #666; font-weight: bold; font-style: italic; font-size: 1.7em; position: relative; top: 0px; left: 0px; border-bottom: 0px;} .H3Holder{ width: 450px; position: relative; top: 0px; left: 0px; border: 0px; padding: 0px 310px 5px 40px; margin: 0px 0px 0px 0px; background-color: #fff; border-right: 2px groove #999;} .H3Holder h3{ color: #000; font-size: 1.3em; text-indent: 2em; margin: 0px 0px 15px 0px; padding: 0px 0px 7px 0px; font-style: italic;} .H3Holder span{ background-color: transparent; border: 0px; color: #000; font-family: garamond, serif; font-style: italic; border-bottom: 2px groove #999;} .H3Holder span em{ color: #000; font-style: italic;} .Navigation{ position: absolute; top: 380px; left: 520px; width: 236px; padding: 50px 0px 0px 0px; color: #fff; text-align: left; font-family: garamond, serif;} .Navigation p{ text-align: left;} .Navigation .Active{ background-color: transparent; color: #666; display: block;} .Navigation a{ display: block; color: #666; text-decoration: none;} .Picture{ border: 0px;} .Bottom{ position: relative; top: 0px; padding: 10px 310px 10px 40px; width: 450px; background-color: #fff; border-right: 2px groove #999; margin: 0px;} .Month{ width: 800px; position: relative; top: 0px; left: 0px; padding: 10px 310px 10px 40px; background-color: #fff; border-right: 2px groove #999;} th.MonthHeader{ background-color: #fff; color: #666; font-family: garamond, serif; font-weight: normal; font-size: 1.3em; text-align: left;} .MonthHeader a{ color: #555; text-decoration: none;} .Month td{ width: 65px; border: 0px; background-color: #f5f5f5; margin: 0px;} p{text-indent: 2em;} blockquote{ color: #555555; border: 3px groove #666666; padding: 5px;} textarea{width: 75%; border: 3px groove #666666;} input{border: 3px groove #666666;} a:link, a:visited{color: #555555; text-decoration: none;} a:hover, a:active{color: #777777; text-decoration: none;} --> </style> <=GLOBAL_HEAD

If you want to host your own images (very much so recommended), here are the links:
blackbird1.gif
blackbird2.gif

Comment, Credit, etc...

Coming up, a POTC layout, I promise.

Current mood: busy

Current music: Sonic Youth

(5 comments | comment on this)

Wednesday, December 22, 2004

9:51PM - The Life Aquatic

One quick update before I go to bed. Yeah, I cheaped out, since most of the CSS is from my current journal. Mehh, the usual. Check the userinfo for instructions.



GLOBAL_HEAD<= <style type="text/css"> <!-- html{ border: 0px; padding: 0px;} body{ background-color: #404040; background-image: url(http://home.insightbb.com/~franceydesign/aquatic1.gif); background-repeat: repeat-y; background-position: left top; font-family: verdana, sans-serif; font-size: 0.7em; color: #fff; margin: 0px; padding: 0px;} h1{ font-size: 0em; background-image: url(http://home.insightbb.com/~franceydesign/aquatic2.jpg); width: 712px; height: 400px; position: relative; top: 20px; left: 44px;} .H3Holder{ width: 456px; position: relative; top: 20px; left: 45px; border: 0px; padding: 5px 0px 0px 0px; margin: 0px; border-bottom: 1px solid #ccc;} h2{ background-color: transparent; border: 0px; width: 436px; height: 21px; margin: 10px 10px 0px 10px; padding: 3px; color: #fff; font-weight: normal; background-repeat: no-repeat; font-family: georgia, serif; font-size: 1.2em; letter-spacing: 0.1em; text-align: right; position: relative; top: 25px; left: 45px; border-bottom: 3px double #ff0;} .H3Holder{margin: 0px 10px 10px 10px;} .H3Holder span{ background-color: transparent; border: 0px; color: #C0C0FF; font-family: georgia, serif;} .H3Holder span em{ color: #C0C0FF;} .Navigation{ position: absolute; top: 380px; left: 520px; width: 236px; padding: 50px 0px 0px 0px; color: #000; text-align: left;} .Navigation p{ text-align: left;} .Navigation .Active{ background-color: #000; color: #fff; border-bottom: 1px solid #111; display: block;} .Navigation a{ display: block; border-bottom: 1px solid #111; color: #fff; text-decoration: none;} .Picture{ border: 0px;} .Bottom{ border: 0px; position: relative; top: 0px; padding: 10px;} .Month{ width: 456px; position: relative; top: 20px; left: 45px;} th.MonthHeader{ background-color: #000; color: #fff; font-family: georgia, serif; font-weight: normal; font-size: 1.3em; text-align: left; border-bottom: 3px double #ff0;} .MonthHeader a{ color: #fff; text-decoration: none;} .Month td{ width: 65px; border: 0px; background-color: #222; margin: 0px;} blockquote{ padding: 5px; border: 1px solid #111; background-color: #222;} a:link{color: #ff0;} a:active{ color: #ff0;} a:visited{ color: #ff0;} a:hover{ color: #C0C0FF;} --> </style> <=GLOBAL_HEAD

Comment, credit, etc...

Images are here:
aquatic1.gif
aquatic2.jpg

Current mood: artistic

Current music: Thurston Moore

(5 comments | comment on this)

6:29PM - Oh Honey Pie

This is a very old template I made, re-coded for LJ, based on the Beatles Song "Honey Pie" off of the White Album. I forgot to add that if you take this/use any Hack, I would appreciate it if you would add a comment, and give some sort of credit. Yeah, duh, I'm forgetful.



There's also a live preview, (although it's not exactly the same) here.

To use this Hack, switch your journal to the s1 style system. Then make sure that all of your journal pages are set to the "Magazine" style. Then, at the very bottom where it says "style overrides", paste the following:

GLOBAL_HEAD<= <style type="text/css"> <!-- html{ border: 0px; padding: 0px;} body{ background-color: #598BEF; background-image: url(http://home.insightbb.com/~franceydesign/honey2.gif); background-repeat: repeat-x; background-position: left top; background-color: #598BEF; font-family: verdana, sans-serif; color: #000050; font-size: 0.7em; margin: 0px; padding: 0px;} h1{ color: #fff; width: 793px; height: 300px; position: relative; top: 0px; left: 0px; background-image: url(http://home.insightbb.com/~franceydesign/honey1.gif); font-size: 0px; color: #99B7F5; margin: 0px; padding: 0px;} .Navigation{ position: absolute; top: 300px; left: 75%; width: 20%; color: #598BEF; text-align: left;} .Navigation a{ display: block;} .Navigation .Active{ color: #900; display: block; background-color: #598BEF; text-transform: uppercase; font-size: 0.9em;} h2{ font-size: 1.5em; border-bottom: 1px solid #99B7F5; margin-bottom: 0px; position: relative; font-family: verdana, sans-serif; background-color: #598BEF; font-weight: bold; color: #000050; width: 65%; margin: 10px 3% 0px 3%;} .H3Holder{ position: relative; top: 0px; border: 0px; width: 65%; margin: 0px 3% 10px 3%;} .H3Holder h3{ font-size: 1.2em; text-align: right; color: #99B7F5; margin: 0px 0px 10px 3%; font-weight: bold;} h3 span{ border: 0px; background-color: #598BEF; color: #99B7F5;} h3 span small{ color: #99B7F5;} h3 span em{ color: #99B7F5;} .Comment{ font-size: 0.9em;} .Comment a{ color: #900;} .Month{ width: 65%; position: relative; top: 0px; margin: 10px 3% 10px 3%;} .Month th.MonthHeader{ text-align: left; font-size: 1.5em; color: #000050; padding: 5px; border-bottom: 1px solid #900;} .Month th.MonthHeader a{ color: #000050; text-decoration: none;} .Month td{ background-color: #99B7F5;} .Month td a{ color: #000050;} h4{ font-size: 0.9em; color: #990000;} h5{ color: #990000; font-weight: normal; font-size: 1em;} h6{ font-weight; normal; font-size: 1em; color: #99B7F5; font-weight: normal;} strong, em, b, i{ color: #99B7F5;} cite{ color: #990000;} u{ text-transform: uppercase; font-size: 0.85em; text-decoration: none; border-bottom: 1px solid #990000;} blockquote, dd{ background-color: #99B7F5; padding: 5px; border: 1px solid #990000;} pre, code{ background-color: #99B7F5;} #nav ul{ list-style-type: none; margin: 5px; padding: 0px;} dt{ font-weight: bold;} input, textarea{ background-color: #99B7F5; border: 1px solid #990000;} a{ color: #990000; font-size: 0.85em; text-transform: uppercase; text-decoration: none;} a:visited{ color: #900;} a:active{ color: #900;} a:hover{ color: #99B7F5;} --> </style> <=GLOBAL_HEAD

If you want to host your own images (HIGHLY RECOMMENDED) here are the images:
honey1.gif
honey2.gif

That's it, and enjoy!

Current mood: blah

Current music: Radiohead

(4 comments | comment on this)

Monday, December 20, 2004

6:23PM - Ugly-Ass White Stripes Layout

Because people won't believe how ugly this is:



If you want to download it, same instructions as below. Switch to the S1 style system, make sure all of your templates are "Magazine", and at the very bottom of the page, where it says "Style overrides", paste the following:

GLOBAL_HEAD<= <style type="text/css"> <!-- html{ border: 0px; padding: 0px;} body{ background-color: #fff; background-image: url(http://home.insightbb.com/~franceydesign/whitestripes.gif); background-position: top center; background-repeat: repeat-x; color: #000; font-family: verdana, arial, sans-serif; font-size: 0.7em; margin: 0px; padding: 0px;} h1{ color: #fff; position: relative; top: 0px; right: 0px; font-weight: normal; font-family: "century gothic", "trebuchet MS", arial, sans-serif; letter-spacing: 0.2em; font-size: 2.5em; padding: 18px 5px 275px 5px; text-align: right;} .Navigation{ position: relative; top: 0px; width: 100%; text-align: center; color: #fff; border-bottom: 1px solid #f00; padding: 0px 0px 5px 0px;} .Navigation br{ display: none;} .Navigation a{ color: #e00; font-weight: bold; text-decoration: none;} .Navigation a:hover{ border-bottom: 6px solid #f00; text-decoration: none;} .Navigation .Active{ color: #e00; font-weight: bold;} h2{ position: relative; top: 0px; background-color: #f00; border: 0px; color: #fff; padding: 7px; font-family: "century gothic", "trebuchet MS", arial, sans-serif; font-size: 1.5em; font-weight: normal; text-align: center;} .H3Holder{ position: relative; top: 0px; border: 0px; padding: 10px; width: 750px; margin-left: -385px; left: 50%;} .H3Holder h3{ border-bottom: 1px solid #000;} h3 span{ border: 0px; background-color: #fff;} h3 span small{ color: #000;} h3 span em{ color: #e00;} .Comment a{ color: #f00;} .Month{ width: 500px; margin-left: -250px; left: 50%; position: relative; top: 0px;} .Month th.MonthHeader{ border-bottom: 1px solid #f00; border-top: 1px solid #f00; padding: 5px;} .Month th.MonthHeader a{ color: #000; text-decoration: none;} .Month td{ background-color: #f5f5f5;} .Month td a{ color: #f00;} a{ color: #f00;} a:visited{ color: #f00;} a:active{color: #f00;} a:hover{ color: #f00; text-decoration: overline;} --> </style> <=GLOBAL_HEAD

If you want to host your own images, here's the image link: whitestripes.gif.

Yeah, that's about it.

Current mood: annoyed

Current music: The Futureheads

(6 comments | comment on this)

4:09PM - Darts of Pleasure

Okay,I've got my first one done.



This style is for Magazine. To use this, set your style to S1. Make sure all your styles are set to "Magazine". At the very bottom, where it says "style overrides", paste the following:

GLOBAL_HEAD<= <style type="text/css"> <!-- html{ border: 0px; padding: 0px;} body{ background-color: #f93; background-image: url(http://home.insightbb.com/~franceydesign/darts2.gif); background-position: top center; background-repeat: repeat-y; color: #fff; font-family: "trebuchet ms", arial, sans-serif; font-size: 0.8em; margin: 0px; padding: 0px;} h1{ background-image: url(http://home.insightbb.com/~franceydesign/darts1.gif); background-repeat: no-repeat; width: 550px; height: 190px; padding: 0px; font-size: 0em; position: relative; top: 0px; left: 50%; margin-left: -275px; color: #f93;} .Navigation{ position: relative; top: 0px; color: #000; margin: 0px 0px 40px 0px; font-size: 0.7em;} .Navigation a{ color: #000; text-decoration: none; background-color: #f93; padding: 10px 5px 10px 5px;} .Navigation a:visited{ color: #000;} .Navigation .Active{ color: #000; text-decoration: none; background-color: #f93; padding: 10px 5px 10px 5px;} h2{ width: 530px; margin: 10px 0px 0px 0px; position: relative; border-bottom: 1px solid #f93; background-color: #000; top: 0px; left: 50%; margin-left: -265px; color: #fff; font-family: "Trebuchet MS", arial, sans-serif; font-weight: bold; font-size: 1.3em; letter-spacing: 0.2em;} .H3Holder{ width: 530px; padding: 10px; position: relative; top: 0px; left: 50%; margin-left: -275px;} .H3Holder h3{ text-align: right; margin: 0px 0px 5px 0px;} .H3Holder h3 span{ background-color: #000; color: #fff; border: 0px;} .H3Holder h3 span em{ color: #fff;} .Comment{ border: 0px;} .Comment a{ color: #f93;} .Bottom{ position: relative; top: 0px; left: 50%; margin-left: -265px; width: 530px; border: 0px;} .Month{ position: relative; width: 530px; margin-left: -265px; left: 50%; border: 0px;} .Month th{ color: #000; background-color: #f93; border: 0px;} .Month th a{ color: #000; text-decoration: none;} .Month td{ color: #fff; border: 0px;} .Month td.Empty{ background-color: #000;} .Month td a{ color: #f93;} a:link{color: #f93;} a:visited{ color: #f93;} a:active{ color: #fff;} a:hover{ color: #fff;} --> </style> <=GLOBAL_HEAD

Then, I highly recommend that you download the following images to your own server, and replace them in the code where indicated. I am currently hosting them off my ISP, and while this *should* be okay, I have no guarantees, so if your images disappear, it's not my fault. I will not send images to you.

Images:
darts1.gif
darts2.gif

Current mood: lazy

Current music: Wilco

(8 comments | comment on this)

Tuesday, December 7, 2004

8:29PM - Grand Opening... not yet

Hola,

Right now, I'm just using this journal to test various LJ hacks. The current design (darts of pleasure) is a hack of Magazine. I'm considering using this LJ to distribute LJ hacks, since I think there is a humongous lack of well-designed LJ's out there. Most of this is due to the difficulty in customizing a free LJ account. I have no idea how easy it is to customize a paid LJ, so... (although, it might be quite difficult too).

Either way, HTML and CSS can be a pain in the neck, so look back to see if I'm offering LJ hacks for the general public (the first one will probably be the current thing you're looking at).

Current mood: accomplished

Current music: Elvis Costello

(3 comments | comment on this)