( layout ) minimal for five am

[vorador]

minimal
for five am
( preview )

features fluid width, custom pop-up, custom icons, no modules
tested in chrome
entry pages are not customised

how to install

— go to organize - select style, type Five AM in the search box, and pick one of the styles;
— go to the presentation tab and make sure your user interaction, entry management and comment management links are set to text only [example]
— go to custom css and unckeck the box for Use layout's stylesheet(s);
— copy & paste this into the Custom stylesheet URL box:
https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i
— copy & paste this code into the Use embedded CSS box:
/* ------------------------------------- [ M I N I M A L ] - for FIVE AM - theme by vorador ------------------------------------- */ /* general */ html{font:normal 1em 'Lato','sans-serif'; color:#000; background:#fff; line-height:120%;} body{margin:2em 8em;} a{text-decoration:none; color:#5ce; transition:all .4s ease;} a:hover{color:#000; transition:all .4s ease;} blockquote{margin:10px; padding:5px 10px; border-left:1px solid #000;} ul,ol{list-style-type:none!important; margin:0!important; padding:0!important;} img {width:auto; max-width:600px;} /* disabled */ #secondary, #tertiary, h1#title, h2#subtitle, h2#pagetitle, .metadata, .tag, #footer, li.entry-permalink, span.time, .topnav{display:none!important;} /* header */ #header {width:80%; max-width:600px; margin:80px auto; text-align:center; font-size:.8em; text-transform:lowercase;} li.module-list-item {text-align:center; display:inline-block;} li.module-list-item a{padding:10px; color:#000;} li.module-list-item a:hover {color:#5ce;} /* entries */ #content {margin:40px auto; width:80%; max-width:600px;} .entry-wrapper {padding-bottom:40px; border-bottom:1px solid #000; margin-bottom:80px;} .header {margin-bottom:10px;} h3.entry-title{margin-bottom:0;} h3.entry-title a {color:#000; font-size:.7em; font-weight:400;} h3.entry-title a:hover {color:#5ce;} span.datetime{font-size:.6em;} span.datetime a{color:#000;} span.datetime a:hover{color:#5ce;} .userpic {width:44px; height:44px; float:left; position:relative; margin-left:-54px; margin-top:-63px;} .userpic img {width:44px; height:44px; opacity:1; transition:all .4s ease;} .userpic img:hover {opacity:.5; transition:all .4s ease;} span.poster {float:left; position:absolute; display:inline-block; margin:-10px 0 0 -54px!important; font-size:.5em; font-weight:400; color:#000; background:#f6f6f6; padding:2px 5px 0 5px; text-transform:uppercase;} span.poster img {display:none;} span.empty {display:none!important;} .entry-content{font-size:.75em; margin:20px 0; padding:20px 0;} .entry-content li{padding-left:20px; position:relative; margin-left:20px;} .entry-content li::before{content:""; position:absolute; left:0px; top:.7em; width:.7em; height:1px; background:#000;} /* entry footer */ .footer{font-size:.65em; text-transform:lowercase; margin-top:30px;} ul.entry-management-links, ul.entry-interaction-links{list-style-type:none;display:inline-block;} li.link, li.entry-replylink, li.entry-readlink {display:inline-block; margin-right:10px; text-transform:uppercase;} .footer a{color:#000;} .footer a:hover{color:#5ce;} .bottomnav {display:block; font-size:.65em; text-transform:uppercase; padding:5px;} li.page-back, li.page-separator, li.page-forward {list-style-type:none; display:inline; padding:0 5px 0 0;} /* archive page */ #archive-year {width:80%; max-width:600px; margin:20px auto;} #archive-year .navigation ul {margin:0; padding:0;text-align:center;} #archive-year .navigation ul li {list-style-type:none; display:inline-block; margin:0 5px; padding:5px; font-size:.8em;} .month .header h3 {font-size:.7em; text-transform:uppercase; text-align:center; padding:10px;border-bottom:1px solid #000;} table.month {width:100%; display:table;} caption{display:none;} td,th{display:table-cell; background:#f6f6f6; padding:10px; border:1px solid #fff; font-size:.8em; width:calc(100% / 7); height:20px;} td.day{padding:10px; text-align:center; background:rgba(246,246,246,.4); border:1px solid #fff;font-size:.7em; height:40px} td.day-empty{background:#fff;} /* tags page */ .tags-container{width:100%;} .tags-container .header h2{font-size:.8em; text-transform:lowercase;} .tags-container .contents{margin:-20px 0 0 10px; font-size:.7em;} ul.ljtaglist {margin:0; padding:0;} ul.ljtaglist li {padding:4px 0;} /* lj_controlstrip */ #lj_controlstrip{background:#fff; display:none;} #lj_controlstrip a{color:#000;} #lj_controlstrip a:hover{color:#5ce; text-decoration:none;} #Logout{border:0; padding:2px 4px!important; background:#f6f6f6!important;} #lj_controlstrip_user,#lj_controlstrip_actionlinks{border:0!important;font-weight:700!important;} #lj_controlstrip_statustext{color:#000;font-size:1em;} #lj_controlstrip_user,#lj_controlstrip_actionlinks,#lj_controlstrip_search{font:normal .7em 'Lato'!important;} /* contextual popup */ .ContextualPopup {margin:10px 0 0 25px; background:rgba(249,249,249,.95)!important; font-size:.7em!important; border:0!important; border-radius:0!important; box-shadow:none!important; padding:20px!important;} div.ContextualPopup .Actions {padding:0; margin-right:60px!important; margin-left:-30px!important; background-color:#fff!important;text-transform:lowercase!important;} div.ContextualPopup .Relation {font-weight:700!important; text-transform:uppercase!important; padding:0;} .ContextualPopup .Userpic {padding:0; margin:0; border:none!important;} .ContextualPopup .Userpic img {width:40px; height:40px; opacity:1; padding:3px; background:#fff; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -o-transition:all 0.4s ease; transition:all 0.4s ease;} .ContextualPopup .Userpic img:hover {opacity:.6; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -o-transition:all 0.4s ease; transition:all 0.4s ease;} .ContextualPopup .Userpic a, .ContextualPopup .Userpic a:hover {border:none!important;} .ContextualPopup .Actions a{color:#000!important; text-decoration:none!important; font-weight:400!important;} .ContextualPopup .Actions a:hover {color:#5ce!important; font-weight:400!important;} .ContextualPopup ul {margin:0 0 0 40px!important; padding:0; float:left; position:relative;} /* tiny icons */ img[src*='user.png'], img[src*='user_staff.png'] {width:0; height:0; background:url('https://40.media.tumblr.com/d67657689d29bbda67930210775c77eb/tumblr_inline_nte4bsUKwI1tr4gs8_500.png') top left no-repeat; padding:16px 16px 0 14px;} img[src*='community.png'], img[src*='comm_staff.png'] {width:0; height:0; background:url('https://40.media.tumblr.com/37059e40a013ba145b2f477abdf2a2bd/tumblr_inline_nte4p5jmIb1tr4gs8_500.png') top left no-repeat; padding:16px 0 0 12px;} /* cut icons */ img[src*='collapse.svg'], img[src*='collapseAll.svg'], img[src*='expandAll.svg'] {display:none;} span.cuttag_container {text-align:center; font-style:normal!important; color:transparent!important; background:url(http://i.imgur.com/z1ySPWo.gif) no-repeat left center; padding-left:5px; margin-left:10px;} span.cuttag_container a {font-weight:400; font-style:italic; color:#5ce;} span.cuttag_container a:hover {color:#000;} /* post restrictions */ .sticky-entry-icon img {display:none;} .sticky-entry-icon:before {content:'PINNED'; font-size:.55em; font-weight:400; color:#000; background:#f6f6f6; padding:5px;} .security-private .entry-title:before {content:'PRIVATE'; font-size:.55em; font-weight:400; color:#000; background:#f6f6f6; margin-right:5px; padding:5px;} .security-custom .entry-title:before {content:'CUSTOM'; font-size:.55em; font-weight:400; color:#000; background:#f6f6f6; margin-right:5px; padding:5px;} .security-protected .entry-title:before {content:'LOCKED'; font-size:.55em; font-weight:400; color:#000; background:#f6f6f6; margin-right:5px; padding:5px;} .access-filter img, .restrictions img {display: none;} .restrictions-NSFW .restrictions:before {content:'NSFW'; font-size:.55em; font-weight:400; color:#000; background:#f6f6f6; margin-right:5px; padding:5px;} .restrictions-18 .restrictions:before {content:'18+'; font-size:.55em; font-weight:400; color:#000; background:#f6f6f6; margin-right:5px; padding:5px;}
— click Save changes and you're done!

theme colours

#fff #000 #f6f6f6 #5ce

customisation

— if you want to re-enable the LJ control strip, look for this line: #lj_controlstrip{background:#fff; display:none;} and delete display:none;
— to set your entry pages to show in the site skin instead of the custom layout (which doesn't have the custom entry pages coded lmao), go to your settings, look for Entry Pages: Shown to You and pick Site skin from the drop-down menu
— if you want to enable/customise the metadata and/or tags on journal entries, see this link

I hope you enjoy this layout and if you have any questions or notice any bugs, let me know!

Comments

[ironia]

Hi, thanks for the layout! Dropped by to let you know that I was helping a friend set it up and found DW is getting confused when it sees a DW tag (your credit info) in the header comment. Changing it to vorador does the trick.

[vorador]

hi and thank you for using my layout! i'm not sure what you mean about the dw tag in my credit info. if it's the text between the "/* ..... */" symbols, it shouldn't affect how the page looks because it's only visible if you look at the page source. could i get a bit more info about the error?

[ironia]

It actually is the text between the comment delimiters. I think DW may have gotten confused when saving the custom CSS, because when I looked at the rules in Firefox inspector, instead of the custom CSS there was a comment saying something along the lines of "suspicious CSS; has an HTML tag". I went back to layout config and the only HTML-like thing in there was the credit info, once I edited that, the layout worked as expected. Might be worth mentioning that this happened in a community, not a personal journal.

[vorador]

i think i figured it out. there must have been a code push (that i missed) that simplified the way to link to user names, so instead of an html tag people can now use @. in my original code, i used "@ vorador", which got changed into an html tag, and that's why you got an error message.