Layout StyleDigital Multiplex (OSWD)
Best Viewed800x600, 1024x768
Compatible withFirefox, dunno about the rest
Work with Nav Bar?Yes
Work with AdsI don't know, try it with vertical placement and let me know.
Credit
ephi or
dreamlayout for layout composition, and
Fuwa fuwa li for the cute illustrations. [
More Japanese web graphics here]
Preview
Currently online in
ephi Digital Multiplex base HTML is heavy with tables and I doubt I'll work with it in the future. But it is one of the very first base layout I use in LJ, so it was fun to make it pretty.
Attention!
- Jun 5, 2007: Entries with no userpic will go wonky, sorry about that.
- Jun 10, 2007: The look for calendar has been updated, if you use this style, update the CSS.
- Jul 31, 2008: The look for archive calendar has been updated.
How to Install
- Go to Switch Style System, make sure you have selected S2
- Go to Choose Journal Style, and enter: Digital Multiplex (OSWD) in the search box. click Search.
- Click Customize
- In Display, Presentation, Basic Options, make sure all of these options (under the Presentation section) are of the same numbers (ie, if all is 10, all three must be 10)
» Number of journal entries to show on recent entries page
» Number of journal entries to show on friends page
» Number of journal entries to show in full on recent entries page
Click 'Save Changes' - Now Click on Custom CSS.
- In the first drop down menu, select No.
- In the biggest box enter the CSS below, after that click on 'Save Changes' again
/* DIGITAL MULTIPLEX (OSWD) FOR LIVEJOURNAL */
/* Layout composition: ephi.livejournal.com */
/* Illustrations:
http://halzion.fem.jp/fuwa2li/ */
/*---------general------------*/
body
{
font-family: 'lucida sans unicode', 'lucida sans', verdana, arial, helvetica, sans-serif;
font-size: 11px;
color: #555;
line-height: 2em;
background-image: url('
http://i20.photobucket.com/albums/b208/duhephi/eljay/flstylecontest/table_s.gif');
background-repeat: repeat-x;
background-position: 0 10em;
background-color: #fff;
}
a
{ color: #FF6699 ; }
a:hover
{
border-bottom: 1px dotted #56B0AE;
text-decoration: none;
}
/*------------ layout foundations ---------------*/
/* width of layout area */
table#top_title, table#main
{ width: 768px; }
/* delete the 'about' and 'recent' */
th#sidebar_title, th#main_title
{ display: none; }
/* show the girl */
table#top_title
{ background: transparent url('
http://i20.photobucket.com/albums/b208/duhephi/eljay/flstylecontest/summer1.gif') no-repeat 0 0; }
/* shift main table (content and sidebar) above */
table#main
{
position: relative;
top: -110px;
background: transparent !important;
}
/* shift sidebar column below the girl's feet */
td#sidebar
{
padding-top: 10em;
background: transparent !important;
}
/*-------- header -----------*/
h1
{
padding-left: 130px;
padding-top: 60px;
height: 170px;
color: #FF6699;
background-color: transparent;
font-family: Monotype Corsiva;
font-size: 21px;
letter-spacing: 2px;
}
/*--------main entries-------------*/
/* date (will inherit to the entries and sidebar title) */
table.heading_bar th
{
color: #ccc!important;
font-family: 'trebuchet ms', sans-serif;
text-transform: uppercase;
font-weight: normal;
}
/* entries title */
table#main th span.subject
{
text-transform: uppercase;
color: #EF1D79;
font-weight: bold;
font-family: georgia, serif;
font-size: 12px;
}
/* one entry: userpic, entry, tag, meta, leave a comment, no title */
table.full_entry
{
background: url('
http://i20.photobucket.com/albums/b208/duhephi/eljay/flstylecontest/entribg.png') no-repeat 68px 0;
height: 200px;
}
table.full_entry
{
padding-top: 45px;
padding-left: 10px;
}
/* userpic (entry) */
table.full_entry_userpic
{
position: relative;
top: -45px;
left: -10px;
font-size: 10px;
line-height: 12px;
width: 100px;
}
table.full_entry_userpic img
{ border: 5px solid #9cc6ce; }
.ljtags a{
text-transform: capitalize;
}
/* archive page */
td#content td.calendar_day span.day a
{
background: url('
http://s20.photobucket.com/albums/b208/duhephi/eljay/flstylecontest/calhover.png') 0% 0% no-repeat;
width: 25px;
height: 30px;
display: block;
border: 0;
text-decoration: none;
color: #eee;
}
td#content td.calendar_day span.day a:hover
{
background: url('
http://s20.photobucket.com/albums/b208/duhephi/eljay/flstylecontest/cal.png') 0% 0% no-repeat;
color: #555;
}
/*---------short entries-------------*/
/* the short entries at the bottom */
table.short_entry
{
font-family: georgia, serif;
background: #8dd4d8;
}
/* the short entries title */
table.short_entry th
{ border: 1px solid green !important; }
/*--------------sidebar---------------*/
/* sidebar tables */
table#sidebar_userpic, table#sidebar_summary, table#sidebar_navigation, table#sidebar_linklist, table#sidebar_calendar,
table#sidebar_linklist table, table#sidebar_navigation table, table#sidebar_summary table
{ width: 100%; }
th.sidebar_box_header
{ padding-top: 20px; }
td#sidebar br
{ display: none;}
/* sidebar userpics */
table#sidebar_userpic
{ text-align: center; }
table#sidebar_userpic br
{ display: block; }
/* the sidebar subtitles */
th.sidebar_box_header
{ border-bottom: 1px dotted #555; }
/* calendar */
td#sidebar td.calendar_day span.day
{
width: 25px;
display: block;
text-align: center;
background: url('
http://s20.photobucket.com/albums/b208/duhephi/eljay/flstylecontest/cal.png') 50% 50% no-repeat;
font-family: georgia, serif;
}
td#sidebar td.calendar_day span.day a
{
background: url('
http://s20.photobucket.com/albums/b208/duhephi/eljay/flstylecontest/calhover.png') 50% 50% no-repeat;
width: 25px;
display: block;
border: 0;
text-decoration: none;
color: #eee;
}
td#sidebar td.calendar_day span.day a:hover
{
background: url('
http://s20.photobucket.com/albums/b208/duhephi/eljay/flstylecontest/cal.png') 50% 50% no-repeat;
color: #555;
}
/*------------footer----------*/
td#top_of_page
{
border-top: 1px dotted #ccc;
text-align: right;
vertical-align: bottom;
padding-bottom: 5px;
}
td#server_sig
{
border-top: 1px dotted #ccc;
background: url('
http://i20.photobucket.com/albums/b208/duhephi/eljay/flstylecontest/heartn.gif') no-repeat 0 0;
height: 97px;
vertical-align: bottom;
text-align: left;
padding-left: 60px;
padding-bottom: 5px;
}
And you're done!
