055 - Layout 32 [Flexible Squares: Louder At The Rainbow]

[yam]

So, I went to the most amazing show in the world last week: Paul McCartney visited Mexico and it was GREAT. Last month, when I knew about this, I visited PaulMcCartney.com and I decided to make a layout based on the layout of his webpage.
Obviously, it ended as something completely different. But I hope you like it. :D



Live preview | Image Preview


/********************DO NOT REMOVE THIS******************** Layout 032 [Louder At The Rainbow] by Yam @ MentaHelada (mentahelada.livejournal.com) ---CREDITS: Header: http://missesglass.deviantart.com/ Icons: http://splashyfish.com/icons/ Currents' icons: http://damnicons.livejournal.com/ *************************************************************/ /*****BASICS*****/ * {margin: 0; padding: 0;} i, em{font-style:italic;} .ippu {font-size:12px;} a{outline:none;} a img{border:0;} p, td {font-size:inherit;} code, kbd, pre, tt {font-family:monospace;} ::-moz-selection {background:#dfdfdf;color:#424242;} b, strong{color:#000;font-weight:900;} a, a:link, a:visited{ color:#000; font-weight:900; text-decoration:underline; text-transform:none; } a:hover { border-bottom:0; color:#e04b29; font-weight:900; text-decoration:none; } blockquote { background:#dfdfdf; border-left:15px solid #0e0e0e; margin:10px auto; padding:15px 15px 15px 7px; width:70%; font-style:italic; text-align:left; } #lj_controlstrip {background:#0e0e0e!important; border-bottom:1px solid #0e0e0e; padding:2px; color:#f4f4f4!important;} #lj_controlstrip a{color:#dfdfdf; text-decoration:none; text-transform:none;} #lj_controlstrip a b{color:#dfdfdf; text-decoration:none;text-transform:none;} #lj_controlstrip a:hover{color:#e04b29; text-decoration:none;} #lj_controlstrip_statustext{color:#dfdfdf; font-weight:100;text-transform:none;} #lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search{border:0;} /*****LAYOUT*****/ body { background:#eee; color:#424242; font-family:Calibri, Arial, Helvetica, sans-serif; font-size:100%; line-height:104%; } #content-outer{ background:transparent url(http://www.mentahelada.net/lj-layouts/layout032/header.png) top left repeat-x; width:100%; position:absolute; } #content { background:transparent; margin:160px auto 0; width:960px; } #header { background:transparent; float:left; padding:0 0 20px; width:180px; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.5em; font-weight:100; text-align:left; } #sidebar { background:transparent; float:right; /*padding:0 10px;*/ width:180px; font-family:Georgia, "Times New Roman", Times, serif; font-size:0.75em/*12px*/; text-align:left; } #maincontent { background:transparent; margin:0 200px 0 200px; font-size:0.875em/*14px*/; } #footer { background:transparent; font-size:0.75em; text-align:center; } /*****HEADER*****/ ul.navheader li{list-style:none;} #header li.view { background:#0e0e0e; display:block; margin:3px 0; padding:3px 5px; color:#f4f4f4; font-style:italic; letter-spacing:-0.03em; text-decoration:none; } #header a, #header a:link, #header a:visited { background:transparent; display:block; margin:3px 0; padding:3px 5px; color:#0e0e0e; font-weight:100; letter-spacing:-0.03em; text-decoration:none; text-shadow:#d2d2d2 1px 1px 0; } #header a:hover { background:#0e0e0e; color:#f4f4f4; font-style:italic; text-decoration:none; text-shadow:#0e0e0e 1px 1px 0; } .title, .subtitle {display:none;} /*****SIDEBAR******/ div#sidebar a, div#sidebar a:link, div#sidebar a:visited { color:#000; font-weight:normal; text-decoration:underline; text-transform:none; } div#sidebar a:hover { background:transparent; color:#424242; text-decoration:none; } .defaultuserpic { background:transparent; margin:auto; padding:10px; text-align:center; } .defaultuserpic img {border:0;} .defaultuserpic a{border-bottom:0;} li.sbartitle { background:transparent; border-bottom:1px dotted #0e0e0e; list-style:none; padding:10px 0 7px; color:#0e0e0e; font-size:2em; text-align:left; text-transform:normal; font-weight:normal; letter-spacing:-0.03em; text-decoration:none; text-shadow:#d2d2d2 1px 1px 0; } .sbarbody2, .sbarbody {background:transparent;padding:3px 0;} ul.sbarlist {list-style:none;} li.sbaritem { background:transparent; border-bottom:1px dotted #a5a5a5; font-size:1.5em; font-weight:normal; text-align:left; text-decoration:none; text-transform:none; } #sidebar_linklist li.sbaritem a, #sidebar_tags li.sbaritem a{display:block;text-decoration:none!important;padding:3px 0;} #sidebar_linklist li.sbaritem a:hover, #sidebar_tags li.sbaritem a:hover{ background:#0e0e0e; color:#f4f4f4; font-style:italic; text-decoration:none; text-shadow:#0e0e0e 1px 1px 0; } #sidebar_linklist li.sbaritem:hover, #sidebar_tags li.sbaritem:hover{background:#0e0e0e;border-bottom:1px solid #0e0e0e;} #sidebar_summary li.sbaritem { background:transparent; padding:2px 0; font-size:1em!important; font-weight:normal; text-align:left; text-decoration:none; text-transform:none; } #sidebar_summary li.sbaritem a{text-decoration:none!important;color:#424242!important;} #sidebar_summary li.sbaritem a:hover{ color:#000!important; font-weight:normal!important; text-decoration:none; } #sidebar_summary li.sbaritem:hover{ display:block; background:#e8e8e8; border-bottom:1px solid #e8e8e8; } table.calendar { background:transparent; padding:0; margin:auto; width:90%; } .sbarcalendar { background:#dfdfdf; border:1px solid #dfdfdf; font-size:1em/*12px*/; padding:2px; text-align:center; } .sbarcalendarposts { background:#0e0e0e; border:1px solid #0e0e0e; font-size:1em/*12px*/; padding:2px; text-align:center; } .sbarcalendarposts a, .sbarcalendarposts a:link, .sbarcalendarposts a:visited{color:#f9f9f9!important;} .sbarcalendarposts a:hover{color:#f4f4f4!important;text-decoration: underline!important;font-weight:normal!important;} .sbarcalendarposts:hover{background:#424242;border:1px solid #424242;} /*****FOOTER*****/ ul.navfooter {padding:10px 0;} ul.navfooter li { display:inline; list-style:none; } #footer li.viewing { background:transparent; color:#0e0e0e; text-transform:uppercase; text-decoration:none; padding:5px; } #footer a, #footer a:link, #footer a:visited { background:#0e0e0e; text-transform:uppercase; font-weight:normal; margin:0; padding:5px; text-decoration:none; color:#f4f4f4; } #footer a:hover { background:transparent; border-bottom:0; color:#e04b29; } /*****ENTRY*****/ .subcontent { background:transparent; overflow:auto; margin-bottom:15px; padding:0 5px; } .entry{text-align:justify;} .entry_text{min-height:100px;} .entry ul li {list-style:circle; margin-left:40px;padding-left:0;} .entry ol li {list-style:decimal-leading-zero;margin-left:40px;padding-left:0;} /*****USERPICS*****/ .userpic, .userpicfriends { background:transparent!important; float:left; margin:0 10px 10px 0; position:relative; font-size:0.7142em; text-align:left; text-transform:lowercase; } .userpic img, .userpicfriends img {width:80px;height:auto;} .userpicfriends font{ color:#424242; font-size:1em/*10px*/; text-align:left; text-transform:lowercase; } .userpic a, .userpic a:link, .userpic a:visited, .userpicfriends a, .userpicfriends a:link, .userpicfriends a:visited, userpicfriends font{ background:transparent; border-bottom:0; color:#424242!important; text-decoration: none; text-transform:lowercase; } .userpicfriends a:hover, userpicfriends a:hover font { background:transparent; color:#000!important; text-decoration:underline; text-transform:lowercase; } /*****DATE, SUBJECT, CURRENTS GENERAL, COMMENTS, TAGS*****/ .datesubject {background:transparent!important;margin:0 0 10px 90px;letter-spacing:-0.03em;} .date{ display:block; width:120px; color:#424242; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.2em; text-align:left; text-transform:lowercase; text-shadow:#d2d2d2 1px 1px 0; margin:0; } .subject { margin-top:5px; color:#0e0e0e; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.7142em; font-weight:normal; line-height:100%; text-align:left; text-transform:none; text-shadow:#d2d2d2 1px 1px 0; } .subject a, .subject a:link, .subject a:visited { color:#0e0e0e; font-weight:normal; text-align:left; text-decoration:none; text-transform:none; text-shadow:#d2d2d2 1px 1px 0; } .subject a:hover {color:#e04b29;} .ljtags, .currents { border-top:1px dotted #a5a5a5; margin-top:10px; color:#424242; font-size:0.9166em; font-weight:normal; text-align:left; } .currents strong, .ljtags strong {color:#424242;font-weight:normal;} .ljtags a, .ljtags a:link, .ljtags a:visited, .currents a, .currents a:link, .currents a:visited { background:transparent; border-bottom:0; color:#0e0e0e; font-weight:900; text-decoration:none; } .ljtags a:hover, .currents a:hover {color:#e04b29;text-decoration:none;} .comments { background:#dfdfdf; margin-top:10px; padding:5px; color:#dfdfdf; font-size:0.83em; font-weight:100; text-align:center; } .comments a, .comments a:link, .comments a:visited { background:transparent; border-bottom:0; padding:0 10px; color:#0e0e0e; font-weight:900; text-decoration:none; text-transform:uppercase; } .comments a:hover {color:#e04b29;} .currentlocation { background:url(http://www.mentahelada.net/lj-layouts/layout032/meta-location.gif) left no-repeat; padding-left:14px!important; } .currentmood { background:url(http://www.mentahelada.net/lj-layouts/layout032/meta-mood.gif) left no-repeat; padding-left:14px!important; } .currentmusic { background:url(http://www.mentahelada.net/lj-layouts/layout032/meta-music.gif) left no-repeat; padding-left:14px!important; } .ljtags { background:url(http://www.mentahelada.net/lj-layouts/layout032/meta-tags.gif) left no-repeat; padding-left:14px!important; } /*****TAGS PAGE*****/ h2{ background:transparent; border-bottom:1px dotted #a5a5a5; list-style:none; margin:15px 0 0; padding:20px 10px 2px; color:#0e0e0e; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.7em; text-align:left; text-transform:normal; font-weight:normal; letter-spacing:-0.03em; text-shadow:#d2d2d2 1px 1px 0; } .ljtaglist { list-style:none;width:100%;} .ljtaglist li { background:transparent; border-bottom:1px dotted #dfdfdf; color:#424242; padding:8px; } .ljtaglist a, .ljtaglist a:link, .ljtaglist a:visited { border-bottom:0; color:#424242; text-decoration:none; text-transform:none; } .ljtaglist a:hover {color:#e04b29;text-decoration:none;} .ljtaglist li:hover {background:#e8e8e8;border-bottom:1px solid #e8e8e8;} /*****CALENDAR PAGE*****/ ul.year{ background:transparent; list-style:none; margin: 0 auto; padding:15px; text-align:center; } ul.year a, ul.year a:link, ul.year a:visited { padding:5px; color:#0e0e0e; text-decoration:none; text-transform:none; } ul.year a:hover {background:#e04b29;color:#f9f9f9;} ul.year li {display:inline;color:#424242;} ul.year li.active { background:#0e0e0e; padding:5px; color:#f9f9f9; font-size:1.1538em; font-weight:normal; } table.yeartable { background:transparent; margin-left:auto; margin-right:auto; width:100%; padding:20px; } table.yeartable td.yeardate, table.yeartable td.yearday { border:1px solid #dfdfdf; background:#e8e8e8; height:4em; padding:2px; } table.yeartable td.yearday { background:#0e0e0e; border:1px solid #0e0e0e; color:#f4f4f4; text-align:center; } td.yearmonth {color:#0e0e0e;} .yearmonth a, .yearmonth a:link, .yearmonth a:visited { background:transparent; border-bottom:0; margin-bottom:2px; padding:3px; color:#0e0e0e; text-decoration:underline; text-transform:none; } .yearmonth a:hover {color:#e04b29;} table.yeartable td.yeardate a, table.yeartable td.yeardate a:link, table.yeartable td.yeardate a:visited { background:transparent; border-bottom:0; display:block; padding:5px; color:#e04b29; font-size:1.2em; text-decoration:underline; text-transform:none; } table.yeartable td.yeardate a:hover { background:transparent; color:#424242; } .lj-view-month #maincontent{background:#eee;} .lj-view-month #maincontent .subcontent{background-image:none;} .lj-view-month #maincontent .subcontent form center a{border-bottom:0;} /*****CLEARS, SKIPLINKS*****/ .clear{height:0;background:transparent;} .clearfoot {clear: both;height:0;background:transparent;} .separator {height:0;background:transparent;} .skiplinks { background:transparent; border:0; margin:auto; padding:10px; color:#0e0e0e; font-size:0.9166em; text-transform:none; text-align:center; } .skiplinks a, .skiplinks a:link, .skiplinks a:visited { padding:5px; color:#0e0e0e; text-decoration:none; text-transform:none; }.skiplinks a:hover {color:#f4f4f4;background:#0e0e0e;} /*****COMMENTS VIEW*****/ .box { background:#eee; padding:5px; font-size:1em; clear:left; color:#424242; } .commentbox, .commentboxpartial { background:transparent; padding:10px 0; margin:5px 0; overflow:auto; } .datesubjectcomment { background:#dfdfdf; padding:5px; } .userpiccomment {float:left;margin:0 10px 10px 0;position:relative;width:80px;height:auto;} input, textarea {background:#fff;border:1px solid #dfdfdf;color:#424242;} textarea.textbox {width:100%!important;} .replytosubject {font-weight:normal;} .reply{ background:transparent; margin:5px; padding:5px; position:relative; color:#424242; text-align:left; } .commentreply { position:relative; padding:5px; color:#424242; } .datesubjectcomment a:link, .datesubjectcomment a:visited {color:#e04b29;text-decoration:none;} .datesubjectcomment a:hover {color:#e04b29;text-decoration:underline;} .commentinfo {background:transparent;margin-top:10px;width:100%;} #qrform table { border:1px solid #eee!important; background:transparent; padding:10px; height:auto; } #submitpost, #submitmoreopts{ background:#0e0e0e; color:#f4f4f4; padding:2px; } /*****LJ-USER / COMMUNITY / PROTECTED ICONS*****/ .ljuser img {width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout032/icon-user.png) no-repeat; padding: 16px 16px 0 0!important;} .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout032/icon-user.png) no-repeat; padding: 16px 16px 0 0!important;} .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout032/icon-group.png) no-repeat; padding: 16px 16px 0 0!important;} .entry img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout032/icon-lock.png) no-repeat; padding: 16px 16px 0 0!important;} #sidebar_summary img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout032/icon-lock.png) no-repeat; padding: 16px 16px 0 0!important;} #sidebar_summary img[src="http://l-stat.livejournal.com/img/icon_private.gif"] {width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout032/icon-lock.png) no-repeat; padding: 16px 16px 0 0!important;} .subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout032/icon-lock.png) no-repeat; padding: 16px 16px 0 0!important;} .entry img[src="http://l-stat.livejournal.com/img/icon_private.gif"] {width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout032/icon-lock.png) no-repeat; padding: 16px 16px 0 0!important;} #lj_controlstrip .ljuser img { width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout032/icon-user.png) no-repeat; padding: 16px 16px 0 0!important;} #lj_controlstrip .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout032/icon-user.png) no-repeat; padding: 16px 16px 0 0!important;} #lj_controlstrip .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout032/icon-group.png) no-repeat; padding: 16px 16px 0 0!important;} /*****CONTEXTUAL POPUP****/ div.ContextualPopup img {background:#dfdfdf; padding:15px;} div.ContextualPopup div.Inner {background:#fff!important; padding:5px;color:#424242!important; font-size:1em; font-weight:100!important;border:1px solid #dfdfdf;} div.ContextualPopup .Content {font-weight:100!important; margin-right:50px;} div.ContextualPopup .Relation {font-size:1.4em; font-weight:100!important;color:#0e0e0e!important; font-family:Georgia, "Times New Roman", Times, serif;} div.ContextualPopup .Content .OnlineStatus {font-weight:100!important;} div.ContextualPopup .Userpic {font-weight:100!important;} div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {color:#0e0e0e!important;font-weight:900; text-decoration:none!important; text-transform:none;} div.ContextualPopup div.Inner a:hover{color:#e04b29!important;font-weight:900; text-decoration:none!important;}
LAYOUT INFO:

• Style: Flexible Squares
• Account level: Basic, Paid, Plus
• Tested on: IE (7 and higher), Firefox, Safari and Chrome.

IMAGES:
Please upload the images to your own server. Thanks.

Header: http://www.mentahelada.net/lj-layouts/layout032/header.png (by Missesglass)

User, community, locked/protected icons:


(by Splashyfish)
Metadata and tags icons:




(by Damnicons)

Pride & Prejudice icon in the live preview made by me. Find it here.
BASIC INSTRUCTIONS:

1. Choose a Flexible Squares layout
2. Go to Customize Journal Theme
3. Select NO in the dropdowns
4. Leave "Custom External Stylesheet" empty
5. Paste the CSS that I give you in the "Custom Stylesheet" box
6. Save.

• Make changes if you know how (but still credit me!)
• Ask if you have doubts, I'll try to answer asap

EASY RULES:

• Credit mentahelada if you use. Please don't credit mintyapple, please change the credit you have in your userinfo. Thanks!
• Comment if you like / if you take

• Affiliate?
• Resources
• Friend mentahelada for updates!

@ mintyapple