tesscodes | Layout: Shine Bright

light image prev |

tess027
dark image prev |

001: Informative Info

And here we have another layout! I was so glad to have figured out a way to create columns that I decided to make another one for variation! This one has light and dark versions, multiple options for your header cutout shape, an extremely minimal topbar, and (like the last one) a fully functioning and confusion-free flist. Enjoy! <3

002: The Layout

LIGHT VERSION - SHINE BRIGHT

/*-- SHINE BRIGHT - TESSISAMESS - 2015 --*/
/*-- 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:'Amatic SC';font-style:normal;font-weight:400;src:local('Amatic SC Regular'), local('AmaticSC-Regular'), url(http://fonts.gstatic.com/s/amaticsc/v6/DPPfSFKxRTXvae2bKDzp5BJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}
@font-face{font-family:'Amatic SC';font-style:normal;font-weight:700;src:local('Amatic SC Bold'), local('AmaticSC-Bold'), url(http://fonts.gstatic.com/s/amaticsc/v6/IDnkRTPGcrSVo50UyYNK7zy24DTBG-RpCwXaYkM4aks.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{height:0;width:4px;display:block;background:transparent;}
::-webkit-scrollbar-track-piece{background:#eee;}
::-webkit-scrollbar-thumb:vertical{height:0;background:#ddd;}
::-webkit-scrollbar-thumb:horizontal{width:0;background:#ddd;}

body{color:#777;background:#fff url(http://i.imgur.com/G3L9tcX.png)top left repeat fixed;margin:175px 0 0 0;padding:0;font-family:Helvetica,sans-serif;}

blockquote{font-style:italic;}

h1,h2,h3,h4,h5,h6{text-transform:uppercase;font-family:Amatic SC;font-weight:normal;}
h2{font-size:30px;}

a, a:active, a:visited, a:link{color:#815F9F;text-decoration:none;opacity:1;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
a:hover{opacity:0.6;}

/* WHOLE PAGE CONTAINERS */

.layout-two-column-left #alpha{margin:0 auto;}
.layout-two-column-left #beta{position:fixed;z-index:200;top:0;left:0;right:0;height:135px;width:100%;padding:10px 0;background:#fff;border-bottom:1px solid #ddd;}

#container{background:transparent;}

/* HEADER */

#header{padding:0;position:fixed;z-index:201;width:100%;top:10px;text;align:center;}
#nav-above, #banner-description, #nav-below{display:none;}

#header-text{background:transparent;border:none;margin:0;padding:0;color:#fff;text-shadow:1px 1px 0 #000,0 -1px 0 #000;}
#header-text a{color:#fff;}

#banner-header{font-family:Amatic SC;text-transform:uppercase;font-size:42px;text-align:center;letter-spacing:2px;}

/* MAIN COLUMN */

#alpha{background:transparent;border:none;padding:0;margin:0;}
.lj-view-recent #alpha{width:1053px;}
.lj-view-recent #alpha-inner{-webkit-column-width:340px;-moz-column-width:340px;column-width:340px;column-count:3;}
.lj-view-friends #alpha-inner, .lj-view-day #alpha-inner, .lj-view-archive #alpha-inner, .lj-view-tags #alpha-inner{margin:0 auto;width:627px;}

#alpha a, #alpha a:visited{color:#815F9F;}

.content-nav{margin:.5em 1em;}
.nav-top{display:none;}
.nav-bottom{text-align:center;font-size:22px;text-transform:uppercase;font-family:Amatic SC;}
#tagpage-header h2{text-align:center;font-size:18px;}

#tagpage-header{text-align:center;}
.date-header{display:none;}
#column-footer{clear:both;}

/* SIDEBAR */

#beta{text-align:center;}
#beta-inner{width:100%;margin:0 auto;font-size:8px;color:#777;}

.module{padding:3px;background:transparent;margin:0 0 5px 0;border:none;}

