S2 Bloggish Gold & Glass Mosaic Layout

Mar 08, 2009 12:04

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.
Credit: stellastars or stelladesigns in user info, please.
Preview: Click images for full-size preview.








DIRECTIONS for LIVEJOURNAL:
1. Go to customize journal.
2. Type "Bloggish" into the search box.
3. Choose "Unstyled" as your theme.
4. In the "Current Theme" box, click on "Change page setup."
5. Important: Select "2 Column (sidebar on right)".
5.5 If using a "plus" account, set "Ad Placement" on "Vertical."
6. Click on "Customize Selected Theme."
7. Click on "Custom CSS" in the menu on the left.
8. Leave "Use layout's "Base Weblog" stylesheet" on "Yes" and leave "Custom external stylesheet URL" blank.
9. 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--*/
/*---------------------------------*/

10. 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;}

10.5 (Optional) Save the images to your own image host and replace their URLs in the code.
11. Click "Save Changes."

Notes:
-- If you have any questions about the directions, please ask.
-- Directions for using this layout on InsaneJournal are available here.
-- Some mosaic "tiles" are made with Floralia Font by Manfred Klein available on dafont.
-- This layout was created for the Non-Competitive Layout Challenge at thefulcrum.
-- Other layouts by stellastars can be found here.

s2 layouts, bloggish, css, s2, layout

Previous post Next post
Up