dustier | Entries tagged with theme: simple

I have no idea what happened to the quality of the preview picture but ANYWAY. Here is a simple clean layout with a very limited colour palette. It's literally a bunch of greys and one single accent colour. I've tried this with a variety of different accent colours and they all look cool. There's info on how to edit it at the bottom of this post.

Features; simple style, slightly rounded images, muted colour scheme, custom fonts (my two new favourites!).

CSS (red version):

/* Cleaned CSS: */

/* vietnamese */
@font-face {
  font-family: 'Patrick Hand SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v8/0nkwC9f7MfsBiWcLtY65AWDK873lgSK7FQc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Patrick Hand SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v8/0nkwC9f7MfsBiWcLtY65AWDK873lgCK7FQc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Patrick Hand SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v8/0nkwC9f7MfsBiWcLtY65AWDK873ljiK7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58m-wi40.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58i-wi40.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-wg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.ContextualPopup, .icon-browser {border-radius:10px;
    background: #ffffff;
    color: #7a7a7a;
    }

.ContextualPopup a, .icon-browser a { color: #5f8a92; }
.ContextualPopup a:visited { color: #8da8ad; }
.ContextualPopup a:hover { color: #acc5c9; }
.ContextualPopup a:active { color: ; }

body {
    padding: 0;
    background: #fff;
background-image: url(https://i.imgur.com/8vRBVC8.png);
    font-family: Trebuchet MS; 
font-size: 0.8em;
    color: #7a7a7a;
    line-height: 1.6em;
    text-align: center;
    }

#canvas {
        margin-left: 0em;
        margin-right: 0em;
        }

img { border: none; border-radius:10px;}

a { text-decoration: none; }
a, a:link, a:visited { color: #EA6884;   }
a:hover { color: #dbdbdb; }

b, strong {text-transform: uppercase; font-weight: bold; letter-spacing: 2px;}

i, em {font-family: georgia; letter-spacing: 2px;}

q { font-style: italic; }

blockquote {font-family: georgia;}
h1, h2, h3 {font-family: Patrick Hand SC;text-transform: uppercase;letter-spacing: 2px;font-weight:bold;}

#canvas {
    margin: 0 auto;
    padding: 5% 0;
    text-align: justify;
    width: 85%;
}

#primary {
    text-align: justify;
    margin: 0;
    }

#secondary {
    margin: 1px 0 0 0;
    padding: 0 1em;
    font-size: 1em;
}

#tertiary {
    background-color: #ffffff;
    clear: both;
    color: #7a7a7a;
    line-height: 125%;
    }

#tertiary > .inner:first-child { }

#tertiary .separator-after { clear: both; }

@media only screen and (min-width: 45em) {
    #canvas {
        padding-left: 15%;
    }

#primary {
        float: left;
        width: 45%;
        margin-right: .6em;
    }

#secondary {
        float: left;
        width: 15em;
    }

#tertiary {
        margin-right: auto;
        width: 45%;
    }
}

/*--- header---*/
#header {
font-family: Quicksand;
    text-transform: lowercase;
letter-spacing: 2px;
}

#header, #header #title a {font-family:Patrick Hand SC;
  color: #7a7a7a; text-transform: uppercase; letter-spacing: 2px;
}
#header h1 {
  font-family: Patrick Hand SC; text-transform: uppercase;letter-spacing: 2px;
}
#header h2 {
  font-family: Quicksand; text-transform: uppercase;letter-spacing: 2px;
}

/*--- footer ---*/
#footer {
font-family: Quicksand;
    background: #ffffff;
    font-size: 0.8em;
    text-transform: lowercase;
align: center;
    clear: both;
    margin-top: 10px;
letter-spacing: 2px;
}

#footer a, #footer a:link, #footer a:active { color: #EA6884; }
#footer a:visited { color: #EA6884; }
#footer a:hover { color: #E0ECEC; }

#footer .inner { padding: 10px; }

@media only screen and (min-width: 45em) {
    #header, #footer {
        margin-right: auto;
        width: 45%;
    }

.two-columns-left #header {
        text-align: right;
    }
}
/*--- prev/next navigation ---*/

li.page-back, li.page-forward {
text-transform: lowercase;
font-family: Quicksand;
letter-spacing: 2px;
    display: bottom;
    padding: 0;
    margin: 0;
    }

li.page-separator { display: none; }

.navigation ul {
    display: inline;
    padding: 0;
    margin: 0;
    }

/*--- entry ---*/

.entry {
    background: #ffffff;
    color: #7a7a7a;
    padding: 10px;
    margin: 0 0 10px 0;
    font-family: Trebuchet MS, Trebuchet MS, sans-serif; font-size: .95em;
    }

.entry a, #tertiary a {
    color: #EA6884;
    }

.entry a:visited, #tertiary a:visited {
    color: #EA6884;
    }

.entry a:hover, #tertiary a:hover {
    color: #acc5c9;
    }

.entry-content { margin: 10px 0 0 0; }

/* ensure comment content stretches out horizontally so it's readable */
.comment-content:before {
    content: "";
    display: block;
    overflow: hidden;
    width: 10em;
}
.comment-content { border-radius:10px; border-top: 1px transparent solid; } /* for firefox */

.entry .header {
    padding: 0;
    margin: 0 0 10px 0;
    border-bottom: 1px dotted #d4d4d4;
    }

h3.entry-title {
    margin: 0;
    padding: 0;
    font-family: Patrick Hand SC, sans-serif; font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #EA6884;
    }

