Style 5 - Spring is Pink

[tickletheory]

Two-column right



Two-column left



Single column

Tried something different and I had a lot of fun with this. Available in 2-column (left, right) and 1-column formats only.

Credit: patterns from Subtle Patterns

Features: mobile-friendly; designed for mobile, tablet, and desktop.

Screenshots for tablet and mobile

Guide

1. Switch to the Gray Boxes and Borders 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=Fira+Sans|Lora:400,400i,700,700i

---

Custom CSS

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

body{font-family:'Lora',serif;background-color:#FFE3D6;background-image:url(https://i.postimg.cc/2Swrd5wB/sakura.png);color:#545454}h1,h2,h3,h4,h5,h6{font-family:'Fira Sans',sans-serif;font-weight:400!important}blockquote{border-left:4px dotted #C7CFD7;padding-left:1em;font-style:italic;font-size:1.2em}a{text-decoration:none;color:#2273BE}a:hover{color:#E89B77}.entry-content hr{border:0;border-bottom:4px dotted #C7CFD7}.entry-content img,.comment-content img{max-width:100%}#lj_controlstrip{background:#C7CFD7;background-image:none}#lj_controlstrip a{color:#4E86BA}#canvas{max-width:60em;margin:auto;float:none;padding-top:0}#content{padding-right:1em;background:#FFF7F3}#header-decoration{display:none}#header{text-align:left;padding:0 2em 2em 4em;margin-left:-2em;margin-bottom:0}#footer{padding:1em 2em}#title{margin-top:0;padding-top:1.5em;font-size:1em;top:1em;position:relative}#pagetitle{font:italic 2.2em 'Lora',serif}#subtitle{margin-top:1em;padding-left:0;text-transform:uppercase;letter-spacing:2px;font:.8em 'Lora',sans-serif}#content::before{display:block;height:3em;background-image:url(https://i.postimg.cc/4NKmmFTS/arches.png);width:auto;content:"";margin:0 -16em 0 0}.one-column #content::before{margin:0 0 0 -2em}.column-left #content::before{margin:0 0 0 -17em}.module-section-one{padding-top:1.2em}.module-navlinks{position:fixed;width:auto;margin-top:7em;margin-left:-13em;background-color:#FFF7F3;background-image:url(https://i.postimg.cc/4NKmmFTS/arches.png);box-shadow:12px 12px 0 #F4CFBE;z-index:100}.module-navlinks ul{background:none;padding:1em}.module-navlinks ul li{display:block;border:0}.module-navlinks ul li:hover{border:0}.module-navlinks a{font-size:1.2em;font-style:italic;color:#545454;display:block;border-radius:2em}.module-navlinks a:hover{background-color:#FFE3D6;background-image:url(https://i.postimg.cc/2Swrd5wB/sakura.png);text-decoration:none}.module-userprofile .userpic{display:none}.has-userpic .entry .contents .userpic,.has-userpic .comment .contents .userpic{float:right;margin:0 0 1em 1em;width:4em;height:4em;border-radius:4px;background-color:#FFE3D6;padding:.3em}.userpic img{width:100%;height:100%;border-radius:4px}.entry,.module-header{border:0}.entry .entry-title{font-size:1.6em}ul.entry-interaction-links{margin:.5em 0 0 -2.38em;background-image:url(https://i.postimg.cc/4NKmmFTS/arches.png);padding:1em 2em;border-top-right-radius:3em;border-bottom-right-radius:3em;border-left:6px solid #C7CFD7}.entry .tag{padding:.5em 0;margin:0;font-size:.9em}ul.entry-interaction-links{text-align:left}ul.entry-management-links{text-align:right;float:right;margin-top:1.5em}.entry .footer li{margin-left:0;margin-right:1em}ul.entry-interaction-links .entry-permalink{display:none}.entry .contents{padding:0;line-height:1.5}.entry .contents a{border-bottom:1px solid #C7CFD7}.ljtaglist a:hover,#archive-month a:hover,.navigation a:hover,.tag a:hover,.entry-interaction-links a:hover,#comments a:hover,.entry .contents a:hover{border-bottom:1px dotted #E89B77}.entry .entry-title{padding:.25em 0}#footer{background:#F4CFBE}#footer a{color:#545454}.navigation li{padding:0}.module .module-header{padding:0;margin:0;color:#E89B77}.module .module-header a{color:#E89B77}.module .module-content ul{list-style-type:none;margin-left:0;font-size:.9em}.module-content li{border-bottom:1px dotted #FFE3D6;padding:0 0 .5em}.module-content li:hover{border-bottom:1px dotted #2273BE}.module-content .icon-links{border:0}.module-content .module-list img{display:none}.manage-link{font-size:.9em}.pagesummary-subject a{color:#545454}.module{padding:0;margin-bottom:3em}.module-calendar.calendar-horizontal .module-content{background:#FFE3D6;border-radius:6px;padding:.5em}.module-calendar td{background-color:transparent;padding:4px}.module-calendar td a{color:#545454;background-color:#C7CFD7;border-radius:1em;padding:0 .35em}.multiple-columns .module-calendar table{margin-top:1em}.journal-name{margin-top:.5em}.bottomcomment,.comments-message{background:transparent}.page-entry .entry .entry-interaction-links,.bottomcomment .entry-interaction-links{margin:1em 0 1em -2em;border-left:0;border-radius:0;padding:3em 2em}.page-entry .entry .entry-management-links,.bottomcomment .entry-management-links{margin-top:4em;margin-right:1em}.comment .header{border:0;padding:0}.comment-depth-2 .comment{border-left:4px dotted #FFE3D6;padding-left:1em}.comment .header .datetime{color:#545454;font-size:.8em;text-transform:uppercase}.comment-pages.bottompages{margin-top:2em}.page-entry .entry-title{display:none}.day .inner > h3:first-child{text-align:left}.day-date{display:none}.ljtaglist{line-height:2}#archive-year .navigation{font-size:1.5em;font-style:italic}#archive-year li{margin-right:1em}.month dd{border-bottom:4px dotted #C7CFD7;margin-bottom:1.5em;padding-left:1em}.month dl dt{float:left}.column-left #content{padding-left:2em;padding-right:0}.column-left .entry-interaction-links.text-links{margin-left:0;margin-right:-3em}.column-left.page-entry .entry-interaction-links.text-links{margin-right:0;padding:3em 1em}.one-column #content{padding-right:0;padding-left:2em}.one-column #secondary .module,.one-column #tertiary .module{float:left;width:21%;padding-right:2em}.one-column #secondary > .inner:first-child,.one-column #tertiary > .inner:first-child{padding:0}.one-column #primary > .inner:first-child{padding-left:0}.one-column .entry .entry-interaction-links,.one-column .bottomcomment .entry-interaction-links{margin:1em -2em}.one-column ul.entry-management-links{margin-top:2em}@media only screen and (max-width: 80em){#lj_controlstrip{background:#F4CFBE;background-image:none}#canvas{float:right}.module-navlinks{position:relative;right:auto;margin:0;box-shadow:none;border:0;background-image:none;background:#C7CFD7}.module-navlinks ul li{display:inline-block}#header{margin:0;padding:0;background-image:url(https://i.postimg.cc/4NKmmFTS/arches.png);border-bottom:3px solid #C7CFD7}#title{padding:2em 1em 0 2em;margin:0}#pagetitle{padding:.5em 1em}#subtitle{padding:1em 1em 0 2.6em}#content::before{display:none}.two-columns-right #content,.three-columns-sides #content{padding-top:1em}.one-column #secondary .module,.one-column #tertiary .module{float:none;width:auto;padding:0}}@media only screen and (min-width: 45em){.two-columns #secondary .module-userprofile,.three-columns .module-userprofile{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}#lj_controlstrip_user,#lj_controlstrip_login,#lj_controlstrip_loggedout_userpic,#lj_controlstrip_actionlinks{border:0}#content::before{display:none}#secondary > .inner:first-child,#tertiary > .inner:first-child{padding:4em 0 2em 2em !important}#secondary .module,#tertiary .module{padding:1em;margin:1em 0 2em 1em;background:#FFF7F3}#secondary,#tertiary{background-image:url(https://i.postimg.cc/2Swrd5wB/sakura.png);border-bottom:1px solid #FFF7F3}#footer{position:relative;top:-3.3em;padding:1em}#content{padding-right:0}.module-navlinks{position:fixed;bottom:0;z-index:100;width:100%;background-image:none;background:#C7CFD7;margin-bottom:0}.module-navlinks a{font-size:.9em}.module-navlinks ul{padding:.5em;overflow-x:scroll;overflow-y:hidden;white-space:nowrap}.module-navlinks ul li{display:inline-block}.page-recent .entry-management-links{display:none}.page-entry .entry .entry-interaction-links,.bottomcomment .entry-interaction-links{margin-right:-2em;text-align:center}ul.entry-management-links{float:none;text-align:center}.comment-pages{margin:2em auto}.column-left #content,.one-column #content{padding:0}.column-left #content #primary > .inner,.one-column #content #primary > .inner{padding-left:2em}.column-left #secondary .module,.column-left #tertiary .module .one-column #secondary .module,.one-column #tertiary .module{float:none;margin:0 0 2em;width:auto}.column-left .entry-interaction-links.text-links{margin-left:-2em;margin-right:-2em;border-radius:0}.one-column.one-column-split #secondary .module,.one-column.one-column-spli #tertiary .module{padding:1em}}

Save the changes you made.

Your settings page should look like this:

---

Customize

You can find and replace these in the CSS for small tweaks.

#FFF7F3

#FFE3D6

#F4CFBE

#E89B77

#2273BE

#C7CFD7

#545454

Primary font (body text, page headers) - 'Lora'
Secondary font (headers) - 'Fira 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"> / Patterns from <a href="https://www.toptal.com/designers/subtlepatterns/">

Comments

[carisma_sensei]

This is so beautiful! I love love love it!

[tickletheory]

Thanks! :)

