Liz (

grrliz) wrote in

thefulcrum,
2007-05-13 17:50:00

Template #30: Ungrateful Beyotch Hotline

Please read the directions in this entry as well as the Community FAQ and Template FAQ before asking questions.

Details
Template Name:		Ungrateful Beyotch Hotline
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 on Mac OSX.
Screen Resolutions:		1024x768 and up
Notes:		Inspired by a donut box.

[full size screenshot | live preview]

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 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: (#30) Ungrateful Beyotch Hotline	 */
/*	Date: May 13, 2007		*/
/*	S2 Style: Mixit		*/
/*	Available at http://community.livejournal.com/thefulcrum/	*/
/*	Made by Liz a.k.a. grrliz.livejournal.com	*/

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

font {font-family: inherit; font-size: inherit; color: inherit;}

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

body {
	background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/30_bg.gif) top center repeat fixed #deecf0;
	color: #53330b;
	font-family: calibri, arial, verdana, tahoma, sans-serif;
	font-size: 62.5%;
	text-align: center;
	}

a, a:link, a:visited, a:active {color: #54889d; text-decoration: none; outline: none;}
a:hover {color: #6f4303;}

blockquote {margin: 0.8em 2.4em; padding: 0.8em 0; border-top: 2px solid #c4dce3; border-bottom: 2px solid #c4dce3; background: #fbf2e7;}

input, textarea, select {}

/* ----------------------------------------- */
/* ---------- 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 {margin: 0px auto; width: 800px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/30_container.gif) top right repeat-y #fbf2e7; font-size: 1.2em; line-height: 1.7em;}
#container-inner {position: relative; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/30_containerinner.gif) top left repeat-y transparent; text-align: left;}

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

#header {z-index: 100; position: absolute; right: 0px; top: 0px; width: 200px;}
#header-inner {margin: 0px auto;}

#content {text-align: left;}

#alpha {width: 580px; }
	#alpha-inner {padding: 10px 10px 10px 20px;}

#beta {display: inline; width: 220px; padding-top: 14em; color: #fbf2e7;}
	#beta-inner {padding: 0px 9px;}

#footer {clear: both;}

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

#header-content {overflow: hidden; text-transform: uppercase; text-align: right;}

#header-text {position: relative; padding: 0.8em 0; font-weight: bold; text-transform: lowercase;}
#header-text ul.nav {font-size: 1.4em; font-weight: normal; text-transform: uppercase;}
#header-text ul.nav li {text-align: left;}
#header-text a {display: block; margin: 7px 0px; color: #cea96a; font-size: 14px;}
#header-text a:hover {color: #fbf2e7;}

#header-name {display: none;}
#header-description {display: none;}

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

/* previous and next links */
.stream-header {display: none; padding: 10px 20px; text-align: center;}
.stream-footer {margin-bottom: 3em; }

/* entry container */
.asset {margin-bottom: 3em; padding: 0.8em 0;  }
.asset-inner {position: relative;}

.asset-header {position: relative;}
.asset-header ul.asset-meta-list {position: absolute; top: 0px; right: 0px; width: 100%; border: 0px !important; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/30_bulletborder.gif) left center repeat-x transparent; text-align: right;}
abbr.datetime {padding-left: 5px; background: #fbf2e7; color: #b88c42; font-size: 1.1em; text-transform: uppercase;}

.lj-view-entry .asset-header {padding: 0; }

/* entry subject */
h2.page-header2 {margin: 0px; padding: 2em 0 0.8em 0; font-size: 1.4em; font-weight: normal; text-transform: uppercase;}
h2.page-header2 a, .lj-view-tags h2 {text-decoration: none;}
h2.page-header2 a:hover {}

/* entry body, meta, tags */
.asset-content {}

/* entry text */
.asset-body {padding-bottom: 0.8em; min-height: 120px;}
.asset-body ol, .asset-body ul, .lj-view-tags #alpha ul {margin: 1em 3em;}
.asset-body dt {border-bottom: 1px solid #ead3ac; font-weight: bold;}
.asset-body dd {margin-left: 3.6em; padding: 10px; border: 1px solid #ead3ac; border-top: 0px; background: #f9ecdc; border: 1px solid ead3ac; border-top: 0px; }
.asset-body dt a, .asset-body dl a, .asset-body blockquote a {border-bottom: 1px solid #ead3ac; background: transparent; color: #54889d;}

/* date and time */
div.asset-header ul {margin: 0px !important; padding: 0px !important;}
div.asset-header li.item {padding: 0px;}

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

/* userpic */
.user-icon {float: right; margin-left: 5px; padding: 1px; background: transparent !important; text-align: center;}
.user-icon img {border: 1px solid #ead3ac;}
.user-icon span {background: #ffffff !important; text-align: center;}
.user-icon a {background: transparent; color: #54889d;}

/* mood, music, location */
.lj-currents {float: left; width: 275px; margin-bottom: 0.8em; padding-top: 0.8em; border-top: 1px solid #ead3ac; }
	.lj-view-entry .lj-currents {float: none; width: 100%; margin: 0px;}
.lj-currents ul {list-style-type: none;}
.lj-currents ul li {padding-left: 15px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/30_minibullet.png) 0px 3px no-repeat transparent;}
.lj-currents img {display: none;}

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

/* --- tags --- */
.asset-tags {float: right; width: 275px; margin-bottom: 0.8em; padding-top: 0.8em; border-top: 1px solid #ead3ac; }
	.lj-view-entry .asset-tags {float: none; width: 100%; border: 0px; padding: 0px;}
.asset-tags-header {
	display: block; float: left; 
	width: 3.5em; /* matches .asset-tags-content width */ 
	height: 100% !important; 
	padding-left: 15px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/30_minibullet.png) 0px 4px no-repeat transparent;
	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 {clear: both; padding-top: 0.8em; border-top: 1px solid #ead3ac; list-style-type: none;}
	.asset-header ul.asset-meta-list {border: 0px !important;}
li.asset-meta-comments {display: inline; margin: 0px 10px 0px 0px;}

ul.asset-meta-list .item {border: 0px;}

.asset-footer {background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/30_bulletborder.png) 0px 0px repeat-x transparent;}

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

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

.widget {margin-bottom: 3em; padding: 0 0.8em; color: #cea96a;}
.widget-inner {background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/30_sbarbulletborder.gif) right 6px repeat-x transparent; }

.widget-header {display: inline; padding-right: 5px; background: #4a2f09; color: #c1dae2; font-size: 1.4em; font-weight: normal; text-transform: uppercase;}
.widget-content {clear: both;}

.widget ul {list-style-type: square; list-style-type: none;}
.widget li {padding-left: 10px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/30_sidebarbullet.gif) 0px 7px no-repeat transparent;}
.widget a {color: #cea96a;}
.widget a:hover {color: #fbf2e7;}

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

/* calendar */
.calendar-widget {}
	.calendar-widget table {margin: 0px auto; text-align: center;}
	.calendar-widget td {width: 20px;}
	.calendar-widget p {margin: 5px 0px; padding: 0px; text-align: center;}
	.calendar-widget tr:first-child a, .calendar-widget tr:first-child a:hover {width: 100%; background: transparent !important; color: #cea96a; border: 0px; font-weight: bold;}
	.calendar-widget td a {display: block; width: 20px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/30_calendardot.png) 0px 0px no-repeat transparent; color: #4a2f09; line-height: 20px; text-align: center;}
	.calendar-widget td a:visited {background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/30_calendardot.png) 0px -80px no-repeat transparent; color: #cea96a; }
	.calendar-widget td a:hover {background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/30_calendardot.png) 0px -40px no-repeat transparent; color: #4a2f09; }
	
/* link list */
.typelist-widget li.item {margin: 0px; }

/* tags */
.categories-widget .widget-footer {padding: 20px 0px 0px 0px;}
.categories-widget li.tag {display: inline; padding: 0px 1px; background: none; }

/* post summary */
.archive-widget li.item {margin: 0px 0px 5px 0px;}

.links-widget .widget-list .item {
	margin-bottom: .2em;
	border: none !important;
	}

.widget-list .tagcloud {
	list-style: none !important;
	display: inline !important;
	color: #ff0000 !important;
	white-space: nowrap !important;
	border-left: 0 !important;
	width: 100% !important;
	}

/* syndication, LiveJournal link, designer link */
.syndicate-widget,
.powered-widget,
.designed-widget {display: none;}

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

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

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

.comment {margin-bottom: 3em; padding: 0.8em 0; border-top: 1px solid #ead3ac; border-bottom: 1px solid #ead3ac;}
.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 {border: 1px solid #ead3ac;}
table.yeartable td.yearday {background-color: #f9ecdc; text-align: center;}
td.yearmonth {border-style: none; font-weight: bold;}

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

.lj-view-month table {}
.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!

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

Post a new comment
Error

Anonymous comments are disabled in this journal
We will log you in after post

We will log you in after post

We will log you in after post

We will log you in after post

We will log you in after post

Anonymously

switch

LiveJournal

Facebook

Twitter

OpenId

Google

MailRu

VKontakte

Anonymously

Insert Bold

Insert Italic

Insert Underline

Insert Strikethrough

Insert Link

Insert LJ User

Insert Photo

Insert Video

Your reply will be screened

Your IP address will be recorded
Help
235 comments

celeni

May 13 2007, 21:57:07 UTC 5 years ago

Very pretty. Stashing it and might use it. ^_^ Thanks!

serenityone

May 13 2007, 21:59:13 UTC 5 years ago

There isn't a single one of your designs that I don't completely love. You're amazing.

hellogoodmornin

May 13 2007, 22:06:35 UTC 5 years ago

Brilliant, as usual. :)

glass_houses

May 13 2007, 22:08:41 UTC 5 years ago

Oh, I think I love this one.

cafemercury

May 13 2007, 22:10:34 UTC 5 years ago

Wow. *mems*

thereal_anabel

May 13 2007, 22:10:46 UTC 5 years ago

I like the calendardot!

*studies closely to steal ideas*

strawbeerry

May 13 2007, 22:11:44 UTC 5 years ago

This is lovely! Will surely be using this in the future! :)

asumi

May 13 2007, 22:13:21 UTC 5 years ago

Wow, THIS is my favorite. Using and crediting, thank you so much!!! ^_^

gossymer

May 13 2007, 22:19:54 UTC 5 years ago

This is extremely freaky since I'd just been wondering if I could get dates circled on a month calendar...*blinks* and then I see it on the preview here.

Very nice job :)

out_of_mana

May 13 2007, 22:20:34 UTC 5 years ago

I am in LOVE

meetmyheart

May 13 2007, 22:20:56 UTC 5 years ago

Possibly the cutest thing ever. I love it. :D

branchesofpaper

May 13 2007, 22:32:24 UTC 5 years ago

love it, saving to memories! :D

robin99

May 13 2007, 22:34:22 UTC 5 years ago

Best title ever.

seasoned

May 13 2007, 22:35:43 UTC 5 years ago

i literally gasped outloud and said, "loves it!" :)

lb_x

May 13 2007, 22:59:16 UTC 5 years ago

I'm still too in love with the last layout of yours I snagged to change! Guess I'll keep this for future use XD

lepapillon

May 13 2007, 23:24:38 UTC 5 years ago

I love how you always use browns in your layouts! Not using right now, but perhaps soon. :)

hannahalewo

July 17 2008, 04:40:34 UTC 3 years ago

I hate the show, but I love reading your reviews. Posted by Right Brained Gal on Mar Site looks fantastic, Holly.

intuitionmagic

May 13 2007, 23:28:00 UTC 5 years ago

gorgeous!!
i was just wonderingg if you'd be interested in making a version of this with more summery/lively colors for the season? like instead of the brown? just an idea!

ps: i think you're brilliant with design :)

ledbylove

May 13 2007, 23:49:52 UTC 5 years ago

Love it! Am using it now!

gilyann

May 14 2007, 00:09:43 UTC 5 years ago

Today I was going to search for a new layout for my live journal and look into my flist and I find this beauty.

Needless to say, I love it and I'm using it. Thank You!

fanfic_lover

May 14 2007, 00:13:56 UTC 5 years ago

Love it! Have just applied it and am going to now add credit. =D Thanks!

lurliene

May 14 2007, 00:30:08 UTC 5 years ago

extremely damn pretty! 8D the only think i don't completely love is the fact that it doesn't show my mood theme :( but it's really gorgeous ^^

grrliz

May 14 2007, 00:33:33 UTC 5 years ago

If you read the FAQ, you'd find out how to turn it back on.

lurliene

5 years ago

link
Collapse
Expand
New comment

gatsbyfan

May 14 2007, 00:42:14 UTC 5 years ago

So very pretty... I had to switch templates again.

muse_kae

May 14 2007, 00:43:55 UTC 5 years ago

This is great! I just put it on mine, thanks so much!

mama2aciax3

May 14 2007, 01:00:33 UTC 5 years ago

I love it! Using and will credit :)

bloomsbabe86

May 14 2007, 01:03:19 UTC 5 years ago

This is definitely going to be my layout for a long while, and I'll most definitely credit!

Post a new comment
235 comments

Username:		Create an Account Forgot your login or password? OpenID Google Mail.Ru VKontakte
Password:
	Remember Me
	English • Español • Deutsch • Русский…

Template #30: Ungrateful Beyotch Hotline

Error

About

Help

Get Involved

Legal

LJ Labs

Store