Tessisamess

Took a tiny break between working through my sale layouts and made you guys a thing! I saw this cute ass DW navigation code and liked the visual, so I decided to make my own version in a layout. This layout features a five picture CSS slideshow (oooh, ahhh), bit I've also made a single-image option that you can view over at ~tess017a. Enjoy! <3

SLIDESHOW
FRIENDS_OPT_ITEMS=>15 FRIENDS_WEBSITE<= <div id="sidebar"> <span id="left"> <img src="ICON"><br> <span id="title">TITLE HERE</span> <span id="links"> <a href="http://journalname.insanejournal.com/">RECENT</a> <a href="http://journalname.insanejournal.com/profile">PROFILE</a> <a href="http://journalname.insanejournal.com/friends" id="current">FRIENDS</a> <a href="http://journalname.insanejournal.com/calendar">ARCHIVE</a> </span> </span> <span id="slider"> <ul> <li id="first" class="firstanimation"><img src="IMAGE1"></li> <li id="second" class="secondanimation"><img src="IMAGE2"></li> <li id="third" class="thirdanimation"><img src="IMAGE3"></li> <li id="fourth" class="fourthanimation"><img src="IMAGE4"></li> <li id="fifth" class="fifthanimation"><img src="IMAGE5"></li> </ul> </span> </div> <span id="layoutby"><a href="http://tessisamess.insanejournal.com/">layout by tessisamess</a></span> <!--This fixes a bug in Internet Explorer--> <div> </div> <=FRIENDS_WEBSITE DAY_TALK_LINKS<= <table> <tr><td class="comments" colspan="2"><div id="footer"> <a href="%%urlread%%">%%messagecount%% COMMENTS</a> | <a href="%%urlpost%%">ADD COMMENT</a> </div> </td></tr> <=DAY_TALK_LINKS DAY_WEBSITE<= <div id="sidebar"> <span id="left"> <img src="ICON"><br> <span id="title">TITLE HERE</span> <span id="links"> <a href="http://journalname.insanejournal.com/">RECENT</a> <a href="http://journalname.insanejournal.com/profile">PROFILE</a> <a href="http://journalname.insanejournal.com/friends">FRIENDS</a> <a href="http://journalname.insanejournal.com/calendar" id="current">ARCHIVE</a> </span> </span> <span id="slider"> <ul> <li id="first" class="firstanimation"><img src="IMAGE1"></li> <li id="second" class="secondanimation"><img src="IMAGE2"></li> <li id="third" class="thirdanimation"><img src="IMAGE3"></li> <li id="fourth" class="fourthanimation"><img src="IMAGE4"></li> <li id="fifth" class="fifthanimation"><img src="IMAGE5"></li> </ul> </span> </div> <span id="layoutby"><a href="http://tessisamess.insanejournal.com/">layout by tessisamess</a></span> <!--This fixes a bug in Internet Explorer--> <div> </div> <=DAY_WEBSITE LASTN_TALK_LINKS<= <table> <tr><td class="comments" colspan="2"><div id="footer"> <a href="%%urlread%%">%%messagecount%% COMMENTS</a> | <a href="%%urlpost%%">ADD COMMENT</a> </div> </td></tr> <=LASTN_TALK_LINKS GLOBAL_HEAD<= <title>JOURNAL TITLE</title> <style> <!-- /*-- SLIDER - TESSISAMESS - 2014 --*/ /*-- Credit me in profile if removing my credit link from main block --*/ /*-- Find more fun stuff at: tessisamess.insanejournal.com --*/ /*GENERAL*/ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff'); } ::-webkit-scrollbar{width:9px;height:9px;} ::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment{height:0;width:4px;display:block;background:transparent;} ::-webkit-scrollbar-track-piece{background:#333;} ::-webkit-scrollbar-thumb:vertical{height:0;background:#8FBC8B;} ::-webkit-scrollbar-thumb:horizontal{width:0;background:#8FBC8B;} body{background:#ddd url()top left repeat fixed;padding:250px 0 10px 0;margin:0;} body,table,tr,td{text-align:justify;font-family:helvetica,arial,sans-serif;font-size:12px;color:#444;} a{color:#8FBC8B;text-decoration:none;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;} a:hover{color:#999;text-decoration:none;} blockquote{color:#666;padding:5px;border:3px solid #8FBC8B;-webkit-border-radius:7px;border-radius:7px;} ul{list-style:square;} h1,h2,h3,h4,h5,h6{font-family:Oswald;color:#8FBC8B;text-transform:uppercase;font-weight:normal;margin:5px 0 0 0;padding:0;} h1,h2,h3{letter-spacing:1px;} /*THE GOODS*/ #sidebar{visibility:visible;width:650px;height:250px;position:absolute;top:20px;left:50%;margin:0 0 0 -325px;background:#fff;box-shadow:0px 1px 4px #aaa;} #sidebar img{display:inline;} #left{display:block;float:left;width:180px;height:230px;padding:10px;background:#333;color:#999;text-align:center;text-transform:uppercase;} #left img{width:80px;padding:5px;margin-bottom:5px;border:3px solid #8FBC8B;-webkit-border-radius:50px;border-radius:50px;} #title{display:block;font-family:Oswald;font-size:20px;color:#8FBC8B;letter-spacing:1px;} #links{font-size:9px;} #links a{display:block;padding:2px;margin:2px 0;background:#8FBC8B;letter-spacing:0px;border:3px solid #8FBC8B;color:#fff;-webkit-border-radius:7px;border-radius:7px;} #links a:hover{background:transparent;letter-spacing:2px;} #current{background:transparent!important;letter-spacing:2px!important;} #slider{display:block;margin-left:180px;height:250px;width:450px;overflow:hidden;} #slider ul{margin:0;padding:0;position:relative;} #slider li{width:450px;height:250px;position:absolute;right:-450px;list-style:none;} #slider li.firstanimation{-moz-animation:cycle 15s linear infinite;-webkit-animation:cycle 15s linear infinite;} #slider li.secondanimation{-moz-animation:cycletwo 15s linear infinite;-webkit-animation:cycletwo 15s linear infinite;} #slider li.thirdanimation{-moz-animation:cyclethree 15s linear infinite;-webkit-animation:cyclethree 15s linear infinite;} #slider li.fourthanimation{-moz-animation:cyclefour 15s linear infinite;-webkit-animation:cyclefour 15s linear infinite;} #slider li.fifthanimation{-moz-animation:cyclefive 15s linear infinite;-webkit-animation:cyclefive 15s linear infinite;} @-moz-keyframes cycle{0%{right:0px;}4%{right:0px;}16%{right:0px;}20%{right:450px;}21%{right:-450px;}92%{right:-450px;}96%{right:-450px;}100%{right:0px;}} @-moz-keyframes cycletwo{0%{right:-450px;}16%{right:-450px;}20%{right:0px;}24%{right:0px;}36%{right:0px;}40%{right:450px;}41%{right:-450px;}100%{right:-450px;}} @-moz-keyframes cyclethree{0%{right:-450px;}36%{right:-450px;}40%{right:0px;}44%{right:0px;}56%{right:0px;}60%{right:450px;}61%{right:-450px;}100%{right:-450px;}} @-moz-keyframes cyclefour{0%{right:-450px;}56%{right:-450px;}60%{right:0px;}64%{right:0px;}76%{right:0px;}80%{right:450px;}81%{right:-450px;}100%{right:-450px;}} @-moz-keyframes cyclefive{0%{right:-450px;}76%{right:-450px;}80%{right:0px;}84%{right:0px;}96%{right:0px;}100%{right:450px;}} @-webkit-keyframes cycle{0%{right:0px;}4%{right:0px;}16%{right:0px;}20%{right:450px;}21%{right:-450px;}50%{right:-450px;}92%{right:-450px;}96%{right:-450px;}100%{right:0px;}} @-webkit-keyframes cycletwo{0%{right:-450px;}16%{right:-450px;}20%{right:0px;}24%{right:0px;}36%{right:0px;}40%{right:450px;}41%{right:-450px;}100%{right:-450px;}} @-webkit-keyframes cyclethree{0%{right:-450px;}36%{right:-450px;}40%{right:0px;}44%{right:0px;}56%{right:0px;}60%{right:450px;}61%{right:-450px;}100%{right:-450px;}} @-webkit-keyframes cyclefour{0%{right:-450px;}56%{right:-450px;}60%{right:0px;}64%{right:0px;}76%{right:0px;}80%{right:450px;}81%{right:-450px;}100%{right:-450px;}} @-webkit-keyframes cyclefive{0%{right:-450px;}76%{right:-450px;}80%{right:0px;}84%{right:0px;}96%{right:0px;}100%{right:450px;}} #layoutby a{position:fixed;right:-135px;bottom:10px;font-family:Oswald;padding:3px 10px 3px 30px;text-align:center;text-transform:uppercase;font-size:12px;background:#fff url(http://i.imgur.com/XwgChoi.png)center left no-repeat;color:#555;box-shadow:0px 1px 4px #aaa;} #layoutby a:hover{right:0;} /*ENTRIES*/ table, tr, td, .shadowed{background:transparent;font-size:12px;} .content{background:transparent;} table{width:650px;margin:0 auto;} table td{border:0px transparent;} table table{background:transparent;width:100%;margin:0;} table, table table td{background:transparent;border:none;padding:0;} .shadowed img{color:#E3DECB;border:none;} td.caption, .subject{text-align:left;font-family:Oswald;font-size:20px;color:#8FBC8B;text-transform:uppercase;padding:5px 0;letter-spacing:1px;} p table table td.caption, .head{line-height:15px;} #footer{float:right;text-align:center;width:180px;margin:10px 0 0 0;padding:1px 2px;background:#8FBC8B;text-transform:uppercase;font-size:9px;color:#fff;-webkit-border-radius:7px;border-radius:7px;} #footer a{color:#fff;} #footer a:hover{opacity:0.5;} .entrybox .index{color:#F6BF96;} .entrybox{visibility:visible;padding:6px;background:#fff;box-shadow:0px 1px 4px #aaa;} .entrybox, .entrybox table{} .entrybox table{line-height:150%;} .entrybox td.index2{text-align:center;} table table table{background:transparent;width:auto;float:right;} .meta{font-size:5pt;text-transform:uppercase;} table table table td.meta{padding:1px;line-height:4pt;font-size:5pt;} .index2{font-style:normal;text-align:center;} .entrybox a.index{display:inline-block;margin-left:5px;margin-bottom:5px;text-align:center;font-size:8px;} .entrybox a.index img{width:70px;height:70px;padding:5px;margin-bottom:5px;background:#333;border:3px solid #8FBC8B;-webkit-border-radius:50px;border-radius:50px;} .entrybox a.index font{color:#666;display:inline-block;text-align:center;} table table .index{padding:0;background:transparent;text-transform:uppercase;color:#000;line-height:8px;font-size:8px;text-align:right;} .ljuser img[src*="img/userinfo.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/LAUwdKh.png)center left no-repeat!important;padding:16px 0 0 18px!important;margin-bottom:2px!important;} .ljuser img[src*="img/community.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/MWoQ1Zr.png)center left no-repeat!important;padding:16px 0 0 18px!important;margin-bottom:2px!important;} img[src*="img/icon_protected.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/EkCfriC.png)no-repeat!important;padding:16px 0 0 16px!important;} img[src*="img/icon_private.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/ADSKReo.png)no-repeat!important;padding:16px 0 0 16px!important;} img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/EkCfriC.png)no-repeat!important;padding:16px 0 0 16px!important;} /*HIDING SHIT*/ .shadowed img, tr.caption, .entrybox td.index, .index3{display:none;} table table table table .meta {visibility:hidden;position:absolute;top:-20px;} .shadowed td div{visibility:hidden;position:absolute;top:1px;} --> </style> <=GLOBAL_HEAD FRIENDS_TALK_LINKS<= <table> <tr><td class="comments" colspan="2"><div id="footer"> <a href="%%urlread%%">%%messagecount%% COMMENTS</a> | <a href="%%urlpost%%">ADD COMMENT</a> </div> </td></tr> <=FRIENDS_TALK_LINKS LASTN_OPT_ITEMS=>10 CALENDAR_WEBSITE<= <div id="sidebar"> <span id="left"> <img src="ICON"><br> <span id="title">TITLE HERE</span> <span id="links"> <a href="http://journalname.insanejournal.com/">RECENT</a> <a href="http://journalname.insanejournal.com/profile">PROFILE</a> <a href="http://journalname.insanejournal.com/friends">FRIENDS</a> <a href="http://journalname.insanejournal.com/calendar" id="current">ARCHIVE</a> </span> </span> <span id="slider"> <ul> <li id="first" class="firstanimation"><img src="IMAGE1"></li> <li id="second" class="secondanimation"><img src="IMAGE2"></li> <li id="third" class="thirdanimation"><img src="IMAGE3"></li> <li id="fourth" class="fourthanimation"><img src="IMAGE4"></li> <li id="fifth" class="fifthanimation"><img src="IMAGE5"></li> </ul> </span> </div> <span id="layoutby"><a href="http://tessisamess.insanejournal.com/">layout by tessisamess</a></span> <!--This fixes a bug in Internet Explorer--> <div> </div> <=CALENDAR_WEBSITE LASTN_WEBSITE<= <div id="sidebar"> <span id="left"> <img src="ICON"><br> <span id="title">TITLE HERE</span> <span id="links"> <a href="http://journalname.insanejournal.com/" id="current">RECENT</a> <a href="http://journalname.insanejournal.com/profile">PROFILE</a> <a href="http://journalname.insanejournal.com/friends">FRIENDS</a> <a href="http://journalname.insanejournal.com/calendar">ARCHIVE</a> </span> </span> <span id="slider"> <ul> <li id="first" class="firstanimation"><img src="IMAGE1"></li> <li id="second" class="secondanimation"><img src="IMAGE2"></li> <li id="third" class="thirdanimation"><img src="IMAGE3"></li> <li id="fourth" class="fourthanimation"><img src="IMAGE4"></li> <li id="fifth" class="fifthanimation"><img src="IMAGE5"></li> </ul> </span> </div> <span id="layoutby"><a href="http://tessisamess.insanejournal.com/">layout by tessisamess</a></span> <!--This fixes a bug in Internet Explorer--> <div> </div> <=LASTN_WEBSITE

