shinemagic | 06 | carousel (layout)

carousel

credit not required but appreciated

how to install

step one: change base theme to rust for brittle (has to be that specific variant)

step two: click customize theme

step three: scroll down and change page setup to 2 column (sidebar on left)

step four: go to the modules section and deselect all modules except profile (+ default icon, uncheck name and website), navigation, and link list. number them in that order starting from one. make sure they are all in the main module section.

step five: go to the custom css section and make sure "Use layout's stylesheet(s)" is CHECKED. paste the following link into the box next to custom stylesheet URL -
(this is for the main font used in the layout. you can change the link to another google font but it might screw with proportions in the layout depending on differences in font sizes. if you change the link be sure to change all instances of 'Barlow' in the layout to the name of the new font, inside the same apostrophes)

step six: paste the layout code into the box next to use embedded css -

CAROUSEL
(based on brittle)

by luckyzukky @ shinemagic.dreamwidth.org

CREDIT NOT REQUIRED BUT APPRECIATED

html, body {
background: #D5CDF4;
color: #403c4f;
font: 100% 'Barlow', sans-serif;
border: 0;
}

/* responsive design shit */

@media only screen and (max-width: 576px) {
#entries, #primary { width: 100vw !important; }
#content { margin-top: 1em; width: 100vw !important; }
#secondary { width: 100vw !important; margin: 0; padding: 0;}
#secondary .module { width: 100vw; }
#canvas { margin: 0; padding: 0 !important; width: 100vw !important; }
.module-userprofile.module .userpic { width: 110px; height: 110px; padding: 1em 1em 0 1em; }
ul.userlite-interaction-links.icon-links { text-align: left; margin: 0; padding: 0 1em; display: none; }
.module-navlinks ul.module-list { margin: 5px 0; }
.module-navlinks ul.module-list li { padding: 5px 1em; text-align: justify; }
.module-typelist ul.module-list li { padding: 5px 1em; text-align: justify; }
.module-typelist ul.module-list li:last-child { padding-bottom: 1em; }
ul.module-list { margin: 0; }
.navigation.bottomnav { margin-left: 1em; }
}

@media only screen and (max-width: 1366px) {
#canvas { width: 100% !important; }
}

/* lj controlstrip */

#lj_controlstrip {
background: #847BA7;
color: #F8F5FF;
border: 0;
}

#lj_controlstrip > div {
font-family: 'Barlow', sans-serif;
line-height: initial;
font-size: .8rem;
}

#lj_controlstrip a {
font-family: 'Barlow', sans-serif;
color: #F8F5FF;
text-transform: lowercase;
}

#lj_controlstrip_statustext {
text-transform: lowercase;
color: inherit;
font-size: inherit;
font-weight: normal;
}

#lj_controlstrip_search {
text-transform: lowercase;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks {
border: 0;
}

#lj_controlstrip .ljuser {
font-weight: lighter;
}

#lj_controlstrip .ljuser a {
text-transform: uppercase;
vertical-align: middle;
}

#lj_controlstrip .ljuser img {
vertical-align: middle !important;
width: 14px;
height: 14px;
}

#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input#search {
background: #F8F5FF;
color: #403c4f;
font-family: inherit;
border: 0;
vertical-align: middle;
line-height: 15px;
}

#lj_controlstrip input {
font-family: inherit;
line-height: 15px;
background: #F8F5FF;
color: #403c4f;
text-transform: lowercase;
vertical-align: middle;
}

/* organizing shit */

#header, #footer, .navigation.topnav, .module-header, .manage-link, span.comment-date-text, span.comment-from-text, span.comment-ip-text, .comment-pages.bottompages, #tertiary {
display: none;
}

@media only screen and (min-width: 45em) {
#canvas {padding-right: 0;}
}

#canvas {
padding: 2% 0;
}

#content > .inner {
margin-right: 30em;
}

#primary {
width: 500px;
}

/* elements */

a:link, a:link:active, a:active, a:visited, a:visited:active {
color: #847BA7;
text-decoration: none;
}
 
a:hover {
color: #B1A2E4;
}

summary {
cursor: pointer;
color: #847BA7;
font-weight: bold;
list-style: none;
}

summary:hover {
color: #B1A2E4;
}

summary::before {
content: '( ';
color: #403c4f;
}

summary::after {
content: ' )';
color: #403c4f;
}

blockquote {
background: #E8E3FB;
border: 1px dashed #847BA7;
margin: 0;
padding: 20px;
font-style: normal;
font-size: inherit;
font-family: inherit;
color: #403c4f;
}

