Profile

Better Dolphin

Syndicate

Expand Cut Tags

No cut tags

itsanooray

Open and Close Kinklist with Notations

Preview Images
Warning: sexual content

Live Example
See under the cut.
Warning: sexual content
( See Live Example )

Why Was This Made?
The kink lists that are commonly used have "hover to see notes" bullshit. A lot of browsing happens on phones, and guess what you can't hover on. I made this as an experiment to have a list with an option for notes, both short and long.

Features

Uses <details> to collapse content that can be clicked to open, and clicked to shut. This helps with the extra length this pattern causes.
Has a section for a Key, for when you like to have different symbols to mean something. I put in basic ones, but you can use whatever you'd like. I use this site to find HTML entities to use.
Has a built in "Note" section. Please read the instructions about them included in the code you'll copy, since you will need to remove or add a bit of CSS to make them show or hide.
HTML is notated for easier use.
Inline CSS is on their own line. This does increase the length of the code, but should be much easier to read and edit for code amateurs.
NEW! CSS Variables used for colors. Only need to change the hex code for a color in one place and it will work throughout!

Rules
→ To use this code for free, all I ask is for a link back to Better Dolphin, somewhere on your profile/journal! You can copy and paste this:
Made by: <user name="betterdolphin">

→ You may edit the code to suit your needs or tastes, however, you are not allowed to redistribute, share or resell.

Tip?
If you'd like to donate a couple bucks, hit up my ko-fi!

Get the Code!

<raw-code>

<div style="--noteColor: #f5f5f5;
            --yesColor: #cdfadb;
            --yesLightColor: #e7fded;
            --maybeColor: #f6fdc3;
            --maybeLightColor: #fbfee8;
            --noColor: #ffa8a5;
            --noLightColor: #ffdad8;
            --black: #333;
            font: 16px arial, sans-serif;
            margin: 0 auto;
            max-width: 600px;
            width: 100%;
            ">
    <div style="                
            background-color: var(--noteColor);
            color: var(--black);
            padding: 5px 10px;
            font-size: 16px;
            margin: 0 0 10px;
            ">
        <i>Key</i>: ♥ = Favorite; ← = Receiving; → = Giving; ↔ = Both
    </div>
    
    <details>
        <summary style="
               font-size: 20px;
               text-transform: uppercase;
               letter-spacing: 1px;
               padding: 20px;
               background-color:var(--yesColor);
               color: var(--black);
        ">
            Yes
        </summary>
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--yesLightColor);
               color: var(--black);
               ">
            • Chocolate ♥
        </div>
        <div style="
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--yesLightColor);
               font-style: italic;
               ">
            I love chocolate but I can only have it in small amounts, otherwise I get really sick. Milk chocolate
            isn't as bad as dark chocolate, but white chocolate is the worst.
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--yesLightColor);
               color: var(--black);
               ">
            • Caramel →
        </div>
        <div style="
               display: none;
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--yesLightColor);
               font-style: italic;
               ">
            Text here.
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--yesLightColor);
               color: var(--black);
               ">
            • Nutella ♥
        </div>
        <div style="
               display: none;
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--yesLightColor);
               font-style: italic;
               ">
            Text here.
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--yesLightColor);
               color: var(--black);
               ">
            • Pineapple
        </div>
        <div style="
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--yesLightColor);
               font-style: italic;
               ">
            The cheap kind that's like bad jam, not actual pineapple chunks
        </div>
        
    </details>
    
    <details>
        <summary style="
               font-size: 20px;
               text-transform: uppercase;
               letter-spacing: 1px;
               padding: 20px;
               background-color: var(--maybeColor);
               color: var(--black);">
            Maybe
        </summary>
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--maybeLightColor);
               color: var(--black);
               ">
            • Banana ↔
        </div>
        <div style="
               display: none;
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--maybeLightColor);
               font-style: italic;
               ">
            Text here.
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--maybeLightColor);
               color: var(--black);
               ">
            • Cherries
        </div>
        <div style="
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--maybeLightColor);
               font-style: italic;
               ">
            Depends on what kind, ranier cherries are good, marichina cherries is bad, ask about other kinds!
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--maybeLightColor);
               color: var(--black);
               ">
            • Almonds
        </div>
        <div style="
               display: none;
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--maybeLightColor);
               font-style: italic;
               ">
            Text here.
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--maybeLightColor);
               color: var(--black);
               ">
            • Walnuts
        </div>
        <div style="
               display: none;
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--maybeLightColor);
               font-style: italic;
               ">
            Text here.
        </div>
        
    </details>
    
    <details>
        <summary style="
               font-size: 20px;
               text-transform: uppercase;
               letter-spacing: 1px;
               padding: 20px;
               background-color: var(--noColor);
               color: var(--black);">
            No
        </summary>
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--noLightColor);
               color: var(--black);
               ">
            • Coconut
        </div>
        <div style="
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--noLightColor);
               font-style: italic;
               ">
            The absolute worst.
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--noLightColor);
               color: var(--black);
               ">
            • Peanuts
        </div>
        <div style="
               display: none;
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--noLightColor);
               font-style: italic;
               ">
            Text here.
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--noLightColor);
               color: var(--black);
               ">
            • Peanut butter
        </div>
        <div style="
               display: none;
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               background-color: var(--noLightColor);
               font-style: italic;
               ">
            Text here.
        </div>
        
    </details>
