shinemagic | 07 | ditto (layout)

ditto

credit not required but appreciated

how to install

step one: change base theme to plain for tabula rasa (has to be that specific variant)

step two: click customize theme

step three: scroll down and change page setup to 1 Column (modules at top and bottom; no sidebar)

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 as follows: profile (1), navigation (2), link list (4), and custom text (3) custom text is optional but recommended. make sure they are all in the main module section.

step five: go to the presentation section and the Select the size of icons part - change both options to small. below is the Place of icons in entries and comments option, change that to right.

step six: 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 'Oxygen' in the layout to the name of the new font, inside the same apostrophes)

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

DITTO
(based on tabula rasa)

by luckyzukky @ shinemagic.dreamwidth.org

tiny icons by yusuke kamiyamane @ http://p.yusukekamiyamane.com/

CREDIT NOT REQUIRED BUT APPRECIATED

html, body {
background: #C9DBEF;
color: #33343F;
font: 100% 'Oxygen', sans-serif;
border: 0;
}

/* lj controlstrip */

#lj_controlstrip {
background: #345372;
color: #F7F7F7;
}

#lj_controlstrip a {
color: #F7F7F7;
font: bold 11px 'Oxygen', sans-serif;
text-transform: lowercase;
line-height: 0;
}

#lj_controlstrip > div {
font: bold 11px 'Oxygen', sans-serif;
text-transform: lowercase;
}

#lj_controlstrip_statustext {
color: inherit;
font-size: inherit;
}

#lj_controlstrip .ljuser img {
background: inherit;
}

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

#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input#search {
font-family: 'Oxygen', sans-serif;
font-weight: bold;
border: 0;
color: #33343F;
text-transform: lowercase;
}

#lj_controlstrip input {
font-family: 'Oxygen', sans-serif;
font-weight: bold;
border: 0;
color: #33343F;
text-transform: lowercase;
}

#lj_controlstrip input#search {
text-transform: none;
}

/* organization */

#header, #footer, #tertiary, #content-footer, .navigation.topnav, h2.module-header, .manage-link, .module-content ul.userlite-interaction-links.icon-links, .metadata-label, .tag-text, .comment-date-text, .comment-from-text, .comment-pages.bottompages, #invisible-separator {
display: none;
}

#content {
width: 550px;
margin: auto;
}

/* elements */

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

a:hover {
color: #4E6F90;
}

h1, h2, h3, h4, h5, h6 {
color: #345372;
}

blockquote {
margin: 1em 0 1em 0;
padding: 1em;
background: #ACC8E4;
border: 2px solid #345372;
}

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

summary:hover {
color: #4E6F90;
}

summary::before {
content: '( ';
color: #33343F;
}

summary::after {
content: ' )';
color: #33343F;
}

.entry-content ul {
margin: 0;
padding-left: 2em;
padding-bottom: 1em;
padding-top: 1em;
}

::selection {
background: #345372;
color: #F7F7F7;
}

/* secondary */

#secondary {
font: bold 100% 'Oxygen', sans-serif;
}

#secondary > .inner:first-child {
background: #FCFCFF;
padding: 0;
width: 520px;
margin: auto;
min-height: 100px;
}

.module-wrapper {
padding: 10px;
}

.module-content li {
margin: 0;
}

ul.module-list {
list-style: none;
margin: 0;
padding: 0;
text-transform: lowercase;
}

.module-list li {
margin: 0 .3em 0 0;
display: inline-block;
font-size: .8rem;
}

.module-content .userpic {
width: 75px;
height: 75px;
float: right;
}

.module-content .userpic img {
width: 75px;
height: 75px;
}

.module-customtext {
text-transform: lowercase;
font-size: .8rem;
margin: .8em 0 .8em 0;
}

/* entries */

.entry {
background: #FCFCFF;
padding: 10px;
margin-bottom: 1em;
}

.entry .contents {
min-height: 80px;
}

.entry-content {
font-size: .8rem;
text-align: justify;
margin-top: .5em;
}

.entry .entry-title, .entry .entry-title a {
margin: 0;
padding: 0;
font-family: 'Oxygen', sans-serif;
font-weight: bold;
text-transform: lowercase;
font-size: .9rem;
}

.datetime {
font-size: .7rem;
text-transform: lowercase;
}

.entry .header {
line-height: 1;
}

.entry .userpic, .comment .userpic {
width: 75px;
height: 75px;
float: right;
padding: 0 0 .5em .5em;
}

span.restrictions, span.access-filter {
vertical-align: bottom !important;
line-height: 0;
}

span.restrictions img, span.access-filter img {
width: 12px;
height: 12px;
}

.poster {
font-size: .7rem;
}

.poster.entry-poster .ljuser {
font-size: .7rem;
}

.poster .ljuser img {
vertical-align: middle !important;
}

.ljuser img {
vertical-align: middle !important;
}

span.cuttag ~ b > a {
text-transform: lowercase;
}