h1,h2,h3,h4,h5 {
text-transform: uppercase;
}

h2 {
padding: 10px;
border: 1px dashed #847BA7;
}

.entry-content ul {
margin: 0 0 10px 0;
padding: 0;
list-style-position: inside;
}

.entry-content textarea {
background: #E8E3FB;
border: 1px dashed #847BA7;
color: #403c4f;
}

::selection {
background: #847BA7;
color: #F8F5FF;
}

/* entries */

.entry {
background: #F8F5FF;
color: #403c4f;
font-family: inherit;
font-size: .8rem;
}

.entry a, .entry a:link:active, .entry a:active, .entry a:visited, .entry a:visited:active {
color: #847BA7;
}

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

h3.entry-title {
font: 1.1rem 'Barlow', sans-serif;
letter-spacing: 0;
text-transform: uppercase;
color: #847BA7;
}

h3.entry-title a {
color: inherit;
}

.entry .header {
margin: 0 0 5px 0;
border-bottom: 1px dashed #d4d4d4;
}

.entry-content img {
max-width: 480px;
}

ul.entry-management-links {
text-align: right;
}

ul.entry-interaction-links {
text-align: right;
margin: 5px 0 0 0;
padding: 0;
font-size: .7rem;
}

ul.entry-interaction-links li {
color: inherit;
font-size: inherit;
}

ul.entry-interaction-links a, ul.entry-interaction-links a:link:active, ul.entry-interaction-links a:active, ul.entry-interaction-links a:visited, ul.entry-interaction-links a:visited:active {
color: #847BA7;
}

ul.entry-interaction-links a:hover {
color: #B1A2E4;
}

ul.entry-management-links a, ul.entry-management-links a:link:active, ul.entry-management-links a:active, ul.entry-management-links a:visited, ul.entry-management-links a:visited:active {
color: #847BA7;
}

ul.entry-management-links a:hover {
color: #B1A2E4;
}

.poster {
font-family: inherit;
font-size: .7rem;
font-weight: lighter;
}

.poster .ljuser img {
vertical-align: middle;
width: 12px;
height: 12px;
}

.entry-content .ljuser {
font-family: inherit;
font-weight: lighter;
text-transform: uppercase;
}

.entry-content .ljuser img {
vertical-align: middle;
width: 14px;
height: 14px;
}

.access-filter img, .restrictions img {
vertical-align: middle;
width: 12px;
height: 12px;
}

.datetime, .edittime {
font-family: inherit;
font-size: .7rem;
letter-spacing: .5px;
}

.entry .userpic img {
border: 5px solid #847BA7;
}

.metadata {
font-size: 1.2rem;
color: #939393;
}

.metadata-label {
color: #847BA7;
}

.metadata ul li {
color: #847BA7;
}

li#metadata-mood img {
vertical-align: middle;
}

.tag {
font-size: 1.2rem;
}

.tag-text {
color: #847BA7;
}

.tag-nav-trigger {
background: none;
width: 12px !important;
height: 12px !important;
border: 0;
margin: 0;
vertical-align: middle;
}

li.page-back, li.page-forward, li.page-separator {
text-transform: uppercase;
font-size: .8rem;
}

.navigation.bottomnav {
margin-bottom: 1em;
}

p.noentries {
text-transform: uppercase;
font-size: .8rem;
}

/* sidebar */

#secondary {
background: #F8F5FF;
width: 10em;
margin: 1px 0 0 0;
}

#secondary .module {
font-family: inherit;
color: inherit;
}

.module-userprofile.module {
margin-top: 1em;
}

.module-userprofile .userpic img {
border: 5px solid #847BA7;
}

.module-navlinks ul.module-list {
margin: 12px 0;
}

.module-navlinks ul.module-list li a, .module-navlinks ul.module-list li a:link {
color: #847BA7 !important;
}

.module-navlinks ul.module-list li a:hover, .module-navlinks ul.module-list li a:link:hover {
color: #B1A2E4 !important;
}

.module-navlinks {
background: none;
padding: 0;
}

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

/* comments */

#comments {
font-family: 'Barlow', sans-serif;
font-size: .95rem;
}

.comment-pages.toppages {
text-transform: uppercase;
font-size: .8rem;
}

.comment {
background: #F8F5FF;
color: #403c4f;
padding: 10px;
}

.comment .userpic img {
border: 5px solid #847BA7;
}

