Line

[rosecarmine]

LIVE PREVIEW

FEATURES

• header image (1000x350px)
• expanding topbar
• navigation links, calendar,  links list, tags list, custom text
• comment pages
• icon pages

INSTRUCTIONS

1. Go to the  "Select style" page, search for "Basic Boxes" and apply any theme.
2. Choose the "1 Column (modules at bottom; no sidebar)" page setup.
3. Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "text-only" for:
   • Select whether entry management links are printed as text or using the available icons
   • Select whether comment management links are printed as text or using the available icons.
4. Click on the "Modules" tab and enable "Custom text". The layout supports "Navigation", "Calendar", "Links list", "Tags" and "Custom text". Uncheck the other modules.
5. Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)"./*------------------------------------- - layout - line (basic boxes) - https://myrtillenne.dreamwidth.org - header image - unsplash.com -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #234974; --line-height: 1.5; --body-gradient1-color: #3088b8; --body-gradient2-color: #e9c7d3; --link-color: #c93f70; --link-hover-color: #3088b8; --main-font: Average, serif; --title-font: Amita, serif; --content-width: 1000px; --header-height: 350px; --content-border-color: rgba(255, 255, 255, 0.5); --header-image: url(https://rosecarmine.dreamwidth.org/file/115077.jpg); --title-color: #0e2f52; --title-background-color: rgba(255, 255, 255, 0.5); --subtitle-color: #0e2f52; --subtitle-background-color: rgba(255, 255, 255, 0.3); --header-border-color: #fff; --heading-color: #fff; --heading-background-color: #6db4da; --entry-background-color: #f5fbfc; --entry-title-color: #fff; --entry-title-background-color: #9bcce6; --entry-date-color: #234974; --entry-date-background-color: #c9e3f1; --controlstrip-color: #fff; } /*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { font-family: var(--main-font); font-size: var(--text-size); padding: 0; margin: 0; line-height: var(--line-height); color: var(--text-color); background: linear-gradient( to bottom, var(--body-gradient1-color), var(--body-gradient2-color) ); background-attachment: fixed; } html body { margin-left: 0; margin-right: 0; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited, a:active { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { border-top: 5px solid var(--entry-date-background-color); border-bottom: 5px solid var(--entry-date-background-color); padding: 0.5em; font-style: italic; margin: 1em 0; color: var(--entry-date-text-color); } @media (min-width: 600px) { #canvas { max-width: var(--content-width); margin: 0 auto; border: 20px solid var(--content-border-color); } } #canvas > .inner:first-child { background: var(--entry-background-color); } @media (min-width: 800px) { #content > .inner:first-child { display: flex; flex-direction: column; } #secondary { order: -1; } } /*--------------- header ---------------*/ #header { text-align: center; } #journaltitles-container { padding-top: 10px; } h1#title { font-size: 1.2em; font-family: var(--title-font); font-style: italic; font-weight: normal; padding: 0.5em; margin: 0; line-height: 1; } h1#title a { color: inherit; } h2#subtitle { font-size: 1em; text-transform: lowercase; font-weight: normal; padding: 0.5em; margin: 5px 0 0; font-family: var(--title-font); line-height: 1; } @media (min-width: 800px) { #journaltitles-container { background-image: var(--header-image); background-position: center center; width: 100%; height: var(--header-height); padding-top: 0; padding-bottom: 20px; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; } h1#title { background: var(--title-background-color); color: var(--title-color); } h1#title a { color: inherit; } h2#subtitle { background: var(--subtitle-background-color); color: var(--subtitle-color); } } h2#pagetitle { display: none; } /*------------ entries ------------*/ .entry .header .inner { padding-top: 5px; } .entry .entry-title { font-size: 1.2em; letter-spacing: 1px; background: var(--entry-title-background-color); font-family: var(--title-font); font-style: italic; padding: 0.5em 1em; margin: 0 0 5px; font-weight: normal; transition: all 0.4s ease; line-height: 1; background-size: 200% 200%; background-image: linear-gradient( to right, var(--heading-background-color) 50%, var(--entry-title-background-color) 0 ); background-position: right; } .entry .entry-title:hover { background-position: left; letter-spacing: 5px; color: var(--entry-title-color); } .entry .entry-title, .entry .entry-title a { color: var(--entry-title-color); } .entry .entry-title:hover a { color: var(--entry-title-color); } .no-subject .entry .entry-title { background: none; padding: 0; margin: 0; } .admin-post-icon, .sticky-entry-icon { display: none; } .entry .datetime { letter-spacing: 1px; line-height: 1; width: 100%; display: block; padding: 0.5em 1em; text-transform: lowercase; transition: all 0.4s ease; box-sizing: border-box; background-size: 200% 200%; background-image: linear-gradient( to right, var(--entry-title-background-color) 50%, var(--entry-date-background-color) 0 ); background-position: right; } .entry .datetime, .entry .datetime a { color: var(--entry-date-color); } .entry .datetime:hover a { color: var(--entry-title-color); } .entry .datetime:hover { background-position: left; letter-spacing: 5px; color: var(--entry-title-color); } .restrictions, .access-filter { display: none; } .security-protected .entry .datetime:before { content: "[LOCKED] "; } .security-private .entry .datetime:before { content: "[PRIVATE] "; } .restrictions-NSFW .entry .date:before { content: "[NSFW] "; } .restrictions-18 .entry .date:before { content: "[18+] "; } @media (min-width: 800px) { .has-userpic .entry .header { float: right; width: calc(100% - 106px); margin-left: -1em; } } .entry .contents { margin: 2em 2em 0; } .entry .userpic { float: left; margin-right: 1em; } .userpic img { max-width: 50px; max-height: 50px; width: auto; height: auto; } @media (min-width: 800px) { .entry .contents { margin-top: 0; } .has-userpic .entry .userpic { margin-left: -2em; width: 100px; height: 100px; padding: 0 3px 3px; display: flex; align-items: center; justify-content: center; background: var(--heading-background-color); } .userpic img { max-width: 100px; max-height: 100px; display: block; } } .entry .poster { font-size: 0; display: block; clear: right; } .entry .poster .ljuser { font-size: var(--text-size); } .entry .poster .ljuser:nth-child(1):before { content: "Written by "; } .entry .poster .ljuser:nth-child(2):before { content: "in "; padding-left: 0.25em; } .poster .ljuser img { display: none; } .entry-content { margin: 2em 0; } @media (min-width: 800px) { .entry .poster:before { content: ""; padding-top: 1em; display: block; font-size: var(--text-size); } .entry .poster.empty:before { padding: 0; } .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .entry-content a, .comment-content a { background-image: linear-gradient( var(--entry-date-background-color), var(--entry-date-background-color) ); background-size: 0% 1px; background-position-y: 100%; background-position-x: 100%; background-repeat: no-repeat; transition: color 0.4s ease, background-size 0.4s ease-in-out; } .entry-content a:hover, .comment-content a:hover { background-size: 100% 1px; background-position-x: 0%; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .metadata { margin: 0 -2em; clear: both; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata li { margin-bottom: 5px; border-bottom: 1px solid var(--entry-date-background-color); font-style: italic; padding: 0 2em; } .footer { clear: both; } .entry div.tag { padding: 0 2em; margin-bottom: 5px; border-bottom: 1px solid var(--entry-date-background-color); font-style: italic; } .tag ul { display: inline; margin-left: 0; padding-left: 0; } .tag ul li { display: inline; } ul.entry-management-links { margin: 0; padding: 0.5em; background: var(--entry-title-background-color); text-transform: uppercase; line-height: 1; text-align: center; } ul.entry-management-links li, ul.entry-interaction-links li { display: inline; padding: 0 0.25em; } ul.entry-interaction-links { margin: 5px 0 0; padding: 0.5em; background: var(--heading-background-color); text-transform: uppercase; line-height: 1; text-align: center; } .entry-management-links a, .entry-management-links a:hover { color: var(--entry-title-color); } .entry-interaction-links a, .entry-interaction-links a:hover { color: var(--heading-color); } .page-entry .entry { margin-bottom: 5px; } /*------------ comments ------------*/ .comment-pages { text-align: center; font-family: var(--title-font); margin: 0.5em; } .full .comment { margin: 5px 0; background: var(--entry-background-color); } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .comment:after { content: ""; display: block; clear: both; } .partial { background: var(--entry-date-background-color); padding: 0.5em 1em; color: var(--entry-date-color); margin: 5px 0; } .partial a, .partial a:hover { color: var(--entry-date-color); } .comment .header { background: var(--heading-background-color); overflow: hidden; padding: 0.5em 1em; line-height: 1; } .full .comment .thread-depth, .full .comment .comment-title, .full .comment .header .datetime { float: left; color: var(--heading-color); } .full .comment .comment-title { margin-right: 0.5em; } .thread-depth { float: left; margin-right: 0.5em; } .comment .comment-title { margin: 0; } .full .comment .comment-title a, .full .comment .comment-title a:hover { color: var(--heading-color); } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .comment-date-text { display: none; } .comment .userpic { float: left; margin-right: 1em; margin-bottom: 0; } .comment .userpic img { background: var(--heading-background-color); padding: 0 3px 3px; } .full .comment .poster, .full .comment .poster-ip { display: block; margin-left: 2em; } .full .comment .poster { padding-top: 1em; } .comment-content { padding: 2em; } .comment .footer { margin: 0 2em 2em; } ul.comment-management-links, ul.comment-interaction-links { margin: 0; padding: 0; display: inline; } ul.comment-management-links li, ul.comment-interaction-links li { display: inline; padding-right: 0.25em; } .comment-pages.bottompages { display: none; } #comments ul.entry-interaction-links { display: none; } #comments ul.entry-management-links { display: none; } .bottomcomment { text-align: center; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform, #postform { padding: 2em; border-bottom: 20px solid var(--heading-background-color); } #postform { margin-bottom: 5px; } .comment #qrform { border: 0; padding: 2em 0 0; } .page-reply .comment { border-bottom: 20px solid var(--heading-background-color); } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--entry-date-background-color); background: var(--entry-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: var(--entry-date-background-color); border: 0; font-size: var(--text-size); padding: 0.5em; color: var(--entry-date-color); text-transform: uppercase; line-height: 1; } /*------------ archive, tags, icons containers ------------*/ .tags-container, .icons-container { padding-bottom: 5px; } .page-month .month { margin-top: 5px; border-bottom: 20px solid var(--heading-background-color); } .month .header, .tags-container .header, .icons-container .header { background: var(--entry-title-background-color); text-align: center; margin-top: 5px; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.2em; font-family: var(--title-font); font-style: italic; font-weight: normal; line-height: 1; color: var(--entry-title-color); padding: 0.5em; margin: 0; } .month .contents, .tags-container .contents, .icons-container .contents { padding: 2em; } .month .footer, .tags-container .footer, .icons-container .footer { background: var(--heading-background-color); text-align: center; text-transform: uppercase; padding: 0.5em; line-height: 1; } .month .footer a, .tags-container .footer a, .icons-container .footer a { color: var(--heading-color); } /*------------ archive------------*/ .month caption { display: none; } table.month { margin: 0 auto; border-collapse: collapse; width: 100%; } table.month td { height: 3.25em; padding: 3px; text-align: center; } table.month tr { border: 1px solid var(--entry-date-background-color); border-right: none; border-left: none; } table.month tr:last-child { border-bottom: none; } table.month tr:first-child { border-top: none; } table.month th { border: none; padding: 0.5em; background: var(--entry-date-background-color); color: var(--entry-date-color); text-transform: uppercase; font-weight: normal; } table.month td.day-has-entries .label, table.month td p { display: inline-block; } table.month td p:before { content: "[ "; } table.month td p:after { content: " ]"; } .month dl { margin: 0; } .month dl dt { text-align: center; background: var(--entry-title-background-color); font-size: 1em; padding: 0.5em; font-family: var(--title-font); font-weight: normal; line-height: 1; } .month dl dt a { color: var(--entry-title-color); } .month dl .time { padding-right: 0.5em; } .month dl h3 { display: inline; font-size: 1em; } .page-month .month .entry-poster { margin-right: 0.5em; } .month dl .tag ul { margin-top: 0; } .month dd { margin: 2em; } .month dd br { display: block; } .day-date { display: none; } /*------------ tags ------------*/ ul.ljtaglist { padding: 0; margin-left: 1em; list-style: none; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } ul.ljtaglist li:before { content: "-"; padding-right: 4px; } /*------------ icons ------------*/ .page-icons .toppages { display: none; } .sorting-options ul { margin: 0; padding: 0.5em; text-align: center; color: var(--entry-date-color); background: var(--entry-date-background-color); line-height: 1; text-transform: uppercase; } .sorting-options a { color: var(--entry-date-color); } .sorting-options ul li { display: inline; } .sorting-options a { color: var(--entry-date-color); } .icon { border-top: 20px solid var(--heading-background-color); margin-top: 10px; overflow: hidden; } .icon-image { float: left; } .icon-image img { background: var(--heading-background-color); padding: 0 3px 3px; margin-right: 2em; } .icon-info { padding: 2em; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .page-icons .bottompages { text-align: center; font-family: var(--title-font); } .icon-pages p { margin: 0; padding: 0; } /*------------ modules ------------*/ @media (min-width: 800px) { .module-section-one { border-top: 1px solid var(--header-border-color); overflow: hidden; height: 2em; transition: all 0.4s ease; } .module-section-one:hover { height: 250px; border-bottom: 20px solid var(--heading-background-color); } .module-section-one .inner { display: flex; height: 250px; } .module-section-one .module { flex: 1; } } .module .module-header { font-size: 1em; text-transform: uppercase; background: var(--heading-background-color); padding: 0.5em; line-height: 1; margin: 0; color: var(--heading-color); font-weight: normal; text-align: center; } .module .module-header a, .module .module-header a:hover { color: var(--heading-color); } .module-section-one .module-content { padding: 1em; } @media (min-width: 800px) { .module-section-one .module-content { height: calc(100% - 2em); overflow: auto; box-sizing: border-box; } } .module-section-one .module-content ul { list-style: none; margin-left: 1em; padding: 0; } .module-content ul:first-child { margin: 0; } .module-section-one .module-content li { border-bottom: 1px solid var(--entry-date-background-color); margin-bottom: 3px; position: relative; } .module-section-one .module-content li:after { content: ""; position: absolute; display: block; height: 1px; width: 0; bottom: -1px; right: 0; background: var(--heading-background-color); transition: width 0.4s ease-in-out; } .module-section-one .module-content li:hover:after { width: 100%; left: 0; } .module-calendar .module-content { text-align: center; } .module-calendar table { margin: 0 auto; border-collapse: collapse; width: 100%; height: 100%; } .module-calendar th { background: var(--entry-title-background-color); color: var(--entry-title-color); font-weight: normal; } .tags_cloud li, .module-tags_cloud li { display: inline; } .module-customtext .module-content { font-style: italic; } .module-userprofile, .module-pagesummary, .module-cuttagcontrols, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered, .module .manage-link { display: none !important; } .module-section-header { border-bottom: 1px solid var(--header-border-color); background: var(--heading-background-color); } .module-navlinks ul { text-align: center; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-evenly; } .module-navlinks li { padding: 0.5em 1em; display: inline-block; text-transform: uppercase; line-height: 1; background-image: linear-gradient( var(--header-border-color), var(--header-border-color) ); background-size: 0% 1px; background-position-y: 0%; background-position-x: 100%; background-repeat: no-repeat; transition: background-size 0.4s ease-in-out; } .module-navlinks li:hover { background-size: 100% 1px; background-position-x: 0%; } .module-navlinks a { color: var(--heading-color); } .module-content::-webkit-scrollbar { width: 10px; height: 10px; } .module-content::-webkit-scrollbar-track { background: transparent; } .module-content::-webkit-scrollbar-thumb { background: var(--entry-title-background-color); border: 3px solid var(--entry-background-color); } .module-content::-webkit-scrollbar-corner { background: var(--entry-title-background-color); } /*------------ navigation ------------*/ .navigation { min-height: 5px; text-align: center; } .navigation ul { margin: 0; padding: 0; } .navigation li { display: inline-block; padding: 0.5em; line-height: 1; font-family: var(--title-font); } .topnav, .noentries, .navigation .page-separator { display: none; } /*------------ footer ------------*/ #footer { text-align: center; background: var(--heading-background-color); text-transform: uppercase; line-height: 1; padding: 0.5em; } #footer a { color: var(--heading-color); } #footer a:hover { color: var(--heading-color); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); padding: 0.5em; } div.ContextualPopup .Relation { font-size: 1em; border-top: 10px solid var(--heading-background-color); padding: 1em 1em 0; margin: 0; font-family: var(--title-font); font-weight: normal; } div.ContextualPopup .Userpic { border: none; margin: 10px 0 0; padding: 0 0 0 1em; } div.ContextualPopup .Userpic img { background: var(--heading-background-color); padding: 0 3px 3px; } .ContextualPopup .Actions ul { margin: 0; padding: 1em; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: transparent; justify-content: center; padding: 0.75em 0; color: var(--controlstrip-color); } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--controlstrip-color); } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { color: var(--controlstrip-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip input, #lj_controlstrip select { border: 0; background: var(--entry-background-color) !important; font-size: var(--text-size) !important; color: var(--text-color) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { padding: 0.25em; }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Average&family=Amita&display=swap
6. Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout".