STATIC VERSION
FRIENDS_OPT_ITEMS=>15 FRIENDS_WEBSITE<= <div id="sidebar"> <span id="left"> <img src="ICON"><br> <span id="title">TITLE HERE</span> <span id="links"> <a href="http://journalname.insanejournal.com/">RECENT</a> <a href="http://journalname.insanejournal.com/profile">PROFILE</a> <a href="http://journalname.insanejournal.com/friends" id="current">FRIENDS</a> <a href="http://journalname.insanejournal.com/calendar">ARCHIVE</a> </span> </span> <span id="right"> <img src="IMAGEHERE"> </span> </div> <span id="layoutby"><a href="http://tessisamess.insanejournal.com/">layout by tessisamess</a></span> <!--This fixes a bug in Internet Explorer--> <div> </div> <=FRIENDS_WEBSITE DAY_TALK_LINKS<= <table> <tr><td class="comments" colspan="2"><div id="footer"> <a href="%%urlread%%">%%messagecount%% COMMENTS</a> | <a href="%%urlpost%%">ADD COMMENT</a> </div> </td></tr> <=DAY_TALK_LINKS DAY_WEBSITE<= <div id="sidebar"> <span id="left"> <img src="ICON"><br> <span id="title">TITLE HERE</span> <span id="links"> <a href="http://journalname.insanejournal.com/">RECENT</a> <a href="http://journalname.insanejournal.com/profile">PROFILE</a> <a href="http://journalname.insanejournal.com/friends">FRIENDS</a> <a href="http://journalname.insanejournal.com/calendar" id="current">ARCHIVE</a> </span> </span> <span id="right"> <img src="IMAGEHERE"> </span> </div> <span id="layoutby"><a href="http://tessisamess.insanejournal.com/">layout by tessisamess</a></span> <!--This fixes a bug in Internet Explorer--> <div> </div> <=DAY_WEBSITE LASTN_TALK_LINKS<= <table> <tr><td class="comments" colspan="2"><div id="footer"> <a href="%%urlread%%">%%messagecount%% COMMENTS</a> | <a href="%%urlpost%%">ADD COMMENT</a> </div> </td></tr> <=LASTN_TALK_LINKS GLOBAL_HEAD<= <title>JOURNAL TITLE</title> <style> <!-- /*-- SLIDER [STATIC] - TESSISAMESS - 2014 --*/ /*-- Credit me in profile if removing my credit link from main block --*/ /*-- Find more fun stuff at: tessisamess.insanejournal.com --*/ /*GENERAL*/ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff'); } ::-webkit-scrollbar{width:9px;height:9px;} ::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment{height:0;width:4px;display:block;background:transparent;} ::-webkit-scrollbar-track-piece{background:#333;} ::-webkit-scrollbar-thumb:vertical{height:0;background:#CD5C5C;} ::-webkit-scrollbar-thumb:horizontal{width:0;background:#CD5C5C;} body{background:#ddd url()top left repeat fixed;padding:250px 0 10px 0;margin:0;} body,table,tr,td{text-align:justify;font-family:helvetica,arial,sans-serif;font-size:12px;color:#444;} a{color:#CD5C5C;text-decoration:none;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;} a:hover{color:#999;text-decoration:none;} blockquote{color:#666;padding:5px;border:3px solid #CD5C5C;-webkit-border-radius:7px;border-radius:7px;} ul{list-style:square;} /*THE GOODS*/ #sidebar{visibility:visible;width:650px;height:250px;position:absolute;top:20px;left:50%;margin:0 0 0 -325px;background:#fff;box-shadow:0px 1px 4px #aaa;} #sidebar img{display:inline;} #left{display:block;float:left;width:180px;height:230px;padding:10px;background:#333;color:#999;text-align:center;text-transform:uppercase;} #left img{width:80px;padding:5px;margin-bottom:5px;border:3px solid #CD5C5C;-webkit-border-radius:50px;border-radius:50px;} #right{display:block;margin-left:180px;overflow:hidden;} #title{display:block;font-family:Oswald;font-size:20px;color:#CD5C5C;letter-spacing:1px;} #links{font-size:9px;} #links a{display:block;padding:2px;margin:2px 0;background:#CD5C5C;border:3px solid #CD5C5C;color:#fff;letter-spacing:0px;-webkit-border-radius:7px;border-radius:7px;} #links a:hover{background:transparent;letter-spacing:2px;} #current{background:transparent!important;letter-spacing:2px!important;} #layoutby a{position:fixed;right:-135px;bottom:10px;font-family:Oswald;padding:3px 10px 3px 30px;text-align:center;text-transform:uppercase;font-size:12px;background:#fff url(http://i.imgur.com/XwgChoi.png)center left no-repeat;color:#555;box-shadow:0px 1px 4px #aaa;} #layoutby a:hover{right:0;} /*ENTRIES*/ table, tr, td, .shadowed{background:transparent;font-size:12px;} .content{background:transparent;} table{width:650px;margin:0 auto;} table td{border:0px transparent;} table table{background:transparent;width:100%;margin:0;} table, table table td{background:transparent;border:none;padding:0;} .shadowed img{color:#E3DECB;border:none;} td.caption, .subject{text-align:left;font-family:Oswald;font-size:20px;color:#CD5C5C;text-transform:uppercase;padding:5px 0;letter-spacing:1px;} p table table td.caption, .head{line-height:15px;} #footer{float:right;text-align:center;width:180px;margin:10px 0 0 0;padding:1px 2px;background:#CD5C5C;text-transform:uppercase;font-size:9px;color:#fff;-webkit-border-radius:7px;border-radius:7px;} #footer a{color:#fff;} #footer a:hover{opacity:0.5;} .entrybox .index{color:#F6BF96;} .entrybox{visibility:visible;padding:6px;background:#fff;box-shadow:0px 1px 4px #aaa;} .entrybox, .entrybox table{} .entrybox table{line-height:150%;} .entrybox td.index2{text-align:center;} table table table{background:transparent;width:auto;float:right;} .meta{font-size:5pt;text-transform:uppercase;} table table table td.meta{padding:1px;line-height:4pt;font-size:5pt;} .index2{font-style:normal;text-align:center;} .entrybox a.index{display:inline-block;margin-left:5px;margin-bottom:5px;text-align:center;font-size:8px;} .entrybox a.index img{width:70px;height:70px;padding:5px;margin-bottom:5px;background:#333;border:3px solid #CD5C5C;-webkit-border-radius:50px;border-radius:50px;} .entrybox a.index font{color:#666;display:inline-block;text-align:center;} table table .index{padding:0;background:transparent;text-transform:uppercase;color:#000;line-height:8px;font-size:8px;text-align:right;} .ljuser img[src*="img/userinfo.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/LAUwdKh.png)center left no-repeat!important;padding:16px 0 0 18px!important;margin-bottom:2px!important;} .ljuser img[src*="img/community.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/MWoQ1Zr.png)center left no-repeat!important;padding:16px 0 0 18px!important;margin-bottom:2px!important;} img[src*="img/icon_protected.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/EkCfriC.png)no-repeat!important;padding:16px 0 0 16px!important;} img[src*="img/icon_private.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/ADSKReo.png)no-repeat!important;padding:16px 0 0 16px!important;} img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/EkCfriC.png)no-repeat!important;padding:16px 0 0 16px!important;} /*HIDING SHIT*/ .shadowed img, tr.caption, .entrybox td.index, .index3{display:none;} table table table table .meta {visibility:hidden;position:absolute;top:-20px;} .shadowed td div{visibility:hidden;position:absolute;top:1px;} --> </style> <=GLOBAL_HEAD FRIENDS_TALK_LINKS<= <table> <tr><td class="comments" colspan="2"><div id="footer"> <a href="%%urlread%%">%%messagecount%% COMMENTS</a> | <a href="%%urlpost%%">ADD COMMENT</a> </div> </td></tr> <=FRIENDS_TALK_LINKS LASTN_OPT_ITEMS=>10 CALENDAR_WEBSITE<= <div id="sidebar"> <span id="left"> <img src="ICON"><br> <span id="title">TITLE HERE</span> <span id="links"> <a href="http://journalname.insanejournal.com/">RECENT</a> <a href="http://journalname.insanejournal.com/profile">PROFILE</a> <a href="http://journalname.insanejournal.com/friends">FRIENDS</a> <a href="http://journalname.insanejournal.com/calendar" id="current">ARCHIVE</a> </span> </span> <span id="right"> <img src="IMAGEHERE"> </span> </div> <span id="layoutby"><a href="http://tessisamess.insanejournal.com/">layout by tessisamess</a></span> <!--This fixes a bug in Internet Explorer--> <div> </div> <=CALENDAR_WEBSITE LASTN_WEBSITE<= <div id="sidebar"> <span id="left"> <img src="ICON"><br> <span id="title">TITLE HERE</span> <span id="links"> <a href="http://journalname.insanejournal.com/" id="current">RECENT</a> <a href="http://journalname.insanejournal.com/profile">PROFILE</a> <a href="http://journalname.insanejournal.com/friends">FRIENDS</a> <a href="http://journalname.insanejournal.com/calendar">ARCHIVE</a> </span> </span> <span id="right"> <img src="IMAGEHERE"> </span> </div> <span id="layoutby"><a href="http://tessisamess.insanejournal.com/">layout by tessisamess</a></span> <!--This fixes a bug in Internet Explorer--> <div> </div> <=LASTN_WEBSITE