</div></raw-code>

The code is also available to play with on Codepen! This way you can play with the code and see how it works, or if you have your own account you can fork it and make permanent changes.

Thanks! Hope you enjoy!

Tags:

itsanooray

Jihoka

A custom theme for "Trifecta" template.
2024 update

→ View Live Preview

Description
This is a minimal, elegant, white and responsive theme.

Note
Jihoka is not coded to work with interior pages (because life is too short), so you'll want to set the layout to only showing the default DW layout for those pages.

Rules
→ To use this layout for free, all I ask is for a link back to Better Dolphin, somewhere on your profile! You can copy and paste this:
Theme made by: <user name="betterdolphin">

→ You may edit the layout to suit your needs or tastes, however, you are not allowed to redistribute, share or resell.

Tip?
If you'd like to donate a couple bucks, hit up my ko-fi!

What's new?
Not much, actually! I fixed a couple small things, changed some of the grey font color to be more high contrast, and added more to the instructions I had either left out or DW had updated so they were out of date. Removed the instruction on how to make the layout truly responsive, since DW now adds that bit of code on its own, too.

Get the theme!
Copy and paste the below, instructions on how to load it is written in there, too:

/***************************************************************************************************************
THEME: Jihoka [Ver 1.9]
FOR: Trifecta (Handle with Care)
BY: https://betterdolphin.dreamwidth.org/ (c)2017, 2024

If you use this free layout, please credit me somewhere on your DW, either in the profile or somewhere on the journal itself. If interested in getting your own custom layout, or you have any questions, PM me at:
http://itsanooray.dreamwidth.org/profile

-------------------------------------------------- Disclaimer --------------------------------------------------
This layout was provided freely by Better Dolphin.  Rules of use:
    - The user may use it on as many journals as they would like.
    - The user may edit it to suit their tastes and needs.
    - The user MAY NOT redistribute or resell this layout, either as-is or with any edits they may do to it.

----------------------------------- Instructions on how to load this layout ------------------------------------

1]  Go to Select Journal Style: http://www.dreamwidth.org/customize/

2]  Under "Select a New Theme", search for "Handle with Care", a sub-theme for Trifecta. Click "Apply Theme".

3]  When the page reloads the button should turn into a link that says "Customize", click that.

4]  Click on the "Presentation" tab, search for these options:
    - "Select whether entry management links are printed as text or using the available icons"
    - "Select whether comment management links are printed as text or using the available icons"
    Change both options from "icon" to "text only".

5]  Then go to the "Text" tab, and find the following:
    - Text for 'Current Location'
    - Text for 'Current Mood'
    - Text for 'Current Music'
    - Text for 'Tags' header for an entry
    If all these fields are empty, fill them in with the quoted text, or to whatever you'd like it to be.

6]  If you want to use any MODULES, click on the "Modules" tab.  You will need to set all modules you want to use, EXCEPT for the "Profile" module, to "Main Module Section".  The "Profile" module needs to be set to "Secondary Module Section".

7]  Then click on the "Custom CSS" tab. DESELECT the "Use layout's stylesheet(s)" box. - In the "Custom stylesheet URL" field, paste in this url for your custom fonts to work: https: //fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Playfair+Display:400,900i

8]  In the "Use embedded CSS" field, copy and paste this entire document in there, including the Disclaimer and Instructions sections.

***************************************************************************************************************/