RESOURCES

• image from unsplash.com

Comments

[plentyofwords]

Hi! This is Beth and I use many of your layouts. I had a question about an older layout you made but isn't on here anymore. I wasn't sure where to ask it?

Thank you for your time and talent

[rosecarmine]

Hi Beth! What seems to be the problem?

[plentyofwords]

Hi! Sorry for the delay. I was wondering where the code for this layout is? I love the look of it but I couldn't find it.

Thanks!!

[rosecarmine]

I just posted an updated version here: https://myrtillenne.dreamwidth.org/9690.html

[misterhappy]

This is Beth! Thank you so much!

[mekare]

OMG i found you because someone recced you during the snowflake_challenge. These are all wonderful, I‘ll take my time to go through them a choose a new layout for my journal.

[rosecarmine]

Thank you so much!

[inkcharm]

This layout is SO lovely, and I'm very happily using edited versions of it here and here. Your codes are truly always stunning, and SO SO SO easy to use and customize. Thank you so much for all your work <3

[rosecarmine]

Thank you so much for the lovely comment! 😘❤️

[intothisshadow]

Just switched to this one! You have so many wonderful layouts I have such trouble selecting which one to use because I want to use them all right now and only have one journal :D

[freddykrueger]

Hi, using this layout. I was wondering could I get some help. I did all the steps but the the calendar, links, tags and text are not showing even though I checked them.

Also, how do you get a background image in their instead of colors?