→Make sure you have a website in your profile page.
→Go to Basics and choose S1, then save.
→Go to Look and Feel, choose Generator for all views, then save.
→Go to Custom Options and paste the layout code, then save. Make sure you've done a replace all on the following:

SLIDESHOW
→journalname
→ICON
→TITLE HERE
→IMAGE1 through IMAGE5; images must be 250x450 and you must have five.
→JOURNAL TITLE

STATIC VERSION
→journalname
→ICON
→TITLE HERE
→IMAGE HERE; image must be 250x450.
→JOURNAL TITLE

→All done! :D

PLEASE NOTE: The slideshow only supports five pictures; no more and no less. I could do edits but, honestly, it's really math-involved and I'm not so great with the numbers, so I do ask that y'all don't ask for edits to the picture amount. Never fear! There is another way to get more/less than five pictures in the slideshow, and I'm gonna show you how to do it!
→Install static version of layout.
→Download PhotoScape (Don't worry; it's free!)
→Follow this super quick tutorial I made just for you guys!
→And lmk in the comments if you guys want a tutorial on how to make regular gifs using this program and VLC!

→Oswald to change accent font.
→#ddd url()top left repeat fixed to change background color; () for adding a background image.
→helvetica,arial,sans-serif to change bulk font.
→#444 to change bulk font color.
→#fff to change entry background and comment link color.
→#aaa to change box shadow color.
→#333 to change sidebar background and scrollbar background.
→#8FBC8B to change GREEN accent color in slideshow.
→#CD5C5C to change PINK accent color in static.
→http://i.imgur.com/XwgChoi.png if you want to recolor my credit symbol in the credit tab; do not remove.

→Credit me either in your link list or your profile.
→Do not remove my credit from the CSS.
→Do not redistribute in part or in whole.
→If you break something during editing don't be scared to ask me to see what happened. Yep. That's a rule.
→If you're a maker like I am and you do something cool with this I'd really like to see it, but it's not necessary.