.no-subject .entry .entry-title {
    background: none;
    }

h3.entry-title a { color: #EA6884; }

.datetime {
    font-family: Quicksand, sans-serif; font-size: .8em;letter-spacing:2px;
    text-transform: uppercase;
    color: #939393;
text-align: right;
    }
.datetime a { color: #939393; }

.entry .userpic {border-radius:10px;
    display: block;
    margin: 0;
    }

.entry .userpic img {border-radius:10px;
    border: 5px solid #EA6884;
    }

.poster {
    font-family: Quicksand, sans-serif; font-size: 1em;letter-spacing:2px;
    text-transform: uppercase;
    }

.metadata { margin: 1.25em 0 0 0; }

.metadata.top-metadata { margin: 10px 0 1.25em 0; }

.metadata ul {
    list-style: none;
    padding: 0;
    margin: 0;
    }

.metadata ul li {
    font-size: 0.8em;
    font-weight: normal;
    text-transform: lowercase;
font-family: Quicksand;
    color: #939393;
    letter-spacing: 2px;
    padding: 0;
    }

.tag-text {
    font-size: 0.8em;
    text-transform: lowercase;
font-family: Quicksand; letter-spacing:2px;
    }

.tag ul {
    display: inline;
    margin: 0;
    padding: 0;
    }

.tag ul li {
    display: inline;
    font-size: 0.8em;
    font-weight: normal;
    text-transform: lowercase;
    color: #939393;
    padding: 0;
font-family: Quicksand; letter-spacing:2px;
    }

ul.entry-management-links {text-align:center;
    padding: 0;
    margin: 10px 0 0 0;
    }

ul.entry-management-links li {
    display: inline;
    font-size: 60%;
    font-weight: normal;
    text-transform: lowercase;
    color: #939393;
    letter-spacing: 0;
    padding: 0 5px 0 0;
    }

ul.entry-interaction-links {
    padding: 0 0 5px 0;
    margin: 10px 0 0 0;
    text-align: center;
    }

ul.entry-interaction-links li {
    display: inline;
    font-weight: bold;
    text-transform: uppercase;
    color: #939393;
    letter-spacing: 0;
    padding: 0 5px 0 0;
letter-spacing: 2px;
font-size: 0.8em;
font-family: Quicksand, sans-serif;
    }

/*-- archive --*/

li.active {
    display: inline;
    padding: 0;
    margin: 10px;
    }

.month {
    background-color: #ffffff;
    color: #7a7a7a;
    padding: 20px;
    margin: 0;
    }

.month h3 {
    font-family: Quicksand, sans-serif; font-size: 1em;
    font-weight: normal;
    text-transform: lowercase;
    letter-spacing: 2px;
    padding: 0;
    margin: 0;
    text-align: right;
    }

.month a {
    color: #EA6884;
    }

.month a:visited {
    color: #EA6884;
    }

.month a:hover {
    color: #acc5c9;
    }

.navigation ul { display: inline; }
.navigation li { display: inline; }

table.month { border: 0; }
.month caption { display: none; }
.month th {
    text-align: center;
    margin: 0 2px;
    text-transform: lowercase;
    font-weight: normal;
    }
.month td.day {
    font-weight: normal;
    color: #939393;
    }
.month td.day-has-entries {
    font-weight: normal;
    color: #EA6884;
    }
.month td.day-has-entries p {
    padding: 0 0 0 5px;
    margin: 0;
    display: inline;
    }
.month table {
    width: 100%;
    border: 0;
    margin: auto;
    }

td.day {
    padding: 10px;
    border: 0;
    text-align: center;
    }

/*-- tags --*/

.page-tags .tags-container {
    background-color: #ffffff;
    color: #7a7a7a;
    font-family: Trebuchet MS, Trebuchet MS, sans-serif; font-size: .95em;
    padding: 10px;
    margin: 0 0 10px 0;
    }

.page-tags .tags-container h2 {
    margin: 0 0 10px 0;
    padding: 0;
    font-family: Trebuchet MS, Trebuchet MS, sans-serif; font-size: .7em;
    border-width: 0 0 1px 0;
    border-style: dotted;
    border-color: #d4d4d4;
    font-weight: normal;
    text-transform: lowercase;
    letter-spacing: 1px;
    color: #939393;
    }

.page-tags .ljtaglist { list-style: none; margin: 0; padding: 0; }
.page-tags .ljtaglist li {
    padding: 0 0 0 10px;
    margin: 0;
    text-transform: lowercase;
    letter-spacing: 0;
    }

.page-tags .tags-container a {
    color: #EA6884;
    }

.page-tags .tags-container a:visited {
    color: #EA6884;
    }

.page-tags .tags-container a:hover {
    color: #acc5c9;
    }

.page-tags .tags_cloud { text-align: center; }

/*-- icons page --*/

.icons-container {
    background-color: #ffffff;
    color: #7a7a7a;
    font-family: Trebuchet MS, Trebuchet MS, sans-serif; font-size: .95em;
    padding: 10px;
    margin: 0 0 10px;
    }

.icons-container h2 {
    border-color: #EA6884;
    border-style: dotted;
    border-width: 0 0 1px 0;
    color: #939393;
    font-family: Quicksand, sans-serif; font-size: .8em;
    font-weight: normal;
    letter-spacing: 2px;
    margin: 0 0 10px 0;
    padding: 0;
    text-transform: lowercase;
    }

.icons-container a {
    color: #EA6884;
    }

.icons-container a:visited {
    color: #EA6884;
    }

.icons-container a:hover {
    color: #acc5c9;
    }

.sorting-options ul {
    padding-left: 0;
    }

.sorting-options ul li {
    display: inline;
    margin: 0;
    }

.icons-container .icon {
    margin: 1em 0;
    }

.icon-image {
    float: left;
    clear: left;
    margin-bottom: .25em;
    min-width: 100px;
    padding-right: 1em;
    }

.icon-info {
    min-height: 100px;
    }

.icon-info span {
    font-weight: bold;
    }

.icon-info .default {
    text-decoration: underline;
    }

.icon-keywords ul {
    display: inline;
    margin: 0;
    padding: 0;
    }

.icon-keywords ul li {
    display: inline;
    padding: 0;
    }

/*--- comments ---*/

#comments {
    font-family: Trebuchet MS, Trebuchet MS, sans-serif; font-size: .95em;
    }

.comment-wrapper {
    min-width: 15em;
}

.comment-title {
    font-family: Patrick Hand SC, sans-serif; 
    margin: 0;
    }

.no-subject .comment .comment-title {
    background: none;
    }

hr.above-entry-interaction-links, hr.below-reply-container { display: none; }

input, textarea {
    background-color: #ffffff;
    color: #939393;
    padding: 2px;
    border: 1px solid #EA6884;
border-radius: 10px;
    font-family: Trebuchet MS, sans-serif; 
    font-size: 100%;
    }

textarea.textbox  { width: 90%!important; }

.poster-ip {
    font-family: Quicksand, sans-serif; font-size: 1em;letter-spacing:2px;
    text-transform: uppercase;
    color: #EA6884;
    display: block;
    text-align: left;
    }

.comment .userpic {border-radius: 10px;
    display: block;
    margin: 0;
    }

.comment .userpic img {border-radius:10px;
    border: 5px solid #EA6884;
    }

.comment {
    background: #ffffff;
    color: #7a7a7a;
    padding: 20px;
    margin: 0;
    }

.comment-posted { font-weight:bold; }

.comment-wrapper { margin: 20px 0; padding: 0; }
.comment-content { margin: 10px 0; }

.bottomcomment, .comments-message {
    background: #ffffff;
    color: #7a7a7a;
    padding: 20px;
    margin: 0;
    }

.comment a,
.bottomcomment a {
    color: #EA6884;
    }

.comment a:visited,
.bottomcomment a:visited {
    color: #EA6884;
    }

.comment a:hover,
.bottomcomment a:hover {
    color: #acc5c9;
    }

.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; }
.comment-management-links li, .comment-interaction-links li { display: inline; }

#qrform table { border: 0!important; }

.comment-poster {
    font-family: Quicksand, sans-serif; font-size: .6em;
    text-transform: uppercase;
    color: #EA6884;
    }

.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; }
.comment-management-links li, .comment-interaction-links li { display: inline; }

table.talkform {
    background: #ffffff;
    color: #7a7a7a;
    font-family: Trebuchet MS, Trebuchet MS, sans-serif; font-size: .95em;
    padding: 10px;
    margin: 0 0 10px 0;
    }

table.talkform b {
    color: #7a7a7a;
    }

table.talkform a {
    color: #EA6884;
    }

table.talkform a:visited {
    color: #EA6884;
    }

table.talkform a:hover {
    color: #acc5c9;
    }

/*-- modules --*/

#secondary .module {
    font-family: Trebuchet MS, Trebuchet MS, sans-serif; font-size: .8em;
    }

#tertiary .module {
    float: left;
    padding: 0.5em 2em;
    font-family: Trebuchet MS, Trebuchet MS, sans-serif; font-size: .8em;
    }
#secondary .module-navlinks { font-family: Quicksand, sans-serif; font-size: 1em;letter-spacing: 2px; }

#tertiary .module-navlinks {
    margin: 0;
    padding: 1em 5%;
    width: 90%;
    }

.module-navlinks {border-radius:10px;
font-family: Quicksand;
letter-spacing:2px;
    padding: 10px;
    margin: 0;
    margin-left: -.8em;
    background-color: #EA6884;
    text-transform: lowercase;
    }

.module-navlinks ul.module-list {
    list-style: none;
    padding: 0;
    margin: 0;
    }
.module-navlinks ul.module-list li {
    padding: 0px;
    margin: 0;
    }
.module-navlinks ul.module-list li a, .module-navlinks ul.module-list li a:link,.module-navlinks ul.module-list li a:visited { color: #FFF; }
.module-navlinks ul.module-list li a:hover { color: #dee0e0; }

.module-calendar { text-align: center;border-radius:10px; }
.module-customtext {border-radius:10px;
    padding: 0;
    margin: 20px 0 0 0;
    text-align: center;
    }

.module-header {
    font-family: Patrick Hand SC, sans-serif; font-size: 2em;
    font-weight: normal;
    letter-spacing: 2px;
    text-align: center;
    text-transform: lowercase;
    border-style: dotted;
    border-width: 0 0 1px 0;
    border-color: #d4d4d4;
    }

.module-customtext .module-header { text-align: center; border-radius:10px;}

#tertiary .module-header a,
#tertiary .module-header a:link,
#tertiary .module-header a:visited,
#tertiary .module-header a:hover
    { color: #EA6884;  }

.module-userprofile .journal-name,
.module-userprofile .userpic
    { text-align: center;border-radius:10px; }

.module-userprofile .userpic img { border:5px solid #EA6884;border-radius:10px; }

ul.userlite-interaction-links.icon-links {
    margin-left: 0;
    padding-left: 0;
    text-align: center;
text-transform: lowercase;
letter-spacing: 2px;
font-weight: 0.8em;
font-family: Quicksand, sans-serif;
    }

ul.userlite-interaction-links.icon-links li {
    display: inline;
    padding: 0 0.2em;
    }

.module-powered, .module-tags_cloud, .module-time { border-radius:10px;width: 90%; }

#tertiary .module-powered,
#tertiary .module-tags_cloud,
#tertiary .module-time {border-radius:10px;
  clear: both;
  float: none;
  width: auto;
}

.tags_cloud li, .module-tags_cloud li { display: inline; border-radius:10px;}

.manage-link {
    font-size: smaller;
    text-align: right;
    text-transform: uppercase;
    }

.module-time, .module-powered {
    border-style:dotted;
    border-width: 0 0 1px 0;
    border-color: #d4d4d4;
    letter-spacing: 1px;
    line-height: 125%;
    text-align: center;
    padding-top: 1em;
    }

.module-search .search-form { margin: .2em auto; border-radius:10px;}
.module-search .search-box { margin: .2em; max-width:100%;border-radius:10px; }

.search-form .search-box-item, 
.search-form .search-button-item {
    display: block
}
.search-form .comment_search_checkbox_item {
    display: inline
}

#tertiary .module-content ul {
    list-style-position: disc outside;
    margin-left: 1em;
    padding-left: 0;
    }

#tertiary .module-content li {
    margin: 0.5em 0;
    line-height: 100%;
    }

/*-- extras --*/

.ContextualPopup {border-radius:10px;
    background: #ffffff;
    border: 1px dotted #d4d4d4 !important;
    border-radius: 0;
    color: #939393;
text-transform: lowercase; 
letter-spacing: 2px;
    font-family: Quicksand, Trebuchet MS, sans-serif; 
    font-weight: normal;
    line-height: 1.8em;
    margin: 0;
    padding: 10px;
    position: relative;
    text-align: justify;
    }

.ContextualPopup .Relation {
font-family: Patrick Hand SC; font-size: 1em; text-transform: uppercase; font-weight: bold; letter-spacing: 2px;}

.ContextualPopup .Userpic {border-radius:10px;
    margin: 0px;
    border: 5px solid #EA6884;
    background: #ffffff !important;
    padding: 0px;
    }

.ContextualPopup a { color: #EA6884; }
.ContextualPopup a:visited { color: #EA6884; }
.ContextualPopup a:hover { color: #acc5c9; }
.ContextualPopup a:active { color: #EA6884; }

blockquote {border-radius: 10px;
    background: #f5f5f5;
    border: 1px solid #EA6884;
    font-size: 80%;
    font-style: italic;
    padding: 40px 20px;
    margin: 20px;
    color: #848484;
    }

hr {
    color: transparent;
    height: 1px;
    border-style: none;
    border-bottom: 2px solid #EA6884;
    }

.entry .userpic,
        .comment .userpic {border-radius:10px;
            float: left;
            text-align: right;
            margin-right: 10px;
            }
        @media only screen and (min-width: 45em) {
            .entry .userpic {border-radius:10px;
                margin-left: -105px;
                margin-right: 0;
                }
            .comment .userpic {border-radius:10px;
                margin-left: -115px;
                margin-right: 0;
                }
        }

Live preview: A temporary one at my testing journal -

dreamslayout. There's also an orange version used here at the comm, and a green version @ my personal blog.

Instructions:
Go to 'Customize' & apply 'Rust' for 'Brittle'.
Go to 'Customize your theme', then 'Custom CSS'.
Where it says 'Use layout's stylesheet(s)', click no.
Copy & Paste the CSS into the big white box.
Hit save, and voila!
Please credit cirque @ dustier :)
Let me know if you have any questions/need help.
Note! To change the accent colour, open the CSS up in Notepad (or similar) and go to EDIT -> REPLACE. Type EA6884 into the top box and find the hex code of the colour you'd like, and paste it into the bottom box. Hit REPLACE ALL and voila!

cirque

I'm baaaack.

This is my first layout since however long ago it was that I posted my last layout. Go figure... Hopefully you guys like this one--and thank you to people who have been loyal during my extended absence. Thanks buds.

This layout is designed to be simple, clean, reminding you to take a deep breath of fresh air. This layout's colours are inspired by nature, by old trees and older secrets. Feel free to change them up, I have linked the palette below.

Features; simple style, opacity neatness, custom font (my current fave font!!).

CSS (original):

/* Cleaned CSS: */

/*CSS by cirque@dustier*/

@font-face {
    font-family: 'Julius';
  font-style: normal;
  font-weight: normal;
    src: url(https://themes.googleusercontent.com/static/fonts/juliussansone/v1/iU65JP9acQHPDLkdalCF7luTgT7He_T1DF6rp02aEO4.eot);
}

@font-face {
      font-family: 'Julius';
  font-style: normal;
  font-weight: normal;
  src: local('Emblema'), url(https://themes.googleusercontent.com/static/fonts/juliussansone/v1/iU65JP9acQHPDLkdalCF7q3fkYX5z1QtDUdIWoaaD_k.woff) format('woff');
}

.ContextualPopup, .icon-browser {
    background: #fff;
    color: #49281F;
    }

.ContextualPopup a, .icon-browser a { color: #758918; }
.ContextualPopup a:visited { color: #758918; }
.ContextualPopup a:hover { color: #9E9A41; }
.ContextualPopup a:active { color: #758918; }

H1, H2, H3 {
    margin: .25em 0;
    padding: .25em 0;
}

h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

img { opacity: 0.5;
    border: none;
}

img:hover {opacity:1;}

hr {
    display: none;
    padding:20px;
}
.entry-content hr,
.comment-content hr {
    display: block;
    margin: 1em 10%;
}

body {
    font-family: 'Trebuchet ms'; font-size: 0.8em;
    padding: 20px;
    background-image: url(https://i.imgur.com/8fkPx.png); 
    color: #343434;

}

#canvas {
    margin-left: 0em;
    margin-right: 0em;
}

a { color: #758918;
 }
a:visited { color: #758918;
 }
a:hover { color: #9E9A41;
 }
a:active { color: #758918;
 }
 
b, strong {color: #49281F; text-transform: uppercase;}

i, em {color: #564334; font-family: "georgia";}

q { font-style: italic; }

/* #content layout */
#content { float: none; }
@media only screen and (min-width: 45em) {
    .two-columns-left #content,
    .three-columns-sides #content {
        border-left: 15em solid transparent;
    }
    .two-columns-right #content,
    .three-columns-sides #content {
        border-right: 15em solid transparent;
    }
    .three-columns-left #content {
        border-left: 30em solid transparent;
    }
    .three-columns-right #content {
        border-right: 30em solid transparent;
    }
    .column-right #content {
        min-width: 15em; /* prevents sidebar overlap of entry, when entry becomes narrower than sidebar */
    }
}

#content-footer {
    height: 0;
    font-size: 0; /*to make IE happy*/
    clear: both;
}

#header, #footer {
    margin: 0;
    clear: both;
    padding: 20px;
    opacity: 0.5;
}

#header {
    background: #c9ebc1;
    color: #161616;

}

h1#title {
    font-family: 'Franklin Gothic Book', Arial Narrow, Arial, 'Franklin Gothic Book', Arial Narrow, Arial, sans-serif; font-size: 1.5em;
}

h2#subtitle,
h2#pagetitle {
    font-family: 'Franklin Gothic Book', Arial Narrow, Arial, 'Franklin Gothic Book', Arial Narrow, Arial, sans-serif; font-size: 1.1em;
}

#footer {
    background: #fff;
    opacity: 0.5;
}

#footer a { color: #758918;
 }
#footer a:visited { color: #758918;
 }
#footer a:hover { color: #9E9A41;
 }
#footer a:active { color: #758918;
 }

#primary {
    width:100%;
    margin-right:-100%;
    margin-left: 0;
}

#primary > .inner:first-child, #secondary > .inner:first-child, #tertiary > .inner:first-child {
    padding: 1em;
}

/* modules layout */
#primary { float: none; }
#secondary, #tertiary { width: 100%; }

@media only screen and (min-width: 45em) {
    .multiple-columns #primary {
        float: left;
    }

.two-columns-left #secondary,
    .three-columns-sides #secondary {
        float: left;
        width: 15em;
        margin-left: -15em;
    }
    .two-columns-right #secondary {
        float: right;
        width: 15em;
        margin-right: -15em;
    }
    .three-columns-left #secondary {
        float: left;
        width: 15em;
        margin-left: -30em;
    }
    .three-columns-right #secondary {
        float: right;
        width: 15em;
        margin-right: -15em;
    }

.two-columns #tertiary {
        clear: both;
        width: auto;
    }
    .two-columns-left #tertiary { margin-left: -15em; }
    .two-columns-right #tertiary { margin-right: -15em; }
    .two-columns #tertiary .module {
        float: left;
        width: 15em;
    }
    .three-columns-left #tertiary {
        float: left;
        width: 15em;
        margin-left: -15em;
    }
    .three-columns-right #tertiary {
        float: right;
        width: 15em;
        margin-right: -30em;
        margin-left: 15em; /* so that #tertiary won't overlay #secondary in IE7 */
    }
    .three-columns-sides #tertiary {
        float: right;
        width: 15em;
        margin-right: -15em;
    }
}

.navigation ul {
    margin-left: 0;
    padding-left: 0;
}
.navigation li {
    display: inline;
    padding: 0 .5em;
}
.noentries {
    padding: 0 .5em;
}

/* entries */

.entry {
    background: #fff;
    color: #343434;
background-color: #fff;

}

.entry .entry-title {
    font-family: 'Julius'; font-size: 1.5em;
}

.entry .entry-title, .entry .entry-title a {
    color: #564334;
background-color: #fff;

}

.no-subject .entry .entry-title {
    background: none;
    border: none;
}

.entry .contents {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.entry a { color: #758918;
 }
.entry a:visited { color: #758918;
 }
.entry a:hover { color: #9E9A41;
 }
.entry a:active { color: #758918;
 }

/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li,
.comment-content li {
    list-style-position: inside;
    }

.metadata ul {
    display: none;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}
.metadata li {
    margin-bottom: .5em;
}
.metadata.top-metadata ul {
    margin: 0;
}
.metadata.top-metadata {
    margin-bottom: 1em;
}

.metadata-item, .poster-ip {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.tag ul {
    display: inline;
    margin-left: 0;
    padding-left: 0;
}

.tag ul li {
    display: inline;
} /* same for month view */

ul.entry-management-links {
    margin-left: 0;
    padding-left: 0;
}
ul.entry-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.entry-interaction-links {
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}

.entry-interaction-links a, .entry-management-links a { color: #b85858;
 }
.entry-interaction-links a:visited, .entry-management-links a:visited {  }
.entry-interaction-links a:hover, .entry-management-links a:hover {  }
.entry-interaction-links a:active, .entry-management-links a:active {  }

ul.entry-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

/* comments */

.comment-posted {font-weight:bold;}

.comment-wrapper {
    padding: .5em 0;
    min-width: 15em;
}

.comment .comment-title {
    font-family: 'Franklin Gothic Book', Arial Narrow, Arial, sans-serif; font-size: 1.1em;
    margin: 0;
}

.comment .comment-title, .comment .comment-title a {
    color: #161616;
background-color: #e0ebdd;

}

.no-subject .comment .comment-title {
    background: none;
    border: none;
}

.comment .contents {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

ul.comment-management-links {
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}
ul.comment-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.comment-interaction-links {
    margin-left: 0;
    padding-left: 0;
}
ul.comment-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

textarea#commenttext {
    width: 100%; /* fix for FF form width glitch */
}

/* archive */

table.month {
    margin: 0 auto;
    border-collapse: collapse;
}
table.month td {
    height: 3.25em;
}
table.month td,
table.month th {
    border: 1px solid; /* ? */
    padding: 3px;
}
table.month td p {
    margin: 0;
    padding: 3px;
}

.month dl dt {
    font-weight: bold;
}
.month dl .time {
    padding-right: .5em;
}
.month dl h3 {
    display: inline;
    font-size: medium;
}
.page-month .month .entry-poster {
    margin-right: .5em;
}
.month dl .tag ul {
    margin-top: 0;
}

/* icons */

.sorting-options ul {
    margin-left: 0;
}

.sorting-options ul li {
    display: inline;
}

.icon-keywords ul {
    display: inline;
    margin-left: 0;
    padding-left: 0;
}

.icon-keywords ul li {
    display: inline;
}

/* modules */

.module {
    background: #fff;
    color: #343434;
background-color: #fff;
padding: 5px;

}

.module a { color: #758918;
 }
.module a:visited { color: #758918;
 }
.module a:hover { color: #9E9A41;
 }
.module a:active { color: #758918;
 }

.module h2 { 
    color: #161616;
background-color: #fff;

font-family: 'Julius'; font-size: 1em;
}

.module-content {
    font-family: trebuchet ms; font-size: 0.8em; 
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.module-content ul {
    list-style: outside;
    margin-left: 1em;
    padding-left: 0;
}
.module-content li {
    margin: .5em 0;
}

ul.userlite-interaction-links.icon-links {
    margin-left: 0;
    padding-left: 0;
}

ul.userlite-interaction-links.icon-links li {
    display: inline;
    padding: 0 .20em;
}

ul.userlite-interaction-links.text-links {
    text-align: left;
}

.any-column .module-calendar table { margin: 0; }
.module-calendar .module-content { text-align: left; }
@media only screen and (min-width: 45em) {
    .multiple-columns .module-calendar .module-content {
        text-align: center;
    }

.multiple-columns .module-calendar table {
        margin: 0 auto;
    }

.multiple-columns .module-syndicate .module-content {
        text-align: center;
    }
}

.module-calendar td {
    padding: 1px;
}
.module-calendar td a {
    display: block;
    padding: 2px;
}

.search-box {
    margin: .2em auto;
    max-width: 100%;
}

.search-form .search-box-item,
.search-form .search-button-item {
    display: block
}

.search-form .comment_search_checkbox_item {
    display: inline
}

/* wrap long content, particularly openid usernames */
.module-pagesummary .ljuser {
    white-space: normal !important;
}
.module-pagesummary .module-content {
    word-wrap: break-word;
}

.module-credit .category-title {
    font-weight: bold;
}

.tags_cloud li, .module-tags_cloud li { display: inline; }

/* avoid Dramatic Woodchuck zoom effect on form fields (polls, search, etc.) */
@media (pointer: coarse) {
    input[type="text"], select {
        font-size: 16px;
    }
}

.entry .userpic,
             .comment .userpic {
                 text-align: right;
                 }

/* Don't add extra height at bottom of userpic box */
             .userpic a {
                display: block;
                line-height: 0;
                }

body {
    margin: 1em 0 0 0;
    }

#canvas {
    width: 92%;
    margin: 0 auto;
    }

#primary > .inner:first-child {
    padding: 0;
    }

#secondary > .inner:first-child,
#tertiary > .inner:first-child {
    padding: 0;
    }

@media only screen and (min-width: 45em) {
    .column-left #primary > .inner:first-child {
        padding-left: 1em;
        }

.column-right #primary > .inner:first-child {
        padding-right: 1em;
        }

.three-columns-left #secondary > .inner:first-child,
    .three-columns-right #secondary > .inner:first-child {
        padding-right: .5em;
        }

.three-columns-left #tertiary > .inner:first-child,
    .three-columns-right #tertiary > .inner:first-child {
        padding-left: .5em;
        }
}

a {
   text-decoration: none;
   }

p {
        margin: 1em 0;
    }

blockquote {
    color: #343434;
background-color: #fff;
border-left: 10px solid #9E9A41;
    margin: 2em 2em 2em 5em;
    padding: .7em;
    width: 70%;
    }

ul {
    list-style: square inside;
    margin: .5em 1em;
    }

ol {
    list-style: decimal inside;
    margin: .5em 1.5em;
    }

/*--- Titles ---*/

#header {display: none;
    color: #161616;
