Mixit: intermediate
Image Preview - Live Preview
"intermediate"
Template: intermediate
For: Mixit
Directions: Click here. In search box put "Mixit" and choose any available Mixit template. Go to Choose Page Setup and select "2 Column (Sidebar on Right)".
Click on Customize Selected Theme. Click on "Customize CSS" menu link on left. "Use layout's 'Base Weblog' stylesheet" needs to be set on "No", and "Custom external stylesheet URL" field remains blank.
Then, copy and paste the entire stylesheet below into "Custom stylesheet" field and click Save Changes.
Images: These are hosted on my own Photobucket account, I encourage you to save and upload to your own server/account. Just be sure to change the URLs in the style sheet when you do!
Background: simple.jpg
Background 2 (in case you want to use another, or make your own!): simple2.jpg
Code:
/* --
intermediate
For: Mixit
Available: http://community.livejournal.com/betterdolphin/
By: Toby
-- */
/* DIRECTIONS: Full directions on how to install are on the bottom of this document! */
/* Please remember to upload the images to Photobucket or some other free image service and replace the links in this stylesheet! */
/*******************************General/Misc*******************************/
body {
color: #1b1215;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0 auto;
text-align: center;
margin-top: 30px;
background:url(http://i621.photobucket.com/albums/tt296/quillsh/simple.jpg);
;){kind=link}
background-color: #ffffff;
background-position: top left;
background-repeat: no-repeat;
}
a:link {
color: #818181;
font-weight:normal;
text-decoration:underline;
}
a:active, a:hover, a:visited:hover, a:visited:active {
color: #b8b8b8;
font-weight:normal;
text-decoration:underline;
}
a:visited {
color: #000000;
font-weight:normal;
text-decoration:underline;
}
p {
margin-top: 13px;
margin-bottom: 13px;
}
blockquote {
margin: 2px;
padding: 10px;
border: 1px #ccc1c5 solid;
}
ul {
margin-top: 15px;
}
input, textarea, select {
border: 1px #ccc1c5 solid;
}
/*******************************Header/Menu*******************************/
/****Though it's a header, it's styled to be aligned on the left of the layout****/
#header {
text-align: left;
position: absolute;
width: 200px;
}
#header-content {
position: absolute;
margin:70px 0 0 -220px;
.margin:70px 0 0 -200px;
width: 200px;
padding: 0;
}
#header-text ul.nav {
position: absolute;
font-size: 14px;
width: 200px;
margin: 68px 0 0 10px;
padding: 0;
text-transform: uppercase;
font-weight: bold;
text-align: right;
z-index: 100;
list-style-type:none;
}
#header-text ul.nav li {
margin: 0;
padding: 0 15px;
text-align: right;
}
#header-text ul.nav li.item {
border: 0;
text-align: right;
}
#header-text ul.nav a {
color: #818181;
text-decoration: none;
font-weight: bold;
text-align: right;
}
#header-text ul.nav a:hover {
color: #b8b8b8;
font-weight: bold;
text-align: right;
}
#header-text ul.nav a:visited:hover {
color: #b8b8b8;
font-weight: bold;
text-align: right;
}
#header-text ul.nav a:visited:active {
color: #b8b8b8;
font-weight: bold;
text-align: right;
}
#header-text ul.nav a:visited {
color: #000000;
font-weight: bold;
text-align: right;
}
#header-name {
margin: 0;
padding: 0;
font-size: 26px;
line-height: 18px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
position: relative;
}
#header-name a {
color: #000000;
text-decoration: none;
}
#header-name a:hover {
color: #818181;
}
#header-description {
margin: 0;
font-size: 12px;
text-align: right;
padding: 0;
color: #818181;
}
.title {
padding: 0;
font-size: 26px;
line-height: 18px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
position: absolute;
width: 200px;
margin: 110px 0 0 165px;
}
.subtitle {
font-size: 12px;
text-align: right;
padding: 0;
color: #818181;
position: absolute;
width: 200px;
margin: 128px 0 0 165px;
height: 100px;
}
#navheader {
position: absolute;
margin:70px 0 0 -220px;
.margin:70px 0 0 -200px;
width: 200px;
padding: 0;
}
#header ul {
position: absolute;
font-size: 14px;
width: 200px;
margin: 168px 0 0 180px;
padding: 0;
text-transform: uppercase;
font-weight: bold;
text-align: right;
z-index: 100;
list-style-type:none;
}
#header ul li {
margin: 0;
padding: 0 15px;
text-align: right;
}
#header ul li.item {
border: 0;
text-align: right;
}
#header ul a {
color: #818181;
text-decoration: none;
font-weight: bold;
text-align: right;
}
#header ul a:hover {
color: #b8b8b8;
font-weight: bold;
text-align: right;
}
#header ul a:visited:hover {
color: #b8b8b8;
font-weight: bold;
text-align: right;
}
#header ul a:visited:active {
color: #b8b8b8;
font-weight: bold;
text-align: right;
}
#header ul a:visited {
color: #000000;
font-weight: bold;
text-align: right;
}
/*******************************Main Content*******************************/
/****DO NOT EDIT BELOW****/
#page, #header, #content, #footer {position: relative; top: 0;}
#alpha, #beta, #gamma {display: inline; float: left; position: relative; top: 0;}
#footer {margin: -1px 0 0 0; /* HACK - removes space between content and footer */}
#page-inner, #header-inner, #content-inner, #alpha-inner, #beta-inner, #gamma-inner, #footer-inner {position: static;}
#header-inner, #alpha-inner, #beta-inner, #gamma-inner {overflow: hidden; /* hide content that is larger than the element dimensions */}
#alpha-inner[id] { overflow: visible; } /* FF MAC & PC will clip pager-top when accessing page anchor */
/****DO NOT EDIT ABOVE****/
#container {
margin: 0 auto;
padding: 0 20px 20px 20px;
text-align: center;
width: 400px;
z-index: 0;
}
#container-inner {
width: 400px;
text-align: left;
}
#page {
width: 400px;
margin: 0 auto;
padding: 0;
}
#header-inner {
margin: 0 auto;
}
#content {
text-align: left;
}
#alpha {
width: 400px;
margin-top: 55px;
padding-left: 20px;
float: left;
text-align: left;
}
.layout-tw #alpha {
float: right;
}
#alpha-inner {
margin: 10px 20px 0 0;
text-align: left;
}
.lj-view-archive #alpha-inner, .lj-view-month #alpha-inner, .lj-view-tags #alpha-inner {
padding-top: 20px;
padding-bottom: 20px;
}
/****BELOW NOT USED****/
#beta {
display: none;
width: 130px;
left: 20px;
margin-top: 55px;
}
.layout-wt #beta-inner {
padding: 5px;
}
.layout-tw #beta-inner {
padding: 5px;
}
/****ABOVE NOT USED****/
.stream-header {
display: none;
padding: 10px 20px;
}
.stream-footer {
padding: 0;
}
/****Entry****/
.asset {
margin: 0;
padding: 0 0 13px 0;
text-align: left;
}
.asset-inner {
padding: 0 0 50px 0;
text-align: left;
}
.asset-header {
padding: 0;
text-align: left;
}
.lj-view-entry .asset-header {
padding: 0;
text-align: left;
}
h2 {
margin: 0;
padding: 0 0 1px 0;
font-size: 20px;
font-weight: bold;
color: #000000;
text-align: left;
}
h2.page-header2 {
text-align: left;
margin: 0;
padding: 0 0 1px 0;
font-size: 11px;
font-weight: bold;
color: #000000;
}
h2.page-header2 a, .lj-view-tags h2 {
color: #000000;
text-decoration: none;
}
h2.page-header2 a:hover {
color: #000000;
}
abbr.datetime {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 11px;
color: #818181;
text-align: left;
}
.asset-content {
}
.asset-body {
padding: 15px 0 15px 0;
}
.asset-body a {
color: #000000;
font-weight: normal;
text-decoration: none;
}
.asset-body a:hover {
color: #818181;
font-weight: normal;
}
.asset-body dt {
font-weight: normal;
}
.asset-body dd {
margin-left: 58px;
padding: 10px;
border-top: 0;
}
div.asset-header ul {
margin: 0 !important;
padding: 0 !important;
}
div.asset-header li.item {
padding: 0;
text-align:left;
}
.ljuser {
display: inline !important;
}
/****Userpics****/
.user-icon {
position: absolute;
float: right;
margin: -50px 0 0 400px;
padding: 1px;
background: transparent !important;
text-align: center;
}
.user-icon img {
border: 5px solid #000000;
width: 60px;
height: 60px;
}
.ljuser img {
width: 17px !important;
height: 17px !important;
}
.user-icon span {
background: #ffffff !important;
text-align: center;
}
/****Currents****/
.lj-currents ul {
margin: 20px 0 0 0;
padding: 0;
}
.lj-currents ul li {
list-style: none;
}
.lj-currents img {
display: inline;
}
.entryMetadata-label {
font-weight:bold;
color: #000000;
}
.entryMetadata-content {
margin-left: 2px;
}
/****Tags***/
.asset-tags-header {
display: block;
float: left;
width: 56px;
height: 100% !important;
margin: 0; padding: 0;
font-weight:bold;
color: #000000;
text-align: left;
}
.asset-tags-list {
margin: 0 0 0 56px;
padding: 0;
list-style-type: none;
text-align: left;
}
.asset-tags-list li {
display: inline;
padding-right: 5px;
text-align: left;
}
.asset-tags-list a {
white-space: normal !important;
text-align: left;
}
/****Comments****/
ul.asset-meta-list {
clear: both;
margin: 10px 0 0 0;
padding: 2px 0 6px 0;
list-style-type: none;
font-size: 11px;
text-align: left;
border-top: 5px #000000 solid;
}
li.asset-meta-comments {
display: inline;
margin: 0 10px 0 0;
text-align: left;
}
ul.asset-meta-list .item {
border: 0;
text-align: left;
}
.prevnext, .prev, .next {
padding: 5px 0;
}
/*******************************Sidebar*******************************/
/****Not used in this layout****/
.widget {
display: none;
margin-bottom: 20px;
font-size: 11px;
}
.widget-inner {}
.widget-header {
color: #000000;
border-bottom: 1px solid #FFFFFF;
font-size: 14px;
}
.widget-content {
margin: 0;
padding: 0;
}
.widget ul {
margin: 0;
padding: 0 0 0 20px;
}
.widget a {
color: #000000;
text-decoration: none;
}
.widget a:hover {
color: #b8b8b8;
text-decoration: none;
}
.about-me-widget {
text-align: left;
}
.about-me-widget .widget-header a {
color: #000000;
}
.about-me-widget .widget-header a:hover {
color: #b8b8b8;
}
.about-me-widget dl, .about-me-widget dd, .about-me-widget dt {
margin: 0;
padding: 0;
width: 100%;
}
.calendar-widget {
display: none;
}
.calendar-widget table {
width: 100%;
text-align: left;
}
.calendar-widget p {
margin: 5px 0;
padding: 0;
text-align: center;
}
.calendar-widget tr:first-child a {
background: #ffffff;
border: 0;
}
.calendar-widget td a {
display: block;
width: 100%;
color: #000000;
background: #E5E5E5;
border: 1px solid #000000;
}
.typelist-widget li.item {
margin: 0;
padding: 0;
}
.categories-widget .widget-footer {
padding: 20px 0 0 0;
}
.categories-widget li.item {
margin: 0;
padding: 0;
}
.categories-widget li.tag {
display: inline;
padding: 0 1px;
background: none;
}
.archive-widget li.item {
margin: 0 0 5px 0;
padding: 0;
}
.links-widget .widget-list .item {
margin-bottom: 5px;
border: none !important;
}
.widget-list .tagcloud {
list-style: none !important;
display: inline !important;
color: #ff0000 !important;
white-space: nowrap !important;
border-left: 0 !important;
width: 100% !important;
display: none;
}
.syndicate-widget, .powered-widget, .designed-widget {
display: none;
}
/* ---------- COMMENTS PAGE ---------- */
#comments {
padding: 0;
}
div.comments-inner h2 {
margin: 0;
padding: 5px 0 0 0;
color: #000000;
font-size: 22px;
font-weight: normal;
}
.comment {
margin-bottom: 29px;
padding: 15px 0; border: 0;
}
.comment-odd {}
.comment-even {
background: #e1e1e1;
padding: 5px;
}
.comments-nav {
margin: 20px;
text-align:center;
}
.comment-links {
margin-top: 15px;
font-weight: normal;
text-align: right;
font-size: 11px;
}
.comment-subject {
font-weight: bold;
}
.comment-date {
margin-top: 1px;
margin-bottom: 10px;
}
/* Fix height in IE */
.comment {height: 1%;}
.quickreply {
margin-top: 16px;
width:90%;
padding-top: 5px;
padding-bottom: 10px;
}
#commenttext, #subject {
width: 90%;
}
#comment-form {
width: 500px;
}
/*******************************Archive*******************************/
ul.year {
text-align: center;
padding: 0;
}
ul.year li {
display: inline;
padding: 0 5px;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border: 1px solid #000000;
}
table.yeartable td.yearday {
text-align: center;
}
td.yearmonth {
border-style: none;
font-weight: bold;
}
dd.viewsubjects {
margin: 0 0 12px 12px;
}
.lj-view-month table {}
.lj-view-month widget table {
margin: 0 !important;
}
/*******************************Misc*******************************/
hr {
display: none;
}
/****PLUS ACCOUNTS****/
#ad-5linkunit {
clear: both;
}
#ad-leaderboard {
margin-bottom: 10px;
}
/*******************************Utility*******************************/
/* 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%;
}
/* Win IE < 7 */
* html #header-name a {
word-wrap: break-word;
}
/* DIRECTIONS: To install, go to your Home section in LJ. Scroll over Journal in the menu, click Journal Style. To the right you'll find a box telling your Current Theme. Under the section "Select a different theme" there is a search box, in it put "Mixit" and choose any theme option. In the box in the top right that says "(lj_user)'s Current Theme", click "Customize selected theme".
On that page, on your left, you'll see a sidebar. Click on "Custom CSS." You'll see a drop down menu: "Use layout's 'Base Weblog' Stylesheet". Select "NO". Leave "Custom external stylesheet URL" entry blank.
If you haven't already, you need to replace all the image URLs in thie stylesheet with your own URL. Copy and paste this WHOLE document into the "Custom stylesheet" box.
Click "Save Changes" and it should be ready to go! */
Save changes and it should work fine!
Please remember to credit to betterdolphin and enjoy!