/*****************************************************************
    General
*****************************************************************/
*,
*:after,
*:before {
    box-sizing: border-box;
    position: relative;
}

body {
    background: #f7f7f7 url(http://imgur.com/0qH8MzZ.png);
    color: #414141;
    font: 1em/1.5 "Lato", verdana, sans-serif;
}

@media (min-width: 1000px) {
    body {
        background-attachment: fixed;
    }
}

#canvas img {
    max-width: 100%;
}

#secondary ul,
#tertiary ul,
.entry .footer ul,
.comment ul,
.metadata ul,
.bottomcomment ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    color: #636363;
}

a:hover,
a:focus {
    color: #111;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 15px 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.tag-text,
.metadata-label {
    font: 30px/1.2 "Playfair Display", georgia, times, serif;
    letter-spacing: 1px;
    padding: 0;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
p:first-child {
    margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:first-child {
    margin-bottom: 0;
}

h1 {
    font-weight: 900;
    font-style: italic;
}

h2 {
    font-size: 28px;
    font-weight: 900;
    font-style: italic;
}

h3 {
    font-size: 26px;
    font-weight: 900;
    font-style: italic;
}

h4 {
    font-size: 24px;
}

h5,
#header h2 {
    color: #636363;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
}

h6 {
    font-size: 20px;
    text-transform: uppercase;
}

#invisible-separator,
.content-footer,
#footer {
    display: none;
}

/*****************************************************************
    Header
*****************************************************************/
#header {
    padding: 20px 0 60px;
    text-align: center;
}

#header h1,
#header h2 {
    margin: 0;
}

#header h1 {
    font-size: 32px;
}

#header h2 {
    font-size: 18px;
}

#header h2#pagetitle {
    color: #727272;
    font: 14px "Lato", verdana, sans-serif;
    letter-spacing: normal;
    margin-top: 20px;
}

@media (min-width: 550px) {
    #header h1 {
        font-size: 44px;
    }

#header h2 {
        font-size: 28px;
    }

#header h2#pagetitle {
        font-size: 16px;
    }
}

@media (min-width: 1000px) {
    #header {
        padding: 70px 0;
    }

#header h1 {
        font-size: 48px;
    }

#header h2 {
        font-size: 28px;
    }
}

@media (min-width: 1200px) {
    #header {
        padding-bottom: 90px;
    }

#header h1 {
        font-size: 54px;
    }

#header h2 {
        font-size: 32px;
    }
}

#title a {
    color: #414141;
    text-decoration: none;
}

/*****************************************************************
    General Layout
*****************************************************************/
#primary>.inner,
#secondary>.inner,
#tertiary>.inner {
    padding: 0 15px;
}

@media (min-width: 700px) {

#primary>.inner,
    #secondary>.inner,
    #tertiary>.inner {
        padding: 0 25px;
    }
}

@media (min-width: 1000px) {

#primary>.inner,
    #secondary>.inner,
    #tertiary>.inner {
        padding: 0;
    }
}

/*****************************************************************
    Primary
*****************************************************************/
#core {
    background-color: #f7f7f7;
}

@media (min-width: 1000px) {
    #content {
        display: table;
        width: 100%;
    }

#content>.inner {
        display: table-row;
    }

#core {
        display: table-cell;
        vertical-align: top;
        width: calc(100% - 301px);
    }

#core>.inner {
        padding: 0 70px 0 30px;
    }
}

@media (min-width: 1400px) {
    #core {
        width: auto;
    }

#core>.inner {
        margin: auto;
        padding: 0 70px 0 30px;
        width: 960px;
    }
}

/* Entry Header */
.entry .entry-title {
    font: 900 italic 24px/1.2 "Playfair Display", georgia, times, serif;
}

.entry-title a {
    color: #414141;
}

.entry-title a:hover {
    color: #111;
}

@media (min-width: 550px) {
    .entry .entry-title {
        font-size: 34px;
    }
}

@media (min-width: 1000px) {
    .entry .entry-title {
        font-size: 38px;
    }
}

