thefulcrum: Template #50: Mystic Ion Fury

Liz (

grrliz) wrote in

thefulcrum,
@ 2008-06-28 21:47:00

Entry tags:

01. feature:columns:2 columns, 01. feature:width:liquid width, 02. style:mixit, 03. theme:minimalist, 03. theme:retro, 04. colour:! scheme:bright and colourful, 04. colour:! scheme:dark text on light, 04. colour:red, 04. colour:teal, 04. colour:white

Template #50: Mystic Ion Fury
Please read the directions in this entry as well as the Community FAQ and Template FAQ before asking questions.

Details
Template Name:		Mystic Ion Fury
Account Types:		all account levels (Basic, Plus, Paid, etc.) but the ads in Plus might make it look hideous
Layout Style:		S2 Mixit
Tested In:		Firefox 3 and Safari 2.0.4 on Mac OSX. I haven't had a chance to test it on Windows XP yet.
Screen Resolutions:		800x600 and up
Notes:		Inspired by bzzinglikeneon's Hippie Chick colour scheme at colourloving.

[Small screenshots suck; view larger?]

Directions
Go to Manage:		Customize
Select New Theme:		Type Mixit into the search box. Choose one of the themes that appear below (any theme) and hit "apply theme".
Choose a Page Setup		Choose "2 Column (sidebar on left)" or "2 Column (sidebar on right)". Regardless of which one you choose, the sidebar content will appear on the left. Hit the "Customize Selected Theme" button.
Choose "Custom CSS" from the menu on the left:		Select the following: Use layout's "Base Weblog" stylesheet: choose "No" from the menu. Custom external stylesheet URL: leave field blank. Custom stylesheet: paste style sheet contents in this box. Hit "save changes".

The Code

Copy and paste this into the aforementioned "custom stylesheet" box on the "Custom Options" tab. I have hosted the graphics on my own Photobucket account, but you are welcome and encouraged to upload them to your own image host (just remember to change the URLs in your style sheet). These are the images:

/*	Template: (#50) Mystic Ion Fury	 */
/*	Date: June 28, 2008		*/
/*	S2 Style: Mixit		*/
/*	Available at http://community.livejournal.com/thefulcrum/	*/
/*	Made by Liz a.k.a. grrliz.livejournal.com	*/

* {margin: 0px; padding: 0px; }

html {font-size: 100%; /* IE hack */ }

body {
	background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/50_bg.gif) top left repeat-y #ffffff;
	color: #444444;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "trebuchet ms", candara, helvetica, verdana, arial, tahoma, sans-serif;
	font-size: 62.5%;
	text-align: center;
	}

