layoutsforhell | Jun. 28th, 2019

Jun. 28th, 2019

body {
    font-family: 'Lora', serif;
    color: #545454;
    background-position: center;
    background-attachment: fixed;
    background-repeat: repeat;
    background-color: #333;
    background-image: url('https://softlyfalling.dreamwidth.org/file/10121.png');
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 400!important
}

blockquote {
    border-left: 4px dotted #ffd700;
    padding-left: 1em;
    font-style: italic;
    font-size: 1.2em
}

a, a:visited {
    text-decoration: none;
    color: #666666
}

a:hover, a:active {
    color: #333333
}

.entry-content hr {
    border: 0;
    border-bottom: 4px dotted #C7CFD7
}

.entry-content img,
.comment-content img {
    max-width: 100%
}

#lj_controlstrip {
    background: #353535;
    border-bottom: 3px #ffd700 solid;
    background-image: none
}

#lj_controlstrip a {
    color: #ffffff;
}

#lj_controlstrip input[type="submit"] {
    border: none;
    padding: 3px;
}

#canvas {
    max-width: 60em;
    margin: auto;
    float: none;
    padding-top: 0
}

#content {
    padding-right: 1em;
    background: #fafafe;
}

#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;
    color: white;
    text-shadow: 1px 1px 0 #ffd700;
}

#title a {
    color: white;
}

#pagetitle {
    font: italic 2.2em 'Lora', serif;
    color: white;
}

#subtitle {
    margin-top: 1em;
    padding-left: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Lora', sans-serif;
    font-size: .8em;
    color: #FFFFFF;
}

#content::before {
    display: block;
    height: 3em;
    background-image: url(https://softlyfalling.dreamwidth.org/file/12786.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://softlyfalling.dreamwidth.org/file/12786.png);
    box-shadow: 12px 12px 0 #ffd700;
    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: #ffd700;
    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: #ffd700;
    padding: .3em;
    box-shadow: 3px 3px 0 #7EB1FF;
}

.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://softlyfalling.dreamwidth.org/file/12786.png);
    padding: 1em 2em;
    border-top-right-radius: 3em;
    border-bottom-right-radius: 3em;
    border-left: 6px solid #ffd700;
}

.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 #666666
}

.entry .entry-title {
    padding: .25em 0
}

#footer {
    background: #ffd700;
    color: #111111;
}

#footer a {
    color: #545454
}

.navigation li {
    padding: 0
}

.module .module-header {
    padding: 5px 10px;
    margin: 0 -24px 5px 0;
    background-color: #ffd700;
    color: #111111;
    border-bottom: 3px #7EB1FF solid;
}

.module .module-header a {
    color: #111111
}

#secondary .module .module-content {
    margin: 0 -24px 5px 0;
}

.module .module-content ul {
    list-style-type: none;
    margin-left: 0;
    font-size: .9em
}

.module-content li {
    border-bottom: 1px dotted #C7CFD7;
    padding: 0 0 .5em
}

.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: #C7CFD7;
    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 #C7CFD7;
    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: #C7CFD7;
        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: 0
    }
    #secondary .module,
    #tertiary .module {
        padding: 1em;
        margin: 1em 0 2em;
        background: #FFF7F3
    }
    #secondary,
    #tertiary {
        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
    }
}

- original version by

plainstyles
- set layout to boxes and borders
- keep layout stylesheet checked
- replace #7EB1FF with your position color
- one column and two column setups work with this
- add this link under Fonts > Options https://fonts.googleapis.com/css?family=Fira+Sans|Lora:400,400i,700,700i

softlyfalling

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 400!important
}

blockquote {
    border-left: 4px dotted #000080;
    padding-left: 1em;
    font-style: italic;
    font-size: 1.2em
}

a, a:visited {
    text-decoration: none;
    color: #666666
}

a:hover, a:active {
    color: #333333
}

.entry-content hr {
    border: 0;
    border-bottom: 4px dotted #C7CFD7
}

.entry-content img,
.comment-content img {
    max-width: 100%
}

#lj_controlstrip {
    background: #353535;
    border-bottom: 3px #000080 solid;
    background-image: none
}

#lj_controlstrip a {
    color: #FFFFFF;
}

#lj_controlstrip input[type="submit"] {
    border: none;
    padding: 3px;
}

#canvas {
    max-width: 60em;
    margin: auto;
    float: none;
    padding-top: 0
}

#content {
    padding-right: 1em;
    background: #fafafe;
}

#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;
    color: white;
    text-shadow: 1px 1px 0 #000080;
}

#title a {
    color: white;
}

#pagetitle {
    font: italic 2.2em 'Lora', serif;
    color: white;
}

#subtitle {
    margin-top: 1em;
    padding-left: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Lora', sans-serif;
    font-size: .8em;
    color: #FFFFFF;
}

#content::before {
    display: block;
    height: 3em;
    background-image: url(https://softlyfalling.dreamwidth.org/file/12786.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 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: #000080;
    color: #FFFFFF;
    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: #000080;
    padding: .3em;
    box-shadow: 3px 3px 0 #7EB1FF;
}

.userpic img {
    width: 100%;
    height: 100%;
    border-radius: 4px
}

.entry,
.module-header {
    border: 0
}

.entry .entry-title {
    font-size: 1.6em
}

.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 #666666
}

.entry .entry-title {
    padding: .25em 0
}

#footer {
    background: #000080;
    color: #111111;
}

#footer a {
    color: #FFFFFF
}

.navigation li {
    padding: 0
}

.module .module-header {
    padding: 5px 10px;
    margin: 0 -24px 5px 0;
    background-color: #000080;
    color: #FFFFFF;
    border-bottom: 3px #7EB1FF solid;
}

.module .module-header a {
    color: #FFFFFF
}