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: http://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!

Better Dolphin

A Dreamwidth Theme Community

Entries tagged with dreamwidth layout

Navigation

Profile

Most Popular Tags

Links

Syndicate

Expand Cut Tags

Jihoka for Trifecta (Update)

Jihoka

Joyride for Tabula Rasa

Presser for Blanket