.comment-title {
font-family: inherit;
font-size: 1rem;
font-weight: normal;
letter-spacing: 0;
text-transform: uppercase;
color: #847BA7;
}

.comment .header {
border-bottom: 1px dashed #d4d4d4;
}

.comment-poster {
font-family: inherit;
font-size: .7rem;
font-weight: lighter;
}

.comment-poster .ljuser img {
vertical-align: middle;
width: 12px;
height: 12px;
}

.comment a:link, .comment a:link:active, .comment a:active, .comment a:visited, .comment a:visited:active {
color: #847BA7;
}

.comment a:hover {
color: #B1A2E4;
}

.comment .poster-ip {
font-family: inherit;
font-size: .7rem;
display: inline-block;
display: none; /* erase this line if you want ips visible */
}

.comment-content {
border: 0;
font-size: .8rem;
margin: 5px 0;
}

.comment span.multiform-checkbox {
font-family: inherit;
font-size: .7rem;
text-transform: uppercase;
color: #847BA7;
}

.comment span.multiform-checkbox input[class="ljcomsel"] {
vertical-align: middle;
margin: 2px;
}

ul.comment-management-links {
text-align: right;
margin: 0;
margin: 10px 0 0 0;
}

ul.comment-interaction-links {
text-align: right;
margin: 5px 0;
padding: 0;
font-size: .7rem;
text-transform: uppercase;
}

ul.comment-interaction-links li {
color: inherit;
font-size: inherit;
}

ul.comment-interaction-links a, ul.comment-interaction-links a:link:active, ul.comment-interaction-links a:active, ul.comment-interaction-links a:visited, ul.comment-interaction-links a:visited:active {
color: #847BA7;
}

ul.comment-interaction-links a:hover {
color: #B1A2E4;
}

ul.comment-management-links a, ul.comment-management-links a:link:active, ul.comment-management-links a:active, ul.comment-management-links a:visited, ul.comment-management-links a:visited:active {
color: #847BA7;
}

ul.comment-management-links a:hover {
color: #B1A2E4;
}

.comment .edittime {
color: #847BA7;
letter-spacing: 0;
text-transform: uppercase;
margin: 5px 0;
}

.comment .edittime .datetime {
color: #847BA7;
}

.bottomcomment {
background: #F8F5FF;
color: #403c4f;
padding: 10px;
text-align: right;
}

.bottomcomment ul.entry-interaction-links {
margin-bottom: 10px;
}

.bottomcomment label[for="multiform_mode"] {
color: #847BA7;
text-transform: uppercase;
text-align: left;
font-size: .7rem;
}

.bottomcomment input#multiform_submit {
background: #E8E3FB;
color: #403c4f;
border: 1px dashed #847BA7;
font: .7rem 'Barlow', sans-serif;
text-transform: uppercase;
}

/* tag page */

.page-tags .tags-container {
background: #F8F5FF;
color: #403c4f;
font-family: 'Barlow', sans-serif;
font-size: initial;
margin: 0;
}

.tags-container .header {
font-size: 1rem;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 5px 0;
border-bottom: 1px dashed #d4d4d4;
}

.page-tags .tags-container h2 {
font-family: inherit;
color: #847BA7;
font-size: initial;
text-transform: uppercase;
border: 0;
letter-spacing: 0;
margin: 0 0 2px 0;
}

.page-tags .ljtaglist {
list-style: initial;
list-style-position: inside;
}

.page-tags .ljtaglist li {
padding: 0;
font-size: .8rem;
}

.page-tags .tags-container a, .page-tags .tags-container a:link:active, .page-tags .tags-container a:active, .page-tags .tags-container a:visited, .page-tags .tags-container a:visited:active {
color: #847BA7;
}

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

/* icon page */

.icons-container {
background: #F8F5FF;
color: #403c4f;
font-family: 'Barlow', sans-serif;
font-size: initial;
margin: 0;
}

.icons-container .header {
font-size: 1rem;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 5px 0;
border-bottom: 1px dashed #d4d4d4;
}

.icons-container h2 {
font-family: inherit;
color: #847BA7;
font-size: initial;
text-transform: uppercase;
border: 0;
letter-spacing: 0;
margin: 0 0 2px 0;
}

.icons-container .sorting-options {
text-transform: uppercase;
font-size: .8rem;
}

.icon-info {
font-size: .8rem;
text-transform: lowercase;
}

.icon-info .default {
text-transform: uppercase;
text-decoration: none;
margin-bottom: 3px;
color: #847BA7;
}

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