.metadata {
font: .7rem 'Oxygen', sans-serif;
text-transform: lowercase;
color: #345372;
line-height: 1.5;
}

.metadata li {
margin: 0;
}

.metadata-item-mood {
background: url("https://i.imgur.com/kfAau1J.png") no-repeat;
padding: 0 0 0 20px;
}

.metadata-item-location {
background: url("https://i.imgur.com/rKlcjaa.png") no-repeat;
padding: 0 0 0 20px;
}

.metadata-item-music {
background: url("https://i.imgur.com/G5KQtAq.png") no-repeat;
padding: 0 0 0 20px;
}

.tag ul {
background: url("https://i.imgur.com/5RdJpMR.png") no-repeat;
padding: 0 0 0 20px;
}

.tag li {
/* vertical-align: super; */
}

.tag li::before {
content: "#";
color: #345372;
}

.tag-nav-trigger {
vertical-align: sub;
padding: 0 5px 0 0;
}

ul.entry-management-links, ul.comment-management-links {
margin: 0;
padding: 0;
text-align: right;
}

ul.comment-management-links.icon-links {
margin-top: .5em;
}

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

.entry .footer {
margin-top: 1em;
font-size: .7rem;
text-transform: lowercase;
}

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

li.page-forward, li.page-back {
padding: 0;
text-transform: lowercase;
font: bold .8rem 'Oxygen', sans-serif;
}

.noentries {
padding: 0;
font-size: .8rem;
text-transform: lowercase;
}

/* comments */

.comment, .bottomcomment {
background: #FCFCFF;
padding: 10px;
margin-bottom: 1em;
}

.comment-pages.toppages {
font-family: 'Oxygen', sans-serif;
font-weight: bold;
text-transform: lowercase;
font-size: .9rem;
}

h4.comment-title {
font-family: 'Oxygen', sans-serif;
font-weight: bold;
text-transform: lowercase;
font-size: .9rem;
color: #345372;
}

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

.comment-content {
border: 0;
font-size: .8rem;
text-align: justify;
}

.comment-content::before {
content: none;
}

.comment .footer {
padding-top: 1em;
}

.comment .footer label {
font: .8rem 'Oxygen', sans-serif;
text-transform: lowercase;
}

.comment .edittime {
text-transform: lowercase;
margin-top: 1em;
}

ul.comment-interaction-links {
font: .8rem 'Oxygen', sans-serif;
text-transform: lowercase;
}

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

.bottomcomment .entry-interaction-links.text-links {
margin-bottom: .5em;
}

/* tag page */

.tags-container {
background: #FCFCFF;
padding: 10px;
}

.tags-container .header h2 {
font: bold .9rem 'Oxygen', sans-serif;
color: #345372;
margin: 0;
padding: 0;
text-transform: lowercase;
}

ul.ljtaglist {
padding: 0;
font: .8rem 'Oxygen', sans-serif;
list-style-position: inside;
margin: .5em 0 .5em 0;
}

/* archive page */

#archive-year {
padding: 5px 10px;
background: #fcfcff;
}

.year {
font: .75rem 'courier new', sans-serif;
}

.month {
border: 0;
background-color: none;
padding: 5px;
}

.month .header {
color: #4E6F90;
text-align: right;
font: .8rem 'Oxygen', sans-serif;
margin-bottom: 1em;
text-transform: lowercase;
}

.month .footer {
font: .8rem 'Oxygen', sans-serif;
text-align: right;
text-transform: lowercase;
margin-top: 1em;
}

.month .footer a {
color: #345372;
}

.month .footer a:hover {
color: #4E6F90;
}

table.month {
text-transform: lowercase;
color: #345372;
font: .8rem 'Oxygen';
}

table.month caption {
padding-bottom: .5em;
font-weight: bold;
}

table.month th {
border: 1px solid #345372;
text-transform: lowercase;
color: #345372;
font-family: 'Oxygen';
}

table.month td {
border: 1px solid #345372;
height: initial;
font-family: 'Oxygen';
}

table.month td.day {
border: 1px solid #345372;
text-align: right;
font-family: 'Oxygen';
}

td.day span.label {
text-align: right;
font-family: 'Oxygen';
}

td.day a:link, td.day a:link:active, td.day a:active, td.day a:visited, td.day a:visited:active {
color: #4E6F90;
font-weight: normal;
}

td.day a:hover {
color: #4E6F90;
}

.day h3.day-date {
display: none;
}

.year ~ .navigation.bottomnav {
font: 1em 'Oxygen', sans-serif;
color: #345372;
text-transform: lowercase;
text-align: right;
padding: 2px;
margin-top: .7em;
}

.navigation li {
padding: 0 .3em;
}

.page-month .month {
background: #fcfcff;
}

.page-month .month .entry-poster {
display: none;
}

.page-month .month .tag {
display: none;
}

.month dd {
font-family: 'Oxygen', sans-serif;
margin-left: 1em;
}

.month dl h3 {
font: bold .8rem 'Oxygen', sans-serif;
}

