Layout: #4 - "Neon Spasm"

Mar 31, 2007 14:36

The most obnoxious layout in existence! I am proud :D

Okay, maybe not in ALL existence, but you get my point.
It was inspired by my current Winamp skin.

Please:
- Comment on this post if you use the layout
- credit plush_designs in your userinfo and/or somewhere on your journal
- do not claim you made the layout
- do not redistribute
- do not direct link the images

Info Layout Name:Neon Spasm Account Types:All account levels Layout Style: S2 Mixit Tested In:Firefox 1, Internet Explorer 6 Screen Resolutions:800x600 or higher Credits:The coding for this layout was found at thefulcrum, so I take no credit for that, only for the colour theme I've used. Customizing:If you want to change the colour theme, feel free to do so! A link back to plush_designs would be cool, but is not required. The only time a link is required is if you use this layout as it is here with no changes made. Notes:Doesn't look nice in Internet Explorer because the entry text is aligned wrong. It was working at first but now it's not. It could just be MY I.E but I'm not sure.



Click the image above to view the full-page screenshot.

Directions Go to Manage:Customize On the "Basics" tab:make sure S2 is chosen from the Style System box. Click "save changes". On the "Look And Feel" tab:Select the following:
  • choose "Mixit" from the dropdown menu in the Layout & Language box.
  • choose "(Layout Default)" from the dropdown menu in the Themes box.

Click "save changes". On the "Custom Options" tab:select the following:
  • Layout Type: choose "Two Column (Sidebar on Right)" or "Two Column (Sidebar on Left)". Do not choose a three column option.
  • click on Section: Custom CSS
    • 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.
Click "save changes".

Images Please save the images to your computer and upload them to an image hosting service such as Photobucket or ImageShack. Remember to change the URLs in the style sheet!