@media (min-width: 1200px) {
    .entry .entry-title {
        font-size: 44px;
    }
}

.entry .header {
    background: #f7f7f7 url(http://imgur.com/0qH8MzZ.png) bottom center / 600px 508px;
    padding-bottom: 20px;
    text-align: center;
}

.entry .header .inner {
    top: -18px;
}

.entry .metadata,
.entry .footer {
    margin: auto;
    max-width: 550px;
    width: 100%;
}

.metadata li {
    display: inline-block;
    margin: 0 10px 3px 0;
}

.metadata li:last-of-type {
    margin-right: 0;
}

.entry .header h3 {
    text-shadow: -1px -1px 0px #f7f7f7, 3px 3px 0px #f7f7f7, 6px 6px 0px #f7f7f7;
}

.entry .header a {
    text-decoration: none;
}

.datetime {
    background: #F7F7F7;
    color: #727272;
    font-size: 14px;
    font-style: italic;
    padding: 10px;
}

.datetime a {
    color: #727272;
}

.datetime a:hover,
.datetime a:focus {
    color: #111;
}

/* Entry Content */
.entry-wrapper {
    margin-bottom: 50px;
}

.entry-content {
    border-top: 20px solid #eaeaea;
    margin-bottom: 40px;
}

@media (min-width: 550px) {
    .entry-content {
        padding-top: 20px;
    }
}

@media (min-width: 650px) {
    .entry-wrapper {
        margin-bottom: 70px;
    }

.entry-wrapper:nth-last-child(2) {
        margin-bottom: 0;
    }
}

@media (min-width: 1000px) {
    .entry-wrapper {
        margin-bottom: 90px;
    }
}

@media (min-width: 1200px) {
    .entry .header .inner {
        top: -25px;
    }

.entry .header {
        padding-bottom: 10px;
    }
}

/* Userpic */
.entry .userpic {
    float: none;
    margin: -30px auto 20px;
    width: 70px;
    height: 70px;
    z-index: 1;
}

.entry .userpic img,
#comments .userpic img {
    width: auto !important;
    height: auto !important;
}

@media (min-width: 550px) {
    .entry .userpic {
        background: #e2e2e2;
        float: right;
        margin: -15px 20px 20px 10px;
        padding: 15px;
        width: 90px;
        height: 90px;
        z-index: 1;
    }
}

.entry blockquote {
    background: #eaeaea;
    padding: 20px 20px 20px 110px;
}

.entry blockquote::before {
    background-image: url(http://imgur.com/0qH8MzZ.png);
    background-size: 400px 339px;
    content: "";
    padding: 40px;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 30px;
    height: calc(100% - 20px);
}

/* Meta */
.metadata {
    margin-bottom: 5px;
}

.metadata,
.entry .footer,
#comments .footer {
    font-size: 12px;
}

.metadata a,
.entry .footer a,
#comments .footer a,
.bottomcomment a {
    text-decoration: none;
}

.tag {
    margin-bottom: 10px;
}

.tag ul {
    display: inline-block;
}

.tag ul li {
    display: inline-block;
    padding-right: 3px;
}

.tag-text,
.metadata-label {
    display: inline-block;
    font-size: 12px;
    font-style: italic;
    font-weight: 900;
    padding-right: 5px;
}

.entry-management-links,
.entry-interaction-links,
.comment-management-links,
.comment-interaction-links {
    text-align: center;
}

.entry-management-links li,
.entry-interaction-links li,
.comment-management-links li,
.comment-interaction-links li {
    display: inline-block;
    padding: 0 10px 10px 10px;
}

.entry-poster {
    background: #eaeaea;
    display: block;
    padding: 5px 10px;
}

.entry-poster:not(.empty)+.entry-content {
    border: 0;
}

/*****************************************************************
    Secondary
*****************************************************************/
#secondary {
    background: #f7f7f7;
    color: #808080;
    font-size: 14px;
    line-height: 1.2;
    margin-top: 50px;
    padding: 30px 0;
}

@media (min-width: 1000px) {
    #secondary {
        background-color: #f7f7f7;
        clear: none;
        display: table-cell;
        padding-top: 70px;
        text-align: right;
        vertical-align: top;
        width: 200px;
    }

#secondary>.inner {
        padding: 0 25px 0 15px;
    }
}