[tropicsbear]

Oooh nice!

[tickletheory]

Thanks!

[dark_puck]

This is a lovely layout and I'd like to use it; unfortunately, when I tried, it looks the mobile variant. I'm not sure how to get the navigation strip out of the top and so prettily to the side like in your screenshots.

[tickletheory]

Ah, it must be because your screen width isn't wide enough. Hm, can go and tweak this layout again later to accommodate narrower laptop screens. Will let you know when I've updated it :)

[dark_puck]

Thank you! I pretty much exclusively use laptops.

[jeweledeyes]

Beautiful, thank you! Looks great on mobile as well!

[tickletheory]

Thank you! I'm glad you're enjoying it :)

[leia_solo]

This layout is lovely!

[tickletheory]

Thank you! Enjoy :)

[sniktboom]

This is lovely! I'm really liking how streamlined and responsive your layouts are. Tempted to change my layout every time you update. ;)

[tickletheory]

Thank you! I blame it on free time during the holiday season. But work starts tomorrow so the design dump I did over the past few days will end soon 😅

If you have a theme you'd like to request for sometime in the future, let me know.

[samej]

This is lovely, will use it. Thank you very much, will credit for sure.

[quantumcupcakes]

This is beautiful and I'm using it, thank you :)

[sunrises]

this is such a beautiful layout! thank you for making it available– I'm so excited to use it ♥