Style 9 - Summer Night

[tickletheory]

Another dark (but not too dark) alternative to my lighter floral themes. I've gone back to using Plain Tabula Rasa as a base theme because it's still the lightest among all that I've tried. This is also the most lightweight among the 4 floral themes.

Huhuhu. Can't wait for the meta viewport tag fix in the future.

If you have theme requests, you can comment here.

Background from rawpixel.com / Freepik

Features: mobile-friendly; designed for mobile, tablet, and desktop. Works with 2 or 3 column page setups.

More screenshots

Guide

1. Switch to the Plain Tabula Rasa Layout.
2. Customize your journal style. Go to Custom CSS and follow the instructions below.
4. I would appreciate it if you could credit plainstyles on your bio.

Feel free to customize and tweak however you want. :)

---

Custom Stylesheet URL

This is necessary to link to Google Webfonts that this theme uses. Copy-paste this URL to the textbox here

https://fonts.googleapis.com/css?family=Arimo:400,400i|Work+Sans:500

---

Custom CSS

Copy-paste this CSS to the 'Use embedded CSS' box here.

Keep "Use layout's stylesheets" ticked. This is needed for to make the layout responsive in mobile devices so until Dreamwidth pushes a fix for this, I need to keep this on.

#lj_controlstrip{background:#5B5B5B;background-image:none;color:#C7AF9E;font-family:'Arimo',sans-serif!important;padding:.3rem 2rem}#lj_controlstrip_user,#lj_controlstrip_login,#lj_controlstrip_loggedout_userpic,#lj_controlstrip_actionlinks{border:none!important}.module-userprofile .userpic img,#lj_controlstrip_userpic,#lj_controlstrip img{border-radius:4px;border:4px solid #5B5B5B}#lj_controlstrip td{padding-left:.5em}#lj_controlstrip input,input,select,button,textarea{color:#C7AF9E!important;background:#424242!important;border:1px solid #5B5B5B!important;padding:.5em!important;font-family:'Arimo',sans-serif!important}input.textbox,textarea.textbox{font-size:100%!important}.ContextualPopup{background:#5B5B5B;color:#C7AF9E;-webkit-box-shadow:none;box-shadow:none}table,.entry img,.entry video{max-width:100%}blockquote{color:#DFD5CF;position:relative;margin:2em 1em;font:500 1.2em 'Work Sans',sans-serif}blockquote::before{content:"";background:url(https://i.postimg.cc/RhPKX94H/pattern2-0-5x.png);width:100%;height:100%;position:absolute;opacity:.2;padding:1em;top:-1em;left:-1em}hr{border:0;border-bottom:1px dashed #889D99;width:80%}table.talkform table tr{font-size:.8em}.talkform input[type="submit"]{margin-bottom:1em}.talkform tr td:last-child{margin-bottom:1.5em}.talkform #userpics{margin-top:1em}body{background:#424242;color:#C7AF9E;font-family:'Arimo',sans-serif;line-height:1.5;margin:0}b,strong,h1,h2,h3,h4,h5,h6{font-family:'Work Sans',sans-serif;font-weight:500;line-height:1.5}.entry-content font,.entry-content table,.entry-content div,.entry-content p,.entry-content span{color:#C7AF9E!important}.entry-content b,.entry-content strong,.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4{color:#889D99!important}a,a:link,a:active,a:visited{color:#93D0D0;text-decoration:none}a:hover{color:#889D99;border-color:#889D99}.entry-content a{background:#5B5B5B;padding:.2em}#header a,.module-header a{color:#C7AF9E}.month dt,.metadata,.entry .footer{font-family:'Work Sans',sans-serif;font-weight:500}.navigation.empty,ul.entry-management-links.text-links .tell_friend,ul.comment-interaction-links .threadroot,.poster-ip,.poster.entry-poster.empty,.page-entry #pagetitle,.module-syndicate,.module-credit,.module-cuttagcontrols{display:none}#content{max-width:64em;margin:-4rem auto 0}#secondary a{border:none}#secondary > .inner:first-child,#tertiary > .inner:first-child{margin-top:5rem}#secondary ul{list-style-type:none;margin:0}#header{background:url(https://i.postimg.cc/RhPKX94H/pattern2-0-5x.png);text-align:center;padding:4em 0}#footer{background:url(https://i.postimg.cc/KzDCDt54/pattern2-darkest-1-5x.png);padding:1em;text-align:center;background-position:bottom center;opacity:.5}#subtitle,.module-header,#title span{color:#C7AF9E;background:#5B5B5B;padding:.1em .3em;display:inline}#pagetitle,#subtitle,#title{padding:0;line-height:1.3}#subtitle{font-size:1.1em;background:#889D99;color:#424242;padding:0 .5em}#pagetitle{color:#fff}.userpic{float:right}.userpic a{border:0;padding:0}.userpic img{width:3em;height:3em;border-radius:4px;border:4px solid #424242}#secondary .userlite-interaction-links{margin-top:1em}.module{margin-bottom:2em}.entry .entry-title{font-size:2em;line-height:1.2}.entry-wrapper{background:#464646;position:relative;margin-bottom:2em;-webkit-box-shadow:8px -8px 0 rgba(0,0,0,0.1);box-shadow:8px -8px 0 rgba(0,0,0,0.1)}.entry-wrapper::before{content:"";display:block;float:left;position:absolute;width:4em;height:100%;background:url(https://i.postimg.cc/KzDCDt54/pattern2-darkest-1-5x.png)}.entry-wrapper::after{clear:both}.entry{margin-left:4em;padding:2em}.entry .header{margin-bottom:1em}.entry .footer{margin-top:2em}.entry .header,.entry .footer,.metadata{color:#889D99}.metadata li{margin-bottom:0}ul.entry-interaction-links{margin-bottom:0;font-size:1.5em}ul.entry-management-links.text-links,.poster.entry-poster{padding:.2em .5em;background:#5B5B5B;border-radius:1em;margin-bottom:2em;display:inline-block}ul.entry-management-links.text-links{background:#424242}.entry-management-links a{color:#889D99}.navigation{background:#889D99;color:#424242;padding:.2em 1em}.navigation .active{font-weight:600}.navigation a{color:#424242}.sorting-options ul{padding:0;margin-bottom:2em}.page-reply .comment-wrapper,.icons-container,.tags-container,.month-wrapper .month > div,#archive-month .inner .month{padding:2em;background:#464646;margin:0}.comment-title,.month dt,.month dl h3{font-size:1.3em}.comment-depth-1{border:1px solid #5B5B5B;border-radius:4px;margin:2em 0;padding:1em}.comment-depth-2 .comment{border-left:4px solid #889D99;padding-left:1em}@media only screen and (max-width: 64em){#lj_controlstrip #lj_controlstrip_search{opacity:0;height:1px;overflow:hidden;font-size:1px;line-height:1px;padding:0;float:right}.entry-wrapper::before{width:2em}.entry{margin-left:2em;padding:1em}#header{padding:2em 0}#comments{padding:0 1em}#content{margin:-2rem auto 0}.entry .entry-title{font-size:1.6em}ul.entry-interaction-links{font-size:1.2em}.page-reply .comment-wrapper,.icons-container,.tags-container,.month-wrapper .month > div,#archive-month .inner .month{padding:1em}#qrform #body{width:100%}#qrform #subject,.talkform #subject{width:90%;margin-bottom:1em}#qrform tr td:first-child,#qrform tr td:last-child,#qrform tr td:nth-child(2),.talkform tr td:first-child,.talkform tr td:last-child{display:block;text-align:left}}@media only screen and (max-width: 45em){#lj_controlstrip #lj_controlstrip_actionlinks,#lj_controlstrip #lj_controlstrip_search,#lj_controlstrip #lj_controlstrip_statustext{opacity:0;height:1px;overflow:hidden;font-size:1px;line-height:1px;padding:0;float:right}.module-navlinks.module{margin:0 -1em;padding:0;background:#424242;text-align:center;position:fixed;width:100%;top:0;border-bottom:1px solid #5B5B5B}.module-navlinks ul{padding:0 1em;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.module-navlinks ul.module-list li{display:inline-block;margin-left:.5em;padding:.5em}.module-navlinks ul.module-list li:last-child{margin-right:.5em}html body{margin-top:3em}.entry .userpic{display:none}#primary > .inner:first-child{padding:0}#content{margin:0}}


Save the changes you made.

Your settings page should look like this:

---

Customize

This theme works best with columns (2, 3, any column setup).

Fonts
This theme use sans-serif fonts:
- Primary font (content): 'Arimo'
- Secondary font (header): 'Work Sans'

Don't forget to change the Custom CSS URL if you want to change to different Google webfonts.

Feel free to change as much as you'd like.

---

Credit in bio

Theme by <user name="plainstyles"> Background from <a href="http://www.freepik.com">rawpixel.com / Freepik</a>