@media (min-width: 1400px) {
    #secondary {
        width: 250px;
    }
}

#secondary h2 {
    color: #414141;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    margin-bottom: 10px;
}

#secondary .module-content a,
#secondary h2 a {
    color: #636363;
    text-decoration: none;
}

#secondary .module-content a:hover,
#secondary .module-content a:focus,
#secondary h2 a:hover,
#secondary h2 a:focus {
    color: #111;
    text-decoration: none;
}

#secondary .module.module-calendar table a,
#secondary .module.module-calendar h2 table a:focus,
#secondary .module.module-calendar table a:hover {
    text-decoration: underline;
}

#secondary .module:not(:last-of-type) {
    margin-bottom: 20px;
}

#secondary .module:not(.module-credit) ul {
    column-count: 2;
    column-gap: 20px;
}

#secondary .module:not(.module-credit) ul li {
    page-break-inside: avoid;
    break-inside: avoid;
}

.module ul li {
    line-height: 1.2;
    margin: 0 0 7px;
}

.entry-day>a {
    font-weight: bold;
}

@media (min-width: 450px) and (max-width: 700px) {
    #secondary .module:not(.module-credit) ul {
        column-count: 3;
    }
}

@media (min-width: 701px) and (max-width: 999px) {
    #secondary .module {
        display: inline-block;
        margin-bottom: 20px;
        vertical-align: top;
        width: 50%;
    }

#secondary .module:nth-of-type(2n + 1) {
        clear: both;
        margin-right: -11px;
        padding-right: 20px;
    }
}

@media (min-width: 1000px) {
    #secondary .module:not(.module-credit) ul {
        column-count: 1;
    }

#secondary .module:not(:last-of-type) {
        margin-bottom: 50px;
    }
}

/*****************************************************************
    Tertiary
*****************************************************************/
#tertiary {
    padding: 50px 0;
    text-align: center;
}

@media (min-width: 1000px) {
    #tertiary {
        display: table-cell;
        padding: 70px 0 0;
        text-align: left;
        vertical-align: top;
        width: 150px;
    }
}

@media (min-width: 1400px) {
    #tertiary {
        width: 350px;
    }
}

/*****************************************************************
    Bottom
*****************************************************************/
#footer {
    clear: both;
}

#footer,
.navigation {
    color: #636363;
    font-size: 14px;
    padding: 20px;
    text-align: right;
}

#footer a,
.navigation a {
    text-decoration: none;
}

.navigation {
    font-size: 12px;
    text-align: right;
}

.navigation li {
    display: inline-block;
    margin-left: 7px;
}

#archive-year .navigation li {
    margin-left: 0;
    margin-right: 7px;
}

.topnav {
    display: none;
}

/*****************************************************************
    Modules
*****************************************************************/
.module-content {
    margin-left: auto;
}

.module:not(.module-userprofile) .module-content {
    margin-right: 10px;
}

/* Calendar */
.any-column .module-calendar table {
    margin: 0 auto 0 0;
    max-width: 300px;
    table-layout: fixed;
    width: 100%;
}

/* User Profile*/
#tertiary .module-section-two {
    background: #eaeaea;
    display: block;
    margin: auto;
    text-align: left;
    width: 200px;
    height: 200px;
}

#tertiary .module-section-two .inner {
    margin: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100px;
}

.journal-name {
    color: #727272;
    font-size: 14px;
    font-style: italic;
}

.module-userprofile h2 {
    font-size: 12px;
    margin: 0 0 3px;
}

.module-userprofile h2 a {
    color: #414141;
    text-decoration: none;
}

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

.module-userprofile .userpic img {
    display: inline-block;
}

.module.module-userprofile ul {
    margin-top: 5px;
    text-align: center;
}

.module.module-userprofile li {
    display: inline-block;
    line-height: 1;
    margin: 0;
    vertical-align: top;
}

.module.module-userprofile li:not(:last-of-type) {
    margin-right: 2px;
}

@media (min-width: 1000px) {
    #tertiary .module-section-two {
        width: 130px;
        height: 170px;
    }

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

@media (min-width: 1400px) {
    #tertiary .module-section-two {
        width: 225px;
        height: 225px;
    }

.module-userprofile .userpic img {
        width: 100px;
        height: 100px;
    }
}

