Tessisamess

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

image prev |

001: Informative Info

EYYYYYYYYYYYY a layout! I've been meaning to make this one since like December oops but I'm sort of glad I held off for so long because it came out better than if I'd made it nine months ago, imo. Columns on the recent page, regular entries on all other views (be sure to check out the friends page because it's a lot different.) Custom header, navlinks, entry link menus, sidebars—everything, basically. This is probably my most involved free layout to date, to be honest haha.

I may do a comm-specific version of this for people's Net comms if you guys want it, just be sure to let me know if you have a MIGHTY NEED or I'll get lazy and forget lmao. Enjoy! <3

002: The Layout

/*-- SOCIAL MEDIA - 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:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.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:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.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:'Open Sans';font-style:italic;font-weight:400;src:local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBo4P5ICox8Kq3LLUNMylGO4.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:'Open Sans';font-style:italic;font-weight:700;src:local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxolIZu-HDpmDIZMigmsroc4.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:#ddd;}
::-webkit-scrollbar-thumb:vertical{height:0;background:#fff;}
::-webkit-scrollbar-thumb:horizontal{width:0;background:#fff;}

body{color:#555;background:#eee;margin:390px 0 6px 0;padding:0;font-family:Open Sans,helvetica,arial,sans-serif;font-size:13px;}
blockquote{font-style:italic;}
h1,h2,h3,h4{color:#4C71B2;}
a, a:active, a:visited, a:link{color:#4C71B2;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{color:#777;}

/* WHOLE PAGE CONTAINERS */

.layout-two-column-right #alpha{margin:0 240px 0 0;padding:0;}
.layout-two-column-right #beta{width:220px;float:right;}

.lj-view-recent #alpha{margin:0 auto;}
.lj-view-recent #alpha-inner{-webkit-column-width:330px;-moz-column-width:330px;column-width:330px;}
.lj-view-recent #beta{width:0;}

.lj-view-recent #container{background:transparent;max-width:1074px;padding:0;}
#container{background:transparent;max-width:880px;margin:0 auto;padding-left:30px;}

/* HEADER */

#header{display:none;}

/* MAIN COLUMN */

#alpha{background:transparent;border:none;}

#alpha a, #alpha a:visited{color:#4C71B2;}
#alpha a:hover{color:#777;}

.content-nav{margin:.5em 1em;}
.nav-top{display:none;}
.nav-bottom{text-align:center;font-size:0;font-weight:bold;}
.nav-bottom a{font-size:15px;width:120px;display:inline-block;padding:5px 0;background:#fff;border:1px solid #d9d9d9;-webkit-box-shadow:0 3px 5px -1px #ddd;box-shadow:0 3px 5px -1px #ddd;}
.nav-bottom a:first-of-type{float:left;}
.nav-bottom a:last-of-type{float:right;}
#tagpage-header h2{text-align:center;font-size:15px;}

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

/* SIDEBAR */

#beta{text-align:center;}
#beta-inner{font-size:13px;color:#777;}

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

.module-customtext{background:#eee;position:absolute;top:0;left:0;width:100%;height:300px;z-index:201;}
.module-customtext .module-content{padding:0;}
.module-customtext2{}

.module-layoutcredit a{font-size:11px;padding:4px 0;display:block;position:fixed;right:8px;bottom:8px;width:86px;background:#fff;border:1px solid #ddd;margin:0;-webkit-box-shadow:0 3px 5px -1px #ddd;box-shadow:0 3px 5px -1px #ddd;-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;}
.module-layoutcredit a:hover{margin-bottom:7px;}
.module-layoutcredit .module-header{display:none;}
.module-layoutcredit p{padding:2px 0 0 0;margin:0;text-transform:lowercase;font-weight:bold;}

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

/* TOPBAR & HEADER */

.pics{width:100%;height:300px;overflow:hidden;}
.pics li{list-style:none;display:inline-block;padding:0;margin:0;width:20%;min-width:250px;height:300px;}
.pics li:nth-child(1){background:url(HEADERPIC1)center;background-size:cover;}
.pics li:nth-child(2){background:url(HEADERPIC2)center;background-size:cover;}
.pics li:nth-child(3){background:url(HEADERPIC3)center;background-size:cover;}
.pics li:nth-child(4){background:url(HEADERPIC4)center;background-size:cover;}
.pics li:nth-child(5){background:url(HEADERPIC5)center;background-size:cover;}

.navbar{height:45px;background:#ddd;margin-top:-20px;width:100%;position:relative;z-index:202;-webkit-box-shadow:0 1px 0 0 #bbb, 0 -1px 0 0 #bbb;box-shadow:0 1px 0 0 #bbb, 0 -1px 0 0 #bbb;}
.navbar a{font-weight:bold;}
.navbar span{display:block;margin:0 auto;max-width:1074px;text-align:left;}
.navbar img{float:left;width:80px;height:80px;border-radius:100px;padding:8px;background:#ddd;margin-top:-25px;margin-right:30px;-webkit-box-shadow:0 1px 0 0 #bbb, 0 -1px 0 0 #bbb;box-shadow:0 1px 0 0 #bbb, 0 -1px 0 0 #bbb;}
.nameinfo{color:#aaa;padding-top:1px;font-size:15px;}
.nameinfo a{display:block;width:300px;}

.buttons{float:right;margin-top:9px;}
.buttons a{display:inline-block;width:100px;margin-left:20px;border-radius:5px;height:25px;line-height:25px;text-align:center;color:#fff;border:1px solid #3D5A8E;background:#627eaf;background:-moz-linear-gradient(top,  #627eaf 0%, #4c71b2 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#627eaf), color-stop(100%,#4c71b2));background:-webkit-linear-gradient(top,  #627eaf 0%,#4c71b2 100%);background:-o-linear-gradient(top,  #627eaf 0%,#4c71b2 100%);background:-ms-linear-gradient(top,  #627eaf 0%,#4c71b2 100%);background:linear-gradient(to bottom,  #627eaf 0%,#4c71b2 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#627eaf', endColorstr='#4c71b2',GradientType=0 );}
.buttons a:hover{background:#4c71b2;background:-moz-linear-gradient(top,  #4c71b2 0%, #627eaf 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c71b2), color-stop(100%,#627eaf));background:-webkit-linear-gradient(top,  #4c71b2 0%,#627eaf 100%);background:-o-linear-gradient(top,  #4c71b2 0%,#627eaf 100%);background:-ms-linear-gradient(top,  #4c71b2 0%,#627eaf 100%);background:linear-gradient(to bottom,  #4c71b2 0%,#627eaf 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c71b2', endColorstr='#627eaf',GradientType=0 );}

/* GAMES & FRIENDS */

.friends, .games{padding:10px;width:180px;background:#fff;border:1px solid #d9d9d9;text-align:left;margin-bottom:20px;-webkit-box-shadow:0 3px 5px -1px #ddd;box-shadow:0 3px 5px -1px #ddd;}
.friends h3, .games h3{padding:0;margin:0 0 5px 0;}
.friends img, .games img{height:25px;width:25px;margin-right:5px;float:left;}
.friends a, .games a{display:block;height:25px;line-height:25px;margin-bottom:5px;}
.friends a:hover, .games a:hover{background:#eee;}

/* ALL ENTRIES */

.entry{margin:0 0 20px 0;background:#fff;border:1px solid #d9d9d9;text-align:justify;padding:0 12px 12px 12px;-webkit-box-shadow:0 3px 5px -1px #ddd;box-shadow:0 3px 5px -1px #ddd;position:relative;z-index:200;}
.entry img{max-width:100%;}
.entry-content{margin:0;}
.entry-text{min-height:1px;overflow:hidden;}
.entry-text a{font-weight:bold;}

.entry-header{background:transparent;border:none;}
.entry-header h3{font-size:15px;padding:0;margin:0;text-align:left;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#4C71B2;}
#alpha .entry-header a:hover{color:#777;}
.entry-datetime{text-transform:uppercase;font-size:11px;letter-spacing:1px;color:#999;margin-bottom:5px;}

.inner-entry-userpic{position:absolute;top:13px;text-align:left;padding:0;font-size:9px;font-weight:normal;text-transform:uppercase;width:30px;height:30px;overflow:hidden;background:#fff;border:1px solid #d9d9d9;}
.inner-entry-userpic:hover{width:160px;}
.inner-entry-userpic img{width:30px;height:30px;}

.pic-poster{display:block;margin-top:-28px;margin-left:35px;}
.pic-poster img{display:none;}

.entry-metadata{display:none;}
.ljtags{margin:10px 0 0 0;padding-top:5px;border-top:1px solid #d9d9d9;font-size:0;color:transparent;text-align:left;}
.ljtags a{font-size:12px;color:#4C71B2!important;display:inline-block;margin-right:8px;}
.ljtags a:last-of-type{margin-right:0;}
.ljtags a:before{content:'#';}
.ljtags a:hover{color:#777!important;}

.entry-linkbar{font-size:12px;}
.entry-linkbar ul{list-style:none;padding:0;margin:8px 0 0 0;}
.entry-linkbar li{border:none;padding:0;margin:0;}
.entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions]{display:none!important;width:0;padding:0;margin:0;}

.lj-view-friends .entry-content{margin:10px 0 0 0;}
.lj-view-friends .entry-header{margin-left:40px;}
.lj-view-friends .entry-datetime{margin-left:40px;}
.lj-view-friends .entry-linkbar, .lj-view-day .entry-linkbar{text-align:right;}
.lj-view-friends .entry-linkbar li a[href*=reply], .lj-view-day .entry-linkbar li a[href*=reply]{display:block;padding:7px;border:1px solid #ccc;color:#999!important;text-align:left;text-transform:none;font-weight:normal;font-size:12px;cursor:text;margin:0;}
.lj-view-friends .entry-linkbar li a, .lj-view-day .entry-linkbar li a{display:inline-block;border:none;padding:0;margin:0 8px 0 0;color:#999!important;font-size:9px;text-transform:uppercase;font-weight:bold;}
.lj-view-friends .entry-linkbar li a[href*=comments], .lj-view-day .entry-linkbar li a[href*=comments]{border-left:2px solid #4C71B2;display:block;padding:7px 7px 7px 25px;text-align:left;text-transform:none;font-weight:normal;font-size:12px;background:#eee url(http://i.imgur.com/ct4TCE3.png)center left no-repeat;color:#4C71B2!important;margin-top:5px;}

/* RECENT ENTRIES */

#sticky-note{display:none;}

.lj-view-recent .entry{display:inline-block;vertical-align:top;width:320px;margin:8px 3px 15px 3px;}
.entry-inner{padding:7px;}

.lj-view-recent .entry-linkbar{position:absolute;right:4px;top:2px;background:url(http://i.imgur.com/b3QaIzP.png)top right no-repeat;padding-top:16px;max-height:0;overflow:hidden;text-align:left;}
.lj-view-recent .entry-linkbar:hover{max-height:150px;}
.lj-view-recent .entry-linkbar ul{margin:0;background:#fff;width:90px;border:1px solid #ddd;border-top:none;padding:0 4px 4px 4px;}
.lj-view-recent .entry-linkbar li a{display:block;width:90px;padding:2px 0;margin:0;color:#222!important;}
.lj-view-recent .entry-linkbar li a:hover{font-weight:bold;background:#eee;}
.lj-view-recent .entry-linkbar li a[href*=reply]{visibility:hidden;padding:0;font-size:0;}
.lj-view-recent .entry-linkbar li a[href*=reply]:after{content:'Comment';font-size:12px;visibility:visible;display:block;width:90px;padding:2px 0;margin:0;color:#222!important;}

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

/* ARCHIVE VIEW */

.lj-view-archive .entry{margin:8px 5px 12px 5px;padding:7px;}

.yearlinks{text-align:left;font-size:17px;}
.year{list-style:none;}
.year li{display:inline;padding:2px;}

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

td.monthlable{text-align:left;font-size:16px;color:#777;}
td.viewmonth{text-align:right;font-size:16px;color:#777;}
.dayname{text-align:center;font-size:16px;color:#777;}

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

/* CONTENT FOOTER */

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

/* ICON REPLACEMENTS */

img[src*="img/userinfo.gif"], img[src*="img/community.gif"], .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/RHwVPT3.png) no-repeat!important;padding:16px 0 0 14px!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;}

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 right)
→Disable customized comment pages for your journal: Yes

→Link text to leave a comment: Write a comment...

→Person to credit if you have an individually created layout: © Tessisamess
→URL to link the credit to: http://tessisamess.insanejournal.com/

→Body of custom sidebar module:
<div class="pics"><li><li><li><li><li></div><div class="navbar"><span><div class="buttons"><a href="/profile">+ Follow</a><a href="/friends">👤 Friends</a></div><a href="http://www.insanejournal.com/allpics.bml?user=journalname"><img src="USERPIC"></a><div class="nameinfo"><a href="/">Name Here</a>@journalname</div></span></div>

→Body of second custom sidebar module:
<div class="games"><h3>🎮 Games</h3><a href="http://journalname.insanejournal.com/"><img src="http://i.imgur.com/NoeoXrD.png">Game Name</a><a href="http://journalname.insanejournal.com/"><img src="http://i.imgur.com/NoeoXrD.png">Game Name</a><a href="http://journalname.insanejournal.com/"><img src="http://i.imgur.com/NoeoXrD.png">Game Name</a></div><div class="friends"><h3>👤 Friends</h3><a href="http://journalname.insanejournal.com/"><img src="http://i.imgur.com/NoeoXrD.png">Friend Name</a><a href="http://journalname.insanejournal.com/"><img src="http://i.imgur.com/NoeoXrD.png">Friend Name</a><a href="http://journalname.insanejournal.com/"><img src="http://i.imgur.com/NoeoXrD.png">Friend Name</a></div>

Make sure you have FIVE header pics and they are all at least 200x200 (larger is fine; they will scale automatically.) In the CSS find the following and replace the URLs:
.pics li:nth-child(1){background:url(HEADERPIC1)center;background-size:cover;}
.pics li:nth-child(2){background:url(HEADERPIC2)center;background-size:cover;}
.pics li:nth-child(3){background:url(HEADERPIC3)center;background-size:cover;}
.pics li:nth-child(4){background:url(HEADERPIC4)center;background-size:cover;}
.pics li:nth-child(5){background:url(HEADERPIC5)center;background-size:cover;}

→Custom stylesheet: Input the code above and save

004: CTRL+F This Shit

#222

#3d5a8e

#4c71b2

#555

#627eaf

#777

#999

#aaa

#bbb

#ccc

#d9d9d9

#ddd

#eee

#fff

→Open Sans,helvetica,arial,sans-serif to change the font.
→I know this replacement guide is REAL SHORT but I'm just not sure how in demand a replacement guide will actually be with this specific layout tbh. Let me know if you'd like a full one!

005: Rules and Shit

→Please put my credit in its designated spot.
→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.

Tags: layouts, layouts: s2 complete style

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

Layout: Social Media