.module-header{background:transparent;border:none;text-transform:uppercase;font-family:Amatic SC;font-size:22px;}
.module-header h3{margin:0;padding:5px;font-weight:300;}
.module-header a, .module-header a:visited{color:#777;}

.module-list{margin:0;padding:0;}
.module-list-item{margin:0;padding:0;}

.module-customtext{}
.module-customtext img{height:100px;background:#815F9F url(http://i.imgur.com/cQniRJG.gif) top right;}
.module-customtext .module-content{padding:0;}

.module-viewlinks .module-header{display:none;}
.module-viewlinks{padding-top:5px;text-transform:uppercase;letter-spacing:4px;}
.module-viewlinks ul{list-style:none;margin:0;padding:0;}
.module-viewlinks li{display:inline-block;}
.module-viewlinks li a{display:inline-block;width:140px;padding:2px 0;margin:0;border:1px solid #fff;color:#777;}
.module-viewlinks li a:hover{opacity:1!important;background:url(http://i.imgur.com/G3L9tcX.png);border:1px solid #ddd;}

.module-layoutcredit a{opacity:0.9;padding:4px 0;display:block;position:fixed;right:0;bottom:0;width:86px;background:#fff;border-top:1px solid #ddd;border-left:1px solid #ddd;margin:0;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;-webkit-border-radius: 9px 0 0 0;border-radius: 9px 0 0 0;}
.module-layoutcredit a:hover{padding-bottom:7px;}
.module-layoutcredit .module-header{display:none;}
.module-layoutcredit p{padding:2px 0 0 0;margin:0;text-transform:uppercase;letter-spacing:2px;}

.module-typelist, .module-customtext2, .module-about, .module-calendar, .module-categories, .module-pagesummary, .module-syndicate, .module-powered, .module-ads{display:none;}

/* ALL ENTRIES */

.entry-content{margin:0;}
.entry-text{min-height:1px;overflow:auto;}

.entry-header{background:transparent;border:none;text-transform:uppercase;font-family:Amatic SC;text-align:center;position:relative;z-index:199;border-bottom:1px solid #eee;}
.entry-header h3{font-size:27px;letter-spacing:2px;padding:0;margin:0;font-weight:700;color:#815F9F;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#815F9F;}
.entry-datetime{text-transform:uppercase;font-size:9px;letter-spacing:2px;color:#777;margin:5px 0;text-align:center;}

.entry-metadata{display:none;}

.ljtags{font-size:0;color:transparent;text-transform:uppercase;margin-top:15px;padding-top:4px;border-top:1px solid #eee;}
.ljtags a{font-size:8px;display:inline-block;padding-right:8px;letter-spacing:1px;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:#815F9F;}
.ljtags a:before{content:'#';}

/* RECENT ENTRIES */

#sticky-note{display:none;}

.lj-view-recent .entry{background:#fff;border:1px solid #ddd;display:inline-block;vertical-align:top;width:339px;margin:0 0 15px 0;padding:0;text-align:justify;font-size:12px;}
.entry-inner{padding:7px;}
.lj-view-recent .entry img{max-width:310px;padding:5px;border:1px solid #ddd;background:url(http://i.imgur.com/G3L9tcX.png);}
.lj-view-recent .entry-linkbar{display:none;}

.outer-entry-userpic, .mid-entry-userpic, .header-poster, .lj-view-recent .inner-entry-userpic{display:none;}

/* FRIENDS PAGE */

.lj-view-friends .entry{background:#fff;border:1px solid #ddd;width:600px;margin:8px 5px 12px 5px;padding:7px;text-align:justify;font-size:12px;}
.lj-view-friends .entry img{max-width:573px;padding:5px;border:1px solid #ddd;background:url(http://i.imgur.com/G3L9tcX.png);}

.lj-view-friends .inner-entry-userpic{text-align:center;padding:0;position:absolute;margin-top:-65px;margin-left:605px;}
.lj-view-friends .inner-entry-userpic img{width:55px;height:55px;padding:5px;background:#fff;border:1px solid #ddd;margin-bottom:5px;}
.pic-poster img{display:none;}
.ljuser{font-size:9px;font-weight:normal;text-transform:uppercase;}

.lj-view-friends .entry-linkbar{font-size:9px;text-transform:uppercase;text-align:center;}
.lj-view-friends .entry-linkbar ul{list-style:none;padding-left:0;margin:8px -4px 0 0;font-size:9px;}
.lj-view-friends .entry-linkbar li{border-left:none;padding:0;margin:3px;}
.lj-view-friends .entry-linkbar li a{display:inline-block;text-align:center;width:90px;padding:2px 0;background:#fff;border:1px solid #ddd;margin:0;color:#777!important;}
.lj-view-friends .entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions]{display:none;width:0;padding:0;margin:0;}

/* ARCHIVE VIEW */

.lj-view-archive .entry{background:#fff;border:1px solid #ddd;width:500px;margin:8px 5px 12px 5px;padding:7px;font-size:12px;}

.yearlinks{text-align:left;font-size:22px;font-family:Amatic SC;text-transform:uppercase;font-weight:700;}
.year{list-style:none;}
.year li{display:inline;padding:2px;}

.yeartable{border-collapse:collapse;border:1px solid #ddd;margin:0 auto;width:80%;}

td.monthlable{text-align:left;font-size:20px;font-family:Amatic SC;text-transform:uppercase;color:#777;font-weight:700;}
td.viewmonth{text-align:right;font-size:20px;font-family:Amatic SC;text-transform:uppercase;color:#777;font-weight:700;}
.dayname{text-align:center;font-size:20px;font-family:Amatic SC;text-transform:uppercase;color:#777;font-weight:700;}

.yeartable td{border:1px solid #ddd!important;padding:5px;}

/* CONTENT FOOTER */

#content-footer{clear:both;height:0;}

/* ICON REPLACEMENTS */

.ljuser img[src*="img/userinfo.gif"], .ljuser img[src*="img/community.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/n3Ik8SS.png) no-repeat!important;padding:16px 0 0 16px!important;}
img[src*="img/icon_protected.gif"], img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/BhjqDL4.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/n3Ik8SS.png) no-repeat!important;padding:16px 0 0 16px!important;}

DARK VERSION - MILES TO GO

/*-- MILES TO GO - TESSISAMESS - 2015 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{height:0;width:4px;display:block;background:transparent;}
::-webkit-scrollbar-track-piece{background:#101010;}
::-webkit-scrollbar-thumb:vertical{height:0;background:#000;}
::-webkit-scrollbar-thumb:horizontal{width:0;background:#000;}

body{color:#555;background:#000 url(http://i.imgur.com/IP3Si66.png)top left repeat fixed;margin:175px 0 0 0;padding:0;font-family:Helvetica,sans-serif;}

blockquote{font-style:italic;}

h1,h2,h3,h4,h5,h6{text-transform:uppercase;font-family:Amatic SC;font-weight:normal;}
h2{font-size:30px;}

a, a:active, a:visited, a:link{color:#4D5E6C;text-decoration:none;opacity:1;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
a:hover{opacity:0.6;}

/* WHOLE PAGE CONTAINERS */

#container{background:transparent;}

/* HEADER */

#header{padding:0;position:fixed;z-index:201;width:100%;top:10px;text;align:center;}
#nav-above, #banner-description, #nav-below{display:none;}

#header-text{background:transparent;border:none;margin:0;padding:0;color:#000;text-shadow:1px 1px 0 #fff;}
#header-text a{color:#000;}

#banner-header{font-family:Amatic SC;text-transform:uppercase;font-size:42px;text-align:center;letter-spacing:2px;}

/* MAIN COLUMN */

#alpha a, #alpha a:visited{color:#4D5E6C;}

#tagpage-header{text-align:center;}
.date-header{display:none;}
#column-footer{clear:both;}

/* SIDEBAR */

#beta{text-align:center;}
#beta-inner{width:100%;margin:0 auto;font-size:8px;color:#555;}

.module{padding:3px;background:transparent;margin:0 0 5px 0;border:none;}

.module-list{margin:0;padding:0;}
.module-list-item{margin:0;padding:0;}

.module-customtext{}
.module-customtext img{height:100px;background:#4D5E6C url(http://i.imgur.com/rNxNBkC.gif) center center;}
.module-customtext .module-content{padding:0;}

.module-viewlinks .module-header{display:none;}
.module-viewlinks{padding-top:5px;text-transform:uppercase;letter-spacing:4px;}
.module-viewlinks ul{list-style:none;margin:0;padding:0;}
.module-viewlinks li{display:inline-block;}
.module-viewlinks li a{display:inline-block;width:140px;padding:2px 0;margin:0;border:1px solid #000;color:#555;}
.module-viewlinks li a:hover{opacity:1!important;background:url(http://i.imgur.com/IP3Si66.png);border:1px solid #101010;}

.module-layoutcredit a{opacity:0.9;padding:4px 0;display:block;position:fixed;right:0;bottom:0;width:86px;background:#000;border-top:1px solid #101010;border-left:1px solid #101010;margin:0;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;-webkit-border-radius: 9px 0 0 0;border-radius: 9px 0 0 0;}
.module-layoutcredit a:hover{padding-bottom:7px;}
.module-layoutcredit .module-header{display:none;}
.module-layoutcredit p{padding:2px 0 0 0;margin:0;text-transform:uppercase;letter-spacing:2px;}

.module-typelist, .module-customtext2, .module-about, .module-calendar, .module-categories, .module-pagesummary, .module-syndicate, .module-powered, .module-ads{display:none;}

/* ALL ENTRIES */

.entry-content{margin:0;}
.entry-text{min-height:1px;overflow:auto;}

.entry-header{background:transparent;border:none;text-transform:uppercase;font-family:Amatic SC;text-align:center;position:relative;z-index:199;border-bottom:1px solid #101010;}
.entry-header h3{font-size:27px;letter-spacing:2px;padding:0;margin:0;font-weight:700;color:#4D5E6C;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#4D5E6C;}
.entry-datetime{text-transform:uppercase;font-size:9px;letter-spacing:2px;color:#444;margin:5px 0;text-align:center;}

.entry-metadata{display:none;}

.ljtags{font-size:0;color:transparent;text-transform:uppercase;margin-top:15px;padding-top:4px;border-top:1px solid #101010;}
.ljtags a{font-size:8px;display:inline-block;padding-right:8px;letter-spacing:1px;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:#4D5E6C;}
.ljtags a:before{content:'#';}

/* RECENT ENTRIES */

#sticky-note{display:none;}

.lj-view-recent .entry{background:#000;border:1px solid #101010;display:inline-block;vertical-align:top;width:339px;margin:0 0 15px 0;padding:0;text-align:justify;font-size:12px;}
.entry-inner{padding:7px;}
.lj-view-recent .entry img{max-width:310px;padding:5px;border:1px solid #101010;background:url(http://i.imgur.com/IP3Si66.png);}
.lj-view-recent .entry-linkbar{display:none;}

.outer-entry-userpic, .mid-entry-userpic, .header-poster, .lj-view-recent .inner-entry-userpic{display:none;}

/* FRIENDS PAGE */

.lj-view-friends .entry{background:#000;border:1px solid #101010;width:600px;margin:8px 5px 12px 5px;padding:7px;text-align:justify;font-size:12px;}
.lj-view-friends .entry img{max-width:573px;padding:5px;border:1px solid #101010;background:url(http://i.imgur.com/IP3Si66.png);}

.lj-view-friends .inner-entry-userpic{text-align:center;padding:0;position:absolute;margin-top:-65px;margin-left:605px;}
.lj-view-friends .inner-entry-userpic img{width:55px;height:55px;padding:5px;background:#000;border:1px solid #101010;margin-bottom:5px;}
.pic-poster img{display:none;}
.ljuser{font-size:9px;font-weight:normal;text-transform:uppercase;}

.lj-view-friends .entry-linkbar{font-size:9px;text-transform:uppercase;text-align:center;}
.lj-view-friends .entry-linkbar ul{list-style:none;padding-left:0;margin:8px -4px 0 0;font-size:9px;}
.lj-view-friends .entry-linkbar li{border-left:none;padding:0;margin:3px;}
.lj-view-friends .entry-linkbar li a{display:inline-block;text-align:center;width:90px;padding:2px 0;background:#000;border:1px solid #101010;margin:0;color:#444!important;}
.lj-view-friends .entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions]{display:none;width:0;padding:0;margin:0;}

/* ARCHIVE VIEW */

.lj-view-archive .entry{background:#000;border:1px solid #101010;width:500px;margin:8px 5px 12px 5px;padding:7px;font-size:12px;}

.yearlinks{text-align:left;font-size:22px;font-family:Amatic SC;text-transform:uppercase;font-weight:700;}
.year{list-style:none;}
.year li{display:inline;padding:2px;}

.yeartable{border-collapse:collapse;border:1px solid #101010;margin:0 auto;width:80%;}

td.monthlable{text-align:left;font-size:20px;font-family:Amatic SC;text-transform:uppercase;color:#555;font-weight:700;}
td.viewmonth{text-align:right;font-size:20px;font-family:Amatic SC;text-transform:uppercase;color:#555;font-weight:700;}
.dayname{text-align:center;font-size:20px;font-family:Amatic SC;text-transform:uppercase;color:#555;font-weight:700;}

.yeartable td{border:1px solid #101010!important;padding:5px;}

/* CONTENT FOOTER */

#content-footer{clear:both;height:0;}

/* ICON REPLACEMENTS */

003: Directions

→Go to Basics, choose S2, fill in your title and subtitle if desired, then save.
→Go to Look and Feel, choose Complete Style for the layout, then save.
→Go to Custom Options, and choose the following:

→Layout Type: Two column (Sidebar on left)
→Disable customized comment pages for your journal: Yes

→Link text to leave a comment: Comment
→Text used to link to the 'Recent Entries' view: Recent
→Text used to link to the 'Archive' view: Archive
→Text used to link to the 'Friends' view: Friends
→Text used to link to the 'User Information' view: Profile

→Body of custom sidebar module [FOR LIGHT VERSION]: <img src="http://i.imgur.com/dVkXPlD.png">
→Body of custom sidebar module [FOR DARK VERSION]: <img src="http://i.imgur.com/Tcvn9mC.png">
→Person to credit if you have an individually created layout: Layout by Tessisamess
→URL to link the credit to: http://tessisamess.insanejournal.com/

→Custom stylesheet: Input the code above and save

004: CTRL+F This Shit

LIGHT VERSION - SHINE BRIGHT
→#FFF to change topbar and entry background color.
→http://i.imgur.com/G3L9tcX.png to change page background, image border, and nav link background.
→#EEE to change date and tag border.
→#DDD to change all borders.
→#815F9F to change accent color.
→#777 to change bulk text color.
→#000 to change title shadow color.
→http://i.imgur.com/cQniRJG.gif to change topbar gif.
→AMATIC SC to change accent font.
→HELVETICA,SANS-SERIF to change THING.

ALTERNATE LIGHT CUTOUTS
→HEART: http://i.imgur.com/IYglKaE.png
→STAR: http://i.imgur.com/kdWNGRR.png
→CIRCLE: http://i.imgur.com/Tv8YFqq.png
→SKULL: http://i.imgur.com/yy5ETls.png

DARK VERSION - MILES TO GO
→#000 to change topbar and entry background color.
→http://i.imgur.com/IP3Si66.png to change page background, image border, and nav link background.
→#101010 to change all borders.
→#4D5E6C to change accent color.
→#555 to change bulk text color.
→#444 to change date and nav link color.
→#FFF to change title shadow color.
→http://i.imgur.com/rNxNBkC.gif to change topbar gif.
→AMATIC SC to change accent font.
→HELVETICA,SANS-SERIF to change THING.

ALTERNATE DARK CUTOUTS
→HEART: http://i.imgur.com/sP2iWOS.png
→STAR: http://i.imgur.com/NAid7V9.png
→CIRCLE: http://i.imgur.com/Hncm4Hc.png
→DIAMOND: http://i.imgur.com/eqKTXec.png

005: Rules and Shit

→Credit me in your profile if removing it from the layout.
→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.