background-color: #c9ebc1;
border: solid 1px #d0ebca;

border-top: 20px solid #d0ebca;
    margin: 0 0 1em 0;
    padding: 1em;
    }

h1#title,
h2#pagetitle {display:none;
    font-weight: lighter;
    text-align: right;
    text-transform: uppercase;
    }

h2#subtitle {display: none;
    text-align: right;
    text-transform: lowercase;
    font-weight: lighter;
    }

/*--- Journal Navigation ---*/

.navigation {
    color: #343434;
background-color: #fff;
opacity: 0.5;
margin: 3em;
font-family: 'Julius';
    font-weight: bold;
    text-transform: uppercase;
padding: 5px;
    }
    
navigation:hover {opacity:1;}

.navigation a {
    color: #161616;
    }

.navigation.empty {
    display: none;
    }

.page-read .noentries {
    font-weight: normal;
}

li.page-separator {
    display: none;
    }

/*--- Sidebar aka Modules ---*/

.module {
    margin: 3em 0 1em 0;
    padding: .5em;
    opacity: 0.5;
    }
    
.module:hover {opacity: 1;}

h2.module-header {
    font-weight: bold;
    font-family: 'Julius';
    margin: 0 0 .5em 0;
    text-transform: uppercase;
    }

h2.module-header a {
font-family: 'Julius';
    color: #161616;
    }

.module-content .userpic {
    text-align: center;
    }

.module-content .userpic img {
    border: 1px solid #564334;
    padding: .5em;
    }

.journal-name {
    text-transform: uppercase;
    margin: .5em 0 0 0;
    text-align: center;
    }

.journal-website-name {
    text-transform: uppercase;
    text-align: center;
    }

ul.userlite-interaction-links.icon-links {
    margin: .5em 0 0 0;
    text-align: center;
    }

ul.userlite-interaction-links.icon-links li {
    margin: 0 auto;
    text-align: center;
    }

ul.userlite-interaction-links.text-links li {
    padding: 0 0 0 .5em;
    }

ul.module-list {
    list-style: none;
    }

ul.module-list li {
    padding: 0 0 0 .5em;
    }

.module-navlinks, .module-navlinks a {
    color: #161616;
    font-family: 'Julius', Arial Narrow, Arial;
    font-weight: bold;
    text-align: right;
    font-size: 1.2em;
    }

.module-navlinks ul.module-list {
    color: #161616;
    text-transform: uppercase;
    }

.manage-link {
    margin: .5em 0 0;
    text-align: right;
    text-transform: uppercase;
    }

.module-calendar th {
    font-weight: lighter;
    margin: 0 .2em;
    padding: .3em;
    text-transform: uppercase;
    }

.module-calendar td.empty-day {
    border: 1px solid #758918;
    margin: 0 .2em;
    text-transform: uppercase;
    }

.module-calendar td.entry-day {
    background: #fff;
    border: 1px solid #758918;
    margin: 0 .1em;
    text-transform: uppercase;
    }

.module-calendar td.entry-day a { color: #758918; }
.module-calendar td.entry-day a:visited { color: #758918; }
.module-calendar td.entry-day a:hover { color: #9E9A41; }
.module-calendar td.entry-day a:active { color: #758918; }

/*--- Entries ---*/

.entry {
    padding: 10px;
    margin: 3em 0 1em 0;
    padding: 1em;
    
     opacity: 0.5;
    }
    
.entry:hover { opacity: 1;}

.entry-content {
    margin: 1em 0 0 0;
    }

.entry .header {
    color: #161616;
    margin: 0 0 .5em 0;
    padding: 0;
    }

h3.entry-title {
    color: #161616;
    text-transform: uppercase;
    font-weight: bold;
    }

.datetime {
    font-size: .75em;
    text-transform: uppercase;
    }

.poster {
    margin: 1em 0;
    }

.entry .userpic img {
    border: 1px solid #564334;
    padding: 8px;
    }

.entry .footer {
    clear: both;
    }

ul.entry-management-links {
    margin: .5em 0 0 0;
    text-align: center;
    font-family: 'Julius';
    text-transform: uppercase;
    }

ul.entry-management-links li {
    margin: 0 auto;
    text-align: center;
    }

ul.entry-interaction-links {
    margin: .5em 0 0 0;
    padding: 0;
    text-align: center;
    }

ul.entry-interaction-links li {
    color: #161616;
    font-weight: normal;
    margin: 0 .5em 0 0;
    padding: 0;
    text-transform: uppercase;
    }

ul.entry-interaction-links a,
ul.entry-interaction-links a:visited,
ul.entry-interaction-links a:hover,
ul.entry-interaction-links a:active {
    color: #161616;
    font-size: 1.1;
    }

hr.above-entry-interaction-links, hr.below-reply-container {
    display: none;
    }

/*--- Comments ---*/

.comment {
    color: #343434;
background-color: #d8ebd3;
border: solid 1px #d0ebca;

border-top: 20px solid #d0ebca;
    padding: 1em;
    }

.comment a { color: #758918; }
.comment a:visited { color: #758918; }
.comment a:hover { color: #9E9A41; }
.comment a:active { color: #758918; }

.comment-title, .comment-title a {
    color: #161616;
    font-weight: bold;
    text-transform: uppercase;
    }

.comment-poster {
    font-weight: lighter;
    text-transform: lowercase;
    }

.comment-content {
    margin: 0;
    }

textarea.textbox {
    border: 1px solid;
    width: 80% !important;
    }

#qrform table {
    border: 0 !important;
    }

.comment-wrapper {
    margin: .5em 0;
    }

table.talkform {
    margin: 0 0 .5em 0;
    padding: .5em;
    }

.comment .userpic {
    display: block;
    }

.comment .userpic img {
    border: 1px solid #d0ebca;
    border-top: 10px solid #d0ebca;
    padding: 8px;
    }

.comment .footer {
    clear: both;
    }

.bottomcomment {
    margin: .5em 0;
    padding: .5em;
    }

.comment-management-links li, .comment-interaction-links li {
    text-transform: uppercase;
    }

hr.above-entry-interaction-links, hr.below-reply-container {
    display: none;
    }

/*--- Currents and Tags AKA Metadata ---*/

.metadata {
    font-size: .8em;
    margin: 1em 0 0 0;
    text-align: right;
    text-transform: uppercase;
    }

.metadata ul {
    margin: 0;
    padding: 0;
    }

.metadata-item-location, .metadata-item-music, .metadata-item-mood, .tag ul {
    text-align: right;
    }

.tag {
    font-size: .8em;
    margin: .5em 0 .5em 0;
    text-transform: uppercase;
    }

.tag-text {
    text-transform: uppercase;
    }

.tag ul li {
    font-weight: normal;
    margin: .5em .2em 0 0;
    text-align: right;
    }

/*--- Archive Page ---*/

.month {
    color: #343434;
background-color: #d8ebd3;
border: solid 1px #d0ebca;

border-top: 20px solid #d0ebca;
    margin: 0 0 1em 0;
    padding: 1em;
    }

.month a { color: #758918; }
.month a:visited { color: #758918; }
.month a:hover { color: #9E9A41; }
.month a:active { color: #758918; }

.month table {
    margin: auto;
    width: 100%;
    }

.month caption {
    display: none;
    }

.month h3 {
    font-weight: normal;
    text-transform: uppercase;
    }

.month th {
    background: #aedae5;
    border: 1px solid #d0ebca !important;
    color: #343434;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    }

.month td.day {
    color: #343434;
background-color: #d8ebd3;
border: solid 1px #d0ebca;

font-weight: normal;
    padding: .5em;
    text-align: center;
    }

.month td.day-empty {
    color: #343434;
background-color: #d8ebd3;
border: solid 1px #d0ebca;

}

.month td.day-has-entries {
    background: #aedae5;
    border: 1px solid #d0ebca;
    color: #343434;
    font-weight: normal;
    }

.month td.day-has-entries p {
    display: inline;
    font-weight: bold;
    padding: 0 0 0 .5em;
    }

.month td.day-has-entries p a { color: #758918; }
.month td.day-has-entries p a:visited { color: #758918; }
.month td.day-has-entries p a:hover { color: #9E9A41; }
.month td.day-has-entries p a:active { color: #758918; }

.month dl, .month dt, .month dd {
    margin: 0;
    padding: 0;
    }

/*--- Tags Page ---*/

.page-tags .tags-container {
    color: #343434;
background-color: #d8ebd3;
border: solid 1px #d0ebca;

border-top: 20px solid #d0ebca;
    margin: 0 0 .5em 0;
    padding: 1em;
    }

.page-tags .tags-container a { color: #758918; }
.page-tags .tags-container a:visited { color: #758918; }
.page-tags .tags-container a:hover { color: #9E9A41; }
.page-tags .tags-container a:active { color: #758918; }

.page-tags .tags-container h2 {
    font-weight: normal;
    text-transform: uppercase;
    }

.page-tags .tags-container ul {
    margin-left: .5em;
    padding-left: .5em;
    }

/*--- Icons Page ---*/

.icons-container {
    color: #343434;
background-color: #d8ebd3;
border: solid 1px #d0ebca;

border-top: 20px solid #d0ebca;
    margin: 0 0 .5em;
    padding: 1em;
    }

.icons-container a { color: #758918; }
.icons-container a:visited { color: #758918; }
.icons-container a:hover { color: #9E9A41; }
.icons-container a:active { color: #758918; }

.icons-container h2 {
    font-weight: normal;
    text-transform: uppercase;
    }

.sorting-options ul {
    padding-left: 0;
    }

.sorting-options ul li {
    margin: .5em .2em 0 0;
    }

.icons-container .icon {
    margin: 1em 0;
    }

.icon-image {
    float: left;
    clear: left;
    margin-bottom: .25em;
    min-width: 100px;
    padding-right: 1em;
    }

.icon-info {
    min-height: 100px;
    }

.icon-info .default {
    text-decoration: underline;
    }

/*--- Contextual Pop-up ---*/

.ContextualPopup {

background: #fff;
    border-radius: 0;
    color: #49281F;
    text-transform: uppercase;
    }

.ContextualPopup a,
.ContextualPopup a:visited {
    text-decoration: none;
    }

.ContextualPopup a { color: #758918; }
.ContextualPopup a:visited { color: #758918; }
.ContextualPopup a:hover { color: #9E9A41; }
.ContextualPopup a:active { color: #758918; }

.ContextualPopup .Userpic {

margin: 5px;
    padding: 10px;
    }

.has-userpic .entry .userpic {
                float: right;
                margin: -4em 0 1em 1em;
                }
            .has-userpic .entry .header {
                margin-right: 118px;
                }
            .has-userpic .comment .header {
                margin-right: 118px;
                }
            .has-userpic .comment .userpic {
                float: right;
                margin: -1em 0 0 1em;
                }

CSS (no opacity):