Layout #4 -- Gold & Glass Mosaic
Name: Gold & Glass Mosaic
Layout Style: S2 Bloggish
Best view: 1024x768 and up
Browser(s) Compatible: Tested in Firefox3, Chrome1, IE7, Opera9, and Safari3
Account Levels: All
Work with Nav bar?: Yes
Work with Ads?: Yes, Vertical Placement only. (For LJ Accounts.)
Credit: stellastars or stelladesigns in user info, please.
Preview: Click images for full-size preview.








Notes:
If you have any questions about the directions, please ask.
Some mosaic "tiles" are made with Floralia Font by Manfred Klein available on dafont.

DIRECTIONS for INSANEJOURNAL:
1. Go to customize journal.
2. Click "Look and Feel" and select "Bloggish" in the "Layout and Language" section and "None" in the "Themes" menu.
3. Click "Custom Options" and in the "Layout Type" menu select "Two Column (Sidebar on Right)" then click "Custom CSS."
4. Leave "Use layout's "Base Weblog" stylesheet" on "Yes" and leave "Custom external stylesheet URL" blank.
5. Copy the Code from the textbox below and paste in the "Custom stylesheet" box.
/* Gold & Glass Mosaic */ /* S2 Style - Bloggish */ /* Theme - Unstyled on LJ or None on IJ */ /* Layout Type - 2 Column (sidebar on right) */ /* Made by stellastars.livejournal.com = stellastars.insanejournal.com */ a:link, a:visited, a:active {font-weight:normal;} blockquote {font-size:10px;} #banner {width: 585px; margin:0px; padding: 0px;} .entry {width:510px; margin: 0px 0px 90px 40px;} .entry a {font-weight:bold;} h2.date-header {width:510px; margin-left:40px; font-family: arial, verdana, sans-serif; font-size: 14px; font-weight:bold; color: #996a03; padding-top:10px;} h3.entry-header {font-size:18px; text-decoration:underline;} h3.entry-header a {font-weight:normal !important;} .metadata {margin:20px 0px;} .ljtags {font-weight:bold; margin:20px 0px 0px 0px; text-transform:lowercase;} .entry-footer {margin:20px 0px 0px 0px; text-transform:lowercase; font-weight:bold;} .entry-userpic {padding:0px 0px 0px 10px;} p.poster {width:100px;} .lj-view-archive .module-viewlinks, .lj-view-day .module-viewlinks, .lj-view-tags .module-viewlinks, .lj-view-month .module-viewlinks, .lj-view-reply .module-viewlinks, .lj-view-entry .module-viewlinks {margin-bottom:27px;} .content-nav {float:right; width: 132px; position: absolute; top: 109px; left: 657px; font-size:0px; color:#d2c55e; text-align:left; z-index:20 !important; padding: 4px 70px 58px 42px;} .content-nav a {font-family: georgia, "times new roman", serif; font-size:18px; z-index:20 !important; padding: 0px 10px 0px 0px !important; line-height:26px; font-weight:normal !important;} #beta {width:245px; margin: -40px 0px 0px 72px; font-size:10px; background:transparent; z-index:0 !important;} #beta a {color: #996a03;} #beta a:hover, .content-nav a:hover {color: #f9f7cd;} #beta-inner, .module {z-index:0 !important;} .module-header {font-size: 18px; color: #996a03;} .module-photo {display:none;} .module-viewlinks {width:218px; padding:55px 0px 0px 32px; margin:0px 0px 110px 0px;} .module-viewlinks a {font-family: georgia, "times new roman", serif; font-size: 18px;} .module-calendar {padding: 0px 0px 20px 32px !important; margin:0px 0px 6px 0px; width:208px;} .module-calendar .module-header {padding-left:10px; margin:8px 0px 12px 0px;} .module-calendar .module-content {padding:0px 0px 15px 0px; margin:0px 20px 0px 8px;} .module-typelist a, .module-categories a, .module-pagesummary a {text-transform: lowercase;} .module-pagesummary a {text-decoration: none;} .module-typelist li, .module-categories li {float: left; display: inline; white-space: normal; margin: 0px 8px 0px 0px;} .module-typelist a, .module-categories a {float: left; white-space: nowrap;} .module-typelist {padding:54px 0px 0px 42px; margin:-3px 0px 0px 0px; width:208px;} .module-typelist .module-header {width: 120px; padding:5px 0px; margin:0px;} .module-typelist .module-content {padding:0px; margin:0px;} .module-categories {padding:0px 0px 0px 42px; width:208px; margin:-3px 0px 27px 0px; } .module-categories .module-header {padding: 85px 0px 0px 42px; margin:0px 0px 5px -42px;} .module-categories .module-content {padding:0px; margin: 0px;} .module-categories ul {width: 185px; float: left; padding: 0px 2px 2px 0px;} .module-pagesummary {padding:55px 0px 0px 42px; margin:0px 0px 0px 0px; width:208px;} .module-pagesummary .module-header {padding:5px 0px 10px 0px; margin:0px;} .module-pagesummary .module-content {padding:0px 27px 77px 42px; margin:0px 0px 0px -42px; width:181px;} .module-pagesummary ul {width: 200px; list-style-type: none; padding:0px; margin:0px;} .module-pagesummary li {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/li.png) top left no-repeat transparent; line-height: 11px; padding: 0px 0px 0px 8px; margin: 0px 0px 8px 0px; } .module-syndicate {padding:27px 0px 0px 42px; margin:-3px 0px 0px 0px; width:206px;} .module-syndicate .module-header {float:left; padding:6px 0px 0px 0px; margin:0px 0px 4px 0px;} .module-syndicate .module-content {float:right; padding:0px 18px 0px 0px; margin:0px; width:90px !important; height:52px !important;} .module-syndicate .module-content img[src*=data_rss], .module-syndicate .module-content img[src*=data_atom] {height:0px !important; width:0px !important; padding:15px 19px!important; margin-top:6px !important; margin-right:2px !important;} .module-powered {width:180px; padding-left: 65px; padding-bottom: 78px; font-size: 18px; font-family: georgia, "times new roman", serif; font-size: 18px; margin-top:40px;} .lj-view-archive #alpha ul {list-style-type: none; padding: 30px 0px 20px 10px; margin: 0px;} .lj-view-archive #alpha li, .lj-view-archive #alpha li.active {margin: 2px 0px; padding: 0px 0px 0px 40px; text-align: left; font-size: 22px; font-weight: normal; font-family: georgia, "times new roman", serif;} .lj-view-archive #alpha li.active {color: #996a03;} .lj-view-archive #alpha table {width: 315px !important; border: 2px #996a03 solid !important;} .lj-view-archive #alpha th {padding: 5px 10px; font-size: 18px; font-weight: normal; text-align: center !important; width: 45px !important; border: 2px #996a03 solid !important; font-family: georgia, "times new roman", serif;} .lj-view-archive #alpha td {padding: 2px 4px 10px 10px; font-size: 12px; text-decoration: none; height: 35px; border: 1px solid #996a03 !important;} .lj-view-day #alpha-inner h2 {width:510px; margin-left:40px; font-family: arial, verdana, sans-serif; font-size: 14px; font-weight:bold; color: #996a03; padding-top:10px;} .lj-view-day p {padding-left:40px; width:510px;} .lj-view-day p.entry-footer {padding-left:0px;} .lj-view-month #alpha-inner.pkg dt {font-weight:bold; padding-left:40px; margin-top:20px;} .lj-view-month #alpha-inner.pkg dd {width:510px;} .lj-view-tags #alpha-inner.pkg h2 {padding:30px 0px 20px 40px; font-size:18px; color:#30200e;} .ljtaglist li {list-style: none; padding: 3px 0px;} .lj-view-reply #alpha-inner.pkg {padding-left:40px; padding-right:40px; width:510px;} .lj-view-reply #alpha-inner.pkg h2 {font-size:18px; text-decoration:underline;} .comments {padding-left:40px; width:510px;} h3.comments-header {padding:30px 0px 0px 0px; margin-bottom:40px; font-size:22px; color:#996a03; border-bottom:2px solid #996a03;} h3.comment-header {margin:0px !important; padding:0px !important; font-family: arial, verdana, sans-serif; font-size: 14px; font-weight:bold; text-transform:capitalize;} .comment-footer {margin:20px 0px 40px 0px; text-transform:lowercase; font-size:11px;} .lj-view-entry .comment-content .metadata, .lj-view-entry .comment-content .metadata strong { margin: 0px 0px 5px 0px; padding:0px; font-weight: normal; font-size: 9px; } .comment-content {padding:5px 0px 0px 0px !important; margin:0px !important; border-top:1px solid #30200e; font-size:11px;} .lj-view-archive #alpha td a, .lj-view-month #alpha-inner.pkg center a, .lj-view-month #alpha-inner.pkg dd a, .ljtaglist li a, .lj-view-reply #alpha-inner.pkg a, .comments a {font-weight:bold;} /*---------------------------------*/ /*--Paste Color Scheme Code Below--*/ /*---------------------------------*/
6. Select one of the Color Schemes below (Aqua or Rose). Copy the code and paste into the "Custom stylesheet" box beneath the "Code".
/*--Color = Aqua & Green --*/ html {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/wrapg.png) top left repeat-y #d3c666; padding:0px; margin:0px;} body {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/psbetag.png) top left no-repeat transparent; padding:0px 0px 3px 0px; margin:0px; font-family: arial, verdana, sans-serif; font-size:12px; color: #30200e;} h1, h2, h3, h4, h5, h6 {font-family: georgia, "times new roman", serif; color: #003e93;} a:link, a:visited, a:active {color:#003e93;} a:hover{color:#1f7c38;} #container {width: 914px; background:url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/containg1.png) top left no-repeat transparent; padding:30px 0px 0px 0px; margin:0px auto 0px 82px;} #container-inner {background:url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/containg2.png) top left no-repeat transparent; padding: 40px 0px 0px 0px; margin:0px;} h1#banner-header {font-family: georgia, "times new roman", serif; font-size: 28px; color: #003e93; padding:0px 0px 0px 10px;} h2#banner-description {font-family: arial, verdana, sans-serif; font-size:16px; color: #003e93; padding:0px 0px 20px 10px; } #pagebody {background:url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/pgbdyg.png) top left repeat-y transparent; z-index:0; padding:0px; margin:0px;} #pagebody-inner {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/footerg.png) bottom left no-repeat transparent; padding:0px 0px 50px 0px; margin:0px; } #alpha {width:595px; background:url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/alpha1g.png) top left no-repeat transparent; padding:50px 0px 0px 0px; margin:0px;} #alpha-inner {width:585px; background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/alphain1g.png) top left no-repeat transparent; padding:60px 0px 50px 0px; margin:0px;} .content-nav a {color:#996a03;} .content-nav {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/navg.png) bottom left no-repeat transparent;} .module-viewlinks, .module-pagesummary {background:url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/modg.png) top left no-repeat transparent;} .module-calendar {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/mosg.png) top left no-repeat transparent;} .module-typelist {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/linkg.png) top left no-repeat transparent;} .module-typelist ul {float:left; background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/lig.png) bottom left no-repeat transparent !important; width:185px; padding: 0px 23px 27px 42px;margin: 0px 0px 0px -42px; min-height:27px;} .module-categories .module-header {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/tagg.png) top left no-repeat transparent;} .module-pagesummary .module-content {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/pgsumg.png) bottom left no-repeat transparent;} .module-syndicate {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/syng.png) top left no-repeat transparent;} .module-syndicate .module-content a[href*=rss] {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/rssg.png) center center no-repeat transparent; padding:25px 0px !important; margin:0px !important;} .module-syndicate .module-content a[href*=atom] {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/atomg.png) center center no-repeat transparent; padding:25px 0px !important; margin:0px !important;} .module-powered {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/pow2g.png) bottom left no-repeat transparent;} .module-ads {width:204px; padding:0px 46px 58px 0px; margin:0px; background:url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/adsbg.png) bottom left no-repeat transparent;} .module-ads .module-content {width:204px; padding:54px 0px 0px 46px; margin:0px; background:url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/adstg.png) top left no-repeat transparent;} .lj-view-archive .module-viewlinks .module-content, .lj-view-day .module-viewlinks .module-content, .lj-view-tags .module-viewlinks .module-content, .lj-view-month .module-viewlinks .module-content, .lj-view-reply .module-viewlinks .module-content, .lj-view-entry .module-viewlinks .module-content {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/navg.png) bottom left no-repeat transparent; width:218px; margin-left:-32px; padding-bottom:58px; padding-left:42px;} .skiplinks {font-family: georgia, "times new roman", serif; font-size:18px; color:#996a03; margin-left:40px;} .skiplinks a {color:#996a03; font-weight:normal;} .skiplinks a:hover {color: #30200e;}	/*--Color = Rose & Purple ---*/ html {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/wrapp.png) top left repeat-y #d3c666; padding:0px; margin:0px;} body {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/psbetap.png) top left no-repeat transparent; padding:0px 0px 3px 0px; margin:0px; font-family: arial, verdana, sans-serif; font-size:12px; color: #30200e;} h1, h2, h3, h4, h5, h6 {font-family: georgia, "times new roman", serif; color:#c75385;} a:link, a:visited, a:active {color:#c75385;} a:hover{color:#460935;} #container {width: 914px; background:url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/containp1.png) top left no-repeat transparent; padding:30px 0px 0px 0px; margin:0px auto 0px 82px;} #container-inner {background:url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/containp2.png) top left no-repeat transparent; padding: 40px 0px 0px 0px; margin:0px;} h1#banner-header {font-family: georgia, "times new roman", serif; font-size: 28px; color:#460935; padding:0px 0px 0px 10px;} h2#banner-description {font-family: arial, verdana, sans-serif; font-size:16px; color:#460935; padding:0px 0px 20px 10px; } #pagebody {background:url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/pgbdyp.png) top left repeat-y transparent; z-index:0; padding:0px; margin:0px;} #pagebody-inner {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/footerp.png) bottom left no-repeat transparent; padding:0px 0px 50px 0px; margin:0px; } #alpha {width:595px; background:url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/alpha1p.png) top left no-repeat transparent; padding:50px 0px 0px 0px; margin:0px;} #alpha-inner {width:585px; background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/alphain1p.png) top left no-repeat transparent; padding:60px 0px 50px 0px; margin:0px;} .content-nav a {color:#996a03;} .content-nav {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/navp.png) bottom left no-repeat transparent;} .module-viewlinks, .module-pagesummary {background:url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/modp.png) top left no-repeat transparent;} .module-calendar {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/mosp.png) top left no-repeat transparent;} .module-typelist {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/linkp.png) top left no-repeat transparent;} .module-typelist ul {float:left; background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/lip.png) bottom left no-repeat transparent !important; width:185px; padding: 0px 23px 27px 42px;margin: 0px 0px 0px -42px; min-height:27px;} .module-categories .module-header {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/tagp.png) top left no-repeat transparent;} .module-pagesummary .module-content {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/pgsump.png) bottom left no-repeat transparent;} .module-syndicate {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/synp.png) top left no-repeat transparent;} .module-syndicate .module-content a[href*=rss] {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/rssp.png) center center no-repeat transparent; padding:25px 0px !important; margin:0px !important;} .module-syndicate .module-content a[href*=atom] {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/atomp.png) center center no-repeat transparent; padding:25px 0px !important; margin:0px !important;} .module-powered {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/pow2p.png) bottom left no-repeat transparent;} .module-ads {width:204px; padding:0px 46px 58px 0px; margin:0px; background:url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/adsbp.png) bottom left no-repeat transparent;} .module-ads .module-content {width:204px; padding:54px 0px 0px 46px; margin:0px; background:url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/adstp.png) top left no-repeat transparent;} .lj-view-archive .module-viewlinks .module-content, .lj-view-day .module-viewlinks .module-content, .lj-view-tags .module-viewlinks .module-content, .lj-view-month .module-viewlinks .module-content, .lj-view-reply .module-viewlinks .module-content, .lj-view-entry .module-viewlinks .module-content {background: url(http://i15.photobucket.com/albums/a374/Stellastars/Layouts/Mosaic/navp.png) bottom left no-repeat transparent; width:218px; margin-left:-32px; padding-bottom:58px; padding-left:42px;} .skiplinks {font-family: georgia, "times new roman", serif; font-size:18px; color:#996a03; margin-left:40px;} .skiplinks a {color:#996a03; font-weight:normal;} .skiplinks a:hover {color: #30200e;}
6.5 (Optional) Save the images to your own image host and replace their URLs in the code.
7. Click "Save Changes."

Directions for LiveJournal available here.





ETA: Please consider uploading images to your own image host to help me save on bandwidth! Thank you!

Aqua wrapg.png psbetag.png containg1.png containg2.png pgbdyg.png footerg.png alpha1g.png alphain1g.png navg.png modg.png mosg.png linkg.png lig.png tagg.png pgsumg.png syng.png rssg.png atomg.png pow2g.png adsbg.png adstg.png

Rose wrapp.png psbetap.png containp1.png containp2.png pgbdyp.png footerp.png alpha1p.png alphain1p.png navp.png modp.png mosp.png linkp.png lip.png tagp.png pgsump.png synp.png rssp.png atomp.png pow2p.png adsbp.png adstp.png