thefulcrum: Template #35: Looking For A Place To Happen

Liz (

grrliz) wrote in

thefulcrum,
@ 2007-09-03 22:04:00

Entry tags:

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

Template #35: Looking For A Place To Happen
Please read the directions in this entry as well as the Community FAQ and Template FAQ before asking questions.

Details
Template Name:		Looking For A Place To Happen
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 2, Opera 9, and Internet Explorer 7 on Windows XP; Safari 2.0.4 and Firefox 2 on Mac OSX.
Screen Resolutions:		1024x768 and up
Notes:		Mini icons by graphicPUSH. Note that the header is fixed on the page and does not scroll. Also, the header of this layout is meant to be fixed. If you would like it to scroll with the rest of the layout, you must do the following: remove this line: `#header-inner {position: fixed;}` find `#content {z-index: 0; padding-top: 200px; text-align: left;}` and remove `padding-top: 200px;`

[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)". 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: (#35) Looking For A Place To Happen	 */
/*	Date: September 3, 2007		*/
/*	S2 Style: Mixit		*/
/*	Available at http://community.livejournal.com/thefulcrum/	*/
/*	Made by Liz a.k.a. grrliz.livejournal.com	*/
/*  Mini icons by graphicPUSH http://www.graphicpush.com/index.php?s=icons	*/

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

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

body {
	background: #ffffff;
	color: #555555;
	font-family: helvetica, candara, arial, sans-serif; 
	font-size: 62.5%;
	text-align: center;
	}

