( 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

[ghostgum]

I love this, thanks!

[tsubasanyan]

This is so beautiful. I'm totally using this one! Thank you very much!! ♡

[hiiragishinya]

Used. Thank you so much! This is absolutely gorgeous! I love its simplicity.

[eurydike79]

Just the layout I was looking for, thank you so much, I love how simple and clean it is.

[monffee]

finally found something clean and minimally, this is absolutely pretty. thank you so much :)

[deerlings]

I am using this now and I adore it! thank you so much ♥

[melisandres]

Using :D

[guia]

What a beautiful layout. Using! Thank you.

[titboys]

thank you for this theme! it's lovely--simple, clean, elegant. getting back into dw for 2018, so i'm thrilled that i got to find something so appealing.

[lieu]

beautiful, will use this for sure! thanks!

[crossingwinter]

love this! thanks for posting!

[chiaralovesnino]

using this. thanks for this clean layout!

[octahedrite]

using this, thank you so much!

[violenceinme]

Thanks!! This is nice.

[irenesanchez]

Minimal and beautiful. Thank you!

[lihim]

hi! LOVE this theme am currently using it w some tweaks- i removed the tags and metadata from disabled because i wanted them displayed again^^ but the metadata didn't look as nice.. i was wondering if you could add a little bit of code to present the metadata a little nicer? but thank u so much for this theme :)

[vorador]

hi and thank you for using my theme! here's the code for the metadata and tags:

.tag ul li {list-style-type:none; display:inline; margin-right:2px;}
span.tag-text {float:left; position:relative; margin-right:5px;}
.metadata {font-size:.65em;}

i hope this works! :)

[lihim]

it's just perfect tysm💘💘

[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.

[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!

[noarvara]

Love this theme! Will credit when used :D

[agirlahaunt]

this is a gorgeous layout, thank you so much!