Layout: 'Uno"
'Uno'
*This is my very first layout. Please be gentle.*
LIVE VIEW || IMAGE VIEW
/* Uno Azul - mizra @ lomosnark mini icons by famfamfam shadow css by prix contextual pop-ups by enamors*/ body { background-color: #9dcfcf; background-image:url('http://i123.photobucket.com/albums/o310/Mizra1/layouts/73734db2.png'); background-repeat:repeat; text-align: right; color: #000000; font-family: "Georgia", Times New Roman, serif; font-size: 10px; margin: 20px 0 20px 0; } a, a:link, a:visited { color: #00adef; text-decoration: underline; } a:hover { color: #F21844; text-decoration: none; } blockquote { font-size: 10px; background-image:url('http://i123.photobucket.com/albums/o310/Mizra1/layouts/73734db2.png') ; background-repeat:repeat; padding: 5px; border:#1079A2 solid; border-width: 1px; font-family:Arial, "Verdana", sans-serif; font-style:italic; letter-spacing:1px; } code, kbd, pre, tt { font-family: monospace; } /*--------------------------------------------------------------------- General page alignment and width ------------------------------------------------------------------------*/ #content { width: 800px; margin-left: auto; margin-right: auto; background-color: #FFFFFF; border-width: 0px; border-style: solid; border-color: #9dcfcf; padding: 15px; } #maincontent { margin-top: 15px; font-family: "Verdana", sans-serif; font-size: 11px; background-color: #FFFFFF; /*#c2cde0;*/ color: #000000; border-style: solid; border-color: #1079A2; border-width: 0px; margin-right: 200px; text-align: left; } #sidebar { padding-top: 15px; margin-top: 15px; background-color: #FFFFFF; border-color: #1079A2; border-width: 0px; border-style: solid; font-size: 11px; font-family: "Verdana", sans-serif; color: #000000; width: 200px; float: right; text-align: left; } /*----------------------------------------------------------------------------- Header - you can add a header image with either #header or .headerimage --------------------------------------------------------------------------------*/ #header { width: 100%; padding: 10px 0px 20px 0px; margin: 0px; text-align: center; font-family: "Rockwell", Palatino Linotype, Book Antiqua, Palatino, serif; font-size: 11px; font-weight: bold; letter-spacing: 2px; border-style: solid; border-color: #1079A2; border-width: 0px; background-color: transparent; color: #000000; } .headerimage { /* for formatting header image */ } /*look and color of links (also partly for footer)*/ div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited { display: inline; margin: 10px 5px 0 5px; padding-bottom: 3px; font-family: rockwell, sans-serif; font-size: 36px; color: #00adef; font-weight: bold; letter-spacing: -3px; text-align: center; text-shadow: 1px 2px #222222; text-transform: lowercase; line-height: 24px; text-decoration: none; } div#header a:hover, div#footer a:hover { display: inline; margin: 10px 5px 0 5px; padding-bottom: 3px; font-family: rockwell, sans-serif; font-size: 36px; color: #F21844; font-weight: bold; letter-spacing: -3px; text-align: center; text-shadow: 1px 2px #222222; text-transform: lowercase; line-height: 24px; text-decoration: none; } /*title and subtitle*/ .title { display: none; } .subtitle{ display: none; } /*----------------------------------------------------------------------------- Header - top navigation --------------------------------------------------------------------------------*/ /* header -- links to views; title of journal; subtitle of journal */ ul.navheader { padding: 0px; margin: 0px; } ul.navheader a, ul.navheader a:link, ul.navheader a:visited{ display: inline;/* margin: 10px 5px 0 5px; padding-bottom: 3px; font-family: rockwell, sans-serif; font-size: 36px; color: #000000; font-weight: bold; letter-spacing: -3px; text-align: center; text-shadow: 1px 2px #222222; text-transform: lowercase; line-height: 24px; text-decoration: none;*/ } ul.navheader li { display: inline; margin: 10px 5px 0 5px; padding-bottom: 3px; font-family: rockwell, sans-serif; font-size: 36px; color: #000000; font-weight: bold; letter-spacing: -3px; text-align: center; text-shadow: 1px 2px #222222; text-transform: lowercase; line-height: 24px; text-decoration: none; } } /*----------------------------------------------------------------------------- Entry stuff ------------------------------------------------------------------------*/ .subcontent { background-color: #F6F6F6; border-width: 1px; border-color: #F6F6F6; border-style: solid; } .entry { margin: 0px 10px 10px 30px; padding: 10px; background-color: transparent; color: #000000; font-family: "Verdana", sans-serif; font-size: 11px; text-align: left; border-width: 0px; border-color: #F6F6F6; border-style: solid; } .userpic { position: relative; float: left; background-color: #1079A2; padding: 5px; margin: 10px; z-index: 15; border-width: 1px; border-color: #FFFFFF; border-style: solid; } .date { line-height: 200%; top: 5px; color: #1079A2; font-family: "Georgia", Times New Roman, serif; font-size: 11px; } .subject { font-weight: bold; padding: 10px 0 0 2px; color: #000000; font-family: "Georgia", Times New Roman, serif; font-size: 24px; } .subject a, .subject a:link, .subject a:visited { margin: 10px 5px 0 5px; padding: 10px; font-family: rockwell, sans-serif; font-size: 24px; color: #00adef; font-weight: bold; letter-spacing: -1px; text-align: center; text-shadow: 1px 2px #222222; text-transform: lowercase; line-height: 11px; text-decoration: none; } .subject a:hover { color: #F21844; } .datesubject { padding: 5px; } .entry ul li { padding-left: 5px; margin-left: 15px; } .entry ol li { padding-left: 5px; margin-left: 15px; } /*--------------------------------------------------------------------- Entry Stuff - Current Mood, Music and Location ------------------------------------------------------------------------*/ .currentmood, .currentmusic, .currentlocation { text-transform: lowercase; color: #1079A2; font-size: 7pt; font-family:Arial, "Verdana", sans-serif; line-height: 11pt; } .currentlocation { background: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/e190503f.gif) no-repeat center left; padding: 0 0 0 10px; } .currentmood { background: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/220769bc.gif) no-repeat center left; padding: 0 0 0 11px; } .currentmusic { background: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/b72b81e6.gif) no-repeat center left; padding: 0 0 0 11px; } .currents { padding: 0 0 3px 0; margin: 0 0 10px 0; } .currents a:link, .currents a:visited, .currents a:active { color: #00ADEF; } .currents a:hover { color: #00ADEF; border-bottom: 1px solid #EAEAEA; } .currents strong, .currentmood strong, .currentmusic strong { display: none; } .currentgroups {display: none;} .ljtags { margin: 0 0 10px 0; font: 1pt arial, sans-serif; color: #1079A2; text-transform: lowercase; text-align: justify; background: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/4b2408e1.gif) no-repeat center left; padding: 0 3px 0; position: relative; top: 10px; } .ljtags a:link, .ljtags a:visited, .ljtags a:active { color: #00ADEF; font-weight: normal; text-transform: lowercase; font-size: 7pt; padding: 0 0 0 3px; text-decoration: underline; } .ljtags a:hover { color: #F21844; text-decoration: none; font-weight: normal; } img.meta-mood-img { margin-right: 3px; } /*--------------------------------------------------------------------- Entry Stuff - Comments ------------------------------------------------------------------------*/ .comments { font-family: "Georgia", Times New Roman, serif; font-size: 11px; text-align: right; background-color: transparent; padding: 0px 5px 0px 5px; border-top: #1079A2 solid 2px; position: relative; top: 15px; } div.comments a, div.comments a:link, div.comments a:visited{ color: #00ADEF; font-weight: bold; } div.comments a:hover { color: #F21844; text-decoration: none; font-weight: bold; } /*--------------------------------------------------------------------- Entry Stuff - Separator ------------------------------------------------------------------------*/ .separator{ /* for formatting separators between entries */ height: 35px; } /*------------------------------------------------------------ Special friends page customization -------------------------------------------------------------------------------*/ .userpicfriends { position: relative; float: left; padding: 5px; margin: 10px; text-align: center; border-style: solid; border-width: 1px; border-color: #FFFFFF; font-family: "Georgia", Times New Roman, serif; font-color: #00ADEF !important; font-size: 11px; z-index: 15; color: transparent; text-decoration: none; background-image:url('http://i123.photobucket.com/albums/o310/Mizra1/layouts/73734db2.png'); background-color:#FFFFFF; } /*------------------------------------------------------------ Sidebar -------------------------------------------------------------------------------*/ .defaultuserpic { display:none; } .sbarheader { padding: 0px 5px 0px 5px; } .sbarbody { padding: 0px 5px 0px 5px; } .sbarbody2 { padding: 0 15px 0 15px; background-color: #FFF; border: 0px solid #1079A2; color: #000 !important; font-family: "Georgia", Times New Roman, serif; font-size: 10px; } div#sidebar a, div#sidebar a:link, div#sidebar a:visited{ color: #00ADEF; } div#sidebar a:hover { color: #F21844; text-decoration: none; } /*------------------------------------------------------------ Sidebar - Calendar -------------------------------------------------------------------------------*/ table.calendar { margin-right: auto; margin-left: auto; } .sbarcalendar { border-color: #1079A2; border-width: 0px; border-style: solid; text-align: center; font-family: "Georgia", Times New Roman, serif; font-size: 10px; } .sbarcalendarposts { border-color: #1079A2; border-width: 0px; border-style: solid; background-color: #FFF; text-align: center; font-family: "Georgia", Times New Roman, serif; font-size: 10px; } /*------------------------------------------------------------ Sidebar - link box contents and sidebar box titles -------------------------------------------------------------------------------*/ ul.sbarlist { padding-left: 0px; margin-left: 0px; list-style: none; font-family: "Georgia", Times New Roman, serif; } li.sbaritem { padding-left: 15px; list-style: none; font-family: "Georgia", Times New Roman, serif; } li.sbartitle { padding-left: 15px; list-style: none; border-style: solid; background-image:url('http://i123.photobucket.com/albums/o310/Mizra1/layouts/73734db2.png') ; background-repeat:repeat; padding: 5px; border:#1079A2 solid; border-width: 1px; color: #000; font-family: "Georgia", Times New Roman, serif; margin-bottom: 10px; margin-top: 10px; font-size: 10px; font-style:italic; letter-spacing:1px; } /*---------------------------------------------------- footer ----------------------------------------------------------------*/ #footer { width: 100%; text-align: center; display: inline; margin: 10px 5px 0 5px; padding-bottom: 3px; font-family: rockwell, sans-serif; font-size: 16px; color: #000000; font-weight: bold; letter-spacing: -1px; text-align: center; text-transform: lowercase; line-height: 12px; text-decoration: none; z-index: 100; clear: both; } ul.navfooter{ padding: 0px; margin: 0px; } ul.navfooter li { display: inline; margin: 0 5px 0 5px; } .clearfoot { clear: both; } li.viewing { width: 100%; text-align: center; display: inline; margin: 10px 5px 0 5px; padding-bottom: 3px; font-family: rockwell, sans-serif; font-size: 16px; color: #000000; font-weight: bold; letter-spacing: -1px; text-align: center; text-transform: lowercase; line-height: 12px; text-decoration: none; } /*---------------------------------------------------- Archive Pages ----------------------------------------------------------------*/ ul.year { text-align: center; padding-bottom: 40px; font-weight: bold; font-size:12px; } ul.year li { display: inline; } table.yeartable { margin-left: auto; margin-right: auto; } table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 0px; border-style: solid; border-color: #1079A2; font-weight:bold; } table.yeartable td.yearday { background-color: #FFF; text-align: center; font-weight:bold; } td.yearmonth { border-bottom:thin solid #1079A2; font-weight:bold; } /*---------------------------------------------------- Comments pages ----------------------------------------------------------------*/ .datesubjectcomment { background-color: #FFFFFF; padding: 5px; margin-top: 20px; } .userpiccomment { position: relative; border-width: 0px; border-style: solid; background-image:url('http://i123.photobucket.com/albums/o310/Mizra1/layouts/73734db2.png'); top: -30px; left: 0px; padding: 10px; margin: 10px 10px -20px 10px; z-index: 15; float: left; } .box { border-style: solid; border-width: 1px 0px 0px 0px; border-color: #1079A2; padding: 10px; clear: left; } input, textarea { background-color: #1079A2; color: #FFFFFF; font-family:"Arial", Verdana, sans-serif; font-size:10px; } textarea.textbox { width: 100% !important; } .reply { position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; font-family: "Arial", Verdana, sans-serif; font-size: 11px; line-height: 125%; background-color: #FFFFFF; color: #000000; } .replytosubject { font-weight: bold; } .commentreply { position: relative; margin: 10px; font-size: 11px; font-family: "Verdana", sans-serif; color: #000000; } .commentbox { border-color: #1079A2; border-width: 1px; border-style: solid; padding: 10px; margin: 10px; background-color: #FFFFFF; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #333333; } .datesubjectcomment a:hover { color: #666666; } .commentboxpartial { border-color: #1079A2; border-width: 1px; border-style: solid; padding: 10px; margin: 10px; background-color: #FFFFFF; } .commentinfo { background-color: #FFFFFF; margin-top: 10px; width: 100%; } .skiplinks { text-align: center; } /*edit Comment*/ .commentbox img[src="http://l-stat.livejournal.com/img/btn_edit.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/525c4c02.gif); padding: 9px 8px 0 0 !important; } /*delete Comment*/ .commentbox img[src="http://l-stat.livejournal.com/img/btn_del.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/c48be09e.gif); padding: 9px 8px 0 0 !important; } /*Screen Comment*/ .commentbox img[src="http://l-stat.livejournal.com/img/btn_scr.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/8cc751be.gif); padding: 9px 8px 0 0 !important; } .commentbox img[src="http://l-stat.livejournal.com/img/btn_unscr.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/8cc751be.gif); padding: 9px 8px 0 0 !important; } /*Freeze Comment*/ .commentbox img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/b2390964.gif); padding: 9px 8px 0 0 !important; } .commentbox img[src="http://l-stat.livejournal.com/img/btn_unfreeze.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/b2390964.gif); padding: 9px 8px 0 0 !important; } /*Track Comment*/ .commentbox img[src="http://l-stat.livejournal.com/img/btn_track.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/8ddaeeca.gif); padding: 9px 8px 0 0 !important; } .commentbox img[src="http://l-stat.livejournal.com/img/btn_tracking.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/8ddaeeca.gif); padding: 9px 8px 0 0 !important; } /*-------------------------------------------- Misc -----------------------------------------*/ .clear { height: 15px; } /*--------------------------------------- Tiny Icons -----------------------------------------*/ .clear { height: 0px; } .ljuser img { width: 0px; height: 0px; background-repeat: no-repeat; background-image: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/7691767e.gif); /*9px 8px*/ padding: 10px 9px 0px 0px!important; } .ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] { background-image: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/7691767e.gif); padding: 10px 9px 0px 0px!important; } .ljuser img[src="http://stat.livejournal.com/img/community.gif"] { background-image: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/7691767e.gif); padding: 10px 9px 0px 0px!important; } .ljuser img[src="http://stat.livejournal.com/img/openid-profile.gif"] { background-image: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/7691767e.gif); padding: 10px 9px 0px 0px!important; } /*span.ljuser a b { padding: 02px 0 02px 0; color: #190b0b; font-weight: lighter; }*/ .subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] { width: 0; height: 0; padding: 0 10px 13px 0; background: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/6c4502f5.gif); /*9px 13px*/ } .subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"] { width: 0; height: 0; padding: 0 10px 13px 0; background: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/6c4502f5.gif); } .subject img[src="http://l-stat.livejournal.com/img/icon_groups.gif"] { width: 0; height: 0; padding: 0 10px 13px 0; background: url(http://i123.photobucket.com/albums/o310/Mizra1/layouts/6c4502f5.gif); } /*----------------------------------- Popups -------------------------------------*/ div.ContextualPopup div.Inner { background: transparent!important; color: #000!important; border: none; padding: 10px; width: 250px; font-family: "georgia", times new roman, serif; } div.ContextualPopup .Content { padding:7px 10px 7px 10px; margin-right:80px; line-height: 1.4; background:url('http://i123.photobucket.com/albums/o310/Mizra1/layouts/73734db2.png'); border:1px solid #1079A2; } div.ContextualPopup .Userpic { padding:10px; background:#ffffff; margin:0px; border:1px solid #1079A2; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: normal; color: #00ADEF !important; } div.ContextualPopup .Relation { letter-spacing:1px; border-bottom: 1px dashed #ddd; margin-bottom:4px; padding-bottom:4px; }
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
Instructions: Select 'Flexible Squares', (Ad Placement at Top of Entries), Copy & Paste in the Custom CSS section (Selecting 'no' for all drop-downs). Works well in all browsers (and just slightly different in IE). Comes Available In These Colors - Blue (Azul), Gray (Gris), Gold (Oro), Red (Rosa) and Green (Verde). Each CSS has matching complimentary colors for the links. Comment for the other codes, as I am having terrible trouble with posting them here. The one featured here is 'Azul'.
Credits: invaluable help at s2flexisquares , famfamfam.com for the tiny icons, enamors for the contextual pop-ups, and prix for the text-shadowing.
Questions? Comments? Leave them here, please. :)