( 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

[bluedreaming]

Still loving this theme, thanks for sharing it.
Edit: I should mention that all of a sudden it started having really wide margins on mobile, so I think I did something in the css but I’m afraid I don’t remember what exactly. ^^; in any case, working great again!