/*****************************************************************
    Archive Page
*****************************************************************/
#archive-year {
    margin: auto;
    padding: 0 20px;
    max-width: 500px;
    width: 100%;
}

table.month {
    table-layout: fixed;
    width: 100%;
}

table.month td {
    padding: 10px;
    vertical-align: top;
}

table.month td p {
    margin: 0;
    text-align: center;
}

#archive-year .navigation {
    font-size: 16px;
    padding: 20px 0;
    text-align: left;
}

#archive-year li {
    display: inline-block;
}

#archive-year li.active {
    color: #414141;
}

#archive-year a:hover,
#archive-year a:focus {
    text-decoration: underline;
}

#archive-year li:not(:last-of-type)::after {
    content: "/";
    display: inline-block;
    padding: 0 0 0 10px;
}

.month-wrapper caption {
    background-color: #eaeaea;
    background-image: url(http://imgur.com/0qH8MzZ.png);
    background-size: cover;
    padding: 30px;
    font-size: 0;
}

.month-wrapper th {
    background-color: #eaeaea;
    padding: 5px;
    text-transform: uppercase;
}

.month .header {
    margin-bottom: -10px;
    text-align: center;
    z-index: 10;
}

.month .header h3 {
    font-size: 30px;
}

@media (min-width: 550px) {
    #archive-year {
        padding: 0;
    }
}

@media (min-width: 700px) {
    .month-wrapper caption {
        background-size: 72% auto;
    }

.month .header {
        margin-bottom: -15px;
    }

.month .header h3 {
        font-size: 40px;
    }
}

#archive-month dt a {
    font: 900 italic 40px/1.2 "Playfair Display", georgia, times, serif;
    text-decoration: none;
}

#archive-month .datetime {
    background: 0;
    padding: 0;
}

#archive-month h3 {
    margin: 0;
}

#archive-month .tag {
    border-bottom: 1px solid #727272;
    padding-bottom: 30px;
}

#archive-day .day-date {
    margin-bottom: 70px;
}

/*****************************************************************
    Reply Page
*****************************************************************/
.entry hr {
    display: none;
}

.page-entry .entry-wrapper {
    margin-bottom: 30px;
}

#comments {
    border-top: 5px solid #eaeaea;
    padding-top: 40px;
}

.comment-pages {
    font-size: 12px;
    margin-bottom: 10px;
    text-align: center;
}

h4.comment-title {
    margin-bottom: 5px;
}

#comments .datetime {
    background: none;
    padding-left: 0;
}

#comments .contents {
    padding: 10px 30px 30px;
}

#comments .userpic {
    background: #e2e2e2;
    float: left;
    height: 90px;
    margin: 10px 20px 10px 0;
    padding: 15px;
    width: 90px;
}

.comment-poster,
.poster-ip {
    font-size: 12px;
    font-style: italic;
}

.bottomcomment {
    border-top: 5px solid #eaeaea;
    font-size: 12px;
    margin-top: 40px;
    padding-top: 40px;
}

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

.dwexpcomment {
    padding: 15px;
}

.comment-depth-even>.dwexpcomment {
    background: #eaeaea;
    padding: 25px 15px;
}

.comment-depth-1 {
    margin-top: 30px;
}

.comment-pages.bottompages {
    margin-top: 30px;
}

Thanks! Hope you enjoy!

Tags:

itsanooray

Below the cut is code for a simple flushed masonry layout for images. Unfortunately, I haven't found a way to make something similar that will break down to one column when screens sizes get small yet, but this code will shrink images down so it doesn't scroll horizontally on smaller screens. You're able to easily change how many columns you want.

( Read more... )

Tags:

dwrp asset,
visuals

itsanooray

Here's a minimal little muse list that will break down nicely no matter the screensize.

Here's a live preview:
( Read more... )

And here is the code:
( Read more... )

Tags:

itsanooray

I recently switched hosts and basically took down all folders in effort to revamp, but forgot I would need to leave a certain folder up for stuff on this comm to work. Silly me. I'm putting everything back up now, but if anything seems missing or downloads not working, please drop me a line.

itsanooray

Click images above for Image Previews - Live Preview

"joyride"