The Code Copy and paste this into the above mentioned "custom stylesheet" box on the "Custom Options" tab. Custom Style Sheet
/* Template: (#04) Neon Spasm */ /* Date: March 31, 2007 */ /* S2 Style: Mixit */ /* Available at http://community.livejournal.com/plush_designs/ */ /* Made by Sam a.k.a. purple-ivy.livejournal.com */ /* Note the original layout coding was by http://community.livejournal.com/thefulcrum */ /* ------------------------------------ */ /* ---------- BASIC STUFF ------------- */ /* ------------------------------------ */ font {font-family: inherit; font-size: inherit; color: inherit;} html {margin: 0px; padding: 0px; font-size: 100%; /* IE hack */ } body { margin: 0px; padding: 0px; background: #000000; color: #cccccc; font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif; font-size: 62.5%; text-align: center; } a, a:link, a:visited, a:active {color: #08d7eb; text-decoration: none;} a:hover {color: #ffff20; text-decoration: none;} p {margin-top: 0.9em; margin-bottom: 0.9em;} blockquote {margin: 0.9em 2.7em; padding: 0.9em; border: 1px solid #f5a600; background: #282829; color: #63ef00;} blockquote:first-line {font-size: 1.2em; font-variant: small-caps;} input, textarea {border: 5px double #f5a600; background: #f5d4d1; color: #cccccc;} /* ----------------------------------------- */ /* ---------- 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 -- */ #page, #page-inner {margin: 0px; padding: 0px;} #container {position: relative; margin: 0px auto; font-size: 1.1em; line-height: 1.8em; text-align: left;} #container-inner {min-height: 100%; margin: 0px auto; text-align: left;} #header {position: relative; height: 120px; border-bottom: 5px solid #63ef00; background: #282829;} #header-inner {margin: 0px auto;} #content {margin: 0px auto; background: #000000; text-align: center;} #content-inner {width: 760px; margin: 0px auto; border-left: 5px solid #f5a600; border-right: 5px solid #f5a600; background: #52565b; color: #cccccc; text-align: left;} #footer {margin: 0px; padding-bottom: 50px; border-top: 5px solid #63ef00; background: #282829;} #footer-inner {width: 760px; margin: 0px auto; border: 5px solid #08d7eb; border-top: 0px; padding: 20px 0px; background: #ec0f85;} #alpha {width: 560px;} .layout-tw #alpha {float: right;} #alpha-inner {margin: 0 20px;} #beta {width: 200px;} .layout-wt #beta-inner {padding: 20px 20px 20px 0px} .layout-tw #beta-inner {padding: 20px 0px 20px 20px} .lj-view-archive #alpha-inner, .lj-view-month #alpha-inner, .lj-view-tags #alpha-inner {padding-top: 20px;} /* ---------------------------- */ /* ---------- HEADER ---------- */ /* ---------------------------- */ #header-content {overflow: hidden; text-transform: uppercase; text-align: center;} #header-text ul.nav {position: absolute; bottom: 0px; left: 50%; width: 760px; margin: 0px 0px 0px -385px; padding: 10px 0px; border: 5px solid #08d7eb; border-bottom: 0px; background: #ec0f85; text-transform: lowercase; } #header-text ul.nav li {margin: 0px; padding: 0 0.9em; display: inline;} #header-text ul.nav li.item {border: 0px;} #header-text ul.nav a {color: #ffff20; font-size: 1.2em; text-decoration: none;} #header-text ul.nav a:hover {color: #08d7eb;} #header-name {width: 760px; margin: 0px auto; padding: 1.2em 0; font-size: 2em; letter-spacing: 0.1em;} #header-name a {color: #63ef00; text-decoration: none;} #header-name a:hover {color: #da66ff;} #header-description {display: none; width: 760px; margin: 0px auto; } /* ----------------------------- */ /* ---------- ENTRIES ---------- */ /* ----------------------------- */ /* previous and next links */ .stream-header {display: none; padding: 10px 20px; text-align: center;} .stream-footer {padding: 0px; text-align: center;} /* entry container */ .asset {margin: 0px; padding: 0px 0px 13px 0px; border-bottom: 1px solid #fdff22;} .asset-inner {padding: 0 0 2.4em 0; } .asset-header {padding: 2.4em 0 0.9em 0;} .lj-view-entry .asset-header {padding: 0; } /* entry subject */ h2.page-header2 {margin: 0px; padding: 0.2em 0; font-size: 2em; font-weight: normal; font-style: normal; text-transform: lowercase;} h2.page-header2 a, .lj-view-tags h2 {color: #ec0f85; text-decoration: none;} h2.page-header2 a:hover {color: #63ef00;} abbr.datetime { margin: 0px; padding: 0px; list-style-type: none; color: #da66ff; font-size: 1em; text-transform: uppercase; text-align: right; } /* entry body, meta, tags */ .asset-content {margin-bottom: 0.9em; padding-bottom: 0.9em; } /* entry text */ .asset-body {padding: 0.9em 0;} .asset-body a {color: #08d7eb; font-weight: bold; text-decoration: none;} .asset-body a:hover {color: #ffff20;} .asset-body ul {margin-left: 0px; padding-left: 20px; list-style-type: none;} .asset-body ul li {padding-left: 15px; background: url(http://i174.photobucket.com/albums/w97/purple-icons/0ljLayouts/04neon/04-neon-bullet.jpg) 0px 5px no-repeat transparent;} .asset-body dt {border-bottom: 5px solid #f5a600; font-weight: bold;} .asset-body dd {margin-left: 3.6em; padding: 10px; background: #f5d4d1; border-left: 5px solid #f5a600; border-right: 5px solid #f5a600; border-bottom: 5px solid #f5a600; } /* date and time */ div.asset-header ul {margin: 0px !important; padding: 0px !important;} div.asset-header li.item {padding: 0px;} .ljuser {display: inline !important;} /* userpic */ .user-icon {float: right; margin-left: 5px; padding: 1px; background: transparent !important; text-align: center;} .user-icon img {border: 3px solid #ec0f85;} .user-icon span {background: transparent !important; text-align: center;} /* mood, music, location */ .lj-currents ul {margin: 0px; padding: 0px;} .lj-currents ul li {list-style: none;} .lj-currents img {display: none;} .entryMetadata-label {font-weight:bold;} .entryMetadata-content {margin-left: 2px;} /* --- tags --- */ .asset-tags-header { display: block; float: left; width: 3.5em; /* matches .asset-tags-content width */ height: 100% !important; margin: 0px; padding: 0px; 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; float: left; padding: 0px 5px 5px 0px;} .asset-tags-list a {white-space: normal !important;} /* comments bar */ ul.asset-meta-list {clear: both; margin: 0px; padding: 0px; list-style-type: none;} li.asset-meta-comments {display: inline; margin: 0px 10px 0px 0px;} ul.asset-meta-list .item {border: 0px;} .prevnext, .prev, .next {padding: 5px 0px;} /* ----------------------------- */ /* ---------- SIDEBAR ---------- */ /* ----------------------------- */ .widget {margin-bottom: 20px;} .widget-inner {} .widget-header {margin: 0px 0px 5px 0px; padding: 0px 5px 5px 5px; border-bottom: 1px solid #ffff20; font-size: 110%; color: #63ef00; font-weight: normal; text-transform: uppercase; text-align: center; letter-spacing: 0.15em;} .widget-content {margin: 0px; padding: 0px;} .widget ul {margin: 0px; padding: 0px; list-style-type: none;} .widget a {color: #08d7eb;} .widget a:hover {color: #ffff20; text-decoration: none;} /* profile */ .about-me-widget {display: none; text-align: center;} .about-me-widget .widget-header a {color: #08d7eb;} .about-me-widget .widget-header a:hover {color: #ffff20;} .about-me-widget dl, .about-me-widget dd, .about-me-widget dt {margin: 0px; padding: 0px; width: 100%;} .user-pic 444444 {border: 3px solid #ec0f85;} /* calendar */ .calendar-widget {} .calendar-widget table {width: 100%; text-align: center;} .calendar-widget p {margin: 5px 0px; padding: 0px; text-align: center;} .calendar-widget tr:first-child a {background: #ec0f85; border: 0px;} .calendar-widget td a {display: block; width: 100%; color: #ffff20; background: #ec0f85; border: 1px solid #ffff20;} /* link list */ .typelist-widget li.item {margin: 0px; padding: 0px 0px 0px 15px; background: url(http://i174.photobucket.com/albums/w97/purple-icons/0ljLayouts/04neon/04-neon-bullet.jpg) 0px 5px no-repeat transparent;} /* tags */ .categories-widget .widget-footer {padding: 20px 0px 0px 0px;} .categories-widget li.item {margin: 0px; padding: 0px 0px 0px 15px; background: url(http://i174.photobucket.com/albums/w97/purple-icons/0ljLayouts/04neon/04-neon-bullet.jpg) 0px 5px no-repeat transparent;} .categories-widget li.tag {display: inline; padding: 0px 1px; background: none; } /* post summary */ .archive-widget li.item {margin: 0px 0px 5px 0px; padding: 0px 0px 0px 15px; background: url(http://i174.photobucket.com/albums/w97/purple-icons/0ljLayouts/04neon/04-neon-bullet.jpg) 0px 5px no-repeat transparent;} .links-widget .widget-list .item { margin-bottom: .2em; border: none !important; } .widget-list .tagcloud { list-style: none !important; display: inline !important; color: #cccccc !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; color: #cccccc; font-size: 2em; font-weight: normal; font-style: italic; text-align: center;} .comment {margin-bottom: 1.8em; padding: 0.9em 0; border-bottom: 1px solid #ed0f86;} .comment-odd {} .comment-even {background: #52555a;} .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 #0dd4f1;} table.yeartable td.yearday {background-color: #ed0f86; 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 ---------- */ /* ----------------------------------------------------------------------- */ You're now finished! If you have any questions regarding this layout, using the layout or customizing it, please leave a comment on this post and I'll see if I can help you.

layouts-imageless, layouts, layouts-styles-mixit

Previous post Next post
Up