Finally!
[
Live preview |
Screenshot ]
Overview
Name
Green Indicates Fluorescense
Description
Grid-based layout with a linkbar at the top instead of a regular sidebar.
S2 Style
Mixit
Account Types
Basic, Plus, Paid
Browser Compatibility
Firefox 3, Firefox 2, Safari 4, Chrome, Opera 9 on Windows XP. Looks a tiny bit different on IE7 and IE8.
According to Browsershots.com everything is alright on Mac and Linux
Screen resolutions
1024x768 or bigger
Hidden elements
Header description, profile widget, calendar widget, custom text widget, page summary widget, syndicate widget
Type
Helvetica (Arial) and Georgia (Times New roman) as default, Trebuchet MS,
Hand of Sean,
Just Another Font, Courier New,
Berlin Sans FB.
Notes
Made for the
grrliz's
Non-Competitive Layout Challenge at
thefulcrum, using the following terms:
- Use an S2 Style other than Flexible Squares or Smooth Sailing.
- Define font sizes in percentages or ems instead of pixels and points.
- Use a background image in an area other than the overall page background.
- Have elements of your layout break outside the box.
- Use the grid-based approach.
- Use a quotation in a creative way by playing with the meaning of the words and how they relate to typography.
I didn't finish it in time.
Instructions
1. Go to Select Style
Customize
2. Select a New Theme
Choose one of the Mixit themes (it doesn't matter which one) and hit "apply theme".
3. Choose a Page Setup
At the bottom of the page, choose "2 Column (sidebar on left)" or "2 Column (sidebar on right)", hit the "Aply Layout" button, then "Customize Selected Theme".
4. Use the stylesheet
Hit "Custom CSS" from the menu on the left and do the following:
- Use layout's "Base Weblog" stylesheet: choose "No" from the menu.
- Custom external stylesheet URL: leave the field blank.
- Custom stylesheet: paste the stylesheet contents in this box.
Hit "save changes".
5. Things you may need to know
- The links on the topbar are from the tags widget and links widget (via the link list feature).
-
- If the content in the topbar exceeds the 140px high limit I established, the overflow will be handled with a vertical scroll.
- All the images are in PNG format but not all of them have transparency, if you change the bg color you'll probably have to do some changes.
The template
The code
/* -----------------------------------------------
Green Indicates Flourescense
Author: Edith Quijano
S2 Style: Mixit
Available at
http://edah.livejournal.com
----------------------------------------------- */
/* General
---------------------------------------*/
* {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline;}
body {
padding: 0;
background: #EDE9DD;
color: #343434;
font: .8em/1.41em Helvetica, Arial, 'Liberation Sans', sans-serif;
}
hr {
border: 0;
border-top-width: 1px;
clear: both;
height: 0;
}
h3 {
font: bold 1.3em Helvetica, Arial, sans-serif;
color: #000;
padding: 3px 3px 9px;
margin-top: 10px;
border-top: 1px dashed #C0BEBA;
}
h4 {
font-size: 1.2em;
color: #000;
padding: 3px 3px 9px;
border-top: 1px dashed #C0BEBA;
}
h5{
font-size: 1.2em;
font-weight: normal;
color: #000;
padding: 3px 3px 9px;
border-top: 1px dashed #C0BEBA;
}
h6 {
font: normal normal .85em Helvetica, Arial, sans-serif;
letter-spacing: 1px;
color: #000;
padding: 3px 3px 9px;
border-top: 1px dashed #C0BEBA;
text-transform: uppercase;
}
ol {
list-style: decimal;
}
ul {
list-style: square;
}
br {
margin: 0px !important;
padding: 0px !important;
height: 0px !important;
line-height: 18px !important;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
blockquote {
border-top: 1px dashed #C0BEBA;
border-bottom: 1px dashed #C0BEBA;
margin: 20px 0;
padding: 10px 40px;
width: 83% !important;
font: italic 1.75em/24px 'Times New Roman', Times, Georgia, serif;
letter-spacing: -1px;
}
cite {
font-weight: bold;
float: right;
font-size: 12px; margin-top: 10px;
}
a {
color: #615F5A;
text-decoration: none;
outline: none;
}
a:hover {
color: #000;
}
small {
font-size: .85em;
}
i, em {
color: #4E3F30;
}
/* Page Structure
---------------------------------------*/
#page, #header, #content, #footer {
position: relative;
top: 0;
}
#page-inner, #header-inner, #content-inner, #alpha-inner, #beta-inner, #gamma-inner, #footer-inner {
position: static;
}
#content-inner, #alpha-inner, #beta-inner, #gamma-inner, #footer-inner {
overflow: hidden;
}
#container {
width: 960px;
margin: 0 auto;
padding: 0;
}
#page {
margin: 0 auto;
padding: 0;
width: 960px;
background: url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_page.png) top left no-repeat;
}
#alpha {
margin-top: 200px;
width: 960px;
clear: both;
padding: 9px 0 0;
background: url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_content.png) 17% 0% no-repeat;
}
#beta {
position: absolute;
top: 0px;
width: 960px;
height: 140px;
margin: 16px 0;
padding: 26px 0 0;
overflow-y: auto;
background: url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_links.png) 15% 0% no-repeat;
}
#header {
height: 150px;
}
#footer {
clear: both;
margin: -1px 0 0 0 !important;
background: url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_end.png) bottom right no-repeat;
}
#footer-inner {
position: relative;
top: -60px;
left: 0px;
width: 284px;
height: 195px;
background: url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_quote.png) 0px 0px no-repeat;
}
/* Header
---------------------------------------*/
#header-content {
width: 100%;
}
#header-text ul.nav {
list-style-type: none;
position: relative;
right: -20px;
}
#header-text ul.nav li {
float: right;
display: inline;
margin: 0 0 5px;
}
#header-text ul.nav li a {
display: block;
padding: 20px 10px 10px;
font: italic 120% Georgia, Times New Roman, serif;
border-bottom: 1px dashed #C0BEBA;
}
#header-text ul.nav li.current a,
#header-text ul.nav li a:hover {
border-bottom: 1px dashed #000;
}
#header-name {
clear: both;
width: auto;
height: 80px;
margin: 0 10px 0 50px;
padding: 15px 0 0 20px;
background: url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_name.png) top left no-repeat;
}
#header-name a {
color: #493e32;
font: 500% Trebuchet MS, Arial, Helvetica, sans-serif;
letter-spacing: -2px;
}
#header-name a:hover {
color: #000;
}
#header-description {
display: none;
}
/* Entries
----------------------------- */
/* STRUCTURE */
.asset {
position: relative;
width: 940px;
background: url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_entrytop.png) top left repeat-x;
}
.asset-header {
width: 280px;
float: left;
margin: 0 10px;
background: url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_subject.png) top left no-repeat;
}
.asset-body {
width: 520px;
float: left;
margin: 65px 10px 25px;
}
.asset-footer {
clear: both;
}
/*ENTRY SUBJECT */
h2.page-header2 {
padding: 0 0 8px;
margin-top: 65px;
color: #444;
font: 3em/1em Helvetica, Arial, sans-serif;
letter-spacing: -2px;
}
h2.page-header2 a, .lj-view-entry h2.page-header2 a, h2.comments-header, .lj-view-tags .page-header2 {
margin: 0;
padding: 0;
color: #444 !important;
}
h2.page-header2 a:hover {
color: #000 !important;
}
/* DATE */
div.asset-header ul.asset-meta-list {
width: 283px !important;
height: auto !important;
margin: 0px !important;
padding: 17px 0 20px;
background: transparent url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_date.png) top right no-repeat!important;
border: 0 !important;
text-align: left;
font: 1.3em Monospace, sans-serif;
letter-spacing: -1px;
color: #555;
}
div.asset-header ul.asset-meta-list .item {
margin: 0px !important;
}
/* GENERAL */
.asset-body a {
background: url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_link.png) bottom repeat-x;
border-bottom: 1px solid #ccc;
padding: 1px 0;
color: #000;
}
.asset-body a:hover {
border-bottom: 1px solid #000;
}
.asset-body ol,
.asset-body ul {
margin: 0 0 10px;
}
.asset-body ol li,
.asset-body ul li {
margin: 0 0 5px 30px;
padding: 0;
}
/* USERPIC */
.user-icon {
float: right;
margin: 0 -130px 10px 0;
padding: 0 !important;
width: 120px;
height: 120px;
background: transparent url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_icon.png) top center no-repeat !important;
}
.user-icon img {
margin: 10px;
}
.user-icon span {
background-color: transparent !important;
}
.user-icon span a,.user-icon span a img {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
/* MOOD/MUSIC/LOCATION */
.lj-currents {
width: 640px;
margin: 0 0 0 300px;
padding: 1px 0;
clear: both;
line-height: 1.2em;
color: #3A3025;
border-left: 1px dashed #C0BEBA;
}
.lj-currents span.entryMetadata-label {
padding: 0 5px 0 10px;
line-height: 1.2em;
font: italic 0.9em Georgia, Times New Roman, serif;
color: #000;
}
.lj-currents ul {
padding: 0 0 3px !important;
}
.lj-currents ul li {
display: block;
}
/* TAGS */
.asset-tags {
width: 680px;
height: 22px;
margin: 0 0 0 180px;
padding: 3px 0 0 120px;
clear: both;
line-height: 1.2em;
color: #3A3025;
background: url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_metadata.png) top left no-repeat;
}
.asset-tags-header {
float: left;
display: inline;
line-height: 1.2em;
font: italic 0.9em Georgia, Times New Roman, serif;
color: #000;
border-left: 1px dashed #C0BEBA;
border-top: 0;
margin: 0;
padding: 0 0 0 10px;
}
.asset-tags-list {
list-style-type: none;
}
.asset-tags-list li {
display: inline;
margin: 0 0 0 4px !important;
}
.asset-tags-list a {
white-space: normal !important;
color: #4E3F30;
font-weight: bold;
text-decoration: underline;
text-transform: capitalize;
}
.asset-tags-list a:hover {
color: #000;
text-decoration: none;
}
/* COMMENTS BAR */
.asset-meta-list {
width: 650px;
height: 32px;
margin: 0 0 10px 300px;
padding: 0 0 0 10px;
border-top: 1px dashed #C0BEBA;
clear: both;
}
ul.asset-meta-list .item {
display: inline;
margin: 0px auto;
}
li.asset-meta-comments a {
color: #8eb700;
display: block;
float: left;
margin: 7px 11px 11px 0;
font: bold 1em Helvetica, Arial, sans-serif;
line-height: 1em;
}
li.asset-meta-comments a:hover {
color: #000;
}
/* Sidebar
----------------------------- */
.widget {
margin: 0 0 0 130px;
clear: both;
border-top: 1px dashed #C0BEBA;
text-transform: capitalize;
}
.widget-header {
float: left;
margin: 0 10px 10px 0 !important;
padding: 3px 0 0 10px;
width: 100px;
font: italic 0.9em Georgia, Times New Roman, serif;
line-height: 1.6em;
letter-spacing: 1px;
border: 0;
}
.widget-content {
float: left;
display: inline;
width: 650px;
margin: 0 0 10px !important;
padding: 3px 0 5px;
}
.widget-footer {
display: none;
}
.widget ul {
list-style-type: none;
display: inline;
float: left;
}
.widget ul li {
display: inline;
padding: 0 2px;
}
.widget ul li a {
font-weight: bold;
font-size: 0.9em !important;
line-height: 1.6em;
color: #4E3F30;
}
.widget ul li a:hover {
color: #000;
}
.archive-widget,
.about-me-widget,
.calendar-widget,
.syndicate-widget,
.powered-widget,
.designed-widget {
display: none;
}
/* Previous/Next
---------------------------------------*/
.stream-header {
display: none;
}
.stream-footer {
clear: both;
display: block;
padding: 5px 0 0;
margin: 20px 0 0 310px;
text-align: left;
text-transform: lowercase;
font: 1.5em/1em Arial, sans-serif;
background: url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_move.png) 120px 0px no-repeat;
}
.prevnext {
padding: 30px 0 0;
display: block;
background: url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_entrytop.png) top left repeat-x;
}
/* Entry Page
---------------------------------------*/
.lj-view-entry .prevnext, .lj-view-entry #footer-inner, .lj-view-reply #footer-inner {
display: none;
}
.lj-view-entry #footer, .lj-view-reply #footer {
height: 123px;
}
.lj-view-entry .comments-header {
width: 280px;
padding: 15px 0;
background: transparent url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_date.png) bottom right no-repeat!important;
}
.lj-view-entry .comments-nav {
text-align: left;
font: 1em Georgia, Times New Roman, serif;
margin: 5px 0 15px;
}
.lj-view-entry #comments {
margin-right: 130px;
margin-left: 10px;
}
.comment {
text-align: right;
min-height: 130px;
margin-bottom: 3em;
padding: 0;
}
.comment-subject {
font-weight: bold;
font-size: 1.3em;
text-align: left;
margin-left: 290px;
}
.comment-date {
padding: 5px 0 10px;
margin: 0 0 10px;
font: 1em Monospace, sans-serif;
background: transparent url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_date.png) bottom right no-repeat;
}
.comment-body {
padding: 10px;
margin-left: 290px;
text-align: left;
border-bottom: 1px dashed #C0BEBA;
}
.comment-even .comment-body {
background: #e6e2d5;
}
.comment-links {
margin: 5px 0;
padding: 5px 0;
font-weight: normal;
text-align: right;
font-size: 1em;
clear: both;
}
.comment-link a {
color: #8eb700;
font: bold 1em Helvetica, Arial, sans-serif;
}
.comment-link a:hover {
color: #000;
}
#comment-form {
width: 500px;
}
#ljqrtentrycomment {
margin-top: 7px;
width: 90%;
padding-top: 5px;
padding-bottom: 10px;
}
.quickreply {
margin-top: 1em;
width: 90% !important;
padding-top: 5px;
padding-bottom: 10px;
}
#qrformdiv {
padding: 10px;
}
#qrformdiv table {
margin-top: 20px;
border: 0px !important;
}
#qrformdiv table input, #qrformdiv table select {
height: 20px;
margin: 3px 5px;
}
#qrformdiv table textarea {
margin: 3px 5px;
}
#qrformdiv #submitpost, #qrformdiv #submitmoreopts {
background: #C0BEBA;
font: italic 1.05em Georgia, Times New Roman, serif;
width: 150px;
padding: 2px 0;
}
#qrformdiv #submitpost:hover, #qrformdiv #submitmoreopts:hover, #postform input {
font-weight: bold;
}
#qrformdiv #do_spellcheck {
margin: 0 !important;
}
/* Archive
---------------------------------------*/
ul.year {
margin-left: 130px;
padding: 0px;
font: italic 1.2em Georgia, Times New Roman, serif;
}
ul.year li {
display: inline;
padding: 0px 5px;
}
table.yeartable {
width: 100%;
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
padding: 5px;
border: 1px solid #E1DDD1;
}
table.yeartable td.yearday {
background-color: #E1DDD1;
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 .asset-content, .lj-view-month #alpha .asset-content {
margin-left: 130px;
}
.lj-view-archive #alpha .asset, .lj-view-month #alpha .asset {
background: none !important;
}
.lj-view-archive #footer-inner, .lj-view-month #footer-inner, .lj-view-tags #footer-inner {
display: none;
}
.lj-view-archive #footer, .lj-view-month #footer {
height: 123px;
}
.lj-view-archive .asset-header, .lj-view-month .asset-header {
margin: 0px;
border: 0px;
padding: 0px;
}
.lj-view-archive .asset-body, .lj-view-month .asset-body {
margin: 0px;
border: 0px;
padding: 10px 0px;
}
.lj-view-month widget table {
margin: 0px !important;
}
/* Tags Page
---------------------------------------*/
.lj-view-tags #footer {
height: 123px;
}
.lj-view-tags #alpha-inner {
padding: 30px 0 0;
background: url(
http://img.photobucket.com/albums/v143/cursedmirror/Layouts/Green/green_entrytop.png) top left repeat-x;
}
.lj-view-tags #alpha h2{
margin-left: 130px;
}
.lj-view-tags #alpha ul {
font: 1em Georgia, Times New Roman, serif;
margin-left: 150px;
}
.lj-view-tags #alpha ul li {
padding: 2px 0px;
}
/* Sponsored Plus
---------------------------------------*/
#ad-5linkunit {
clear: both;
}
#ad-leaderboard {
margin-bottom: 10px;
}
/* Otros
---------------------------------------*/
.comment {height: 1%;}
/* 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%;
}
The images
13 images. Upload them to your own image host and change the URLs in the stylesheet.
A few tips on customization
Important
Credit
Please credit
edah so other people can use it too! :D
Further customization
You can change the layout all you want: images, colors, fonts, sizes, you name it. All I ask is that you credit me for the code, unless you make some serious changes to the structure, then you can consider me out of the picture. ;)
Questions & Problems
First, read ALL the information carefully and make sure that you followed instructions correctly. If you still have problems, ask here and I'll help if I can. If you're customizing the template, I probably won't answer.
The process and the layout: Ideas, issues, etc. etc.
Let's see...
- The final product is VERY different from my original idea.
- When I started with the design process my top priority was to use grids so I started to read about them. I didn't read much but I found out about the 960 Grid System and decided to use it. If you go to the site, you'll see a buch of awesome sites, one of those is Bryan Veloso's blog - I've been a huge fan of his since I can remember and I love his current layout, it's incredible, I know you'll agree with me on that. So, naturally, being as unoriginal as I am, I dedided to go with a similar structure.
- I chose Minimalism as the style from the beggining but I didn't like what I saw when I checked out the html structure, not only because the html structure was awful (one wonders what the fuck the style designers were thinking) but because it didn't go with the layout structure I had in my head. Fortunately, I've made 4 layouts with Expressive/Mixit (the only "official" layouts I've made with S2) and I knew it could be done with it.
- The structure was done without problem, the nightmare started right after I was done with the fourth challenge term. The reason was that I didn't like how the color combination turned out. I almost had an emotional breakdown :P, it was a real pain, I stayed blocked for two weeks or more.
On a side note - Everybody, take note please: Typography is the key, the answer to all your problems, the light at the end of the tunnel. Seriously, it is. It took me two years to understand it but it's true: What separates The Awesome Sites from all the others is the use of type, not the graphics, colours or animation effects, those are a plus, the core of a great site is the typography.
- When I gave up on the "color issue" and moved to the "typography" somehow the idea for a new theme came out of nowhere, I liked this idea of... I don't know how to explain it, personified notes? Something like that. The green came as some sort of marker, and the other 2 challenge terms were succesfully acomplished!
- Then RL happened and screwed everything up.
- Now, I don’t have a great grasp at the fundementals of typography but I really tried to go a litle bit further and took great care with the fonts, sizes, paddings, and everything.
- I like it. It's not OMG!AWESOME but it's "interesting", the content flows and I think that's one of the most important things in a good layout design. :D
- One of the key aspects is the metadata/linkbar area, I like how it emphazises the end of each entry.
- No background for the body tag! That's a first!
- Instead of making the header some sort of sidebar, I integrated the sidebar to the header! :P
- I took the quote from Happy Webbies. I love web designers! <3
