Dreamwidth Conversion Guide: Intimus by Tessisamess

[thisismanx]

Intimus is an S2 Complete Style layout recently released by tessisamess over on IJ. It's a minimalist layout that works nicely for reading page purposes. It also takes advantage of :root to make changing colors a snap.

Installation on DW is very easy, but there are a few tweaks necessary to optimize it for the site. This guide should work with other S2 Complete Style layouts by Tess, however layouts without a :root section or a differently named :root section will require some tweaks in my control strip and scroll bar additions to directly reference colors.

Step 01: Install the S2 Complete Style raw source code into your custom layers. Tess outlines the procedure here, but instead use this raw source code which includes a minor gremlin code tweak by me to make the date/time display properly on entries on reading view.

Step 02: Follow along the Custom Options section of the Intimus installation guide. You'll find Layout Type under Presentation while the rest of the items should be under Text. The layout works with One Column, but it removes her layout credit, so be sure to put it in your profile somewhere.

Step 03: Boot up your favorite code editor (Notepad, Wordpad, Notepad++) and copy/paste the layout coding for some quick fixes.

01. Find .lj-view-friends and replace with .lj-view-read.
02. Find a[href*=subscriptions] and replace with a[href*=track].
03. Find img/icon_private.gif and replace with entry/private.png.
04. Find img/icon_protected.gif and replace with entry/protected.png.
05. Find img/icon_groups.gif and replace with entry/groups.png.
06. Add the following code to the end of the CSS. I've included some extra stylings that are clearly marked if you don't want them.

/* FOR DREAMWIDTH CONVERSION */ .header-poster, .banner-viewlinks a[href*=mem], .banner-viewlinks a[href*=tag]{display:none;} /* CONTROLSTRIP */ #lj_controlstrip {color:var(--lightest);background:var(--accent);font-size:10px; font-family:Arial,sans-serif;padding: 1px 0;z-index:4;} #lj_controlstrip td {color: var(--lightest);} #lj_controlstrip #lj_controlstrip_userpic img { border-radius:100px; } #lj_controlstrip .ljuser img { height:10px; width:auto; } #lj_controlstrip select, #lj_controlstrip input { padding:0 4px; border-width: 0px; border-radius:4px;} #lj_controlstrip select { padding:2px 0; } #lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, .cuttag img { border: 0; } #lj_controlstrip a:hover{text-decoration:none;background-size:0px 0px;} /* SCROLLBAR */ ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar{width:10px;background:transparent;} ::-webkit-scrollbar-thumb{background:var(--light-accent);} /* REMOVE PARENTHESES AND ARROW FROM CUTTAG */ span.cuttag_container{color:transparent;} span.cuttag a img {display: none;}

Step 04: Install the the adjusted layout coding in the custom stylesheet box.

Step 05: Enjoy!