.month dl h3 a:link, .month dl h3 a:link:active, .month dl h3 a:active, .month dl h3 a:visited, .month dl h3 a:visited:active {
color: #345372;
}

.month dl h3 a:hover {
color: #4E6F90;
}

.month dl dt {
font: 1rem bold 'Oxygen', sans-serif;
text-transform: lowercase;
text-align: right;
margin: .25em 0;
padding: .25em 5px 0 0;
}

.month dl dt a:link, .month dl dt a:link:active, .month dl dt a:active, .month dl dt a:visited, .month dl dt a:visited:active {
color: #345372;
}

.month dl dt a:hover {
color: #4E6F90;
}

.month .overview-commentcount {
font: .8rem 'Oxygen', sans-serif;
}

#archive-month input[value="View"] {
background: none;
padding: .5em .5em;
font: .8rem 'Oxygen', sans-serif;
color: #345372;
text-transform: lowercase;
border: 0;
}

li.month-forward, li.month-back {
padding: 0;
font: .8rem 'Oxygen', sans-serif;
}

#archive-month .navigation.bottomnav li {
padding-right: 0;
}

/* tinyicons - fugue icon set by yusukekamiyamane */

img[src*="user.png"] {
background: transparent url("https://i.imgur.com/B4CHO2f.png") no-repeat !important;
padding: 16px 0 0 18px !important;
width: 0;
height: 0;
margin: 0 auto;
vertical-align: middle;
}

img[src*="community.png"] {
background: transparent url("https://i.imgur.com/fLPfXlp.png") no-repeat !important;
padding: 16px 0 0 18px !important;
width: 0;
height: 0;
margin: 0 auto;
vertical-align: middle;
}

img[src*="collapse.svg"] {
background: transparent url("https://i.imgur.com/Y55gXe7.png") no-repeat !important;
padding: 16px 0 0 8px !important;
width: 0;
height: 0;
margin: 0 auto;
vertical-align: middle !important;
}

img[src*="expand.svg"] {
background: transparent url("https://i.imgur.com/Ct56wuR.png") no-repeat !important;
padding: 16px 0 0 8px !important;
width: 0;
height: 0;
margin: 0 auto;
vertical-align: middle !important;
}

img[src*="collapse-end.svg"] {
background: transparent url("https://i.imgur.com/YOiAwYi.png") no-repeat !important;
padding: 16px 0 0 8px !important;
width: 0;
height: 0;
margin: 0 auto;
vertical-align: middle !important;
}

note: there are custom small icons used in this layout, created by yusuke kamiyamane. they're hosted by imgur. in case they go down i have those icons and the layout code hosted at mediafire, and backup hosts can be requested. the filenames are identical to the imgur names in the layout code, so to replace them if needed, simply re-host the images and find and replace the URLs in the layout code with the corresponding new URLs. feel free to comment if you need to troubleshoot this. thanks!

Flat | Top-Level Comments Only

beautiful! ♥ i think could you take header requests?

Edited 2023-06-02 19:45 (UTC)

thanks! what do you mean by header?

Layout header, the banner top of :)

yeah this layout has that already, you can edit the text and the links after installing the layout - to change the text go here and edit the "custom text" option, and for the links go here and then the "links list" option ^^ this layout only supports those features so i can't add anything but if you want one of those removed i can do that (though i advise against it because it looks worse lol)

I think if you choose one layout and make image banner, i think you are talent with graphics.. i like pagan and stock things.. i will credit of course

ah thank you so much! i've been very low energy lately (this layout was mostly finished for a year and i just finished a small part of it to make it ready for posting) so i'm not sure when i'll be able to make another layout, but an image header/banner is something i've wanted to try for a while, so if i do make one i'll let you know absolutely

Can i send you a layout and you make a only header? Just something simple

highly depends on the layout - message me

Okay i send today :)

this --> https://vigils.dreamwidth.org/12224.html#cutid1

or this --> https://vigils.dreamwidth.org/11619.html#cutid1

or this --> https://vigils.dreamwidth.org/8157.html#cutid1

or sidebar for this --> https://blackcatofmisery.dreamwidth.org/

you can choose :)

Love this! Thank you so much 😍 simple layouts are the best!

thanks <3

i'm currently using this one and i just changed the colors a bit! i love everything about it, it's so clean! i was wondering if this already has a mobile version though? but if doesn't, that's fine too. still really pretty. thank you. <3

thanks so much! ah sorry this one doesn't have a mobile version, i coded most of it a while ago and didn't have the energy to make it support mobile. i have thought about retroactively adding in mobile support though so if i do i'll reply to this comment to let you know, but no guarantee

issokay, totally understandable. lovely work still. <3 thank you again!

hi! can i add header for this layout?

yeah sure

do you know how i can do that?

sorry, don't have the capacity to guide you through that or do it for you, but if you know/learn basic HTML/CSS you can probably figure it out

07 | ditto (layout)

ditto

how to install

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject