showcased | layout: corinne

layout: corinne

This is my first foray into the world of layout making. I'm sure it's not perfect, but I'm pretty sure it's usable! This is best viewed on Chrome, because the other tested browsers (Firefox, IE) don't support the clip-path property used in the entry titles. The entry titles can only be a certain length to fully show up, but if they're too long, hover over them and they will appear in their entirety. Please let me know if you have any questions, I'm super duper new to this. This layout does not have custom icon or comment pages, so make sure to turn those off.

INSTALLATION INSTRUCTIONS:

— Go to Customize Style and select "Plain" for Tabula Rasa. Select "1 Column (modules at top and bottom; no sidebar)".
— Go to Custom CSS and, keeping "use layout stylesheets" checked, paste the following code:
/*-- CORINNE BY EFFICIO @ SHOWCASED.DREAMWIDTH.ORG --*/ /*-- HEADER --*/ #header { background-color: rgba(0,0,0,0.05); padding: 10px; font-family: calibri; text-align: center; width: 750px; margin: 10px auto; border-radius: 5px; } h1#title { font-size: 40px; font-weight: bold; letter-spacing: 0px; text-transform: uppercase; text-shadow: rgba(0,0,0,0.1) 1px 1px 1px; margin-top: -5px; } h2#subtitle { font-size: 12px; font-weight: 400; letter-spacing: 5px; text-transform: uppercase; margin-top: -25px; padding-bottom: 10px; } h2#pagetitle { display: none; } #content { margin: auto; } /*-- ENTRIES --*/ #entries { width: 790px; margin: auto; margin-top: 35px; font-family: calibri; } h3.entry-title { background-color: rgba(0,0,0,0.05); clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); padding-left: 15px; width: 250px; height: 40px; text-transform: uppercase; font-weight: bold; letter-spacing: 0px; overflow: hidden; font-size: 30px; margin-bottom: -25px; font-family: calibri; text-shadow: rgba(0,0,0,0.1) 1px 1px 1px; margin-left: 130px; } h3.entry-title:hover { width: 600px; overflow: visible; transition: all 1s ease; } a { text-decoration: none; color: #000; } a:hover { opacity: .6; transition: all 0.5s ease; } .datetime { display: none; } .userpic { width:75px; height:75px; float: left; padding: 20px; margin-right: 15px; margin-top: -75px; } .userpic img { width:75px; height:75px; opacity:1; transition:all 0.5s ease; border: 1px solid rgba(0,0,0,0.25); padding: 5px; } .userpic img:hover { opacity:.5; transition:all .4s ease; } span.poster { display: none; } .entry-content { font-size:12px; margin:20px 0; padding:20px; width: 750px; text-align: justify; } .footer{ font-size: 10px; text-transform:lowercase; margin-left: 525px; margin-top: -20px;padding-bottom: 10px; } ul.entry-management-links { display: none; } ul.entry-interaction-links { display: inline-block; text-transform: lowercase; margin-left: 150px; } li.entry-permalink:hover { background-color: rgba(0,0,0,0.05); transition: all 0.5s ease; } li.entry-readlink:hover { background-color: rgba(0,0,0,0.05); transition: all 0.5s ease; } li.entry-replylink:hover { background-color: rgba(0,0,0,0.05); transition: all 0.5s ease; } .footer a { color:#000; } .footer a:hover { color: rgba(0,0,0,0.5); } div.tag { display: none; } /*-- MODULES & NAV --*/ div.module-photo, div.module-user-links, div.module-about, div.module-navlinks, div.module-calendar, div.module-syndicate, div.module-pagesummary, div.module-time, div.module-powered, div.module-userprofile, div.module-tags_list, div.module-pagesummary, div.module-search, div.module-customtext, div.module-credit, div.module-cuttagcontrols { display: none; } div.navigation.topnav { display: none; } .navigation { display:inline-block; text-transform: lowercase; font-size: 10px; } .navigation a:hover { background-color: rgba(0,0,0,0.05); transition: all 0.5s ease; } #footer { display: none; } /*-- TAGS --*/ body.page-tags { font-family: calibri; } .tags-container{ margin-left: 300px; } .tags-container .header h2 { font-size:30px; text-transform:uppercase; } .tags-container .contents { font-size: 12px; } /*-- ARCHIVE --*/ body.page-archive { font-family: calibri; } #archive-year { width: 750px; margin: auto; } .month .header h3 { font-size:30px; text-transform:uppercase; text-align:center; padding:10px;border-bottom:1px solid #000;} caption { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; padding-bottom: 10px; } table.month {width:100%; display:table;} td.day{padding:10px; text-align:center; background:rgba(255,255,255,0.5); border:1px solid #fff;font-size:12px; height:40px} td.day-empty{background:#fff;}
— That's literally all there is to it.

Flat | Top-Level Comments Only

This is such a pretty layout!! Thanks for making it!

Super lovely, thank you!

Thank you so much for creating this journal! I'm using it for my character here and I made sure to credit you.

Again, so much thank you. This is so lovely.