entente | Layout (Transmogrified)

Rope Burn

Live preview at

aurawhirl

About this layout:
- Name comes from the fact that all the images were made from some photos I took of rope. Deep.
- Flexible width. Looks fine on phones and tablets.
- Customised comment pages! You might still want to disable those if you're doing really long threads, but threads of around ten comments it seems to read fine.
- The layout shows no modules other than the navigation.
- Images used are here and here, in case you want to host them yourself or replace them. If you do replace them, be mindful of the banner size and of how the text looks against the background.
-Very easy to install!

Installation:
- Select Transmogrified by Yvonne.
- Go to Customise CSS and make sure custom style sheets are unchecked
- Copy and paste the following code into "Use embedded CSS".
- There are instructions on how to change the banner and background in the code itself!

/*--- ROPE BURN---*/
/* Base: Transmogrified by Yvonne  */
/* Edited by escaliers @ entente | October 2015*/
/* Edit as you want */

/*BODY*/
/*Change background image below if necessary*/

body {background: url(http://i.imgur.com/rVL2MhM.jpg) repeat  #0e2148; color: #222; font-family: bodoni; font-size: 8.5pt; line-height: 16px; margin-top: 30px;}

a, a:link, a:active, a:visited {color: #444; text-decoration: none;}

a:hover {color: #888; text-decoration: none;}

blockquote {background: #FFF; margin: 10px; padding: 10px;}

::-moz-selection {color: #222; background: #FFF;}

/* HEADER */
/*Change header image at URL below. Recommended size 700px by 150px.*/

#container {width: 700px; margin: auto;}

#header {background: url(http://i.imgur.com/ZlMFuzo.jpg) center center no-repeat; border: 2px solid #000000; border-radius: 30px 0px 30px 0px; height: 150px; margin-bottom: 20px; margin-top: 10px;}

#header h1, #header h2 {display: none;}

/* NAVIGATION */

.module-section-one ul, .navigation ul {background: #000; border: 3px solid #000; line-height: 32px; font-size: 9px; text-transform: uppercase; text-align: center; margin: 0 0 20px 0; text-align: left;}

.module-section-one li, .navigation li {display: inline; list-style: none;}

.module-section-one li a, .navigation li a {padding: 10px 20px; background: #000; color: white;}

.module-section-one ul li a:hover, .navigation li a:hover {background: #6C2734;}

/* ENTRIES */

#content {width: 90%;}

.entry-wrapper {background: transparent; border: 1px solid #000; padding: 10px; clear: both; margin: 20px 0;}

.entry {border: 1px dashed #6C2734; background: transparent; padding: 10px;}

.entry-title, .entry-title a {text-transform: uppercase; font-family: French Canon Small Caps; font-size: 15pt; font-weight: lighter; color: #666; margin: 0 0 5px 0;}

.time, .date {display: inline; font-size: 9px; text-transform: lowercase;}

.entry-content {text-align: justify; margin: 20px 0;}

.entry .userpic a, .comment .userpic a {float: right; padding: 1px; margin: -58px -100px 10px 10px; background: transparent;}

.entry .userpic img, .comment .userpic img {border: 2px outset #6C2734; border-radius: 30px 0px 30px 0px;}

.metadata ul {margin: 0; padding: 0; text-transform: lowercase;}

.metadata li {list-style: none;}

.metadata-label, .tag-text {font-weight: bold;}

.tag {text-transform: lowercase; margin-bottom: 20px; text-align: left;}

.tag ul, .tag li {list-style: none; display: inline; padding: 0; margin: 0;}

.tag li:before {content: ", ";}

.tag li:first-child:before {content: " ";}

*+html .tag li {padding: 0 5px;}

.footer {clear: both; text-align: right;}

.entry-management-links, .entry-interaction-links, .comment-management-links, .comment-interaction-links {text-align: center; margin: 0; padding: 0; display: inline; font-size: 10px; text-transform: lowercase;}

.entry-management-links li, .entry-interaction-links li, .comment-management-links li, .comment-interaction-links li {display: inline; list-style: none; margin: 0; padding-left: 10px;}

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

/* HIDE SIDEBAR & FOOTER */

.module-section-two, .module-section-three {display: none;}

/* ARCHIVE PAGE */

li.active {padding: 10px 20px; background: #000; color: #FFF;}

li.active:hover {background: #6C2734;}

li.month-back, li.month-forward {padding: 0 20px;}

li.month-back a, li.month-forward a {padding: 0 10px;}

li.month-back a:hover, li.month-forward a:hover {background: none;}

.month .footer {text-align: center; margin: 10px 0px;}

.month .day, .month th {vertical-align: text-top; padding: 5px; text-align: center;}

.month-wrapper {background: #transparent; border: 1px solid #000000; padding: 10px; margin: 20px 0;}

.month-wrapper h3 {font-size: 13pt; text-transform: uppercase ;font-weight: lighter; color: #666; margin: 0;}

.month {border: 1px dashed #6C2734; background: transparent; padding: 10px;}

.month th {font-size: 14px; text-transform: uppercase; font-weight: lighter;}

.month table {width: 80%; border: 0; margin: auto;}

.access-filter img {margin: 0 5px;}

.month caption {display: none;}

.day {text-align: center;}

.month .day p {margin: 4px 0 -4px 0;}

.month .day span, .month .day p {padding: 0; margin: 0;}

*+html .month .day span, *+html .month th span {vertical-align: 100%;}

/* TAGS PAGE */

h2 {text-transform: uppercase; font-family: french canon small caps; font-size: 13.5pt; font-weight: lighter; color: #666; margin: 10px;}

.page-tags #content {border: 1px dashed #6C2734; background: transparent;}

.page-tags #wrap {background: transparent; border: 1px solid #000; padding: 10px; margin: 20px 0;}

.ljtaglist {margin: 10px; padding: 0;}

.ljtaglist li {margin-left: 10px; padding: 0;}

/* COMMENT PAGE */

option, select, input {font-family: french canon small caps; font-size: 8.5pt; color: #222; background: #FFF; border: 1px solid #000000;}

textarea {font-family: french canon small caps; font-size: 8.5pt; color: #222; background: transparent; border: 1px solid #EEE; padding: 5px;}

button {font-family: arial font-size: 8.5pt; color: #222; background: #FFF; text-transform: uppercase; font-weight: bold; border: 1px solid #EEE;}

.bottomcomment ul {display: none;}

.comment {border: 1px dashed #6C2734; background: transparent; padding: 10px;}

.comment-wrapper {background: transparent; border: 1px solid; padding: 10px; clear: both; margin: 20px 0;}

.comment-content {text-align: justify; margin: 20px 0;}

.comment-title, .comment-title a {text-align: left; text-transform: uppercase; font-weight: bold; color: #666; margin: 0 0 5px 0;}

.comment-pages {text-align: center;}

Flat | Top-Level Comments Only

Looks really neat and nice! Adding to memories for future use. Thanks for sharing! :)

Thank you! Glad you like it!

Hey, just dropping a comment to tell you I'm using this (with some tweaks of my own) as the style for this account. I love how the background manages to be complex and unobtrusive simultaneously. Thanks for your hard work!