a, a:link, a:visited, a:active {color: #53A9D5; font-weight: normal; text-decoration: none; outline: none;}
a:hover {color: #F56903;}

input, textarea, select {margin: 0px 1px 1px 0px; border: 1px solid #53A9D5; background: #ffffff; color: #555555;}

blockquote {margin: 1em 3em; padding: 1em 1em 1em 40px; border: 1px solid #53A9D5; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/35_stripes.png) -135px 0px repeat-y transparent;}

h1, h2, h3 {font-weight: normal;}

/* ----------------------------------------- */
/* ---------- 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 {width: 960px; margin: 0px auto; font-size: 1em; text-align: left;}
#container-inner {text-align: left;}

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

#header {z-index: 1; }
#header-inner {position: fixed;}

#content {z-index: 0; padding-top: 200px; text-align: left;}

#alpha {width: 720px;}
	.layout-tw #alpha {float: right;}
	.layout-wt #alpha-inner {padding-right: 30px;}
	.layout-tw #alpha-inner {padding-left: 30px;}
	
#beta {width: 240px;}

/* specific page view details */

.lj-view-tags #alpha-inner {padding: 0px 20px 0px 25px; text-align: left;}

.lj-view-archive #alpha-inner,
.lj-view-day .day h2,
.lj-view-day .skiplinks {padding: 2em 0 0 0; text-align: left;}

.lj-view-tags #alpha-inner a,
.lj-view-month #alpha-inner a,
.lj-view-archive #alpha-inner a {}

.lj-view-tags #alpha-inner a:hover,
.lj-view-month #alpha-inner a:hover,
.lj-view-archive #alpha-inner a:hover {text-decoration: none;}

.lj-view-tags #alpha-inner ul {margin: 1em 4em 1em 2em;}

.lj-view-day #alpha,
.lj-view-month #alpha-inner {padding: 2em 0 0 0; text-align: left !important;}

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

#header-content {position: relative; width: 960px; height: 200px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/35_stripes.png) top center repeat-x #ffffff; text-transform: uppercase;}

#header-text {font-weight: bold;}
	ul.nav {position: absolute; bottom: 0px; width: 100%; height: 82px; background: #53A9D5; font-size: 12px; list-style-type: none;}
	ul.nav li {display: inline; float: left; }
	ul.nav li a {display: block; padding: 60px 10px 10px 10px; border-right: 1px solid #ffffff; background: #53A9D5; color: #ffffff; text-align: center;}
	ul.nav li a:hover {background: #9FCC02;}
	ul.nav li a:active {background: #E26103;}
	ul.nav li.current a {background: #EEC506;}

#header-name {position: absolute; top: 60px; right: 0px; font-size: 2em; overflow: hidden;}
	#header-name a {color: #F56903; }
	#header-name a:hover {color: #9FCC02;}

#header-description {display: none; color: #999999; font-size: 12px; font-style: italic; text-transform: lowercase;}

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

/* previous and next links */
.stream-header {display: none;}
.stream-footer {clear: both; display: block; padding: 1.5em 0; text-align: left; font-size: 1.2em; text-transform: uppercase;}

/* entry container */
.asset {position: relative; clear: both; min-height: 120px; padding: 0 0 35px 0; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/35_stripesnarrow.png) bottom center repeat-x transparent; font-size: 1.1em; text-align: justify;}
	.asset a img {border: 1px solid #9FCC02;}
	.asset a:hover img {border: 1px solid #F56903;}

.asset-header {padding: 0 0 0.4em 0;}
	.asset-header ul.asset-meta-list {border: 0px;}
	.lj-view-entry .asset-header {padding: 0; }

/* entry subject */
h2.page-header2 {padding: 35px 180px 0.5em 0; font-size: 1.5em; text-align: left; text-transform: uppercase;}
h2.page-header2 a, .lj-view-tags h2 {color: #F56903; text-decoration: none;}
h2.page-header2 a:hover {color: #9FCC02;}

/* entry body, meta, tags */
.asset-content a {font-weight: bold; border-bottom: 1px solid #F56903;}
.asset-content a:hover {border-bottom: 1px solid #9FCC02;}

/* entry text */
.asset-body {line-height: 1.5em; }
	.asset-body ol, .asset-body ul {margin: 1em 1em 1em 3em;}
	.asset-body a {}

/* userpic */
.user-icon {float: right; background-color: transparent !important; font-size: 1.1em; text-align: center; text-transform: uppercase;}
.user-icon img {margin: 0px 0px 5px 10px; padding: 10px; border: 1px solid #dddddd; background: #e9e9e9;}
.user-icon span {background-color: transparent !important; text-align: center;}
.user-icon a {background: transparent; color: #F7830C; border: 0px;}

.user-icon .ljuser {display: inline !important;}
.user-icon .ljuser img {background: transparent; margin: 0px; padding: 0px; border: 0px;}
.user-icon .ljuser a {color: #F7830C;}

/* mood, music, location */
.lj-currents ul {margin-top: 0.8em; padding: 0.8em 0 0 0; border-top: 1px solid #D6D4CC; text-transform: lowercase;}
.lj-currents ul li {list-style: none; padding-bottom: 0.5em;}
.lj-currents img {display: none;}

.entryMetadata-label {color: #9FCC02; font-weight:bold;}
.entryMetadata-content {margin-left: 2px;}

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

/* comments bar */
ul.asset-meta-list {padding-top: 2em; text-transform: uppercase; text-align: left; list-style-type: none;}
ul.asset-meta-list .item {border: 0px;}
li.asset-meta-comments {display: inline; margin: 0px;}
li.asset-meta-comments a {margin-right: 5px; padding: 2px 5px 0px 0px; border-right: 1px solid #cccccc; }
li.asset-meta-comments a:hover {}

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

/* date and time */
div.asset-header ul {position: absolute; top: 15px; right: 0px;}

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

.widget {clear: both; margin-top: 35px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/35_stripes.png) top center repeat-x transparent; line-height: 1.5em; }
.widget-inner {}

.widget-header {display: inline; padding: 1px 10px 1px 0px; background: #ffffff; color: #9FCC02; font-size: 1.4em; text-transform: uppercase;}
.widget-content {margin: 5px 0px 0px 0px; font-size: 1.1em;}

.widget ul {margin: 0px; padding: 0px; list-style-type: square;}
.widget a {color: #666666;}
.widget a:hover {color: #F56903;}
.widget .ljuser a {color: #F7830C important;}

/* profile */
.about-me-widget {display: none; text-align: center;}
.about-me-widget dl, .about-me-widget dd, .about-me-widget dt {margin: 0px; padding: 0px; width: 100%;}

/* calendar */
.calendar-widget {}
	.calendar-widget table {width: 100%; margin-left: -5px; text-align: center;}

.calendar-widget th, 
	.calendar-widget td {height: 20px; border: 1px solid #dddddd;  line-height: 20px;}

.calendar-widget p {margin: 5px 0px; padding: 0px;}

.calendar-widget tr:first-child td,
	.calendar-widget tr:first-child a, 
	.calendar-widget tr:first-child a:hover {background-color: transparent; color: #EEC506; border: 0px; font-weight: bold;}

.calendar-widget td a {display: block; width: 100%; height: 100%; background: #e9e9e9;  line-height: 20px;}
	
	.calendar-widget .widget-footer {padding: 6px 0px 0px 20px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/35_link.gif) 5px 7px no-repeat;}
	.calendar-widget .widget-footer p {margin: 0px; padding: 0px;}

/* link list */
.typelist-widget a {display: block; padding: 5px 0px 3px 20px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/35_arrow.gif) 5px 7px no-repeat; border-bottom: 1px solid #dddddd;}
.typelist-widget a:hover {background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/35_arrow.gif) 5px 7px no-repeat #ebebeb;}

/* tags */
.categories-widget li.item a {display: block; padding: 5px 0px 3px 20px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/35_arrow.gif) 5px 7px no-repeat; border-bottom: 1px solid #dddddd;}
.categories-widget li.item a:hover {background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/35_arrow.gif) 5px 7px no-repeat #ebebeb; }
.categories-widget .widget-footer {padding: 6px 0px 0px 20px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/35_link.gif) 5px 7px no-repeat;}

/* post summary */
.archive-widget li {padding: 0.4em 0; border-bottom: 1px solid #dddddd;}
.archive-wdiget .ljuser a {color: #F56903 !important;}
	
/* free text */
.customtext-widget {}

/* syndication, LiveJournal link, designer link */
.syndicate-widget {}

.powered-widget,
.designed-widget {display: none;}

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

/* Comments ---------------------------------------*/
#comments {padding: 0px; font-size: 1.1em;}

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

.comment {margin-bottom: 3em; padding: 0.8em 0; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd;}
.comment-odd {}
.comment-even {}

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

/* --- 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 {text-align: center; padding: 0px;}
ul.year li {display: inline; padding: 0px 5px;}
        
table.yeartable {margin-left: auto; margin-right: auto;}
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;}

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

.lj-view-archive #alpha {font-size: 1.2em;}
.lj-view-month #alpha {font-size: 1.2em;}
.lj-view-month widget table {margin: 0px !important;}

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

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

And that's pretty much it!

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

(Post a new comment)

	jennem 2007-09-04 02:07 am UTC (link)
	Very clean. When I get tired of looking at the crack-tastic color explosion of your coca-cola inspired layout, I might switch. :) (Reply to this)

	odette_river 2007-09-04 02:08 am UTC (link)
	I am in love. I'm going to use this for an rp journal, just not sure which one yet. Thanks! (Reply to this)

	heixin 2007-09-04 02:12 am UTC (link)
	I was just thinking of changing my layout when this glorious entry appeared. ;) Thank you! (Reply to this)

	ooshiny 2007-09-04 02:13 am UTC (link)
	Erm... might just be my Firefox acting up, but when I scroll the page, everything winds up going into the top of the page where the navigation strip usually is (which also scrolls up with the rest, leaving the banner stationary). It's kind of frustrating. Otherwise, I really like the colors and layout. (Reply to this) (Thread)

grrliz
2007-09-04 02:15 am UTC (link)

The header is supposed to be stationary, actually; it stays on the page at all times so that you can always access the basic LJ nav links. If you want to change the behaviour, remove this line:

#header-inner {position: fixed;}

(Reply to this) (Parent)(Thread)

(no subject) -

ooshiny, 2007-09-04 02:17 am UTC

(no subject) -

grrliz, 2007-09-04 02:19 am UTC

(no subject) -

ooshiny, 2007-09-04 02:20 am UTC

(Deleted post)

(no subject) -

grrliz, 2007-09-04 02:37 am UTC

(no subject) -

ooshiny, 2007-09-04 02:41 am UTC

(no subject) -

karingoeslj, 2007-09-22 05:09 pm UTC

(no subject) -

grrliz, 2007-09-22 07:22 pm UTC

(no subject) -

karingoeslj, 2007-09-22 08:11 pm UTC

(no subject) -

heixin, 2007-09-04 02:29 am UTC

(no subject) -

grrliz, 2007-09-04 02:32 am UTC

(no subject) -

heixin, 2007-09-04 02:34 am UTC

(no subject) -

heixin, 2007-09-04 04:40 am UTC

(no subject) -

grrliz, 2007-09-04 10:43 am UTC

	word_herder 2007-09-04 02:26 am UTC (link)
	Oh, this one is nice! I'm going to use it--great timing as nothing in the LJ cache seems interesting. (Reply to this) (Thread)

	creature_marie 2007-11-20 09:00 pm UTC (link)
	I'm using it as well! Credit's in my Profile! (Reply to this) (Parent)

	withoutxfear 2007-09-04 03:08 am UTC (link)
	This is really lovely. I'll be using it. Thank you! :D (Reply to this)

	falseeeyelashes 2007-09-04 03:58 am UTC (link)
	Love this. Taking and will credit. Thanks :D (Reply to this)

	lil_pixiedevil 2007-09-04 04:39 am UTC (link)
	Ooo! I love it!! (Reply to this)

	inamberclad 2007-09-04 04:54 am UTC (link)
	Love this. Snagging and using, will credit. (Reply to this)

	veron26 2007-09-04 05:01 am UTC (link)
	i was ready for a new layout and here it is. snagging and will be using shortly. great work. (Reply to this)

	ivles 2007-09-04 05:14 am UTC (link)
	girl, you're very productive. this is a very good layout ;-) (Reply to this)

	ledbylove 2007-09-04 05:27 am UTC (link)
	I am pretty much in love with this. Saving to maybe use later. :) (Reply to this)

	winterwaltz 2007-09-04 05:48 am UTC (link)
	I love this. Meming immediately. :) (Reply to this)

	stiletto 2007-09-04 06:15 am UTC (link)
	EEP. That color scheme is awesome and methinks I will put it up right after posting this comment! (Reply to this)

	loika 2007-09-04 06:28 am UTC (link)
	Oh hey, I like how this one scrolls! Very nifty. I think I'll be customising the banner later when I get time for nothappydesu. ;) (Reply to this)

	bluebythebook 2007-09-04 07:08 am UTC (link)
	Another Hip song title, nice. (Reply to this)

	rain_dances 2007-09-04 07:16 am UTC (link)
	This is lovely! I will be using it. Thank you. (Reply to this)

	elfandali 2007-09-04 08:17 am UTC (link)
	This is absolutely gorgeous!! + mems :) (Reply to this)

	wistfuljane 2007-09-04 08:21 am UTC (link)
	I love this template; it's colorful, but yet simple and clean. (Reply to this)

	irinafan 2007-09-04 08:23 am UTC (link)
	OOoh, that's freaking awesome. (Reply to this)

	miss_bunney 2007-09-04 08:26 am UTC (link)
	Weeee, this is pretty! Clean and beautiful! I know you are not making any requests but I'd looove to maybe see something in pink in future :D I currently use your wooonderful rainbow-coloured layout but I fear it'll destroy my eyes ^^ I really looove your designs! (Reply to this)

	ladybracknell 2007-09-04 09:09 am UTC (link)
	This is awesome. I've been looking for a new layout for a community, and I thought I was sold on your last one... but I love how clean this looks on the page. (Reply to this)

	sunbursts 2007-09-04 09:16 am UTC (link)
	Amazing! :D (Reply to this)

	cae_prince 2007-09-04 09:29 am UTC (link)
	Snagged and used @ themed_trivia (Reply to this)

	tarlia 2007-09-04 09:29 am UTC (link)
	I love layouts with a wide entry area because I post photos. I also like it that you're very flexible with the small nits that we have. I disabled the fixed header as well because I'm greedy with my browser space. Thanks! (Reply to this)

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

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

About

Help

Get Involved

Legal

Store

LJ Labs