a, a:link, a:visited, a:active {color: #D9390D; font-weight: normal; text-decoration: none; outline: none;}
a:hover {color: #226C5F;}

blockquote {margin: 1em 3em; padding: 1em; border: 1px dotted #999999;}

input, textarea, select {}

h1, h2, h3 {margin: 5px 0px;}

font {font-family: inherit !important; color: inherit !important;}

/* ----------------------------------------- */
/* ---------- PAGE STRUCTURE --------------- */
/* ----------------------------------------- */

/* -- don't touch the stuff below -- */
#page, #header, #content, #footer {position: relative; top: 0;}
#alpha, #beta, #gamma {display: inline; float: left; position: relative; top: 0;}
#footer {margin: -1px 0 0 0; /* HACK - removes space between content and footer */}
#page-inner, #header-inner, #content-inner, #alpha-inner, #beta-inner, #gamma-inner, #footer-inner {position: static;}
#header-inner, #alpha-inner, #beta-inner, #gamma-inner {overflow: hidden; /* hide content that is larger than the element dimensions */}
#alpha-inner[id] { overflow: visible; } /* FF MAC & PC will clip pager-top when accessing page anchor */
/* -- don't touch the stuff above -- */

#container {font-size: 1.1em; text-align: left;}
#container-inner {min-height: 100%; text-align: left;}

#page {margin: 0px auto; padding: 0px;}

#header {z-index: 0; position: absolute; top: 0px; width: 100%; height: 100px;}
#header-inner {padding-left: 287px;}

#content {text-align: left;}

#alpha {z-index: 1; position: absolute; top: 190px; left: 287px; }
#alpha-inner {}

#beta {z-index: 2; position: absolute; top: 90px; left: 0px; width: 201px;}
#beta-inner {position: relative; }

/* ---------------------------- */
/* ---------- HEADER ---------- */
/* ---------------------------- */

#header-content {overflow: hidden; font-family: futura, "century gothic", "Lucida Grande", "Lucida Sans Unicode", "trebuchet ms", candara, helvetica, verdana, arial, tahoma, sans-serif;}

#header-text {padding: 20px 0px 20px 45px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/50_entry.gif) 0px 20px no-repeat transparent; color: #226C5F;}
#header-text ul.nav {padding: 18px 45px 40px 0px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/50_entrytitle.gif) top left repeat-x transparent; font-size: 12px; line-height: 18px;  text-transform: uppercase;}
#header-text ul.nav li {display: inline; padding-right: 1em;}
#header-text ul.nav li a {color: #226C5F;}
#header-text ul.nav li a:hover {color: #ffffff;}
#header-text ul.nav li.current a {}

#header-name {font-size: 24px; font-weight: normal;}
#header-name a {}

#header-description {font-size: 12px; text-transform: uppercase;}

/* ----------------------------- */
/* ---------- ENTRIES ---------- */
/* ----------------------------- */

/* previous and next links */
.stream-header {display: none;}
.stream-footer {padding: 0px 0px 20px 45px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/50_entry.gif) top left no-repeat transparent; color: #226C5F; font-size: 14px; line-height: 18px; text-transform: uppercase;}
	.stream-footer p {margin: 0px; padding: 18px 45px 40px 0px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/50_entrytitle.gif) top left repeat-x transparent;}
	.stream-footer p a {color: #226C5F;}

/* entry container */
.asset {padding: 0px 0px 3em 45px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/50_entry.gif) top left no-repeat transparent;}
	.asset-inner {position: relative; padding: 15px 45px 0px 0px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/50_entrytitle.gif) top left repeat-x transparent;}
	.asset a img {border: 1px solid #D9390D;}
	.asset a:hover img {border: 1px solid #226C5F;}

.asset-header {}
	.asset-header ul.asset-meta-list {border: 0px;}
	.asset-header img {max-height: 11px;}
	.lj-view-entry .asset-header {padding: 0; }

/* entry subject */
h2.page-header2 {font-family: futura, "century gothic", "Lucida Grande", "Lucida Sans Unicode", "trebuchet ms", candara, helvetica, verdana, arial, tahoma, sans-serif; line-height: 18px; font-size: 14px; font-weight: bold; text-align: left; text-transform: uppercase;}
h2.page-header2 a, .lj-view-tags h2 {color: #226C5F; font-size: 14px; text-decoration: none;}

.lj-view-entry h2.page-header2 {}

/* entry body, meta, tags */
.asset-content {padding: 1em 0;}

/* entry text */
.asset-body {line-height: 1.5em; overflow-x: hidden;}
	.asset-body a {border-bottom: 1px dotted #D9390D; font-weight: bold;}
	.asset-body ol, .asset-body ul {margin: 10px 40px;}
	.asset-body dt {padding: 5px 0px; border-bottom: 1px dotted #999999; font-weight: bold; text-transform: uppercase;}
	.asset-body dd {margin-left: 30px; padding: 10px; border: 1px dotted #999999; border-top: 0px;}

.ljuser {display: inline !important;}
.ljuser a {background: transparent; color: #D9390D;}

/* userpic */
.user-icon {float: right; text-align:left;}
.user-icon img {border: 2px solid #D9390D;}

/* mood, music, location */
.lj-currents ul {padding-top: 1em; list-style-type: none; text-transform: lowercase;}
.lj-currents li {display: inline; padding-right: 2em;}
.lj-currents img {display: none;}
.entryMetadata-label {font-weight: bold; padding-right: 0.5em;}

/* --- tags --- */
.asset-tags {padding-top: 1em; text-transform: lowercase; padding-top: 3px;}
.asset-tags-header {display: block; float: left; width: 3em; /* matches .asset-tags-content width */ height: 100% !important; padding: 0px 5px 5px 0px; font-size: 1em !important;}
.asset-tags-list {margin: 0 0 0 3em;  list-style-type: none;}
.asset-tags-list li {display: inline; padding-right: 5px;}
.asset-tags-list a {white-space: normal !important;}
.asset-tags-list a:hover {text-decoration: underline}

/* comments bar */
ul.asset-meta-list {padding-top: 1em; border-top: 1px dotted #999999; list-style-type: none; text-transform: lowercase; text-align: left;}
ul.asset-meta-list .item {display: inline; margin-right: 10px; padding-right: 10px; border-right: 1px solid #999999;}
li.asset-meta-comments {}
li.asset-meta-comments a {color: #D9390D;}
li.asset-meta-comments a:hover {color: #226C5F;}

.prevnext, .prev, .next {padding: 5px 0px;}

/* date and time */
div.asset-header ul {position: absolute; top: 0px; margin: 0px !important; padding: 0px !important; border: 0px !important; font-size: 11px; line-height: 18px; text-transform: uppercase; list-style-type: none;}
div.asset-header ul.asset-meta-list .item {border: 0px !important; color: #ffffff; text-align: right;}

.day h2 {padding-left: 45px; font-size: 14px; font-weight: normal;}
.day h2.page-header2 {padding-left: 0px;}

/* ----------------------------- */
/* ---------- SIDEBAR ---------- */
/* ----------------------------- */

.widget {background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/50_sidebarheader.gif) top right no-repeat;}
	.widget-inner {padding: 11px 40px 20px 20px;}

.widget-header, .widget-header a {color: #EEECCC; line-height: 17px; font-size: 14px; font-weight: normal; font-family: futura, "century gothic", "Lucida Grande", "Lucida Sans Unicode", "trebuchet ms", candara, helvetica, verdana, arial, tahoma, sans-serif; text-transform: uppercase;}
.widget-content {padding-top: 10px;}
	.widget-content a {color: #444444;}
	.widget-content a:hover {color: #D9390D;}
.widget-footer {}

.widget ul {margin: 0px; padding: 0px 0px 0px 10px; color: #D9390D;}

/* profile */
.about-me-widget {display: none;}
.about-me-widget .widget-header a {font-weight: bold;}
.about-me-widget .widget-content {position: relative;}
.about-me-widget .widget-content .user-pic {margin-top: 10px;}	
.about-me-widget dl.profile-list {}
.about-me-widget dd {padding: 3px 0px;}
.about-me-widget dd.profile-username {text-transform: uppercase;}
.about-me-widget dd.profile-name a {font-weight: bold; text-decoration: underline;}

/* calendar */
.calendar-widget {}
	.calendar-widget table {width: 100%; margin-left: -5px; font-size: 11px; text-align: center; }
	.calendar-widget th, 
	.calendar-widget td {margin: 0px; padding: 0px;}
	.calendar-widget p {margin: 0px; padding: 0px;}
	.calendar-widget tr:first-child td {border: 0px;}
	.calendar-widget tr:first-child a, 
	.calendar-widget tr:first-child a:hover {color: #D9390D; font-weight: bold;}

/* link list */
.typelist-widget {}

/* tags */
.categories-widget .widget-footer {padding: 10px 0px 0px 0px; text-align: right;}

/* custom text */
.customtext-widget .widget-content {line-height: 1.5em;}

/* page summary */
.archive-widget ul li {padding: 3px 0px;}

/*syndication */
.syndicate-widget img {margin-top: 5px;}

/* powered by livejournal */
.powered-widget {display: none; padding-top: 3em;}
.powered-widget .widget-content {overflow: hidden; font-size: 12px;}
.powered-widget a {font-weight: bold; text-decoration: underline;}

/* designed by */
/* leave this turned off otherwise it will credit someone else with the design */
.designed-widget {display: none;}

/* ----------------------------------- */
/* ---------- COMMENTS PAGE ---------- */
/* ----------------------------------- */

/* Comments ---------------------------------------*/
#comments {padding: 0px 45px;}

div.comments-inner h2 {margin: 0px; padding: 1.5em 0 0 0; font-size: 1.4em;}

.comment {position: relative; margin-bottom: 3em; padding: 0px; border-top: 1px dotted #999999; border-bottom: 1px dotted #999999;}
.comment-odd {}
.comment-even {background: #ffffff;}

.comments-nav {margin: 0px 0px 20px 0px; text-align:center;}

.comment-meta {padding: 5px 0px;}
.comment-meta .user-icon {position: relative; float: right; display: inline; padding-bottom: 10px;}
.comment-meta .commenter-name {font-size: 1.3em;}

/* --- reply, freeze, screen, etc ---  */
.comment-links {margin-top: 0.9em; font-weight: normal; text-align: right; font-size: 1em;}
.comment-subject {font-weight: bold; }
.comment-date {margin-top: 0.9em; margin-bottom: 0.9em;}

/* Fix height in IE */
.comment {height: 1%;}

/* Quick Reply  ---------------------------------------*/
.quickreply {margin-top: 1em; width:90%; padding-top: 5px; padding-bottom: 10px;}

#commenttext, #subject {width: 90%;}
#comment-form {width: 500px;}

/* ------------------------------ */
/* ---------- ARCHIVES ---------- */
/* ------------------------------ */

/* Calendar/Archive ---------------------------------------------------------------------- */

ul.year {padding-left: 45px; text-align: left;}
ul.year li {display: inline; padding-right: 10px;}
        
table.yeartable {width: 70%; }
table.yeartable td.yeardate, table.yeartable td.yearday {padding: 5px; border: 1px solid #cccccc;}
table.yeartable td.yearday {background-color: #ebebeb; text-align: center;}
td.yearmonth {border-style: none; font-weight: bold; text-transform: uppercase;}
td.yeardate a {font-size: 1.5em; text-decoration: none;}

dd.viewsubjects {margin: 0 0 .75em .75em;}

.lj-view-archive #alpha, .lj-view-month #alpha {margin: 0px; padding: 0px; width: 100%; left: 0px;}
.lj-view-archive #alpha-inner, .lj-view-month #alpha-inner {margin-left: 287px;}
.lj-view-archive .asset-body, .lj-view-month .asset-body {margin: 0px; border: 0px; padding: 20px 0px 10px 0px;}

.lj-view-month widget table {margin: 0px !important;}

.lj-view-tags #alpha ul {margin: 10px 0px 10px 20px; font-size: 1.2em;}
.lj-view-tags #alpha ul li {padding: 2px 0px;}

/* -------------------------- */
/* ---------- MISC ---------- */
/* -------------------------- */

/* Sponsored Plus ---------------------------------------*/

#ad-5linkunit {
    clear: both;
}

#ad-leaderboard {
        margin-bottom: 10px;
}

/* Utility Code --------------------------------------------------- */

/* clear floats, inspired by positioniseverything.net/easyclearing.html */
.comment-body:after,
#page-inner:after,
#header-inner:after,
#header-photo:after,
#content-inner:after,
#alpha-inner:after,
#beta-inner:after,
#gamma-inner:after,
#delta-inner:after,
#footer-inner:after,
.widget .user-pic:after {
content: ".";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0.1px;
}

/* float in post bodies around enclosures */
#content-inner,
.asset-body {
height: 1%;
}

/* Win IE < 7 */
* html #header-name a { word-wrap: break-word; }

/* ---------------------------------------- */
/* ---------- CONTEXTUAL POP-UPS ---------- */
/* ---------------------------------------- */

div.ContextualPopup div.Inner {padding: 5px; border: 1px solid #999999; background: #ffffff !important; color: #555555 !important; text-align: left;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {color: #D9390D !important; font-weight: bold !important; text-decoration: none !important; font-weight: normal;}
div.ContextualPopup div.Inner a:hover {color: #226C5F !important; text-decoration: underline;}
div.ContextualPopup .Relation, div.ContextualPopup .Content .OnlineStatus {color: #555555 !important; font-weight: bold !important;}

/* ----------------------------------------------------------------------- */
/* ---------- PLEASE PASTE ANY FURTHER CSS OVERRIDES BELOW HERE ---------- */
/* ----------------------------------------------------------------------- */

And that's pretty much it!

Page 1 of 5
<<	[1] [2] [3] [4] [5]	>>

(142 comments) - (Post a new comment)

	themightybee 2008-06-29 01:54 am UTC (link)
	Oh, this is FANTASTIC. I'll be using this right away. (Reply to this)

	ultrasushi 2008-06-29 02:06 am UTC (link)
	Sweet Jesus, this is amazing! (Reply to this)

	weehobbit 2008-06-29 02:17 am UTC (link)
	Ooh, I love the retro-ness of this! Totally saving for future use and YAY for another Mixit layout! :) (Reply to this)

	ohleeveeah 2008-06-29 02:20 am UTC (link)
	definitely using. fantastic. (Reply to this)

	loquaciousquark 2008-06-29 02:20 am UTC (link)
	I usually have a pretty fervent love for your layouts, but this one is particularly awesome. I love that it's a white background and so nice and wide! (Reply to this)

	pbvalla 2008-06-29 02:32 am UTC (link)
	I love it. :) (Reply to this)

	pali167 2008-06-29 02:55 am UTC (link)
	I love the layout I have right now (also yours) but this one is fantastic. I'll definitely be using it. :) (Reply to this) (Thread)

	pali167 2008-06-29 03:13 am UTC (link)
	Okay, maybe not. As you warned, the ads make it look hideous, which is unfortunate because I really wanted to use it. :( Oh well. (Reply to this) (Parent)(Thread)(Expand)

(no subject) -

grrliz, 2008-06-29 03:18 am UTC (Expand)

(no subject) -

pali167, 2008-06-29 03:22 am UTC (Expand)

(no subject) -

just_recycling, 2009-05-28 02:33 am UTC (Expand)

	wifely 2008-06-29 03:03 am UTC (link)
	this is so perfectly summery and retro. i am using it immediately. i'm just not a huge fan of that font so i'll be changing that. but this is another gorgeous layout as usual! (Reply to this) (Thread)

	wifely 2008-06-29 03:21 am UTC (link)
	ha, nevermind about the font. i still haven't switched back to mozilla after i had to install netscape, and netscape does NOT like this layout! (Reply to this) (Parent)

	ichabunni 2008-06-29 03:05 am UTC (link)
	using it!! i love it :D (Reply to this)

	cherylisanass 2008-06-29 03:12 am UTC (link)
	awesome! using it (: thanks (Reply to this)

	ooshiny 2008-06-29 03:45 am UTC (link)
	Holy crap, I love this SO much. (Reply to this)

	peefee 2008-06-29 04:01 am UTC (link)
	AWESOME. (Reply to this)

	turtle_goose 2008-06-29 04:09 am UTC (link)
	Completely and utterly snagging. LOVE! (Reply to this)

	discographic 2008-06-29 04:18 am UTC (link)
	Oh man, this is awesome. Using it for my fic journal -- THANK YOU SO MUCH ♥ (Reply to this)

	japan_girl16 2008-06-29 04:51 am UTC (link)
	Sweet! Already using it. <3 (Reply to this)

	revenus 2008-06-29 05:17 am UTC (link)
	SO AWESOME. (Reply to this)

	willow_diamond 2008-06-29 05:32 am UTC (link)
	Very nice! I know you hate this but I'd like to see it in other colors. (Reply to this)

	lesson_in_love 2008-06-29 05:53 am UTC (link)
	Total cuteness! Saving for later use, thanks! (Reply to this)

	bzzinglikeneon 2008-06-29 05:57 am UTC (link)
	It's perfect. I feel famous. XD (Reply to this)

	ah_anime18 2008-06-29 06:02 am UTC (link)
	WONDERFUL! I'll most definately be using at my gfx community! with credit of course ;) (Reply to this)

	swankysoul 2008-06-29 07:16 am UTC (link)
	Not using, but just saying, WHOOOO. New layout looks fantastic. Thanks so much for sharing! (Reply to this)

	marahmarie 2008-06-29 07:35 am UTC (link)
	Also works on XP in Firefox 2, IE 7 and IE 6. I tried it with Web Dev and now I want to switch to it - after I spent months tweaking another layout of yours, naturally. That's always the way... (Reply to this) (Thread)

	grrliz 2008-06-29 01:02 pm UTC (link)
	Cool, thanks for checking! (Reply to this) (Parent)(Thread)(Expand)

(no subject) -

anti_aol, 2008-07-01 04:34 am UTC (Expand)

(no subject) -

grrliz, 2008-07-01 04:36 am UTC (Expand)

(no subject) -

anti_aol, 2008-07-01 04:38 am UTC (Expand)

(no subject) -

anti_aol, 2008-07-01 05:21 am UTC (Expand)

	elsmoka 2008-06-29 09:24 am UTC (link)
	this looks awesome. I am using it NOW. Thanks for sharing!! :) (Reply to this)

	tarlia 2008-06-29 09:24 am UTC (link)
	Simply awesome. Switching to it right this minute. (Reply to this)

	lasamy 2008-06-29 09:44 am UTC (link)
	wow it's awesome! I'm using it for rockin_graphix XD thank you! (Reply to this) (Thread)

	this layout tezuka_rei 2009-07-28 04:02 pm UTC (link)
	i am still new to this livejournal.com and i like the layout :D . . . . . i wonder if i am allowed to use that layout (Reply to this) (Parent)

(142 comments) - (Post a new comment)

Page 1 of 5
<<	[1] [2] [3] [4] [5]	>>

Username:		Create an Account Forgot your login or password? Login w/ OpenID
Password:
	Remember Me
	English • Español • Deutsch • Русский…

About

Help

Get Involved

Legal

Store

LJ Labs