Has many color variations and features a fixed side menu. EDIT Did a quick fix for an issue on Chrome, so if you happened to grab it in the past half hour please grab again. Also added a 6th variant. EDIT There was an issue with the profile userpic being distorted on phones/some browsers, I have fixed it, so please grab again if you want!

( Read more... )

Rules of the Game:
- Credit

betterdolphin (<user name="betterdolphin">)somewhere viewable, like a stickied post or userinfo, and leave the credit on the sheet
- You may edit to suit your needs, but credit would still be nice.
- Commenting not necessary, but makes me feel good all over anyway if you do.

Tags:

itsanooray

Click images above for Image Previews - Live Preview with Bottombar - Live Preview with Sidebar

"presser"

Has many variations. One with a sidebar, one with a bottom bar, all with 4 pre-made color variations.

Note still figuring out DW layouts, feel free to tell me if I got anything wrong.

( Read more... )

Rules of the Game:
- Credit

Tags:

itsanooray

UPDATE 1-4-12: There was an issue where the "powered by" was showing up at the top, I have hidden that module. Also a couple tweeks were added that don't really affect anything, they were added for "just in case" purposes. And sometime in the future I may try to make the layout work for comments, but I'm not sure when that will be, but feel free to check back from time to time or watch this comm, as I'll make a post about it when I do!

Image Preview - Live Preview with Texture and Live Preview without Texture

"hooky"

Has many variations. There's a textured version with 4 colors, there's also a no texture version with just one color but that's because you can change colors on your own, and then both have a stickied sidebar and non-sticky sidebar option.

Note this is my first time making a layout for Dreamwidth, there's bound to be something I missed. Feel free to inform me in comments.

( Details/Directions/Images/Codes )

Rules of the Game: - Credit

betterdolphin somewhere viewable, like a stickied post or userinfo, and leave the credit on the sheet
- You may edit to suit your needs, but credit would still be nice.
- Commenting not necessary, but makes me feel good all over anyway if you do.

Tags:

template: lettuce

itsanooray

This community is for sharing layouts and other bits of code for use on Dreamwidth.

So, please, if you like something here, feel free to take and use!

Crediting

If you ever do use, please credit back to

betterdolphin somewhere visible, like in a stickied post or your user profile. If you don't know how to reference a journal on your own journal, copy and paste this:
Layout made by <user name="betterdolphin">.

Or if linking off DW:
Layout made by <a href="https://betterdolphin.dreamwidth.org/">Better Dolphin</a>.

Images

Please host images on your own servers, or, if you lack that, use IMGUR or any other host of your choice. If you use Photobucket, please keep in mind it will resize large images once in awhile, so if you uploaded one of my images and it came out small check your options and see if you can upload something at fullsize, or use another image host.

FAQ

Q) Can I edit/change your layouts?
Yes, you can! I highly encourage you to. However, if the resulting layout still looks like my original one, you must still credit.

Q) Can you change this in your layout for me?
No. If there's something in my layout that you want to be different than I intended it, you must change it on your own. I know not everyone knows CSS, but it's not fair to ask a layout maker how to change something they didn't intend for their layout. I'm afraid I don't have the time to help make large changes that you may want.

However, if you found something that seems like it's broken code, let me know and I'll most likely fix it.

Q) Can images be added to the headers?
A) I rarely make a layout with the thought of a large image being added to the header, if I had intended to make something like that it would have it in the codes. That doesn't mean you can't try to add one anyway, but don't be surprised if it doesn't work/you have to edit a bunch of CSS to get it to work. Like the previous question, however, I don't have the time to help you change something as massive as that.

Q) Can I redistribute your codes with my edits?
A) I don't mind if you edit my codes, but if they still bear a strong semblance/a good majority of my original code I would prefer you NOT to redistribute it, please, even if you do credit me as the original maker.

Tags:

faq,
introduction

Better Dolphin

A Dreamwidth Theme Community

Recent Entries

Navigation

Profile

Most Popular Tags

Links

Syndicate

Expand Cut Tags

New kind of Kinklist for DWRP - UPDATE 03/15/25

Open and Close Kinklist with Notations

Jihoka for Trifecta (Update)

Jihoka

Simple flushed masonry layout for visuals

Responsive Muse List

NOTICE

Joyride for Tabula Rasa

Presser for Blanket

Lettuce - Hooky

Introduction

Crediting

Images

FAQ