.icons-container .ljuser {
font-family: inherit;
font-size: .8rem;
font-weight: lighter;
text-transform: uppercase;
}

.icons-container .ljuser img {
vertical-align: middle !important;
width: 16px;
height: 16px;
}

.icons-container a, .icons-container a:link:active, .icons-container a:active, .icons-container a:visited, .icons-container a:visited:active {
color: #847BA7;
}

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

/* archive page */

#archive-year .month, #archive-month .month {
background: #F8F5FF;
color: #403c4f;
font: 100% 'Barlow', sans-serif;
margin: 0;
padding: 10px;
}

.month .header {
font-size: 1rem;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 5px 0;
border-bottom: 1px dashed #d4d4d4;
}

.month h3 {
font-family: inherit;
color: #847BA7;
font-size: initial;
text-transform: uppercase;
text-align: left;
border: 0;
letter-spacing: 0;
margin: 0 0 2px 0;
}

#archive-year .month table.month {
background: #E8E3FB;
border: 1px dashed #847BA7;
border-collapse: collapse;
margin-top: .5em;
}

.month th {
text-align: right;
padding: 5px;
}

table.month th {
border: 1px dashed #847BA7;
}

table.month td {
border: 1px dashed #847BA7;
}

table.month td.day {
border: 1px dashed #847BA7;
color: #403c4f;
text-align: right;
}

table.month td.day-empty {
border: 1px dashed #847BA7;
}

table.month td.day.day-has-entries a {
font-weight: bold;
}

.month .footer {
text-transform: uppercase;
margin-top: 5px;
font-size: .8rem;
}

#archive-year .navigation.bottomnav {
font-size: .8rem;
margin-top: 5px;
}

#archive-month .month dl {
margin: 0;
}

#archive-month .month dt {
font-family: inherit;
color: #847BA7;
font-size: initial;
text-transform: uppercase;
text-align: left;
border-bottom: 1px dashed #d4d4d4;
letter-spacing: 0;
margin: 0 0 2px 0;
}

#archive-month .month dd {
margin: 0;
}

#archive-month .month dd .datetime {
margin-right: 3px;
font-size: .8rem;
color: #403c4f;
}

#archive-month .month dd .poster {
font-size: .8rem;
}

#archive-month .month dd .poster .ljuser img {
width: 14px;
height: 14px;
}

#archive-month .month dd h3.entry-title {
display: inline;
margin-left: 3px;
font-size: .8rem;
}

#archive-month .month .overview-commentcount {
font-size: .8rem;
color: #403c4f;
}

li.month-forward, li.month-back {
font-size: .8rem;
}

#archive-month input[value="View"] {
background: #E8E3FB;
color: #403c4f;
border: 1px dashed #847BA7;
font: .7rem 'Barlow', sans-serif;
text-transform: uppercase;
}

#archive-month .navigation.bottomnav {
margin-top: 5px;
}

.month a, .month a:link:active, .month a:active, .month a:visited, .month a:visited:active {
color: #847BA7;
}

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

/* context popup */

.ContextualPopup {
font-family: 'Barlow', sans-serif;
background: #F8F5FF;
color: #403c4f;
border: 0;
text-transform: lowercase;
font-weight: normal;
box-shadow: 0 0 5px rgb(99,99,99,0.4);
}

.ContextualPopup .Relation {
font-weight: normal;
margin: 5px 5px 5px 5px;
}

.ContextualPopup a:link, .ContextualPopup a:link:active, .ContextualPopup a:active, .ContextualPopup a:visited, .ContextualPopup a:visited:active {
color: #847BA7;
font-size: .8rem;
text-transform: uppercase;
}

.ContextualPopup a:hover {
color: #B1A2E4;
}

.ContextualPopup .Userpic {
border: 0 !important;
background: #F8F5FF !important;
}

.ContextualPopup .Userpic img {
background: #847BA7;
padding: 5px;
}

Flat | Top-Level Comments Only

Oh wow I think I like this one more than the last one!!

tysm! <3

oh yesss, i love brittle (it's simple and clean) but i've always wished for it to be centered yet have no coding skills to speak of! awesome work! i'm definitely going to be using this soon 😍 thank you!

glad you like it! i had some issues with the centering because of the base layout being aligned strangely, so the alignment may appear strangely depending on your monitor, but if it does and you want it centered as much as possible feel free to send a screenshot and i'll adjust it as needed ^^